States({
diff --git a/.storybook/deprecated/cyclebutton/cyclebutton.stories.js b/.storybook/deprecated/cyclebutton/cyclebutton.stories.js
deleted file mode 100644
index a42c1e217f0..00000000000
--- a/.storybook/deprecated/cyclebutton/cyclebutton.stories.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { default as ActionButtonStories } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
-import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
-import pkgJson from "@spectrum-css/cyclebutton/package.json";
-import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
-import { html } from "lit";
-
-import "@spectrum-css/cyclebutton/dist/index-vars.css";
-import "@spectrum-css/cyclebutton/dist/vars.css";
-
-/**
- * **This component is deprecated.** Please use the quiet variant of action button with the appropriate icon(s) instead. Any icon swapping that happens on-click/on-key should be handled by the implementation.
- *
- * The cycle button component is an action button that cycles through two different icons, a play that then changes to a pause, for example.
- */
-export default {
- title: "Cycle button",
- component: "CycleButton",
- argTypes: {
- size: ActionButtonStories?.argTypes?.size ?? {},
- initialIcon: {
- ...(IconStories?.argTypes?.iconName ?? {}),
- name: "Initial icon",
- type: { name: "string", required: true },
- if: false,
- },
- selectedIcon: {
- ...(IconStories?.argTypes?.iconName ?? {}),
- name: "Selected icon",
- if: false,
- },
- isSelected: ActionButtonStories?.argTypes?.isSelected ?? {},
- isDisabled: ActionButtonStories?.argTypes?.isDisabled ?? {},
- },
- args: {
- rootClass: "spectrum-CycleButton",
- size: "m",
- initialIcon: "Play",
- selectedIcon: "Pause",
- },
- parameters: {
- actions: {
- handles: [...(ActionButtonStories?.parameters?.actions?.handles ?? [])],
- },
- chromatic: { disableSnapshot: true },
- status: {
- type: "deprecated"
- },
- packageJson: pkgJson,
- },
-};
-
-export const Default = (({
- rootClass = "spectrum-CycleButton",
- customClasses = [],
- size = "m",
- isDisabled = false,
- onclick,
- selectedIcon = "Pause",
- initialIcon = "Play"
-} = {}, context = {}) => {
- const { updateArgs } = context;
-
- return html`
-
-
- ${ActionButton({
- customClasses: [rootClass, ...customClasses],
- isQuiet: true,
- isDisabled,
- size,
- iconName: initialIcon,
- iconSet: "workflow",
- onclick:
- onclick ??
- function () {
- if (isDisabled) return;
-
- updateArgs({
- initialIcon: selectedIcon,
- selectedIcon: initialIcon
- });
- },
- }, context)}
- `;
-}).bind({});
-Default.args = {};
diff --git a/.storybook/deprecated/cyclebutton/cyclebutton.yml b/.storybook/deprecated/cyclebutton/cyclebutton.yml
deleted file mode 100644
index dfd357fb23e..00000000000
--- a/.storybook/deprecated/cyclebutton/cyclebutton.yml
+++ /dev/null
@@ -1,15 +0,0 @@
-name: Cycle button
-status: Deprecated
-deprecationNotice: Use the [quiet variant of action button](actionbutton.html#quiet) with the appropriate icon(s) instead. Any icon swapping that happens on-click/on-key should be handled by the implementation.
-examples:
- - id: cyclebutton
- name: Standard
- markup: |
-
-
-
-
-
-
diff --git a/.storybook/deprecated/quickaction/quickaction.stories.js b/.storybook/deprecated/quickaction/quickaction.stories.js
deleted file mode 100644
index c462e7f97ea..00000000000
--- a/.storybook/deprecated/quickaction/quickaction.stories.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import pkgJson from "@spectrum-css/quickaction/package.json";
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-
-import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
-
-import "@spectrum-css/quickaction/dist/index-vars.css";
-import "@spectrum-css/quickaction/dist/vars.css";
-
-/**
- * **This component is deprecated.** Please use an action bar to allow users to perform actions on either a single or multiple items at the same time, instead.
- */
-export default {
- title: "Quick actions",
- component: "QuickAction",
- argTypes: {
- content: { table: { disable: true } },
- isOpen: {
- name: "Open",
- type: { name: "boolean" },
- table: {
- type: { summary: "boolean" },
- category: "Component",
- },
- control: "boolean",
- },
- position: {
- name: "Position",
- type: { name: "string" },
- table: {
- type: { summary: "string" },
- category: "Component",
- },
- control: "select",
- options: ["left", "right"],
- },
- textOnly: {
- name: "Text only action buttons",
- type: { name: "boolean" },
- table: {
- type: { summary: "boolean" },
- category: "Advanced",
- },
- control: "boolean",
- },
- },
- args: {
- rootClass: "spectrum-QuickActions",
- isOpen: true,
- textOnly: false,
- content: [
- {
- iconName: "Edit",
- label: "Edit",
- },
- {
- iconName: "Copy",
- label: "Copy",
- },
- {
- iconName: "Delete",
- label: "Delete",
- },
- ],
- },
- parameters: {
- chromatic: { disableSnapshot: true },
- status: {
- type: "deprecated"
- },
- packageJson: pkgJson,
- },
-};
-
-const Template = ({
- rootClass = "spectrum-QuickActions",
- size = "m",
- isOpen = false,
- textOnly = false,
- position,
- // noOverlay = false,
- content = [],
- id,
- customClasses = [],
-} = {}, context = {}) => {
- if (!content.length) {
- console.warn("QuickActions: requires content be passed in to render.");
- return html``;
- }
-
- if (!content.some((c) => c.icon)) textOnly = true;
-
- return html`
-
-
-
({ ...a, [c]: true }), {}),
- })}"
- id=${ifDefined(id)}
- >
- ${content.map((c) => {
- if ((typeof c === "object" && c.iconName) || c.label) {
- return ActionButton({ ...c, isQuiet: true }, context);
- } else return c;
- })}
-
- `;
-};
-
-export const Default = Template.bind({});
-Default.args = {};
diff --git a/.storybook/deprecated/quickaction/quickaction.yml b/.storybook/deprecated/quickaction/quickaction.yml
deleted file mode 100644
index 2f3e9425b70..00000000000
--- a/.storybook/deprecated/quickaction/quickaction.yml
+++ /dev/null
@@ -1,47 +0,0 @@
-id: quickactions
-name: Quick actions
-status: Deprecated
-deprecationNotice: Use an
action bar to allow users to perform actions on either a single or multiple items at the same time, instead.
-description: Note that the `.spectrum-QuickActions-overlay` class should be placed on the container where the Quick Actions are displayed, and the `.spectrum-QuickActions--textOnly` class should be applied when the buttons have text only.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/quick-actions/
-examples:
- - id: quickactions
- name: Standard
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
-
diff --git a/.storybook/deprecated/searchwithin/searchwithin.stories.js b/.storybook/deprecated/searchwithin/searchwithin.stories.js
deleted file mode 100644
index 139b735a128..00000000000
--- a/.storybook/deprecated/searchwithin/searchwithin.stories.js
+++ /dev/null
@@ -1,238 +0,0 @@
-import pkgJson from "@spectrum-css/searchwithin/package.json";
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { styleMap } from "lit/directives/style-map.js";
-
-import { Template as ClearButton } from "@spectrum-css/clearbutton/stories/template.js";
-import { Template as Picker } from "@spectrum-css/picker/stories/template.js";
-import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
-import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js";
-
-import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
-
-import "@spectrum-css/searchwithin/dist/index-vars.css";
-import "@spectrum-css/searchwithin/dist/vars.css";
-
-/**
- * **This component is deprecated.** Please use a search field with a separate control to filter the search instead.
- */
-export default {
- title: "Search within",
- component: "SearchWithin",
- argTypes: {
- size: {
- name: "Size",
- type: { name: "string", required: true },
- table: {
- type: { summary: "string" },
- category: "Component",
- },
- options: ["s", "m", "l", "xl"],
- control: "select",
- },
- label: {
- name: "Label",
- type: { name: "string" },
- table: {
- type: { summary: "string" },
- category: "Content",
- },
- control: { type: "text" },
- },
- labelPosition: {
- name: "Label position",
- type: { name: "string" },
- table: {
- type: { summary: "string" },
- category: "Content",
- },
- options: ["top", "left"],
- control: { type: "select" },
- },
- withSwitch: {
- name: "Display with a switch component",
- type: { name: "boolean" },
- table: {
- type: { summary: "boolean" },
- category: "Component",
- },
- control: "boolean",
- if: { arg: "labelPosition", eq: "left" },
- },
- placeholder: {
- name: "Placeholder",
- type: { name: "string" },
- table: {
- type: { summary: "string" },
- category: "Content",
- },
- control: { type: "text" },
- },
- isQuiet: {
- name: "Quiet styling",
- type: { name: "boolean" },
- table: {
- type: { summary: "boolean" },
- category: "Component",
- },
- control: "boolean",
- },
- isOpen: {
- name: "Open",
- type: { name: "boolean" },
- table: {
- type: { summary: "boolean" },
- category: "State",
- },
- control: "boolean",
- },
- isKeyboardFocused: {
- name: "Keyboard focused",
- type: { name: "boolean" },
- table: {
- type: { summary: "boolean" },
- category: "State",
- },
- control: "boolean",
- },
- isDisabled: {
- name: "Disabled",
- type: { name: "boolean" },
- table: {
- type: { summary: "boolean" },
- category: "State",
- },
- control: "boolean",
- },
- isLoading: {
- name: "Loading",
- type: { name: "boolean" },
- table: {
- type: { summary: "boolean" },
- category: "State",
- },
- control: "boolean",
- },
- isInvalid: {
- name: "Invalid input",
- type: { name: "boolean" },
- table: {
- type: { summary: "boolean" },
- category: "State",
- },
- control: "boolean",
- },
- content: { table: { disable: true } },
- },
- args: {
- rootClass: "spectrum-SearchWithin",
- isOpen: false,
- isQuiet: false,
- size: "m",
- label: "All",
- placeholder: "Search",
- isKeyboardFocused: false,
- isLoading: false,
- isDisabled: false,
- isInvalid: false,
- withSwitch: false,
- },
- parameters: {
- chromatic: { disableSnapshot: true },
- status: {
- type: "deprecated"
- },
- packageJson: pkgJson,
- },
-};
-
-const Template = ({
- rootClass = "spectrum-SearchWithin",
- customClasses = [],
- customStyles = {},
- isQuiet = false,
- isOpen = false,
- isInvalid = false,
- isLoading = false,
- isDisabled = false,
- withSwitch = false,
- isKeyboardFocused = false,
- size = "m",
- label,
- placeholder,
-}, context) => html`
-
-
-
-`;
-
-export const Default = Template.bind({});
-Default.args = {};
diff --git a/.storybook/deprecated/searchwithin/searchwithin.yml b/.storybook/deprecated/searchwithin/searchwithin.yml
deleted file mode 100644
index b51d7c3c221..00000000000
--- a/.storybook/deprecated/searchwithin/searchwithin.yml
+++ /dev/null
@@ -1,104 +0,0 @@
-name: Search within
-status: Deprecated
-deprecationNotice: Use a [search field](search.html) with a separate control to filter the search instead.
-description: Override the width of the component where necessary.
-examples:
- - id: searchwithin
- name: Standard
- markup: |
-
Default
-
-
-
Open
-
-
-
Default (Changed Selection)
-
-
-
Disabled
-
diff --git a/.storybook/deprecated/splitbutton/splitbutton.stories.js b/.storybook/deprecated/splitbutton/splitbutton.stories.js
deleted file mode 100644
index 1738fc3a25b..00000000000
--- a/.storybook/deprecated/splitbutton/splitbutton.stories.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import pkgJson from "@spectrum-css/splitbutton/package.json";
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-
-import { Template as Button } from "@spectrum-css/button/stories/template.js";
-
-import "@spectrum-css/splitbutton/dist/index-vars.css";
-import "@spectrum-css/splitbutton/dist/vars.css";
-
-/**
- * **This component is deprecated.** Please use a button group to show any additional actions related to the most critical action. Reference [Spectrum documentation](https://spectrum.corp.adobe.com/page/button-group/#Use-a-button-group-to-show-additional-actions) for more information.
- *
- * A split button surfaces an immediately invokable action via it's main button, as well as a list of alternative actions in its toggle-able menu overlay.
- */
-export default {
- title: "Split button",
- component: "SplitButton",
- argTypes: {
- size: {
- name: "Size",
- type: { name: "string", required: true },
- table: { disable: true },
- options: ["m"],
- control: "select",
- },
- variant: {
- name: "Variant",
- type: { name: "string" },
- table: { disable: true },
- options: ["accent", "primary", "secondary"],
- control: "select",
- },
- position: {
- name: "Position",
- type: { name: "string", required: true },
- table: {
- type: { summary: "string" },
- category: "Component",
- },
- options: ["right", "left"],
- control: "select",
- },
- iconName: { table: { disable: true } },
- label: {
- name: "Label",
- type: { name: "string" },
- table: {
- type: { summary: "string" },
- category: "Content",
- },
- control: { type: "text" },
- },
- },
- args: {
- rootClass: "spectrum-SplitButton",
- size: "m",
- position: "right",
- label: "Split Button",
- variant: "accent",
- iconName: "ChevronDown100",
- },
- parameters: {
- chromatic: { disableSnapshot: true },
- status: {
- type: "deprecated"
- },
- packageJson: pkgJson,
- },
-};
-
-const Template = ({
- rootClass = "spectrum-SplitButton",
- customClasses = [],
- customFirstButtonClasses = [],
- customLastButtonClasses = [],
- size = "m",
- variant = "cta",
- iconName = "ChevronDown100",
- labelIconName = undefined,
- position = "right",
- label = "Split button",
-} = {}, context = {}) => {
- return html`
-
-
-
({ ...a, [c]: true }), {}),
- })}
- >
- ${Button({
- variant,
- size,
- iconName: position === "right"
- ? typeof labelIconName != "undefined" ? labelIconName : undefined
- : iconName,
- label: position === "right" ? label : undefined,
- hideLabel: position === "right" ? false : true,
- customClasses: [
- position === "right"
- ? "spectrum-SplitButton-action"
- : "spectrum-SplitButton-trigger",
- ...customFirstButtonClasses
- ]
- }, context)}
- ${Button({
- variant,
- size,
- iconName: position === "right"
- ? iconName
- : typeof labelIconName != "undefined" ? labelIconName : undefined,
- iconAfterLabel: true,
- label: position === "right" ? undefined : label,
- hideLabel: position === "right" ? true : false,
- customClasses: [
- position === "right"
- ? "spectrum-SplitButton-trigger"
- : "spectrum-SplitButton-action",
- ...customLastButtonClasses
- ]
- }, context)}
-
- `;
-};
-
-export const Default = Template.bind({});
-Default.args = {};
diff --git a/.storybook/deprecated/splitbutton/splitbutton.yml b/.storybook/deprecated/splitbutton/splitbutton.yml
deleted file mode 100644
index 5940902961b..00000000000
--- a/.storybook/deprecated/splitbutton/splitbutton.yml
+++ /dev/null
@@ -1,76 +0,0 @@
-name: Split button
-status: Deprecated
-deprecationNotice: Use a [button group](buttongroup.html) to show any additional actions related to the most critical action. Reference [Spectrum documentation](https://spectrum.corp.adobe.com/page/button-group/#Use-a-button-group-to-show-additional-actions) for more information.
-examples:
- - id: splitbutton
- name: CTA
- description: A CTA split button.
- markup: |
-
- Split Button
-
-
-
-
-
-
-
-
-
-
-
-
-
- Split Button
- - id: splitbutton
- name: Primary
- description: A primary split button.
- markup: |
-
- Split Button
-
-
-
-
-
-
-
-
-
-
-
-
-
- Split Button
- - id: splitbutton
- name: Secondary
- description: A secondary split button.
- markup: |
-
- Split Button
-
-
-
-
-
-
-
-
-
-
-
-
-
- Split Button
diff --git a/.storybook/guides/color_palette.mdx b/.storybook/guides/color_palette.mdx
index 76fd930fe3e..22264d383ad 100644
--- a/.storybook/guides/color_palette.mdx
+++ b/.storybook/guides/color_palette.mdx
@@ -1,6 +1,9 @@
import { Meta, Title } from "@storybook/blocks";
import { ColorPalette, ColorItem, ThemeContainer, Heading } from "../blocks";
+import GradientLight from "../assets/images/gradient-background-light.png";
+import GradientDark from "../assets/images/gradient-background-dark.png";
+
Design tokens
@@ -11,98 +14,152 @@ The Spectrum CSS color palette is a collection of named colors that are used thr
@@ -113,24 +170,38 @@ The Spectrum CSS color palette is a collection of named colors that are used thr
### Transparent colors
-
+#### Transparent black
+
+
+#### Transparent white
+
+
diff --git a/.storybook/guides/deprecation.mdx b/.storybook/guides/deprecation.mdx
index 16342e4cccf..e0aa80b1754 100644
--- a/.storybook/guides/deprecation.mdx
+++ b/.storybook/guides/deprecation.mdx
@@ -42,12 +42,7 @@ Before removing the component from the codebase, we need to flag the component a
status: { type: "deprecated" }
},
```
-3. Update the status of the component to `Deprecated` in the `*.yml` file. Add any additional migration notes to the `deprecationNotice` keyword. i.e.,
- ```yaml
- name: Quick actions
- status: Deprecated
- deprecationNotice: Use an [action bar](actionbar.html) to allow users to perform actions on either a single or multiple items at the same time, instead.
- ```
+3. Update the status of the component to `Deprecated` in the `stories/*.mdx` file. Add any additional migration notes from design to the story description.
4. Commit these changes and open a pull request to the main branch. i.e., `git commit -m "chore(quickaction): prepare for deprecation"`.
5. Once the pull request is approved, merge the changes into the main branch and publish the update to the package registry.
@@ -58,7 +53,7 @@ At this point you can choose to either immediate move on to the next steps or gi
Once the deprecation notice has been communicated and the above steps completed, we can remove the component from the codebase safely without breaking local references.
1. Create a new folder with the component name in `.storybook/deprecated`, i.e., `.storybook/deprecated/quickaction`.
-2. Copy `*.stories.js` and `metadata/*.yml` into the new folder (directly, not nested inside subfolders).
+2. Copy `*.stories.js` and `stories/*.mdx` into the new folder (directly, not nested inside subfolders).
3. Delete the package from the `components` directory.
4. Add the deprecated component's package and last version to the monorepo's root package.json. i.e., `"@spectrum-css/quickaction": "^3.1.1",`.
5. Reach out to one of the package maintainers to officially deprecate the package in the package registry with the provided deprecation notice from design. Do not try to run the deprecation command unless you know that you have publishing permissions on npm. i.e., `npm deprecate @spectrum-css/quickaction@3.1.1 "This package has been deprecated. Use an action bar to allow users to perform actions on either a single or multiple items at the same time, instead."`.
diff --git a/.storybook/guides/develop.mdx b/.storybook/guides/develop.mdx
index e9c4634d9c2..822e9c99262 100644
--- a/.storybook/guides/develop.mdx
+++ b/.storybook/guides/develop.mdx
@@ -1,6 +1,6 @@
import { Meta } from "@storybook/blocks";
-import Illustration from "../../assets/spectrum_illustration_2x.png";
+import Illustration from "../assets/images/spectrum_illustration_2x.png";
Migration guide
+
+## Deprecated components
+
+- Cycle button: Use the quiet variant of action button with the appropriate icon(s) instead. Any icon swapping that happens on-click/on-key should be handled by the implementation.
+- Quick actions: Use an action bar to allow users to perform actions on either a single or multiple items at the same time, instead.
+- Search within: Use a search field with a separate control to filter the search instead.
+- Split button: Use a button group to show any additional actions related to the most critical action. Reference [Spectrum documentation](https://spectrum.corp.adobe.com/page/button-group/#Use-a-button-group-to-show-additional-actions) for more information.
+
+## Grays
+
+[1](#token-footnote) are mapped to empty `--mod` prefixed variables (for customization) with a fallback to variables prefixed with `--spectrum` (sourced from the design tokens).
- * This file loads both the `.spectrum` and `.spectrum--express` contexts which are used to toggle components between two different [visual styles](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language). The `.spectrum` context is the default.
+- `index.css` - _Preferred and most commonly used to incorporate Spectrum CSS into a project_. This file includes the component's styles and variable definitions. In this version, token-driven CSS properties[1](#token-footnote) are mapped to empty `--mod` prefixed variables (for customization) with a fallback to variables prefixed with `--spectrum` (sourced from the design tokens).
-* `index-vars.css` - _Deprecated_. This file is identical to `index.css`. It is provided as a fallback for older implementations that may have been using it and will be removed. It is recommended to use `index.css` instead.
+ - This file loads both the `.spectrum` and `.spectrum--express` contexts which are used to toggle components between two different [visual styles](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language). The `.spectrum` context is the default.
-* `index-base.css`: This file mimics the `index.css` output, but does not include the `.spectrum` or `.spectrum--express` contexts.
- * If your product only requires the `.spectrum` context, you can use `index-base.css` plus `themes/spectrum.css` from the `themes` directory to render the default Spectrum visual language.
- * The `.spectrum--express` context, on the other hand, is dependent on/expands on the default `.spectrum` context. This means if you only want to use the Express context, you still need to include `themes/spectrum.css`. In this case, we recommend using `index.css` instead since it includes both contexts by default.
- * This approach can also be used when you have defined and written your own visual language and only need the base component styles from Spectrum CSS. To wire up your own visual language, you would need to define your own custom properties that match those defined in the `themes/*.css` assets.
+- `index-vars.css` - _Deprecated_. This file is identical to `index.css`. It is provided as a fallback for older implementations that may have been using it and will be removed. It is recommended to use `index.css` instead.
-* `index-theme.css`: This file provides only the visual language for a component. It is used in conjunction with `index-base.css` and when loaded together, provides the same result as using `index.css` by itself.
+- `index-base.css`: This file mimics the `index.css` output, but does not include the `.spectrum` or `.spectrum--express` contexts.
+
+ - If your product only requires the `.spectrum` context, you can use `index-base.css` plus `themes/spectrum-two.css` from the `themes` directory to render the default Spectrum visual language.
+ - The `.spectrum--express` context, on the other hand, is dependent on/expands on the default `.spectrum` context. This means if you only want to use the Express context, you still need to include `themes/spectrum-two.css`. In this case, we recommend using `index.css` instead since it includes both contexts by default.
+ - This approach can also be used when you have defined and written your own visual language and only need the base component styles from Spectrum CSS. To wire up your own visual language, you would need to define your own custom properties that match those defined in the `themes/*.css` assets.
+
+- `index-theme.css`: This file provides only the visual language for a component. It is used in conjunction with `index-base.css` and when loaded together, provides the same result as using `index.css` by itself.
1 ) without whom this project would not be possible.
+A very special thank you to all of our [contributors](https://github.com/adobe/spectrum-css/graphs/contributors) without whom this project would not be possible.
Want to join the team? Check out the [contributing guidelines](.github/CONTRIBUTING.md) to get started.
@@ -207,16 +212,16 @@ Want to join the team? Check out the [contributing guidelines](.github/CONTRIBUT
The following tasks are available:
-| Command | Description | Examples |
-| --- | --- | --- |
-| `clean` | Cleans all output files for the project and all components | `yarn clean` |
-| `build` | Performs a build of all components | `yarn build` |
-| `build:all` | Performs a build of all components, documentation site, and storybook | `yarn build:all` |
-| `dev` | Performs a component build and serves the documentation on the default port (3000) | `yarn dev` |
-| `compare` | This compares the current version of components with the previous versions published to NPM and output a list of all the changes that have been made. This is useful for reviewing changes before a release. The information is provided in the command-line output as well as in a simple web page that is opened in your default browser upon completion. The web page includes links to the visual diffs for each component when the file sizes have changed. Components with no changes are not included in the output. To run comparisons on one or multiple components, `compare` accepts a list of components as arguments. For example, `yarn compare button` will compare the current version of the button component with the previous version published to NPM. `yarn compare button checkbox` will compare the current version of the button and checkbox components with the previous versions published to NPM. Named components should be space-separated. Running `compare` with no inputs will automatically run against all packages. Components with no changes are not included in the output. To run comparisons on one or multiple components, `compare` accepts a list of components as arguments. For example, `yarn compare button` will compare the current version of the button component with the previous version published to NPM. `yarn compare button checkbox` will compare the current version of the button and checkbox components with the previous versions published to NPM. Named components should be space-separated. Running `compare` with no inputs will automatically run against all packages. here .
- - name: Migration Guide
- description: |
- ### T-shirt sizing
- Accordion now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-Accordion--size*` class.
-
- ### Density
- Accordion now supports density and requires that you specify one of the density type `compact` `regular` `spacious`.
-
-examples:
- - id: accordion
- name: Compact - S
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Item 1
-
-
-
-
-
-
-
-
-
-
Item 2
-
-
-
-
-
-
-
-
-
-
Item 3
-
-
-
-
-
-
-
-
-
-
Item 4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Item 1
-
-
-
-
-
-
-
-
-
-
Item 2
-
-
-
-
-
-
-
-
-
-
Item 3
-
-
-
-
-
-
-
-
-
-
Item 4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Item 1
-
-
-
-
-
-
-
-
-
-
Item 2
-
-
-
-
-
-
-
-
-
-
Item 3
-
-
-
-
-
-
-
-
-
-
Item 4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Item 1
-
-
-
-
-
-
-
-
-
-
Item 2
-
-
-
-
-
-
-
-
-
-
Item 3
-
-
-
-
-
-
-
-
-
-
Item 4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Item 1
-
-
-
-
-
-
-
-
-
-
Item 2
-
-
-
-
-
-
-
-
-
-
Item 3
-
-
-
-
-
-
-
-
-
-
Item 4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Item 1
-
-
-
-
-
-
-
-
-
-
Item 2
-
-
-
-
-
-
-
-
-
-
Item 3
-
-
-
-
-
-
-
-
-
-
Item 4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Item 1
-
-
-
-
-
-
-
-
-
-
Item 2
-
-
-
-
-
-
-
-
-
-
Item 3
-
-
-
-
-
-
-
-
-
-
Item 4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Item 1
-
-
-
-
-
-
-
-
-
-
Item 2
-
-
-
-
-
-
-
-
-
-
Item 3
-
-
-
-
-
-
-
-
-
-
Item 4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Item 1
-
-
-
-
-
-
-
-
-
-
Item 2
-
-
-
-
-
-
-
-
-
-
Item 3
-
-
-
-
-
-
-
-
-
-
Item 4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Item 1
-
-
-
-
-
-
-
-
-
-
Item 2
-
-
-
-
-
-
-
-
-
-
Item 3
-
-
-
-
-
-
-
-
-
-
Item 4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Item 1
-
-
-
-
-
-
-
-
-
-
Item 2
-
-
-
-
-
-
-
-
-
-
Item 3
-
-
-
-
-
-
-
-
-
-
Item 4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Item 1
-
-
-
-
-
-
-
-
-
-
Item 2
-
-
-
-
-
-
-
-
-
-
Item 3
-
-
-
-
-
-
-
-
-
-
Item 4
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Accordion {
+ --spectrum-accordion-item-height: var(--spectrum-component-height-200);
+ --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width);
+ --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100);
+ --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text);
+ --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator);
+ --spectrum-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text);
+ --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium);
+ --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium);
+ --spectrum-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100);
+ --spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content);
+ --spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content);
+ --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75);
+
+ /* Text header */
+ --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack);
+ --spectrum-accordion-item-header-font-weight: var(--spectrum-bold-font-weight);
+ --spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style);
+ --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
+ --spectrum-accordion-item-header-line-height: 1.25;
+
+ /* Text body */
+ --spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack);
+ --spectrum-accordion-item-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
+ --spectrum-accordion-item-content-font-style: var(--spectrum-body-sans-serif-font-style);
+ --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s);
+ --spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100);
+
+ /* Colors */
+ --spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default));
+ --spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover));
+ --spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down));
+ --spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus));
+
+ /* Label */
+ --spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color);
+ --spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color);
+
+ /* Body */
+ --spectrum-accordion-item-content-color: var(--spectrum-body-color);
+
+ /* Focus indicator */
+ --spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ /* Divider */
+ --spectrum-accordion-divider-color: var(--spectrum-gray-200);
+
+ --spectrum-accordion-item-header-line-height-cjk: var(--spectrum-cjk-line-height-100);
+ --spectrum-accordion-item-content-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+ --spectrum-accordion-item-height-size-s: var(--spectrum-component-height-100);
+ --spectrum-accordion-disclosure-indicator-height-size-s: var(--spectrum-component-height-75);
+ --spectrum-accordion-component-edge-to-text-size-s: var(--spectrum-component-edge-to-text-50);
+ --spectrum-accordion-item-header-font-size-size-s: var(--spectrum-font-size-200);
+ --spectrum-accordion-item-content-font-size-size-s: var(--spectrum-body-size-xs);
+ --spectrum-accordion-item-header-top-to-text-space-size-s: var(--spectrum-accordion-top-to-text-regular-small);
+ --spectrum-accordion-item-header-bottom-to-text-space-size-s: var(--spectrum-accordion-bottom-to-text-regular-small);
+
+ --spectrum-accordion-item-height-size-l: var(--spectrum-component-height-300);
+ --spectrum-accordion-disclosure-indicator-height-size-l: var(--spectrum-component-height-200);
+ --spectrum-accordion-component-edge-to-text-size-l: var(--spectrum-component-edge-to-text-100);
+ --spectrum-accordion-item-header-font-size-size-l: var(--spectrum-font-size-500);
+ --spectrum-accordion-item-content-font-size-size-l: var(--spectrum-body-size-m);
+ --spectrum-accordion-item-header-top-to-text-space-size-l: var(--spectrum-accordion-top-to-text-regular-large);
+ --spectrum-accordion-item-header-bottom-to-text-space-size-l: var(--spectrum-accordion-bottom-to-text-regular-large);
+
+ --spectrum-accordion-item-height-size-xl: var(--spectrum-component-height-400);
+ --spectrum-accordion-disclosure-indicator-height-size-xl: var(--spectrum-component-height-300);
+ --spectrum-accordion-component-edge-to-text-size-xl: var(--spectrum-component-edge-to-text-200);
+ --spectrum-accordion-item-header-font-size-size-xl: var(--spectrum-font-size-700);
+ --spectrum-accordion-item-content-font-size-size-xl: var(--spectrum-body-size-l);
+ --spectrum-accordion-item-header-top-to-text-space-size-xl: var(--spectrum-accordion-top-to-text-regular-extra-large);
+ --spectrum-accordion-item-header-bottom-to-text-space-size-xl: var(--spectrum-accordion-bottom-to-text-regular-extra-large);
+
+ &.spectrum-Accordion--compact {
+ --spectrum-accordion-item-height: var(--spectrum-component-height-100);
+ --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium);
+ --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium);
+
+ --spectrum-accordion-item-height-size-s: var(--spectrum-component-height-75);
+ --spectrum-accordion-item-header-top-to-text-space-size-s: var(--spectrum-accordion-top-to-text-compact-small);
+ --spectrum-accordion-item-header-bottom-to-text-space-size-s: var(--spectrum-accordion-bottom-to-text-compact-small);
+
+ --spectrum-accordion-item-height-size-l: var(--spectrum-component-height-200);
+ --spectrum-accordion-item-header-top-to-text-space-size-l: var(--spectrum-accordion-top-to-text-compact-large);
+ --spectrum-accordion-item-header-bottom-to-text-space-size-l: var(--spectrum-accordion-bottom-to-text-compact-large);
+
+ --spectrum-accordion-item-height-size-xl: var(--spectrum-component-height-300);
+ --spectrum-accordion-item-header-top-to-text-space-size-xl: var(--spectrum-accordion-top-to-text-compact-extra-large);
+ --spectrum-accordion-item-header-bottom-to-text-space-size-xl: var(--spectrum-accordion-bottom-to-text-compact-extra-large);
+ }
+
+ &.spectrum-Accordion--spacious {
+ --spectrum-accordion-item-header-line-height: 1.278;
+ --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium);
+ --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium);
+
+ --spectrum-accordion-item-header-line-height-size-l: 1.273;
+ --spectrum-accordion-item-header-top-to-text-space-size-l: var(--spectrum-accordion-top-to-text-spacious-large);
+ --spectrum-accordion-item-header-bottom-to-text-space-size-l: var(--spectrum-accordion-bottom-to-text-spacious-large);
+
+ --spectrum-accordion-item-header-line-height-size-xl: 1.25;
+ --spectrum-accordion-item-header-top-to-text-space-size-xl: var(--spectrum-accordion-top-to-text-spacious-extra-large);
+ --spectrum-accordion-item-header-bottom-to-text-space-size-xl: var(--spectrum-accordion-bottom-to-text-spacious-extra-large);
+
+ --spectrum-accordion-item-header-line-height-size-s: 1.25;
+ --spectrum-accordion-item-header-top-to-text-space-size-s: var(--spectrum-accordion-small-top-to-text-spacious);
+ --spectrum-accordion-item-header-bottom-to-text-space-size-s: var(--spectrum-accordion-bottom-to-text-spacious-small);
+ }
+ }
+}
diff --git a/components/accordion/themes/spectrum.css b/components/accordion/themes/spectrum.css
new file mode 100644
index 00000000000..629252ea079
--- /dev/null
+++ b/components/accordion/themes/spectrum.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Accordion {
+ /* Divider */
+ --spectrum-accordion-divider-color: var(--spectrum-gray-300);
+ }
+}
diff --git a/components/actionbar/CHANGELOG.md b/components/actionbar/CHANGELOG.md
index 93dcbf109a5..6a2226d33ee 100644
--- a/components/actionbar/CHANGELOG.md
+++ b/components/actionbar/CHANGELOG.md
@@ -1,5 +1,223 @@
# Change Log
+## 9.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actiongroup@6.0.0-s2-foundations.13
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.14
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.13
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 9.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`7eb68bb`](https://github.com/adobe/spectrum-css/commit/7eb68bb0091195d151f2406a983b0a4caadf66a9) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-233] Moves inset-inline-start and inset-inline-end to sticky variant to fix issue with fixed actionbar unexpectedly taking up full width
+
+## 9.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actiongroup@6.0.0-s2-foundations.12
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.12
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.12
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 9.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actiongroup@6.0.0-s2-foundations.11
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.11
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.11
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 9.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actiongroup@6.0.0-s2-foundations.10
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.10
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.10
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 9.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actiongroup@6.0.0-s2-foundations.9
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.9
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.9
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 9.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actiongroup@6.0.0-s2-foundations.8
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.8
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.8
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 9.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actiongroup@6.0.0-s2-foundations.7
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.7
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.7
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 9.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actiongroup@6.0.0-s2-foundations.6
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.6
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+
+## 9.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actiongroup@6.0.0-s2-foundations.5
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.5
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.5
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 9.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actiongroup@6.0.0-s2-foundations.4
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.4
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.4
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 9.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actiongroup@6.0.0-s2-foundations.3
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.3
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.3
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 9.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actiongroup@6.0.0-s2-foundations.2
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.2
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.2
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 9.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actiongroup@6.0.0-s2-foundations.1
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.1
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.1
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 9.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actiongroup@6.0.0-s2-foundations.0
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.0
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.0
+
## 8.1.3
### Patch Changes
diff --git a/components/actionbar/index.css b/components/actionbar/index.css
index 42b3b643ee6..2c32111154a 100644
--- a/components/actionbar/index.css
+++ b/components/actionbar/index.css
@@ -11,52 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-ActionBar {
- --spectrum-actionbar-height: var(--spectrum-action-bar-height);
- --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100);
-
- /* item counter field label */
- --spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-100);
- --spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100);
- --spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default);
-
- /* cjk language support for item counter */
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100);
- }
-
- /* colors - applied to popover */
- --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50);
- --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
-
- /* emphasized variation colors */
- --spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default);
- --spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white);
-
- /* spacing of action bar bottom and horizontal outer edge */
- --spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300);
-
- /* spacing of close button */
- --spectrum-actionbar-spacing-close-button-top: var(--spectrum-spacing-100);
- --spectrum-actionbar-spacing-close-button-start: var(--spectrum-spacing-100);
- --spectrum-actionbar-spacing-close-button-end: var(--spectrum-spacing-75);
-
- /* spacing of item counter field label */
- --spectrum-actionbar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter);
- --spectrum-actionbar-spacing-item-counter-end: var(--spectrum-spacing-400);
-
- /* spacing of action group */
- --spectrum-actionbar-spacing-action-group-top: var(--spectrum-spacing-100);
- --spectrum-actionbar-spacing-action-group-end: var(--spectrum-spacing-100);
-
- /* drop shadow */
- --spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-x);
- --spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-y);
- --spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-blur);
- --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color);
-}
+@import "./themes/spectrum-two.css";
/* windows high contrast mode */
@media (forced-colors: active) {
diff --git a/components/actionbar/metadata/actionbar.yml b/components/actionbar/metadata/actionbar.yml
deleted file mode 100644
index e92113541b9..00000000000
--- a/components/actionbar/metadata/actionbar.yml
+++ /dev/null
@@ -1,297 +0,0 @@
-name: Action bar
-description: Floating Action bar that appears in selection mode.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/action-bar/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Popover Dependency
- Action bar requires Popover, which is nested within Action bar. Action bar background, border, and corner radius are applied to the nested Popover component and can be overriden by Action bar.
-
- ### Action bar close button
- Checkbox has been replaced by Close button.
-
- ### Item counter
- Item counter has replaced the checkbox field label. Item counter is a Field Label component.
-
- ### New Action button markup
- Action button requires `.spectrum-ActionButton-icon` class on icons nested inside of Action button.
-
- Emphasized Action bar requires `.spectrum-ActionButton-staticWhite` class on Action button.
-
- ### New ActionGroup markup
- Action bar now uses the new ActionGroup markup. Replace `.spectrum-ButtonGroup` with `.spectrum-ActionGroup` and apply `.spectrum-ActionGroup-item` to each action button. See the [Action Group](actiongroup.html) for more information.
-
- ### Change workflow icon size to medium
- If you use icon action button in your markup, please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
-
-examples:
- - id: actionbar
- name: Standard
- description: Standard Action bars fill the width of their container.
- markup: |
-
-
-
-
-
-
-
-
2 Selected
-
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
-
-
-
-
-
-
-
-
2 Selected
-
-
-
-
-
- Edit
-
-
-
-
- Copy
-
-
-
-
- Delete
-
-
-
-
-
-
-
-
-
-
-
2 Selected
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
2 Selected
-
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
-
-
-
-
-
-
-
-
2 Selected
-
-
-
-
-
- Edit
-
-
-
-
- Copy
-
-
-
-
- Delete
-
-
-
-
-
-
-
-
-
-
-
2 Selected
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
2 Selected
-
-
-
-
-
-
-
-
-
-
-
-
-
usage section of the guidelines
- for more information about using Action bar with underlying content.
- markup: |
-
- Scroll down to view sticky behavior
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
- in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
-
-
-
-
-
-
-
-
3 Selected
-
-
-
-
-
- Edit
-
-
-
-
- Copy
-
-
-
-
- Delete
-
-
-
-
diff --git a/components/actionbar/metadata/metadata.json b/components/actionbar/metadata/metadata.json
index 2da94885776..cbb96539325 100644
--- a/components/actionbar/metadata/metadata.json
+++ b/components/actionbar/metadata/metadata.json
@@ -14,10 +14,7 @@
".spectrum-ActionBar--fixed",
".spectrum-ActionBar--flexible .spectrum-ActionBar-popover",
".spectrum-ActionBar--sticky",
- ".spectrum-ActionBar.is-open",
- ".spectrum-ActionBar:lang(ja)",
- ".spectrum-ActionBar:lang(ko)",
- ".spectrum-ActionBar:lang(zh)"
+ ".spectrum-ActionBar.is-open"
],
"modifiers": [
"--mod-actionbar-corner-radius",
@@ -77,8 +74,8 @@
"--spectrum-drop-shadow-x",
"--spectrum-drop-shadow-y",
"--spectrum-font-size-100",
+ "--spectrum-gray-25",
"--spectrum-gray-400",
- "--spectrum-gray-50",
"--spectrum-informative-background-color-default",
"--spectrum-line-height-100",
"--spectrum-neutral-content-color-default",
diff --git a/components/actionbar/package.json b/components/actionbar/package.json
index 541a44fecc6..494f8a2dac2 100644
--- a/components/actionbar/package.json
+++ b/components/actionbar/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/actionbar",
- "version": "8.1.3",
+ "version": "9.0.0-s2-foundations.14",
"description": "The Spectrum CSS actionbar component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js
index 55b864933af..b6829a6b6e3 100644
--- a/components/actionbar/stories/template.js
+++ b/components/actionbar/stories/template.js
@@ -5,8 +5,12 @@ import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { styleMap } from "lit/directives/style-map.js";
+import { capitalize } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ActionBar",
@@ -24,8 +28,7 @@ export const Template = ({
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-ActionBar {
+ --spectrum-actionbar-height: var(--spectrum-action-bar-height);
+ --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100);
+
+ /* item counter field label */
+ --spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-100);
+ --spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100);
+ --spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default);
+
+ /* cjk language support for item counter */
+ --spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+ /* colors - applied to popover */
+ --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25);
+ --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
+
+ /* emphasized variation colors */
+ --spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default);
+ --spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white);
+
+ /* spacing of action bar bottom and horizontal outer edge */
+ --spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300);
+
+ /* spacing of close button */
+ --spectrum-actionbar-spacing-close-button-top: var(--spectrum-spacing-100);
+ --spectrum-actionbar-spacing-close-button-start: var(--spectrum-spacing-100);
+ --spectrum-actionbar-spacing-close-button-end: var(--spectrum-spacing-75);
+
+ /* spacing of item counter field label */
+ --spectrum-actionbar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter);
+ --spectrum-actionbar-spacing-item-counter-end: var(--spectrum-spacing-400);
+
+ /* spacing of action group */
+ --spectrum-actionbar-spacing-action-group-top: var(--spectrum-spacing-100);
+ --spectrum-actionbar-spacing-action-group-end: var(--spectrum-spacing-100);
+
+ /* drop shadow */
+ --spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-x);
+ --spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-y);
+ --spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-blur);
+ --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color);
+ }
+}
diff --git a/components/actionbar/themes/spectrum.css b/components/actionbar/themes/spectrum.css
new file mode 100644
index 00000000000..352696f6682
--- /dev/null
+++ b/components/actionbar/themes/spectrum.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-ActionBar {
+ --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50);
+ --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
+ }
+}
diff --git a/components/actionbutton/CHANGELOG.md b/components/actionbutton/CHANGELOG.md
index 3daaff6669c..367518f4ec2 100644
--- a/components/actionbutton/CHANGELOG.md
+++ b/components/actionbutton/CHANGELOG.md
@@ -1,5 +1,233 @@
# Change Log
+## 7.0.0-s2-foundations.19
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4e80ae6`](https://github.com/adobe/spectrum-css/commit/4e80ae67ddda329a5ed556b57426623c6f0f13f0) Thanks [@pfulton](https://github.com/pfulton)! - ActionButton:
+
+ - Correct --spectrum-actionbutton-background-color-selected-disabled to be --spectrum-actionbutton-(background|border)-color-disabled-selected
+
+ Combobox:
+
+ - Move --spectrum-combobox-min-inline-size and --spectrum-combobox-button-width to the index.css
+
+ FieldGroup:
+
+ - Swap gap back to margin-inline-end on FieldGroup
+
+ Typography:
+
+ - Remap body size to xs if xxs provided
+
+## 7.0.0-s2-foundations.18
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.17
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`1252094`](https://github.com/adobe/spectrum-css/commit/1252094e476eb60b51d33c3ec574b843b005ef82) Thanks [@pfulton](https://github.com/pfulton)! - Right-side padding fix
+
+## 7.0.0-s2-foundations.16
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f15243a`](https://github.com/adobe/spectrum-css/commit/f15243adaa633531e82edbb61b2e4444517af64e) Thanks [@pfulton](https://github.com/pfulton)! - fix(actionbutton): migrate --mods to index.css
+
+## 7.0.0-s2-foundations.15
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0e08995`](https://github.com/adobe/spectrum-css/commit/0e08995cfd43f7d4495df4e3403106ced7760381) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-248]: Selected, static black actionbutton content color should be white, not black
+
+## 7.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`58a89ea`](https://github.com/adobe/spectrum-css/commit/58a89ea464c387111511271a5f5afce044f11042) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-248] Action button selected static black state overrides not working
+
+### Patch Changes
+
+- Updated dependencies [[`58a89ea`](https://github.com/adobe/spectrum-css/commit/58a89ea464c387111511271a5f5afce044f11042)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.15
+
+## 7.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.12
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.11
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4265d20`](https://github.com/adobe/spectrum-css/commit/4265d208b6eb2db923e558fca100b4532b964e45) Thanks [@pfulton](https://github.com/pfulton)! - Fix unsupported variables created in components/actionbutton/themes/spectrum.css
+
+- Updated dependencies [[`4265d20`](https://github.com/adobe/spectrum-css/commit/4265d208b6eb2db923e558fca100b4532b964e45)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.11
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 6.1.3
### Patch Changes
diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 8ff9e6121f3..70c27c9e673 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -12,116 +12,7 @@
*/
@import "@spectrum-css/commons/basebutton.css";
-@import "./themes/express.css";
-
-.spectrum-ActionButton {
- --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100);
- --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-actionbutton-border-width: var(--spectrum-border-width-100);
-
- --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-actionbutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
- --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap));
-
- &:dir(rtl) {
- --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
- }
-
- &.is-selected {
- --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
- --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
- --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
- --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus));
-
- --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50));
- --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50));
- --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50));
- --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-50));
-
- &.spectrum-ActionButton--emphasized {
- --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default));
- --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover));
- --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down));
- --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus));
-
- --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white));
- --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white));
- --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white));
- --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white));
- }
- }
-}
-
-.spectrum-ActionButton--sizeXS {
- --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-50) * 2) + var(--spectrum-workflow-icon-size-50));
- --spectrum-actionbutton-height: var(--spectrum-component-height-50);
-
- --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50);
- --spectrum-actionbutton-font-size: var(--spectrum-font-size-50);
- --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50);
- --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small);
- --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));
- --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));
- --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width));
-}
-
-.spectrum-ActionButton--sizeS {
- --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-75) * 2) + var(--spectrum-workflow-icon-size-75));
- --spectrum-actionbutton-height: var(--spectrum-component-height-75);
-
- --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75);
- --spectrum-actionbutton-font-size: var(--spectrum-font-size-75);
- --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75);
- --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small);
- --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-75) - var(--spectrum-actionbutton-border-width));
- --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-75) - var(--spectrum-actionbutton-border-width));
- --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width));
-}
-
-.spectrum-ActionButton--sizeM {
- --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100));
- --spectrum-actionbutton-height: var(--spectrum-component-height-100);
-
- --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100);
- --spectrum-actionbutton-font-size: var(--spectrum-font-size-100);
- --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
- --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
- --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--spectrum-actionbutton-border-width));
- --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--spectrum-actionbutton-border-width));
- --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width));
-}
-
-.spectrum-ActionButton--sizeL {
- --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-200) * 2) + var(--spectrum-workflow-icon-size-200));
- --spectrum-actionbutton-height: var(--spectrum-component-height-200);
-
- --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200);
- --spectrum-actionbutton-font-size: var(--spectrum-font-size-200);
- --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200);
- --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large);
- --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-200) - var(--spectrum-actionbutton-border-width));
- --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-200) - var(--spectrum-actionbutton-border-width));
- --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width));
-}
-
-.spectrum-ActionButton--sizeXL {
- --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-300) * 2) + var(--spectrum-workflow-icon-size-300));
- --spectrum-actionbutton-height: var(--spectrum-component-height-300);
-
- --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300);
- --spectrum-actionbutton-font-size: var(--spectrum-font-size-300);
- --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300);
- --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large);
- --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-300) - var(--spectrum-actionbutton-border-width));
- --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-actionbutton-border-width));
- --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width));
-}
+@import "./themes/spectrum-two.css";
@media (forced-colors: active) {
.spectrum-ActionButton {
@@ -165,6 +56,13 @@
.spectrum-ActionButton {
@extend %spectrum-BaseButton;
+
+ --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap));
+
+ --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-actionbutton-edge-to-visual-size) - var(--spectrum-actionbutton-border-width));
+ --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-actionbutton-edge-to-text-size) - var(--spectrum-actionbutton-border-width));
+ --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-actionbutton-edge-to-visual-only-size) - var(--spectrum-actionbutton-border-width));
+
position: relative;
min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width));
@@ -182,6 +80,29 @@
border-color: var(--highcontrast-actionbutton-border-color-default, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default)));
color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default)));
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
+
+ &.is-selected {
+ --mod-actionbutton-border-color-default: var(--spectrum-actionbutton-border-color-default-selected);
+ --mod-actionbutton-border-color-hover: var(--spectrum-actionbutton-border-color-hover-selected);
+ --mod-actionbutton-border-color-down: var(--spectrum-actionbutton-border-color-down-selected);
+ --mod-actionbutton-border-color-focus: var(--spectrum-actionbutton-border-color-focus-selected);
+ --mod-actionbutton-border-color-disabled: var(--spectrum-actionbutton-border-color-disabled-selected);
+
+ --mod-actionbutton-background-color-default: var(--spectrum-actionbutton-background-color-default-selected);
+ --mod-actionbutton-background-color-hover: var(--spectrum-actionbutton-background-color-hover-selected);
+ --mod-actionbutton-background-color-down: var(--spectrum-actionbutton-background-color-down-selected);
+ --mod-actionbutton-background-color-focus: var(--spectrum-actionbutton-background-color-focus-selected);
+ --mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-disabled-selected);
+
+ --mod-actionbutton-content-color-default: var(--spectrum-actionbutton-content-color-default-selected);
+ --mod-actionbutton-content-color-hover: var(--spectrum-actionbutton-content-color-hover-selected);
+ --mod-actionbutton-content-color-down: var(--spectrum-actionbutton-content-color-down-selected);
+ --mod-actionbutton-content-color-focus: var(--spectrum-actionbutton-content-color-focus-selected);
+ }
+
&:hover {
background-color: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover)));
border-color: var(--highcontrast-actionbutton-border-color-hover, var(--mod-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover)));
diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml
deleted file mode 100644
index acc03b5be7c..00000000000
--- a/components/actionbutton/metadata/actionbutton.yml
+++ /dev/null
@@ -1,1264 +0,0 @@
-name: Action button
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/action-button/
-description: |
- - For Action Buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup
- - If an icon and a label are both used, ensure that the element with the `.spectrum-ActionButton-label` class comes after the `.spectrum-Icon` element.
- - If the hold icon is used, ensure that the element with the `.spectrum-ActionButton-hold` class comes before the `.spectrum-Icon` element.
- - When using `.spectrum-ActionButton--staticWhite` or `.spectrum-ActionButton--staticblack`, use the `--mod-actionbutton-content-color-default` custom property to set the text color when selected.
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Action Button now requires a class on its icon
- The `.spectrum-ActionButton-icon` class is now required on the icon.
-
- ### T-shirt sizing
- Action Button now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-ActionButton--size*` class.
-
- ### Action Button is now a separate component
- Action Button has been moved to the [Action Button](actionbutton.html) component.
-
- ### Change workflow icon size
-
- Previously, all Action Buttons used `.spectrum-Icon--sizeS`. This has changed:
-
- | Action button classname | Workflow icon classname |
- | -------------------------------- | --------------------------------- |
- | `.spectrum-ActionButton--sizeXS` | `.spectrum-Icon--sizeXS` |
- | `.spectrum-ActionButton--sizeS` | `.spectrum-Icon--sizeS` |
- | `.spectrum-ActionButton--sizeM` | `.spectrum-Icon--sizeM` |
- | `.spectrum-ActionButton--sizeL` | `.spectrum-Icon--sizeL` |
- | `.spectrum-ActionButton--sizeXL` | `.spectrum-Icon--sizeXL` |
-
- ### Change hold icon classnames
-
- Hold icon classnames must be set as follows:
-
- | Action button classname | Hold icon classname |
- | -------------------------------- | ------------------------------------ |
- | `.spectrum-ActionButton--sizeXS` | `.spectrum-UIIcon-CornerTriangle50` |
- | `.spectrum-ActionButton--sizeS` | `.spectrum-UIIcon-CornerTriangle75` |
- | `.spectrum-ActionButton--sizeM` | `.spectrum-UIIcon-CornerTriangle100` |
- | `.spectrum-ActionButton--sizeL` | `.spectrum-UIIcon-CornerTriangle200` |
- | `.spectrum-ActionButton--sizeXL` | `.spectrum-UIIcon-CornerTriangle300` |
-
- ### Include markup for hold icon before workflow icon
- Because of the way padding is calculated, the hold icon must be placed before the workflow icon.
-
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: actionbutton-sizing
- name: Sizing
- markup: |
-
-
-
XS
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
S
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
M (default)
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
L
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
XL
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Default
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected + Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Default
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected + Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Default
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected + Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Default
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected + Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Default
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected + Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Default
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected + Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Default
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected + Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Default
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Selected + Disabled
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+ @container style(--system: spectrum) {
+ .spectrum-ActionButton {
+ --spectrum-actionbutton-background-color-default: var(--spectrum-gray-50);
+ --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+ --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
+ --spectrum-actionbutton-background-color-disabled: transparent;
+
+ --spectrum-actionbutton-background-color-default-selected: var(--spectrum-neutral-background-color-selected-default);
+ --spectrum-actionbutton-background-color-hover-selected: var(--spectrum-neutral-background-color-selected-hover);
+ --spectrum-actionbutton-background-color-down-selected: var(--spectrum-neutral-background-color-selected-down);
+ --spectrum-actionbutton-background-color-focus-selected: var(--spectrum-neutral-background-color-selected-key-focus);
+ --spectrum-actionbutton-background-color-disabled-selected: var(--spectrum-disabled-background-color);
+
+ --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400);
+ --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
+ --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600);
+ --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500);
+ --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
+
+ --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100);
+ --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-actionbutton-border-width: var(--spectrum-border-width-100);
+
+ --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100));
+ --spectrum-actionbutton-height: var(--spectrum-component-height-100);
+
+ --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100);
+ --spectrum-actionbutton-font-size: var(--spectrum-font-size-100);
+ --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
+ --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
+
+ --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+ --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
+
+ --spectrum-actionbutton-content-color-default-selected: var(--spectrum-gray-50);
+ --spectrum-actionbutton-content-color-hover-selected: var(--spectrum-gray-50);
+ --spectrum-actionbutton-content-color-down-selected: var(--spectrum-gray-50);
+ --spectrum-actionbutton-content-color-focus-selected: var(--spectrum-gray-50);
+
+ --spectrum-actionbutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ --spectrum-actionbutton-border-color-default-selected: transparent;
+ --spectrum-actionbutton-border-color-hover-selected: transparent;
+ --spectrum-actionbutton-border-color-down-selected: transparent;
+ --spectrum-actionbutton-border-color-focus-selected: transparent;
+ --spectrum-actionbutton-border-color-disabled-selected: transparent;
+
+ &.spectrum-ActionButton--quiet {
+ --spectrum-actionbutton-background-color-default: transparent;
+ --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+ --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
+ --spectrum-actionbutton-background-color-disabled: transparent;
+
+ --spectrum-actionbutton-border-color-default: transparent;
+ --spectrum-actionbutton-border-color-hover: transparent;
+ --spectrum-actionbutton-border-color-down: transparent;
+ --spectrum-actionbutton-border-color-focus: transparent;
+ --spectrum-actionbutton-border-color-disabled: transparent;
+ }
+
+ &.spectrum-ActionButton--emphasized {
+ --spectrum-actionbutton-background-color-default-selected: var(--spectrum-accent-background-color-default);
+ --spectrum-actionbutton-background-color-hover-selected: var(--spectrum-accent-background-color-hover);
+ --spectrum-actionbutton-background-color-down-selected: var(--spectrum-accent-background-color-down);
+ --spectrum-actionbutton-background-color-focus-selected: var(--spectrum-accent-background-color-key-focus);
+
+ --spectrum-actionbutton-content-color-default-selected: var(--spectrum-white);
+ --spectrum-actionbutton-content-color-hover-selected: var(--spectrum-white);
+ --spectrum-actionbutton-content-color-down-selected: var(--spectrum-white);
+ --spectrum-actionbutton-content-color-focus-selected: var(--spectrum-white);
+ }
+
+ &.spectrum-ActionButton--sizeXS {
+ --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-50) * 2) + var(--spectrum-workflow-icon-size-50));
+ --spectrum-actionbutton-height: var(--spectrum-component-height-50);
+
+ --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50);
+ --spectrum-actionbutton-font-size: var(--spectrum-font-size-50);
+ --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50);
+ --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small);
+
+ --spectrum-actionbutton-edge-to-visual-size: var(--spectrum-component-edge-to-visual-50);
+ --spectrum-actionbutton-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-50);
+ --spectrum-actionbutton-edge-to-text-size: var(--spectrum-component-edge-to-text-50);
+ }
+
+ &.spectrum-ActionButton--sizeS {
+ --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-75) * 2) + var(--spectrum-workflow-icon-size-75));
+ --spectrum-actionbutton-height: var(--spectrum-component-height-75);
+
+ --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75);
+ --spectrum-actionbutton-font-size: var(--spectrum-font-size-75);
+ --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75);
+ --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small);
+
+ --spectrum-actionbutton-edge-to-visual-size: var(--spectrum-component-edge-to-visual-75);
+ --spectrum-actionbutton-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-75);
+ --spectrum-actionbutton-edge-to-text-size: var(--spectrum-component-edge-to-text-75);
+ }
+
+ &,
+ &.spectrum-ActionButton--sizeM {
+ --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100));
+ --spectrum-actionbutton-height: var(--spectrum-component-height-100);
+
+ --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100);
+ --spectrum-actionbutton-font-size: var(--spectrum-font-size-100);
+ --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
+ --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
+
+ --spectrum-actionbutton-edge-to-visual-size: var(--spectrum-component-edge-to-visual-100);
+ --spectrum-actionbutton-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-100);
+ --spectrum-actionbutton-edge-to-text-size: var(--spectrum-component-edge-to-text-100);
+ }
+
+ &.spectrum-ActionButton--sizeL {
+ --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-200) * 2) + var(--spectrum-workflow-icon-size-200));
+ --spectrum-actionbutton-height: var(--spectrum-component-height-200);
+
+ --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200);
+ --spectrum-actionbutton-font-size: var(--spectrum-font-size-200);
+ --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200);
+ --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large);
+
+ --spectrum-actionbutton-edge-to-visual-size: var(--spectrum-component-edge-to-visual-200);
+ --spectrum-actionbutton-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-200);
+ --spectrum-actionbutton-edge-to-text-size: var(--spectrum-component-edge-to-text-200);
+ }
+
+ &.spectrum-ActionButton--sizeXL {
+ --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-300) * 2) + var(--spectrum-workflow-icon-size-300));
+ --spectrum-actionbutton-height: var(--spectrum-component-height-300);
+
+ --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300);
+ --spectrum-actionbutton-font-size: var(--spectrum-font-size-300);
+ --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300);
+ --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large);
+
+ --spectrum-actionbutton-edge-to-visual-size: var(--spectrum-component-edge-to-visual-300);
+ --spectrum-actionbutton-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-300);
+ --spectrum-actionbutton-edge-to-text-size: var(--spectrum-component-edge-to-text-300);
+ }
+
+ &.spectrum-ActionButton--staticBlack,
+ &.spectrum-ActionButton--staticWhite {
+ &.spectrum-ActionButton--quiet {
+ --spectrum-actionbutton-border-color-default: transparent;
+ --spectrum-actionbutton-border-color-hover: transparent;
+ --spectrum-actionbutton-border-color-down: transparent;
+ --spectrum-actionbutton-border-color-focus: transparent;
+ --spectrum-actionbutton-border-color-disabled: transparent;
+ }
+ }
+
+ &.spectrum-ActionButton--staticBlack {
+ --spectrum-actionbutton-background-color-default: transparent;
+ --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-400);
+ --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-500);
+ --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-400);
+ --spectrum-actionbutton-background-color-disabled: transparent;
+
+ --spectrum-actionbutton-background-color-default-selected: var(--spectrum-transparent-black-900);
+ --spectrum-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-1000);
+ --spectrum-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-1000);
+ --spectrum-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-1000);
+ --spectrum-actionbutton-background-color-disabled-selected: var(--spectrum-transparent-black-300);
+
+ --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-500);
+ --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-600);
+ --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-700);
+ --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-600);
+ --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
+ --spectrum-actionbutton-border-color-disabled-selected: transparent;
+
+ --spectrum-actionbutton-content-color-default: var(--spectrum-black);
+ --spectrum-actionbutton-content-color-hover: var(--spectrum-black);
+ --spectrum-actionbutton-content-color-down: var(--spectrum-black);
+ --spectrum-actionbutton-content-color-focus: var(--spectrum-black);
+ --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+ --spectrum-actionbutton-content-color-selected: var(--spectrum-white);
+
+ --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+
+ &.spectrum-ActionButton--emphasized {
+ --spectrum-actionbutton-background-color-default-selected: var(--spectrum-transparent-black-900);
+ --spectrum-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-1000);
+ --spectrum-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-1000);
+ --spectrum-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-1000);
+
+ --spectrum-actionbutton-content-color-default-selected: var(--spectrum-gray-50);
+ --spectrum-actionbutton-content-color-hover-selected: var(--spectrum-gray-900);
+ --spectrum-actionbutton-content-color-down-selected: var(--spectrum-gray-900);
+ --spectrum-actionbutton-content-color-focus-selected: var(--spectrum-gray-900);
+ }
+ }
+
+ &.spectrum-ActionButton--staticWhite {
+ --spectrum-actionbutton-background-color-default: transparent;
+ --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-400);
+ --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-500);
+ --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-400);
+ --spectrum-actionbutton-background-color-disabled: transparent;
+
+ --spectrum-actionbutton-background-color-default-selected: var(--spectrum-transparent-white-900);
+ --spectrum-actionbutton-background-color-hover-selected: var(--spectrum-transparent-white-1000);
+ --spectrum-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-1000);
+ --spectrum-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-1000);
+ --spectrum-actionbutton-background-color-disabled-selected: var(--spectrum-transparent-white-300);
+
+ --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-500);
+ --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-600);
+ --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-700);
+ --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-600);
+ --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
+ --spectrum-actionbutton-border-color-disabled-selected: transparent;
+
+ --spectrum-actionbutton-content-color-default: var(--spectrum-white);
+ --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
+ --spectrum-actionbutton-content-color-down: var(--spectrum-white);
+ --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
+ --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+ --spectrum-actionbutton-content-color-selected: var(--spectrum-black);
+
+ --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+
+ &.spectrum-ActionButton--emphasized {
+ --spectrum-actionbutton-background-color-default-selected: var(--spectrum-transparent-white-900);
+ --spectrum-actionbutton-background-color-hover-selected: var(--spectrum-transparent-white-1000);
+ --spectrum-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-1000);
+ --spectrum-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-1000);
+
+ --spectrum-actionbutton-content-color-default-selected: var(--spectrum-gray-50);
+ }
+ }
+ }
+}
diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css
index dac5a200cf0..5fe71168242 100644
--- a/components/actionbutton/themes/spectrum.css
+++ b/components/actionbutton/themes/spectrum.css
@@ -11,133 +11,55 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+/* @combine .spectrum.spectrum--legacy */
+
+ @import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-ActionButton {
--spectrum-actionbutton-background-color-default: var(--spectrum-gray-75);
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-300);
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
- --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400);
- --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
- --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600);
- --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500);
-
- --spectrum-actionbutton-background-color-disabled: transparent;
- --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
-
&.spectrum-ActionButton--quiet {
- --spectrum-actionbutton-background-color-default: transparent;
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-300);
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
-
- --spectrum-actionbutton-border-color-default: transparent;
- --spectrum-actionbutton-border-color-hover: transparent;
- --spectrum-actionbutton-border-color-down: transparent;
- --spectrum-actionbutton-border-color-focus: transparent;
-
- --spectrum-actionbutton-background-color-disabled: transparent;
- --spectrum-actionbutton-border-color-disabled: transparent;
- }
-
- &.is-selected {
- --spectrum-actionbutton-border-color-default: transparent;
- --spectrum-actionbutton-border-color-hover: transparent;
- --spectrum-actionbutton-border-color-down: transparent;
- --spectrum-actionbutton-border-color-focus: transparent;
-
- --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-actionbutton-border-color-disabled: transparent;
- }
-
- &.spectrum-ActionButton--staticBlack,
- &.spectrum-ActionButton--staticWhite {
- &.spectrum-ActionButton--quiet {
- --spectrum-actionbutton-border-color-default: transparent;
- --spectrum-actionbutton-border-color-hover: transparent;
- --spectrum-actionbutton-border-color-down: transparent;
- --spectrum-actionbutton-border-color-focus: transparent;
-
- --spectrum-actionbutton-border-color-disabled: transparent;
- }
}
&.spectrum-ActionButton--staticBlack {
- --spectrum-actionbutton-background-color-default: transparent;
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300);
+ --spectrum-actionbutton-background-color-default-selected: var(--spectrum-transparent-black-800);
+ --spectrum-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-900);
+ --spectrum-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900);
+ --spectrum-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-900);
+ --spectrum-actionbutton-background-color-disabled-selected: var(--spectrum-transparent-black-200);
+
--spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-400);
--spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500);
--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600);
--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500);
-
- --spectrum-actionbutton-content-color-default: var(--spectrum-black);
- --spectrum-actionbutton-content-color-hover: var(--spectrum-black);
- --spectrum-actionbutton-content-color-down: var(--spectrum-black);
- --spectrum-actionbutton-content-color-focus: var(--spectrum-black);
-
- --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
- --spectrum-actionbutton-background-color-disabled: transparent;
- --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
- --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
-
- &.is-selected {
- --mod-actionbutton-background-color-default: var(--spectrum-transparent-black-800);
- --mod-actionbutton-background-color-hover: var(--spectrum-transparent-black-900);
- --mod-actionbutton-background-color-down: var(--spectrum-transparent-black-900);
- --mod-actionbutton-background-color-focus: var(--spectrum-transparent-black-900);
-
- --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
- --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
- --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
- --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-white));
-
- --mod-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
- --mod-actionbutton-border-color-disabled: transparent;
- }
}
&.spectrum-ActionButton--staticWhite {
- --spectrum-actionbutton-background-color-default: transparent;
--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300);
--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400);
--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300);
+ --spectrum-actionbutton-background-color-default-selected: var(--spectrum-transparent-white-800);
+ --spectrum-actionbutton-background-color-hover-selected: var(--spectrum-transparent-white-900);
+ --spectrum-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-900);
+ --spectrum-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-900);
+ --spectrum-actionbutton-background-color-disabled-selected: var(--spectrum-transparent-white-200);
+
--spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-400);
--spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500);
--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600);
--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500);
-
- --spectrum-actionbutton-content-color-default: var(--spectrum-white);
- --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
- --spectrum-actionbutton-content-color-down: var(--spectrum-white);
- --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
-
- --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
- --spectrum-actionbutton-background-color-disabled: transparent;
- --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
- --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
-
- &.is-selected {
- --mod-actionbutton-background-color-default: var(--spectrum-transparent-white-800);
- --mod-actionbutton-background-color-hover: var(--spectrum-transparent-white-900);
- --mod-actionbutton-background-color-down: var(--spectrum-transparent-white-900);
- --mod-actionbutton-background-color-focus: var(--spectrum-transparent-white-900);
-
- --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
- --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
- --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
- --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-black));
-
- --mod-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
- --mod-actionbutton-border-color-disabled: transparent;
- }
}
}
}
diff --git a/components/actiongroup/CHANGELOG.md b/components/actiongroup/CHANGELOG.md
index 8695b359b47..ab128e87b3b 100644
--- a/components/actiongroup/CHANGELOG.md
+++ b/components/actiongroup/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.1.2
### Patch Changes
diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css
index ddcf03b57d9..31f7188868b 100644
--- a/components/actiongroup/index.css
+++ b/components/actiongroup/index.css
@@ -11,32 +11,16 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-ActionGroup {
- --spectrum-actiongroup-button-spacing-reset: 0;
- --spectrum-actiongroup-border-radius-reset: 0;
- --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100);
-}
-
-.spectrum-ActionGroup--sizeXS,
-.spectrum-ActionGroup--sizeS {
- --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-75);
- --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75);
-}
-
-.spectrum-ActionGroup--sizeM,
-.spectrum-ActionGroup--sizeL,
-.spectrum-ActionGroup--sizeXL {
- --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-100);
- --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-100);
-}
+@import "./themes/spectrum-two.css";
.spectrum-ActionGroup {
display: flex;
flex-wrap: wrap;
gap: var(--mod-actiongroup-horizontal-spacing-regular, var(--spectrum-actiongroup-horizontal-spacing-regular));
+ margin-block: var(--mod-actiongroup-margin-block, var(--mod-actiongroup-margin-block-start, 0) var(--mod-actiongroup-margin-block-end, 0));
+ margin-inline: var(--mod-actiongroup-margin-inline, var(--mod-actiongroup-margin-inline-start, 0) var(--mod-actiongroup-margin-inline-end, 0));
+
.spectrum-ActionGroup-item {
flex-shrink: 0;
@@ -54,9 +38,9 @@
}
.spectrum-ActionGroup--vertical {
- gap: var(--mod-actiongroup-vertical-spacing-regular, var(--spectrum-actiongroup-vertical-spacing-regular));
display: inline-flex;
flex-direction: column;
+ gap: var(--mod-actiongroup-vertical-spacing-regular, var(--spectrum-actiongroup-vertical-spacing-regular));
}
.spectrum-ActionGroup--compact {
@@ -68,8 +52,8 @@
.spectrum-ActionGroup-item {
position: relative;
- border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
z-index: 0;
+ border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
&:first-child {
/* Action button passthrough styling */
diff --git a/components/actiongroup/metadata/actiongroup.yml b/components/actiongroup/metadata/actiongroup.yml
deleted file mode 100644
index 46112eb386f..00000000000
--- a/components/actiongroup/metadata/actiongroup.yml
+++ /dev/null
@@ -1,456 +0,0 @@
-name: Action group
-SpectrumSiteSlug: https://spectrum.adobe.com/page/action-group/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### New Action Button markup
- Action Button requires `.spectrum-ActionButton-icon` class on icons nested inside of Action Button.
-
- ### Change workflow icon size to medium
- Replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
-
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: actiongroup-horizontal
- name: Horizontal
- markup: |
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
- - id: actiongroup-horizontal-icon-only
- name: Horizontal (icon-only)
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: actiongroup-quiet-icon-only
- name: Horizontal (quiet, icon-only)
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: actiongroup-horizontal-compact
- name: Horizontal (compact)
- markup: |
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
- - id: actiongroup-horizontal-compact-icon-only
- name: Horizontal (compact, icon-only)
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: actiongroup-horizontal-compact-quiet-icon-only
- name: Horizontal (compact, quiet, icon-only)
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: actiongroup-vertical
- name: Vertical
- markup: |
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
- - id: actiongroup-vertical-icon-only
- name: Vertical (icon-only)
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: actiongroup-vertical-quiet-icon-only
- name: Vertical (icon-only, quiet)
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: actiongroup-vertical-compact
- name: Vertical (compact)
- markup: |
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
- - id: actiongroup-vertical-compact-icon-only
- name: Vertical (compact, icon-only)
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: actiongroup-vertical-compact-quiet-icon-only
- name: Vertical (icon-only, compact, quiet)
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: actiongroup-justified
- name: Justified
- markup: |
-
-
-
-
- Align Top
-
-
-
-
- Align Bottom
-
-
-
- - id: actiongroup-justified-icon-only
- name: Justified (icon-only)
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: actiongroup-justified-compact-icon-only
- name: Justified (compact, icon-only)
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: actiongroup-sizing-horizontal
- name: Horizontal Sizing
- markup: |
-
-
-
XS
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
-
-
S
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
-
-
M
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
-
-
L
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
-
-
XL
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
-
-
-
XS
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
-
-
S
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
-
-
M
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
-
-
L
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
-
-
XL
-
-
- Edit
-
-
- Copy
-
-
- Delete
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-ActionGroup {
+ --spectrum-actiongroup-gap-size-compact: 0;
+
+ /* account for button border */
+ --spectrum-actiongroup-horizontal-spacing-compact: -1px;
+ --spectrum-actiongroup-vertical-spacing-compact: -1px;
+
+ --spectrum-actiongroup-button-spacing-reset: 0;
+ --spectrum-actiongroup-border-radius-reset: 0;
+ --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100);
+
+ &.spectrum-ActionGroup--sizeXS,
+ &.spectrum-ActionGroup--sizeS {
+ --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-75);
+ --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75);
+ }
+
+ &,
+ &.spectrum-ActionGroup--sizeM,
+ &.spectrum-ActionGroup--sizeL,
+ &.spectrum-ActionGroup--sizeXL {
+ --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-100);
+ --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-100);
+ }
+ }
+}
diff --git a/components/actiongroup/themes/spectrum.css b/components/actiongroup/themes/spectrum.css
index ff6e1cab39d..5a930981122 100644
--- a/components/actiongroup/themes/spectrum.css
+++ b/components/actiongroup/themes/spectrum.css
@@ -11,12 +11,7 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-ActionGroup {
- --spectrum-actiongroup-gap-size-compact: 0;
- /* account for button border */
- --spectrum-actiongroup-horizontal-spacing-compact: -1px;
- --spectrum-actiongroup-vertical-spacing-compact: -1px;
- }
-}
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/actionmenu/CHANGELOG.md b/components/actionmenu/CHANGELOG.md
index 7d1059a0541..8847750ad9e 100644
--- a/components/actionmenu/CHANGELOG.md
+++ b/components/actionmenu/CHANGELOG.md
@@ -1,5 +1,217 @@
# Change Log
+## 7.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/menu@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/menu@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/menu@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/menu@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/menu@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/menu@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/menu@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+ - @spectrum-css/menu@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/menu@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/menu@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/menu@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/menu@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/menu@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/menu@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 6.1.3
### Patch Changes
diff --git a/components/actionmenu/metadata/actionmenu.yml b/components/actionmenu/metadata/actionmenu.yml
deleted file mode 100644
index d8832196366..00000000000
--- a/components/actionmenu/metadata/actionmenu.yml
+++ /dev/null
@@ -1,73 +0,0 @@
-name: Action menu
-description: Simply an action button with a Popover. Note that the `is-selected` class should be applied to the button when the menu is open. Also note the accessibility roles are different for an action menu vs a normal menu.
-sections:
- - name: Migration Guide
- description: |
- ### New Action Button markup
- Action Button requires `.spectrum-ActionButton-icon` class on icons nested inside of Action Button.
-
- ### Change workflow icon size to medium
- Replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
-examples:
- - id: actionmenu
- name: Standard
- markup: |
-
-
-
- More Actions
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- More Actions
-
diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json
index 97d19a3e9ad..24e11031f6e 100644
--- a/components/actionmenu/package.json
+++ b/components/actionmenu/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/actionmenu",
- "version": "6.1.3",
+ "version": "7.0.0-s2-foundations.13",
"description": "The Spectrum CSS actionmenu component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -32,12 +32,6 @@
"stories/*",
"metadata/*"
],
- "keywords": [
- "spectrum",
- "css",
- "design system",
- "adobe"
- ],
"peerDependencies": {
"@spectrum-css/actionbutton": ">=6",
"@spectrum-css/icon": ">=7",
@@ -52,6 +46,12 @@
"@spectrum-css/popover": "workspace:^",
"@spectrum-css/tokens": "workspace:^"
},
+ "keywords": [
+ "spectrum",
+ "css",
+ "design system",
+ "adobe"
+ ],
"publishConfig": {
"access": "public"
}
diff --git a/components/alertbanner/CHANGELOG.md b/components/alertbanner/CHANGELOG.md
index 2c6648e22b9..8434a003c9f 100644
--- a/components/alertbanner/CHANGELOG.md
+++ b/components/alertbanner/CHANGELOG.md
@@ -1,5 +1,223 @@
# Change Log
+## 3.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.14
+ - @spectrum-css/divider@4.0.0-s2-foundations.13
+ - @spectrum-css/button@14.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 3.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9956547`](https://github.com/adobe/spectrum-css/commit/9956547660d88ddfe77f9fc641b2036ab5b33efc) Thanks [@pfulton](https://github.com/pfulton)! - Express color updated for alert banner component
+
+## 3.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.12
+ - @spectrum-css/divider@4.0.0-s2-foundations.12
+ - @spectrum-css/button@14.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 3.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.11
+ - @spectrum-css/divider@4.0.0-s2-foundations.11
+ - @spectrum-css/button@14.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 3.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.10
+ - @spectrum-css/divider@4.0.0-s2-foundations.10
+ - @spectrum-css/button@14.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 3.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.9
+ - @spectrum-css/divider@4.0.0-s2-foundations.9
+ - @spectrum-css/button@14.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 3.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.8
+ - @spectrum-css/divider@4.0.0-s2-foundations.8
+ - @spectrum-css/button@14.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 3.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.7
+ - @spectrum-css/divider@4.0.0-s2-foundations.7
+ - @spectrum-css/button@14.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 3.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.6
+ - @spectrum-css/divider@4.0.0-s2-foundations.6
+ - @spectrum-css/button@14.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 3.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.5
+ - @spectrum-css/divider@4.0.0-s2-foundations.5
+ - @spectrum-css/button@14.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 3.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.4
+ - @spectrum-css/divider@4.0.0-s2-foundations.4
+ - @spectrum-css/button@14.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 3.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.3
+ - @spectrum-css/divider@4.0.0-s2-foundations.3
+ - @spectrum-css/button@14.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 3.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.2
+ - @spectrum-css/divider@4.0.0-s2-foundations.2
+ - @spectrum-css/button@14.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 3.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.1
+ - @spectrum-css/divider@4.0.0-s2-foundations.1
+ - @spectrum-css/button@14.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 3.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.0
+ - @spectrum-css/divider@4.0.0-s2-foundations.0
+ - @spectrum-css/button@14.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 2.2.2
### Patch Changes
diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css
index af4976e1afa..6a0011e190a 100644
--- a/components/alertbanner/index.css
+++ b/components/alertbanner/index.css
@@ -11,30 +11,9 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-AlertBanner {
- --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
- --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
- --spectrum-alert-banner-size: auto;
- --spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
- --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);
-
- /* spacing */
- --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
- --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300);
- --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
- /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- internal reference below; todo solve for this edge case in the plugin */
- --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300);
- --spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon);
- --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text);
- --spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text);
-
- /* colors */
- --spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default);
- --spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default);
- --spectrum-alert-banner-font-color: var(--spectrum-white);
-
/* settings for nested Divider */
--mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider));
--mod-divider-vertical-height: auto;
@@ -49,9 +28,7 @@
--mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
--mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
--mod-closebutton-align-self: flex-start;
-}
-.spectrum-AlertBanner {
display: none;
justify-content: space-between;
inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size));
@@ -59,20 +36,20 @@
min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height));
font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size));
color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
- background-color: var(--mod-alert-banner-netural-background, var(--spectrum-alert-banner-netural-background));
+ background-color: var(--mod-alert-banner-neutral-background, var(--spectrum-alert-banner-neutral-background));
border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
&.is-open {
display: flex;
}
-}
-.spectrum-AlertBanner--info {
- background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background));
-}
+ &.spectrum-AlertBanner--info {
+ background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background));
+ }
-.spectrum-AlertBanner--negative {
- background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background));
+ &.spectrum-AlertBanner--negative {
+ background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background));
+ }
}
.spectrum-AlertBanner-body {
diff --git a/components/alertbanner/metadata/alertbanner.yml b/components/alertbanner/metadata/alertbanner.yml
deleted file mode 100644
index bd73acb5039..00000000000
--- a/components/alertbanner/metadata/alertbanner.yml
+++ /dev/null
@@ -1,117 +0,0 @@
-name: Alert banner
-description: Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/alert-banner/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
-examples:
- - id: alertbanner
- name: Neutral
- description: Standard Alert Banners
- markup: |
-
-
-
-
Your trial has expired
-
-
-
-
-
-
-
-
-
Your trial has expired
-
-
- Action
-
-
-
-
-
-
-
-
-
Your trial has expired. Please purchase to continue. Your work has been saved and is ready for you to open again once you have purchased the software.
-
-
- Action
-
-
-
-
-
-
-
-
-
Your trial will expire in 3 days
-
-
- Action
-
-
-
-
-
-
-
-
-
Connection interupted. Check your network to continue.
-
-
- Try Again
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-AlertBanner {
+ --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default);
+
+ --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
+ --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
+ --spectrum-alert-banner-size: auto;
+ --spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
+ --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);
+
+ /* spacing */
+ --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
+ --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300);
+ --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
+ --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300);
+ --spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon);
+ --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text);
+ --spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text);
+
+ /* colors */
+ --spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default);
+ --spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default);
+ --spectrum-alert-banner-font-color: var(--spectrum-white);
+ }
+}
diff --git a/components/alertbanner/themes/spectrum.css b/components/alertbanner/themes/spectrum.css
index adcf854d6cb..dd4a5af0289 100644
--- a/components/alertbanner/themes/spectrum.css
+++ b/components/alertbanner/themes/spectrum.css
@@ -11,8 +11,13 @@
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
@container (--system: spectrum) {
.spectrum-AlertBanner {
- --spectrum-alert-banner-netural-background: var(--spectrum-neutral-subdued-background-color-default);
+ --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default);
}
}
diff --git a/components/alertdialog/CHANGELOG.md b/components/alertdialog/CHANGELOG.md
index 4ef5edb3fc1..25117c23363 100644
--- a/components/alertdialog/CHANGELOG.md
+++ b/components/alertdialog/CHANGELOG.md
@@ -1,5 +1,231 @@
# Change Log
+## 3.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.13
+ - @spectrum-css/underlay@5.0.0-s2-foundations.13
+ - @spectrum-css/divider@4.0.0-s2-foundations.13
+ - @spectrum-css/modal@6.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 3.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.12
+ - @spectrum-css/underlay@5.0.0-s2-foundations.12
+ - @spectrum-css/divider@4.0.0-s2-foundations.12
+ - @spectrum-css/modal@6.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 3.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.11
+ - @spectrum-css/underlay@5.0.0-s2-foundations.11
+ - @spectrum-css/divider@4.0.0-s2-foundations.11
+ - @spectrum-css/modal@6.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 3.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.10
+ - @spectrum-css/underlay@5.0.0-s2-foundations.10
+ - @spectrum-css/divider@4.0.0-s2-foundations.10
+ - @spectrum-css/modal@6.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 3.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.9
+ - @spectrum-css/underlay@5.0.0-s2-foundations.9
+ - @spectrum-css/divider@4.0.0-s2-foundations.9
+ - @spectrum-css/modal@6.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 3.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.8
+ - @spectrum-css/underlay@5.0.0-s2-foundations.8
+ - @spectrum-css/divider@4.0.0-s2-foundations.8
+ - @spectrum-css/modal@6.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 3.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.7
+ - @spectrum-css/underlay@5.0.0-s2-foundations.7
+ - @spectrum-css/divider@4.0.0-s2-foundations.7
+ - @spectrum-css/modal@6.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 3.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.6
+ - @spectrum-css/underlay@5.0.0-s2-foundations.6
+ - @spectrum-css/divider@4.0.0-s2-foundations.6
+ - @spectrum-css/modal@6.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 3.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.5
+ - @spectrum-css/underlay@5.0.0-s2-foundations.5
+ - @spectrum-css/divider@4.0.0-s2-foundations.5
+ - @spectrum-css/modal@6.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 3.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.4
+ - @spectrum-css/underlay@5.0.0-s2-foundations.4
+ - @spectrum-css/divider@4.0.0-s2-foundations.4
+ - @spectrum-css/modal@6.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 3.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.3
+ - @spectrum-css/underlay@5.0.0-s2-foundations.3
+ - @spectrum-css/divider@4.0.0-s2-foundations.3
+ - @spectrum-css/modal@6.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 3.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.2
+ - @spectrum-css/underlay@5.0.0-s2-foundations.2
+ - @spectrum-css/divider@4.0.0-s2-foundations.2
+ - @spectrum-css/modal@6.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 3.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.1
+ - @spectrum-css/underlay@5.0.0-s2-foundations.1
+ - @spectrum-css/divider@4.0.0-s2-foundations.1
+ - @spectrum-css/modal@6.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 3.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.0
+ - @spectrum-css/modal@6.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+ - @spectrum-css/underlay@5.0.0-s2-foundations.0
+
## 2.1.3
### Patch Changes
diff --git a/components/alertdialog/index.css b/components/alertdialog/index.css
index 14e6e555f2c..488f7a430a1 100644
--- a/components/alertdialog/index.css
+++ b/components/alertdialog/index.css
@@ -11,40 +11,12 @@
* governing permissions and limitations under the License.
*/
-.spectrum-AlertDialog {
- --spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width);
- --spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width);
- --spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100);
-
- /* color */
- --spectrum-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color);
- --spectrum-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color);
-
- /* typography */
- --spectrum-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
- --spectrum-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style);
- --spectrum-alert-dialog-title-font-size: var(--spectrum-alert-dialog-title-size);
- --spectrum-alert-dialog-title-line-height: var(--spectrum-heading-line-height);
- --spectrum-alert-dialog-title-color: var(--spectrum-heading-color);
-
- --spectrum-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style);
- --spectrum-alert-dialog-body-font-size: var(--spectrum-alert-dialog-description-size);
- --spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-100);
- --spectrum-alert-dialog-body-color: var(--spectrum-body-color);
-
- /* spacing */
- --spectrum-alert-dialog-title-to-divider: var(--spectrum-spacing-200);
- --spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300);
- --spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300);
+@import "./themes/spectrum-two.css";
+.spectrum-AlertDialog {
/* mods for nested component */
--mod-buttongroup-justify-content: flex-end;
-}
-.spectrum-AlertDialog {
display: flex;
box-sizing: border-box;
inline-size: fit-content;
diff --git a/components/alertdialog/metadata/alertdialog.yml b/components/alertdialog/metadata/alertdialog.yml
deleted file mode 100644
index 72a8337d7c7..00000000000
--- a/components/alertdialog/metadata/alertdialog.yml
+++ /dev/null
@@ -1,202 +0,0 @@
-name: Alert dialog
-SpectrumSiteSlug: https://spectrum.adobe.com/page/alertdialog/
-examples:
- - id: alertdialog
- name: Confirmation
- description: This is the default variant for alert dialogs. Use a confirmation variant for asking a user to confirm a choice.
- demoClassName: spectrum-CSSExample-example--overlay
- markup: |
- Open Alert Dialog
-
-
-
-
Enable Smart Filters?
-
-
Smart filters are nondestructive and will preserve your original images.
-
-
- Cancel
-
-
- Enable
-
-
-
-
-
Open Alert Dialog Open Alert Dialog
-
-
-
-
-
-
-
This format has not been verified and may not be viewable for some users. Do you want to continue publishing?
-
-
- Cancel
-
-
- Continue
-
-
-
-
-
Open Alert Dialog
-
-
-
-
-
-
An error occured while sharing your project. Please verify the email address and try again.
-
-
- Continue
-
-
-
-
-
Open Alert Dialog
-
-
-
-
-
-
-
Are you sure you want to delete the 3 selected documents?
-
-
- Cancel
-
-
- Delete
-
-
-
-
-
Open Alert Dialog Open Alert Dialog
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-AlertDialog {
+ --spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width);
+ --spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width);
+ --spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100);
+
+ /* color */
+ --spectrum-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color);
+ --spectrum-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color);
+
+ /* typography */
+ --spectrum-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
+ --spectrum-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style);
+ --spectrum-alert-dialog-title-font-size: var(--spectrum-alert-dialog-title-size);
+ --spectrum-alert-dialog-title-line-height: var(--spectrum-heading-line-height);
+ --spectrum-alert-dialog-title-color: var(--spectrum-heading-color);
+
+ --spectrum-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
+ --spectrum-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style);
+ --spectrum-alert-dialog-body-font-size: var(--spectrum-alert-dialog-description-size);
+ --spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-100);
+ --spectrum-alert-dialog-body-color: var(--spectrum-body-color);
+
+ /* spacing */
+ --spectrum-alert-dialog-title-to-divider: var(--spectrum-spacing-200);
+ --spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300);
+ --spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300);
+ }
+}
diff --git a/tokens/dist/css/components/spectrum/tabs.css b/components/alertdialog/themes/spectrum.css
similarity index 87%
rename from tokens/dist/css/components/spectrum/tabs.css
rename to components/alertdialog/themes/spectrum.css
index 18cd20ef3ce..5a930981122 100644
--- a/tokens/dist/css/components/spectrum/tabs.css
+++ b/components/alertdialog/themes/spectrum.css
@@ -11,6 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum {
- --system-spectrum-tabs-font-weight: var(--spectrum-default-font-weight);
-}
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/asset/CHANGELOG.md b/components/asset/CHANGELOG.md
index 87e4c702162..202d6501d69 100644
--- a/components/asset/CHANGELOG.md
+++ b/components/asset/CHANGELOG.md
@@ -1,5 +1,161 @@
# Change Log
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/asset/index.css b/components/asset/index.css
index 3c30287e688..2f7a4333419 100644
--- a/components/asset/index.css
+++ b/components/asset/index.css
@@ -11,6 +11,8 @@
* governing permissions and limitations under the License.
*/
+@import "./themes/spectrum-two.css";
+
.spectrum-Asset {
display: flex;
align-items: center;
@@ -24,7 +26,7 @@
max-inline-size: 100%;
max-block-size: 100%;
object-fit: contain;
- transition: opacity var(--spectrum-animation-duration-100);
+ transition: opacity var(--spectrum-asset-transition-duration);
}
.spectrum-Asset-folder,
@@ -35,16 +37,16 @@
}
.spectrum-Asset-folderBackground {
- fill: var(--highcontrast-asset-folder-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-300)));
+ fill: var(--highcontrast-asset-folder-background-color, var(--mod-asset-folder-background-color, var(--spectrum-asset-folder-background-color)));
}
.spectrum-Asset-fileBackground {
- fill: var(--highcontrast-asset-file-background-color, var(--mod-asset-file-background-color, var(--spectrum-gray-50)));
+ fill: var(--highcontrast-asset-file-background-color, var(--mod-asset-file-background-color, var(--spectrum-asset-file-background-color)));
}
.spectrum-Asset-folderOutline,
.spectrum-Asset-fileOutline {
- fill: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500));
+ fill: var(--mod-asset-icon-outline-color, var(--spectrum-asset-icon-outline-color));
}
@media (forced-colors: active) {
diff --git a/components/asset/metadata/asset.yml b/components/asset/metadata/asset.yml
deleted file mode 100644
index a52d54c9980..00000000000
--- a/components/asset/metadata/asset.yml
+++ /dev/null
@@ -1,26 +0,0 @@
-name: Asset
-examples:
- - id: asset
- name: Image
- markup: |
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/asset/themes/spectrum-two.css b/components/asset/themes/spectrum-two.css
new file mode 100644
index 00000000000..76ac6f0f85b
--- /dev/null
+++ b/components/asset/themes/spectrum-two.css
@@ -0,0 +1,21 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Asset {
+ --spectrum-asset-transition-duration: var(--spectrum-animation-duration-100);
+ --spectrum-asset-folder-background-color: var(--spectrum-gray-200);
+ --spectrum-asset-file-background-color: var(--spectrum-gray-25);
+ --spectrum-asset-icon-outline-color: var(--spectrum-gray-500);
+ }
+}
diff --git a/components/asset/themes/spectrum.css b/components/asset/themes/spectrum.css
new file mode 100644
index 00000000000..dd4f4c986db
--- /dev/null
+++ b/components/asset/themes/spectrum.css
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Asset {
+ --spectrum-asset-folder-background-color: var(--spectrum-gray-300);
+ --spectrum-asset-file-background-color: var(--spectrum-gray-50);
+ --spectrum-asset-icon-outline-color: var(--spectrum-gray-500);
+ }
+}
diff --git a/components/assetcard/CHANGELOG.md b/components/assetcard/CHANGELOG.md
index 56bced50a11..857f08a16f2 100644
--- a/components/assetcard/CHANGELOG.md
+++ b/components/assetcard/CHANGELOG.md
@@ -1,5 +1,193 @@
# Change Log
+## 5.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.16
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 5.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9df688a`](https://github.com/adobe/spectrum-css/commit/9df688a6a83be5f13bc4e0e732fed294af08bf3f) Thanks [@pfulton](https://github.com/pfulton)! - Replaces raw RGB value/direct token references with abstracted custom properties in theme/spectrum-two.css files
+
+ Asset card
+
+ - removes raw rgb value for box-shadow from `index.css`
+ - creates new `--spectrum-assetcard-selectionindicator-box-shadow-color`
+ in `themes/spectrum-two.css` with previous rgb value to use instead
+
+ Well
+
+ - removes `--spectrum-gray-800-rgb` for background-color from `index.css`
+ - creates new `--spectrum-well-background-color` in `themes/spectrum-two.css`
+ with previous `--spectrum-gray-800-rgb` property to use instead
+
+## 5.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 5.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 5.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 5.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 5.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 5.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 5.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.6
+
+## 5.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 5.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 5.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 5.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 5.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 5.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 4.1.3
### Patch Changes
diff --git a/components/assetcard/index.css b/components/assetcard/index.css
index 3664978d933..d688bbf4c9b 100644
--- a/components/assetcard/index.css
+++ b/components/assetcard/index.css
@@ -11,85 +11,9 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
/* outer container, unstyled */
-.spectrum-AssetCard {
- /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */
- --spectrum-assetcard-asset-size: 224px;
- --spectrum-assetcard-background-color: var(--spectrum-gray-200);
- --spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100);
- --spectrum-assetcard-asset-container-border-size: 1px;
- --spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300);
-
- --spectrum-assetcard-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-assetcard-border-color: transparent;
- --spectrum-assetcard-border-color-hover: var(--spectrum-gray-500);
- --spectrum-assetcard-border-color-down: var(--spectrum-gray-600);
-
- --spectrum-assetcard-focus-ring-gap: 5px;
- --spectrum-assetcard-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-
- /* selection indicator - checkbox or number */
- --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9);
- --spectrum-assetcard-selectionindicator-size: var(--spectrum-card-selection-background-size);
- --spectrum-assetcard-selectionindicator-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-assetcard-selectionindicator-offset-y: 4px;
- --spectrum-assetcard-selectionindicator-blur: 6px;
- --spectrum-assetcard-selectionindicator-color: var(--spectrum-white);
- --spectrum-assetcard-selectionindicator-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-assetcard-selectionindicator-font-size: var(--spectrum-font-size-400);
-
- /* title */
- --spectrum-assetcard-title-text-color: var(--spectrum-gray-900);
- --spectrum-assetcard-title-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-assetcard-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
- --spectrum-assetcard-title-font-style: var(--spectrum-default-font-style);
- --spectrum-assetcard-title-line-height: var(--spectrum-line-height-100);
- --spectrum-assetcard-title-letter-spacing: 0;
-
- /* header content */
- --spectrum-assetcard-header-content-text-color: var(--spectrum-gray-900);
- --spectrum-assetcard-header-content-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-assetcard-header-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-assetcard-header-content-font-style: var(--spectrum-default-font-style);
- --spectrum-assetcard-header-content-line-height: var(--spectrum-line-height-200);
- --spectrum-assetcard-header-content-letter-spacing: 0;
-
- /* content */
- --spectrum-assetcard-content-text-color: var(--spectrum-gray-700);
- --spectrum-assetcard-content-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-assetcard-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-assetcard-content-font-style: var(--spectrum-default-font-style);
- --spectrum-assetcard-content-line-height: var(--spectrum-line-height-200);
- --spectrum-assetcard-content-letter-spacing: 0;
-
- --spectrum-assetcard-content-margin-block-start: var(--spectrum-spacing-75);
-
- &:lang(zh),
- &:lang(ja),
- &:lang(ko) {
- --spectrum-assetcard-title-font-family: var(--spectrum-cjk-font-family-stack);
- --spectrum-assetcard-title-font-style: var(--spectrum-heading-cjk-font-style);
- --spectrum-assetcard-title-font-weight: var(--spectrum-heading-cjk-font-weight);
- --spectrum-assetcard-title-font-size: var(--spectrum-heading-cjk-size-xs);
- --spectrum-assetcard-title-line-height: var(--spectrum-heading-cjk-line-height);
- --spectrum-assetcard-title-letter-spacing: var(--spectrum-cjk-letter-spacing);
-
- --spectrum-assetcard-header-content-font-family: var(--spectrum-cjk-font-family-stack);
- --spectrum-assetcard-header-content-font-weight: var(--spectrum-body-cjk-font-weight);
- --spectrum-assetcard-header-content-line-height: var(--spectrum-body-cjk-line-height);
- --spectrum-assetcard-header-content-font-style: var(--spectrum-body-cjk-font-style);
- --spectrum-assetcard-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing);
-
- --spectrum-assetcard-content-font-family: var(--spectrum-cjk-font-family-stack);
- --spectrum-assetcard-content-font-weight: var(--spectrum-body-cjk-font-weight);
- --spectrum-assetcard-content-line-height: var(--spectrum-body-cjk-line-height);
- --spectrum-assetcard-content-font-style: var(--spectrum-body-cjk-font-style);
- --spectrum-assetcard-content-letter-spacing: var(--spectrum-cjk-letter-spacing);
- }
-}
-
.spectrum-AssetCard {
/* contain selection indicator */
position: relative;
@@ -101,6 +25,8 @@
cursor: pointer;
+ outline: none;
+
&.is-selected,
&:hover,
&:focus-visible {
@@ -120,8 +46,6 @@
}
}
- outline: none;
-
&:focus-visible {
.spectrum-AssetCard-assetContainer::before {
opacity: 1;
@@ -182,9 +106,7 @@
inline-size: 100%;
block-size: 100%;
- transition:
- inline-size var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out,
- block-size var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out;
+ transition: inline-size var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out, block-size var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out;
border-radius: calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px);
}
@@ -272,7 +194,7 @@
border-radius: var(--mod-assetcard-selectionindicator-border-radius, var(--spectrum-assetcard-selectionindicator-border-radius));
- box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0, 0, 0, 15%);
+ box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) var(--spectrum-assetcard-selectionindicator-box-shadow-color);
color: var(--highcontrast-assetcard-selectionindicator-color, var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color)));
font-weight: var(--mod-assetcard-selectionindicator-font-weight, var(--spectrum-assetcard-selectionindicator-font-weight));
diff --git a/components/assetcard/metadata/assetcard.yml b/components/assetcard/metadata/assetcard.yml
deleted file mode 100644
index a146a0e0fe2..00000000000
--- a/components/assetcard/metadata/assetcard.yml
+++ /dev/null
@@ -1,215 +0,0 @@
-name: Asset card
-SpectrumSiteSlug: https://spectrum.adobe.com/page/cards/
-description: |
- - Set the `--spectrum-assetcard-asset-size` custom property to the size you want to display the asset as
-sections:
- - name: Migration Guide
- description: |
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: assetcard-portrait
- name: Portrait
- markup: |
-
-
-
-
-
-
-
- Image
-
-
-
-
-
-
-
-
-
- Image
-
-
-
-
-
-
-
-
-
- Image
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Image
-
-
-
-
-
-
-
-
- Image
-
-
-
-
-
-
-
-
-
- Image
-
-
-
-
-
-
-
-
-
- Image
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-AssetCard {
+ --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%);
+
+ /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */
+ --spectrum-assetcard-asset-size: 224px;
+ --spectrum-assetcard-background-color: var(--spectrum-gray-75);
+ --spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100);
+ --spectrum-assetcard-asset-container-border-size: 1px;
+ --spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300);
+
+ --spectrum-assetcard-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-assetcard-border-color: transparent;
+ --spectrum-assetcard-border-color-hover: var(--spectrum-gray-500);
+ --spectrum-assetcard-border-color-down: var(--spectrum-gray-600);
+
+ --spectrum-assetcard-focus-ring-gap: 5px;
+ --spectrum-assetcard-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+
+ /* selection indicator - checkbox or number */
+ --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9);
+ --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300);
+ --spectrum-assetcard-selectionindicator-size: var(--spectrum-card-selection-background-size);
+ --spectrum-assetcard-selectionindicator-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-assetcard-selectionindicator-offset-y: 4px;
+ --spectrum-assetcard-selectionindicator-blur: 6px;
+ --spectrum-assetcard-selectionindicator-color: var(--spectrum-white);
+ --spectrum-assetcard-selectionindicator-font-weight: var(--spectrum-bold-font-weight);
+ --spectrum-assetcard-selectionindicator-font-size: var(--spectrum-font-size-400);
+
+ /* title */
+ --spectrum-assetcard-title-text-color: var(--spectrum-gray-900);
+ --spectrum-assetcard-title-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-assetcard-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
+ --spectrum-assetcard-title-font-style: var(--spectrum-default-font-style);
+ --spectrum-assetcard-title-line-height: var(--spectrum-line-height-100);
+ --spectrum-assetcard-title-letter-spacing: 0;
+
+ /* header content */
+ --spectrum-assetcard-header-content-text-color: var(--spectrum-gray-900);
+ --spectrum-assetcard-header-content-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-assetcard-header-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
+ --spectrum-assetcard-header-content-font-style: var(--spectrum-default-font-style);
+ --spectrum-assetcard-header-content-line-height: var(--spectrum-line-height-200);
+ --spectrum-assetcard-header-content-letter-spacing: 0;
+
+ /* content */
+ --spectrum-assetcard-content-text-color: var(--spectrum-gray-700);
+ --spectrum-assetcard-content-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-assetcard-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
+ --spectrum-assetcard-content-font-style: var(--spectrum-default-font-style);
+ --spectrum-assetcard-content-line-height: var(--spectrum-line-height-200);
+ --spectrum-assetcard-content-letter-spacing: 0;
+
+ --spectrum-assetcard-content-margin-block-start: var(--spectrum-spacing-75);
+
+ &:lang(zh),
+ &:lang(ja),
+ &:lang(ko) {
+ --spectrum-assetcard-title-font-family: var(--spectrum-cjk-font-family-stack);
+ --spectrum-assetcard-title-font-style: var(--spectrum-heading-cjk-font-style);
+ --spectrum-assetcard-title-font-weight: var(--spectrum-heading-cjk-font-weight);
+ --spectrum-assetcard-title-font-size: var(--spectrum-heading-cjk-size-xs);
+ --spectrum-assetcard-title-line-height: var(--spectrum-heading-cjk-line-height);
+ --spectrum-assetcard-title-letter-spacing: var(--spectrum-cjk-letter-spacing);
+
+ --spectrum-assetcard-header-content-font-family: var(--spectrum-cjk-font-family-stack);
+ --spectrum-assetcard-header-content-font-weight: var(--spectrum-body-cjk-font-weight);
+ --spectrum-assetcard-header-content-line-height: var(--spectrum-body-cjk-line-height);
+ --spectrum-assetcard-header-content-font-style: var(--spectrum-body-cjk-font-style);
+ --spectrum-assetcard-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing);
+
+ --spectrum-assetcard-content-font-family: var(--spectrum-cjk-font-family-stack);
+ --spectrum-assetcard-content-font-weight: var(--spectrum-body-cjk-font-weight);
+ --spectrum-assetcard-content-line-height: var(--spectrum-body-cjk-line-height);
+ --spectrum-assetcard-content-font-style: var(--spectrum-body-cjk-font-style);
+ --spectrum-assetcard-content-letter-spacing: var(--spectrum-cjk-letter-spacing);
+ }
+ }
+}
diff --git a/components/assetcard/themes/spectrum.css b/components/assetcard/themes/spectrum.css
index 6104113334b..2ab40afaa2a 100644
--- a/components/assetcard/themes/spectrum.css
+++ b/components/assetcard/themes/spectrum.css
@@ -11,8 +11,18 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-AssetCard {
- --spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 10%);
+ --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%);
+
+ --spectrum-assetcard-background-color: var(--spectrum-gray-200);
+
+ --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9);
+ --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-200);
}
}
diff --git a/components/assetlist/CHANGELOG.md b/components/assetlist/CHANGELOG.md
index 70a3604d890..9bb301eb38f 100644
--- a/components/assetlist/CHANGELOG.md
+++ b/components/assetlist/CHANGELOG.md
@@ -1,5 +1,189 @@
# Change Log
+## 7.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 6.2.0
### Minor Changes
diff --git a/components/assetlist/index.css b/components/assetlist/index.css
index 69d89fd9e21..23d20183e4a 100644
--- a/components/assetlist/index.css
+++ b/components/assetlist/index.css
@@ -11,40 +11,16 @@
* governing permissions and limitations under the License.
*/
-.spectrum-AssetList {
- --spectrum-assetlist-width: 272px;
- --spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100);
-
- /* item */
- --spectrum-assetlist-item-height: var(--spectrum-spacing-600);
- --spectrum-assetlist-item-padding-inline-start: var(--spectrum-spacing-300);
- --spectrum-assetlist-item-padding-inline-end: var(--spectrum-spacing-300);
- --spectrum-assetlist-item-margin-block-end: var(--spectrum-spacing-75);
- --spectrum-assetlist-item-border-radius: var(--spectrum-spacing-75);
- --spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100);
- --spectrum-assetlist-item-font-size: var(--spectrum-font-size-100);
- --spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300);
- --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200);
-
- /* thumbnail */
- --spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400);
- --spectrum-assetlist-thumbnail-height: var(--spectrum-spacing-400);
- --spectrum-assetlist-thumbnail-margin-inline-start: var(--spectrum-spacing-100);
-
- /* label */
- --spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100);
- --spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default);
-
- &:dir(rtl) {
- --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
- }
-}
+@import "./themes/spectrum-two.css";
.spectrum-AssetList {
margin-block-start: 0;
margin-block-end: 0;
padding: 0;
+
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
}
.spectrum-AssetList-item {
@@ -173,13 +149,14 @@
@media (forced-colors: active) {
.spectrum-AssetList-item {
- forced-color-adjust: none;
--highcontrast-assetlist-border-color-key-focus: Highlight;
--highcontrast-assetlist-item-background-color-hover: Highlight;
--highcontrast-assetlist-item-background-color-selected-hover: Highlight;
--highcontrast-assetlist-label-color: ButtonText;
--highcontrast-assetlist-item-background-color-selected: SelectedItem;
+ forced-color-adjust: none;
+
&:hover,
&.is-selected,
&.is-navigated {
diff --git a/components/assetlist/metadata/assetlist.yml b/components/assetlist/metadata/assetlist.yml
deleted file mode 100644
index 39d72733122..00000000000
--- a/components/assetlist/metadata/assetlist.yml
+++ /dev/null
@@ -1,81 +0,0 @@
-id: asset-list
-name: Asset list
-description: "A selectable list of Assets, often used inside of Miller Columns."
-examples:
- - id: asset-list
- name: Standard
- markup: |
-
diff --git a/components/assetlist/metadata/metadata.json b/components/assetlist/metadata/metadata.json
index 2de86c31204..4a4d1f31381 100644
--- a/components/assetlist/metadata/metadata.json
+++ b/components/assetlist/metadata/metadata.json
@@ -82,8 +82,8 @@
"global": [
"--spectrum-animation-duration-100",
"--spectrum-font-size-100",
+ "--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
"--spectrum-logical-rotation",
"--spectrum-neutral-content-color-default",
"--spectrum-regular-font-weight",
diff --git a/components/assetlist/package.json b/components/assetlist/package.json
index 70908a75220..3484d611d60 100644
--- a/components/assetlist/package.json
+++ b/components/assetlist/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/assetlist",
- "version": "6.2.0",
+ "version": "7.0.0-s2-foundations.13",
"description": "The Spectrum CSS assetlist component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js
index f7b1552151a..8834beb297c 100644
--- a/components/assetlist/stories/template.js
+++ b/components/assetlist/stories/template.js
@@ -7,6 +7,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const AssetListItem = ({
rootClass = "spectrum-AssetList-item",
@@ -20,34 +23,20 @@ export const AssetListItem = ({
isSelected = false,
isBranch = false,
onclick = () => {},
-}) => html`
-
- ${when(isSelectable, () =>
- Checkbox({
- size: "m",
- isChecked: isSelected,
- ariaLabelledby,
- id: checkboxId,
- customClasses: [`${rootClass}Selector`],
- }))}
- ${when(
- image,
- () =>
- html`${label} `)}
- ${when(!isSelectable && !isBranch, () =>
+} = {}) => {
+ return html`
+
+ ${when(isSelectable, () =>
Checkbox({
size: "m",
isChecked: isSelected,
@@ -55,14 +44,30 @@ export const AssetListItem = ({
id: checkboxId,
customClasses: [`${rootClass}Selector`],
}))}
- ${when(isBranch, () =>
- Icon({
- iconName: "ChevronRight100",
- customClasses: [`${rootClass}ChildIndicator`],
- })
- )}
-
-`;
+ ${when(
+ image,
+ () =>
+ html`${label} `)}
+ ${when(!isSelectable && !isBranch, () =>
+ Checkbox({
+ size: "m",
+ isChecked: isSelected,
+ ariaLabelledby,
+ id: checkboxId,
+ customClasses: [`${rootClass}Selector`],
+ }))}
+ ${when(isBranch, () =>
+ Icon({
+ iconName: "ChevronRight100",
+ customClasses: [`${rootClass}ChildIndicator`],
+ })
+ )}
+
+ `;
+};
export const Template = ({
rootClass = "spectrum-AssetList",
diff --git a/components/assetlist/themes/express.css b/components/assetlist/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/assetlist/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/assetlist/themes/spectrum-two.css b/components/assetlist/themes/spectrum-two.css
new file mode 100644
index 00000000000..d0ebc859b12
--- /dev/null
+++ b/components/assetlist/themes/spectrum-two.css
@@ -0,0 +1,40 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-AssetList {
+ --spectrum-assetlist-width: 272px;
+ --spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100);
+
+ /* item */
+ --spectrum-assetlist-item-height: var(--spectrum-spacing-600);
+ --spectrum-assetlist-item-padding-inline-start: var(--spectrum-spacing-300);
+ --spectrum-assetlist-item-padding-inline-end: var(--spectrum-spacing-300);
+ --spectrum-assetlist-item-margin-block-end: var(--spectrum-spacing-75);
+ --spectrum-assetlist-item-border-radius: var(--spectrum-spacing-75);
+ --spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100);
+ --spectrum-assetlist-item-font-size: var(--spectrum-font-size-100);
+ --spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight);
+ --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200);
+ --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100);
+
+ /* thumbnail */
+ --spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400);
+ --spectrum-assetlist-thumbnail-height: var(--spectrum-spacing-400);
+ --spectrum-assetlist-thumbnail-margin-inline-start: var(--spectrum-spacing-100);
+
+ /* label */
+ --spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100);
+ --spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default);
+ }
+}
diff --git a/components/assetlist/themes/spectrum.css b/components/assetlist/themes/spectrum.css
new file mode 100644
index 00000000000..dd22cb5b9ad
--- /dev/null
+++ b/components/assetlist/themes/spectrum.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-AssetList {
+ --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300);
+ --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200);
+ }
+}
diff --git a/components/avatar/CHANGELOG.md b/components/avatar/CHANGELOG.md
index 85a6040a76e..2dcc02be310 100644
--- a/components/avatar/CHANGELOG.md
+++ b/components/avatar/CHANGELOG.md
@@ -1,5 +1,161 @@
# Change Log
+## 8.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 7.2.0
### Minor Changes
diff --git a/components/avatar/index.css b/components/avatar/index.css
index 11f36117cef..c919d6422a3 100644
--- a/components/avatar/index.css
+++ b/components/avatar/index.css
@@ -11,65 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-Avatar {
- --spectrum-avatar-color-opacity: 1;
-
- --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
- --spectrum-avatar-block-size: var(--spectrum-avatar-size-100);
-
- --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size);
-
- --spectrum-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- --spectrum-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled);
-}
-
-.spectrum-Avatar--size50 {
- --spectrum-avatar-inline-size: var(--spectrum-avatar-size-50);
- --spectrum-avatar-block-size: var(--spectrum-avatar-size-50);
-}
-
-.spectrum-Avatar--size75 {
- --spectrum-avatar-inline-size: var(--spectrum-avatar-size-75);
- --spectrum-avatar-block-size: var(--spectrum-avatar-size-75);
-}
-
-.spectrum-Avatar--size100 {
- --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
- --spectrum-avatar-block-size: var(--spectrum-avatar-size-100);
-}
-
-.spectrum-Avatar--size200 {
- --spectrum-avatar-inline-size: var(--spectrum-avatar-size-200);
- --spectrum-avatar-block-size: var(--spectrum-avatar-size-200);
-}
-
-.spectrum-Avatar--size300 {
- --spectrum-avatar-inline-size: var(--spectrum-avatar-size-300);
- --spectrum-avatar-block-size: var(--spectrum-avatar-size-300);
-}
-
-.spectrum-Avatar--size400 {
- --spectrum-avatar-inline-size: var(--spectrum-avatar-size-400);
- --spectrum-avatar-block-size: var(--spectrum-avatar-size-400);
-}
-
-.spectrum-Avatar--size500 {
- --spectrum-avatar-inline-size: var(--spectrum-avatar-size-500);
- --spectrum-avatar-block-size: var(--spectrum-avatar-size-500);
-}
-
-.spectrum-Avatar--size600 {
- --spectrum-avatar-inline-size: var(--spectrum-avatar-size-600);
- --spectrum-avatar-block-size: var(--spectrum-avatar-size-600);
-}
-
-.spectrum-Avatar--size700 {
- --spectrum-avatar-inline-size: var(--spectrum-avatar-size-700);
- --spectrum-avatar-block-size: var(--spectrum-avatar-size-700);
-}
+@import "./themes/spectrum-two.css";
@media (forced-colors: active) {
.spectrum-Avatar {
@@ -78,6 +20,8 @@
}
.spectrum-Avatar {
+ --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size);
+
display: inline-block;
position: relative;
inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size));
diff --git a/components/avatar/metadata/avatar.yml b/components/avatar/metadata/avatar.yml
deleted file mode 100644
index e3d62fded37..00000000000
--- a/components/avatar/metadata/avatar.yml
+++ /dev/null
@@ -1,116 +0,0 @@
-name: Avatar
-status: Verified
-description: |
- An image representing a user.
-
- An avatar image is wrapped in a link that uses the `.spectrum-Avatar-link`
- class by default, however, an avatar may also be used without a link.
- When disabled the avatar should only be used without a link.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/avatar/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### A div wrapper is required for avatar
- ```
-
-
-
-
-
700
-
-
-
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/avatar/themes/spectrum-two.css b/components/avatar/themes/spectrum-two.css
new file mode 100644
index 00000000000..2de84de0bd6
--- /dev/null
+++ b/components/avatar/themes/spectrum-two.css
@@ -0,0 +1,72 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Avatar {
+ --spectrum-avatar-color-opacity: 1;
+
+ --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
+ --spectrum-avatar-block-size: var(--spectrum-avatar-size-100);
+
+ --spectrum-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ --spectrum-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled);
+ }
+
+ .spectrum-Avatar--size50 {
+ --spectrum-avatar-inline-size: var(--spectrum-avatar-size-50);
+ --spectrum-avatar-block-size: var(--spectrum-avatar-size-50);
+ }
+
+ .spectrum-Avatar--size75 {
+ --spectrum-avatar-inline-size: var(--spectrum-avatar-size-75);
+ --spectrum-avatar-block-size: var(--spectrum-avatar-size-75);
+ }
+
+ .spectrum-Avatar--size100 {
+ --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
+ --spectrum-avatar-block-size: var(--spectrum-avatar-size-100);
+ }
+
+ .spectrum-Avatar--size200 {
+ --spectrum-avatar-inline-size: var(--spectrum-avatar-size-200);
+ --spectrum-avatar-block-size: var(--spectrum-avatar-size-200);
+ }
+
+ .spectrum-Avatar--size300 {
+ --spectrum-avatar-inline-size: var(--spectrum-avatar-size-300);
+ --spectrum-avatar-block-size: var(--spectrum-avatar-size-300);
+ }
+
+ .spectrum-Avatar--size400 {
+ --spectrum-avatar-inline-size: var(--spectrum-avatar-size-400);
+ --spectrum-avatar-block-size: var(--spectrum-avatar-size-400);
+ }
+
+ .spectrum-Avatar--size500 {
+ --spectrum-avatar-inline-size: var(--spectrum-avatar-size-500);
+ --spectrum-avatar-block-size: var(--spectrum-avatar-size-500);
+ }
+
+ .spectrum-Avatar--size600 {
+ --spectrum-avatar-inline-size: var(--spectrum-avatar-size-600);
+ --spectrum-avatar-block-size: var(--spectrum-avatar-size-600);
+ }
+
+ .spectrum-Avatar--size700 {
+ --spectrum-avatar-inline-size: var(--spectrum-avatar-size-700);
+ --spectrum-avatar-block-size: var(--spectrum-avatar-size-700);
+ }
+}
diff --git a/components/avatar/themes/spectrum.css b/components/avatar/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/avatar/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/badge/CHANGELOG.md b/components/badge/CHANGELOG.md
index bac8ce05241..6cea36a9cdf 100644
--- a/components/badge/CHANGELOG.md
+++ b/components/badge/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 5.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 5.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 5.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 5.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 5.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 5.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 5.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 5.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 5.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 5.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 5.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 5.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 5.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 5.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 4.1.3
### Patch Changes
diff --git a/components/badge/index.css b/components/badge/index.css
index 62d7b037fe7..62bb0bb0012 100644
--- a/components/badge/index.css
+++ b/components/badge/index.css
@@ -11,142 +11,12 @@
* governing permissions and limitations under the License.
*/
-.spectrum-Badge {
- /* badge styling for all t-shirt sizes and all themes */
- --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100);
-
- /* label text styles for all t-shirt sizes and all themes */
- --spectrum-badge-line-height: var(--spectrum-line-height-100);
- --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);
-
- /* text and icon color default white for all t-shirt sizes and all themes */
- --spectrum-badge-label-icon-color: var(--spectrum-white);
-
- /* background color default for all t-shirt sizes and all themes */
- --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
-
- /* semantic background colors for all t-shirt sizes and all themes */
- --spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default);
- --spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default);
- --spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default);
- --spectrum-badge-background-color-positive: var(--spectrum-positive-background-color-default);
- --spectrum-badge-background-color-notice: var(--spectrum-notice-background-color-default);
-
- /* non-semantic background colors */
- --spectrum-badge-background-color-gray: var(--spectrum-gray-background-color-default);
- --spectrum-badge-background-color-red: var(--spectrum-red-background-color-default);
- --spectrum-badge-background-color-orange: var(--spectrum-orange-background-color-default);
- --spectrum-badge-background-color-yellow: var(--spectrum-yellow-background-color-default);
- --spectrum-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default);
- --spectrum-badge-background-color-celery: var(--spectrum-celery-background-color-default);
- --spectrum-badge-background-color-green: var(--spectrum-green-background-color-default);
- --spectrum-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default);
- --spectrum-badge-background-color-cyan: var(--spectrum-cyan-background-color-default);
- --spectrum-badge-background-color-blue: var(--spectrum-blue-background-color-default);
- --spectrum-badge-background-color-indigo: var(--spectrum-indigo-background-color-default);
- --spectrum-badge-background-color-purple: var(--spectrum-purple-background-color-default);
- --spectrum-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default);
- --spectrum-badge-background-color-magenta: var(--spectrum-magenta-background-color-default);
-
- /*** DEFAULT STYLE fallbacks if no t-shirt size - uses Medium t-shirt styles ***/
- /* badge height - fallback if no t-shirt size */
- --spectrum-badge-height: var(--spectrum-component-height-100);
-
- /* label font size - fallback if no t-shirt size */
- --spectrum-badge-font-size: var(--spectrum-font-size-100);
-
- /* label spacing - fallback if no t-shirt size */
- --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100);
- --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100);
- --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100);
-
- /* icon size - fallback if no t-shirt size */
- --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100);
-
- /* icon spacing - fallback if no t-shirt size */
- --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100);
- --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100);
- --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100);
- --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100);
-}
-
-/* text and icon color is black for these background colors */
-.spectrum-Badge--orange,
-.spectrum-Badge--yellow,
-.spectrum-Badge--chartreuse,
-.spectrum-Badge--celery {
- --spectrum-badge-label-icon-color: var(--spectrum-black);
-}
-
-/* dark theme all non-semantic colors are black */
-.spectrum-Badge--gray,
-.spectrum-Badge--red,
-.spectrum-Badge--green,
-.spectrum-Badge--seafoam,
-.spectrum-Badge--cyan,
-.spectrum-Badge--blue,
-.spectrum-Badge--indigo,
-.spectrum-Badge--purple,
-.spectrum-Badge--fuchsia,
-.spectrum-Badge--magenta {
- --spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary);
-}
-
-.spectrum-Badge--sizeS {
- --spectrum-badge-height: var(--spectrum-component-height-75);
-
- /* label */
- --spectrum-badge-font-size: var(--spectrum-font-size-75);
- --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-75);
- --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-75);
- --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-75);
-
- /* icon */
- --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-75);
- --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-75);
- --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-75);
- --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-75);
- --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75);
-}
-
-.spectrum-Badge--sizeL {
- --spectrum-badge-height: var(--spectrum-component-height-100);
-
- /* label */
- --spectrum-badge-font-size: var(--spectrum-font-size-200);
- --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-200);
- --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-200);
- --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-200);
-
- /* icon */
- --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-200);
- --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-200);
- --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-200);
- --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-200);
- --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-200);
-}
-
-.spectrum-Badge--sizeXL {
- --spectrum-badge-height: var(--spectrum-component-height-100);
-
- /* label */
- --spectrum-badge-font-size: var(--spectrum-font-size-300);
- --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-300);
- --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-300);
- --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-300);
-
- /* icon */
- --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-300);
- --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-300);
- --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-300);
- --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-300);
- --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300);
-}
+@import "./themes/spectrum-two.css";
/* windows high contrast mode */
@media (forced-colors: active) {
.spectrum-Badge {
- border-color: CanvasText; /* stylelint-disable-line declaration-property-value-no-unknown */
+ border-color: CanvasText; /* stylelint-disable-line declaration-property-value-no-unknown -- Windows High Contrast mode */
}
}
diff --git a/components/badge/metadata/badge.yml b/components/badge/metadata/badge.yml
deleted file mode 100644
index d60ec93ef8d..00000000000
--- a/components/badge/metadata/badge.yml
+++ /dev/null
@@ -1,256 +0,0 @@
-name: Badge
-SpectrumSiteSlug: https://spectrum.adobe.com/page/badge/
-description: |
- - Badge may include a label with no icon, an icon with no label, or an icon with a label
- - Badge t-shirt sizes correspond to icon sizes
- - Fixed positioning impacts the border radius of the badge component
-
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Badge now includes icon and label elements
- - Label and icon elements must be nested inside a parent container of class `.spectrum-Badge` in order to achieve the correct layout and wrapping behavior.
- - Layout of Badge is applied with a display of inline-flex, allowing badge to display as inline while the child elements for the label and icon utilize flexbox for layout.
-
- ### Badge now includes fixed positioning
- - This document represents the border radius style which applies to each position.
- - border radius is 0 along the fixed edge of the component.
- - The actual component position is not represented in this document.
-
-examples:
- - id: badge
- name: Standard
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
- - id: badge-non-semantic
- name: Non-Semantic
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: badge-sizing
- name: Sizing
- markup: |
- Label Only
- Icon Only
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Icon with Label
-
-
-
-
Label Text Wrapping Behavior
-
-
-
Fixed Inline Start
-
-
-
-
-
-
-
-
Fixed Block Start
-
-
-
-
-
-
-
({ ...a, [c]: true }), {}),
- })}
- id=${ifDefined(id)}
- style=${styleMap(customStyles)}
- >
- ${when(iconName, () =>
- Icon({
- iconName,
- customClasses: [
- ...(typeof label === "undefined"
- ? [`${rootClass}-icon--no-label`]
- : []),
- `${rootClass}-icon`,
- ],
- })
- )}
- ${when(label, () => html`
${label}
`)}
-
- ${variants.map((variant) => html`
-
- ${Template({ ...args, variant, label: capitalize(variant) }, context)}
-
- `)}
-
({ ...a, [c]: true }), {}),
+ })}
+ id=${ifDefined(id)}
+ style=${styleMap(customStyles)}
+ >
+ ${when(iconName, () =>
+ Icon({
+ iconName,
+ customClasses: [
+ ...(typeof label === "undefined"
+ ? [`${rootClass}-icon--no-label`]
+ : []),
+ `${rootClass}-icon`,
+ ],
+ })
+ )}
+ ${when(label, () => html`
${label}
`)}
+
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/badge/themes/spectrum-two.css b/components/badge/themes/spectrum-two.css
new file mode 100644
index 00000000000..7e1af1bd9d6
--- /dev/null
+++ b/components/badge/themes/spectrum-two.css
@@ -0,0 +1,146 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Badge {
+ /* badge styling for all t-shirt sizes and all themes */
+ --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100);
+
+ /* label text styles for all t-shirt sizes and all themes */
+ --spectrum-badge-line-height: var(--spectrum-line-height-100);
+ --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+ /* text and icon color default white for all t-shirt sizes and all themes */
+ --spectrum-badge-label-icon-color: var(--spectrum-white);
+
+ /* background color default for all t-shirt sizes and all themes */
+ --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
+
+ /* semantic background colors for all t-shirt sizes and all themes */
+ --spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default);
+ --spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default);
+ --spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default);
+ --spectrum-badge-background-color-positive: var(--spectrum-positive-background-color-default);
+ --spectrum-badge-background-color-notice: var(--spectrum-notice-background-color-default);
+
+ /* non-semantic background colors */
+ --spectrum-badge-background-color-gray: var(--spectrum-gray-background-color-default);
+ --spectrum-badge-background-color-red: var(--spectrum-red-background-color-default);
+ --spectrum-badge-background-color-orange: var(--spectrum-orange-background-color-default);
+ --spectrum-badge-background-color-yellow: var(--spectrum-yellow-background-color-default);
+ --spectrum-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default);
+ --spectrum-badge-background-color-celery: var(--spectrum-celery-background-color-default);
+ --spectrum-badge-background-color-green: var(--spectrum-green-background-color-default);
+ --spectrum-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default);
+ --spectrum-badge-background-color-cyan: var(--spectrum-cyan-background-color-default);
+ --spectrum-badge-background-color-blue: var(--spectrum-blue-background-color-default);
+ --spectrum-badge-background-color-indigo: var(--spectrum-indigo-background-color-default);
+ --spectrum-badge-background-color-purple: var(--spectrum-purple-background-color-default);
+ --spectrum-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default);
+ --spectrum-badge-background-color-magenta: var(--spectrum-magenta-background-color-default);
+
+ /*** DEFAULT STYLE fallbacks if no t-shirt size - uses Medium t-shirt styles ***/
+ /* badge height - fallback if no t-shirt size */
+ --spectrum-badge-height: var(--spectrum-component-height-100);
+
+ /* label font size - fallback if no t-shirt size */
+ --spectrum-badge-font-size: var(--spectrum-font-size-100);
+
+ /* label spacing - fallback if no t-shirt size */
+ --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100);
+ --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100);
+ --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100);
+
+ /* icon size - fallback if no t-shirt size */
+ --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100);
+
+ /* icon spacing - fallback if no t-shirt size */
+ --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100);
+ --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100);
+ --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100);
+ --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100);
+ }
+
+ /* text and icon color is black for these background colors */
+ .spectrum-Badge--orange,
+ .spectrum-Badge--yellow,
+ .spectrum-Badge--chartreuse,
+ .spectrum-Badge--celery {
+ --spectrum-badge-label-icon-color: var(--spectrum-black);
+ }
+
+ /* dark theme all non-semantic colors are black */
+ .spectrum-Badge--gray,
+ .spectrum-Badge--red,
+ .spectrum-Badge--green,
+ .spectrum-Badge--seafoam,
+ .spectrum-Badge--cyan,
+ .spectrum-Badge--blue,
+ .spectrum-Badge--indigo,
+ .spectrum-Badge--purple,
+ .spectrum-Badge--fuchsia,
+ .spectrum-Badge--magenta {
+ --spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary);
+ }
+
+ .spectrum-Badge--sizeS {
+ --spectrum-badge-height: var(--spectrum-component-height-75);
+
+ /* label */
+ --spectrum-badge-font-size: var(--spectrum-font-size-75);
+ --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-75);
+ --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-75);
+ --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-75);
+
+ /* icon */
+ --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-75);
+ --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-75);
+ --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-75);
+ --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-75);
+ --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75);
+ }
+
+ .spectrum-Badge--sizeL {
+ --spectrum-badge-height: var(--spectrum-component-height-100);
+
+ /* label */
+ --spectrum-badge-font-size: var(--spectrum-font-size-200);
+ --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-200);
+ --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-200);
+ --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-200);
+
+ /* icon */
+ --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-200);
+ --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-200);
+ --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-200);
+ --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-200);
+ --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-200);
+ }
+
+ .spectrum-Badge--sizeXL {
+ --spectrum-badge-height: var(--spectrum-component-height-100);
+
+ /* label */
+ --spectrum-badge-font-size: var(--spectrum-font-size-300);
+ --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-300);
+ --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-300);
+ --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-300);
+
+ /* icon */
+ --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-300);
+ --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-300);
+ --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-300);
+ --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-300);
+ --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300);
+ }
+}
diff --git a/components/badge/themes/spectrum.css b/components/badge/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/badge/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/breadcrumb/CHANGELOG.md b/components/breadcrumb/CHANGELOG.md
index 7ec32837d16..9070cb8efb5 100644
--- a/components/breadcrumb/CHANGELOG.md
+++ b/components/breadcrumb/CHANGELOG.md
@@ -1,5 +1,191 @@
# Change Log
+## 10.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 10.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 10.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 10.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 10.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 10.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 10.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 10.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2886](https://github.com/adobe/spectrum-css/pull/2886) [`a01ac07`](https://github.com/adobe/spectrum-css/commit/a01ac075ae227574628f72b4c0fe61f1f53792c5) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Ensures disabled breadrumb items behave as expected. They are conditionally left out of tab order depending on their `isDisabled` value. Uses [aria-disabled="true"] and applies `is-disabled` class to `.spectrum-Breadcrumb-itemLink`.
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 10.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 10.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 10.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 10.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 10.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 10.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 9.1.5
### Patch Changes
diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css
index 11e5a68e03b..62c43480804 100644
--- a/components/breadcrumb/index.css
+++ b/components/breadcrumb/index.css
@@ -11,100 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-Breadcrumbs {
- /* block size */
- --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height);
- --spectrum-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact);
- --spectrum-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline);
-
- /* text regular */
- --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-100);
- --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200);
- --spectrum-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-breadcrumbs-font-weight: var(--spectrum-regular-font-weight);
-
- /* text regular active item */
- --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200);
- --spectrum-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack);
- --spectrum-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight);
-
- /* text compact */
- --spectrum-breadcrumbs-font-size-compact: var(--spectrum-font-size-100);
- --spectrum-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack);
- --spectrum-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight);
-
- /* text compact active item */
- --spectrum-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100);
- --spectrum-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack);
- --spectrum-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight);
-
- /* text multiline */
- --spectrum-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75);
- --spectrum-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack);
- --spectrum-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight);
-
- /* text multiline active item */
- --spectrum-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300);
- --spectrum-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack);
- --spectrum-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight);
-
- /* hover, active, focus underline */
- --spectrum-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness);
- --spectrum-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap);
-
- /* space between items */
- --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-text-to-visual-100);
-
- /* vertical spacing */
- --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text);
- --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text);
- --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-icon);
-
- /* compact vertical spacing */
- --spectrum-breadcrumbs-text-spacing-block-start-compact: var(--spectrum-breadcrumbs-top-to-text-compact);
- --spectrum-breadcrumbs-text-spacing-block-end-compact: var(--spectrum-breadcrumbs-bottom-to-text-compact);
- --spectrum-breadcrumbs-icon-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-separator-icon-compact);
-
- /* multiline vertical spacing */
- --spectrum-breadcrumbs-text-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-text-multiline);
- --spectrum-breadcrumbs-text-spacing-block-end-multiline: var(--spectrum-breadcrumbs-bottom-to-text-multiline);
- --spectrum-breadcrumbs-text-spacing-block-between-multiline: var(--spectrum-breadcrumbs-top-text-to-bottom-text); /* vertical between lines */
- --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-separator-icon-multiline);
- --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline); /* vertical between lines */
-
- /* horizontal outer spacing of list */
- --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text);
- --spectrum-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text);
-
- /* menu action button icon spacing */
- --spectrum-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon);
-
- /* action button spacing */
- --spectrum-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu);
- --spectrum-breadcrumbs-action-button-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* compact */
-
- --spectrum-breadcrumbs-action-button-spacing-inline-start: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); /* if icon is first item */
-
- --spectrum-breadcrumbs-action-button-spacing-block-multiline: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* multiline */
- --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); /* multiline */
-
- /* Focus Indicator */
- --spectrum-breadcrumbs-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-
- /* placeholder for border radius for focus indicator */
- --spectrum-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-100);
-
- /* Colors */
- --spectrum-breadcrumbs-text-color: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-breadcrumbs-text-color-current: var(--spectrum-neutral-content-color-default);
- --spectrum-breadcrumbs-text-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-breadcrumbs-separator-color: var(--spectrum-neutral-content-color-default);
- --spectrum-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color);
-
- --spectrum-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color);
-}
+@import "./themes/spectrum-two.css";
/* windows high contrast mode */
@media (forced-colors: active) {
diff --git a/components/breadcrumb/metadata/breadcrumb.yml b/components/breadcrumb/metadata/breadcrumb.yml
deleted file mode 100644
index aac5cae9412..00000000000
--- a/components/breadcrumb/metadata/breadcrumb.yml
+++ /dev/null
@@ -1,379 +0,0 @@
-name: Breadcrumbs
-SpectrumSiteSlug: https://spectrum.adobe.com/page/breadcrumbs/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### New Action Button markup
- Action Button requires `.spectrum-ActionButton-icon` class on icons nested inside of Action Button.
-
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: breadcrumb
- name: Standard
- status: Verified
- markup: |
-
-
-
- - id: breadcrumb-dragged
- name: Dragged
- status: Verified
- markup: |
-
-
-
- - id: breadcrumb-nested
- name: Nested
- status: Verified
- markup: |
-
-
-
- - id: breadcrumb-nested-root
- name: Nested (root visible)
- status: Verified
- markup: |
-
-
-
- - id: breadcrumb-multiline
- name: Multiline
- status: Verified
- markup: |
-
-
-
- - id: breadcrumb-multiline-dragged
- name: Multiline (dragged)
- status: Verified
- markup: |
-
-
-
- - id: breadcrumb-multiline-nested
- name: Multiline Nested
- status: Verified
- markup: |
-
-
-
- - id: breadcrumb-multiline-nested-root
- name: Multiline Nested (root visible)
- status: Verified
- markup: |
-
-
-
- - id: breadcrumb-compact
- name: Compact
- status: Verified
- markup: |
-
-
-
- - id: breadcrumb-compact-nested
- name: Compact Nested
- status: Verified
- markup: |
-
-
-
- - id: breadcrumb-compact-nested-root
- name: Compact Nested (root visible)
- status: Verified
- markup: |
-
-
-
- - id: breadcrumb-disabled
- name: Disabled
- status: Verified
- markup: |
-
-
-
-
-
-
diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json
index 6f320d202e6..a6c46c977cb 100644
--- a/components/breadcrumb/package.json
+++ b/components/breadcrumb/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/breadcrumb",
- "version": "9.1.5",
+ "version": "10.0.0-s2-foundations.13",
"description": "The Spectrum CSS breadcrumb component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/breadcrumb/stories/template.js b/components/breadcrumb/stories/template.js
index 67110657dec..bcfa08d6ce5 100644
--- a/components/breadcrumb/stories/template.js
+++ b/components/breadcrumb/stories/template.js
@@ -6,79 +6,81 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
-export const Template = (
- {
- rootClass = "spectrum-Breadcrumbs",
- customClasses = [],
- items = [],
- variant,
- isDragged = false,
- } = {},
- context = {},
-) => html`
-
- ({ ...a, [c]: true }), {}),
- })}
- >
- ${items.map((item, idx, arr) => {
- const { label, isDisabled, iconName } = item;
- return html`
- ${when(
- iconName,
- () =>
- ActionButton(
+export const Template = ({
+ rootClass = "spectrum-Breadcrumbs",
+ customClasses = [],
+ items = [],
+ variant,
+ isDragged = false,
+} = {}, context = {}) => {
+ return html`
+
+ ({ ...a, [c]: true }), {}),
+ })}
+ >
+ ${items.map((item, idx, arr) => {
+ const { label, isDisabled, iconName } = item;
+ return html`
+ ${when(
+ iconName,
+ () =>
+ ActionButton(
+ {
+ iconName,
+ isDisabled,
+ isQuiet: true,
+ customIconClasses: [`${rootClass}-folder`],
+ size: "m",
+ },
+ context,
+ ),
+ () =>
+ when(
+ idx !== arr.length - 1,
+ () =>
+ html`
+ ${label}
+
`,
+ () =>
+ html`${label} `,
+ ),
+ )}
+ ${when(idx !== arr.length - 1, () =>
+ Icon(
{
- iconName,
- isDisabled,
- isQuiet: true,
- customIconClasses: [`${rootClass}-folder`],
- size: "m",
+ iconName: "ChevronRight100",
+ setName: "ui",
+ customClasses: [`${rootClass}-itemSeparator`],
},
context,
),
- () =>
- when(
- idx !== arr.length - 1,
- () =>
- html`
- ${label}
-
`,
- () =>
- html`${label} `,
- ),
- )}
- ${when(idx !== arr.length - 1, () =>
- Icon(
- {
- iconName: "ChevronRight100",
- setName: "ui",
- customClasses: [`${rootClass}-itemSeparator`],
- },
- context,
- ),
- )}
- `;
- })}
-
-
-`;
+ )}
+ `;
+ })}
+
+
+ `;
+};
diff --git a/components/breadcrumb/themes/express.css b/components/breadcrumb/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/breadcrumb/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/breadcrumb/themes/spectrum-two.css b/components/breadcrumb/themes/spectrum-two.css
new file mode 100644
index 00000000000..43469d54dd8
--- /dev/null
+++ b/components/breadcrumb/themes/spectrum-two.css
@@ -0,0 +1,109 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Breadcrumbs {
+ /* block size */
+ --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height);
+ --spectrum-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact);
+ --spectrum-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline);
+
+ /* text regular */
+ --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-100);
+ --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200);
+ --spectrum-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-breadcrumbs-font-weight: var(--spectrum-regular-font-weight);
+
+ /* text regular active item */
+ --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200);
+ --spectrum-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack);
+ --spectrum-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight);
+
+ /* text compact */
+ --spectrum-breadcrumbs-font-size-compact: var(--spectrum-font-size-100);
+ --spectrum-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack);
+ --spectrum-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight);
+
+ /* text compact active item */
+ --spectrum-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100);
+ --spectrum-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack);
+ --spectrum-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight);
+
+ /* text multiline */
+ --spectrum-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75);
+ --spectrum-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack);
+ --spectrum-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight);
+
+ /* text multiline active item */
+ --spectrum-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300);
+ --spectrum-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack);
+ --spectrum-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight);
+
+ /* hover, active, focus underline */
+ --spectrum-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness);
+ --spectrum-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap);
+
+ /* space between items */
+ --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-text-to-visual-100);
+
+ /* vertical spacing */
+ --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text);
+ --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text);
+ --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-icon);
+
+ /* compact vertical spacing */
+ --spectrum-breadcrumbs-text-spacing-block-start-compact: var(--spectrum-breadcrumbs-top-to-text-compact);
+ --spectrum-breadcrumbs-text-spacing-block-end-compact: var(--spectrum-breadcrumbs-bottom-to-text-compact);
+ --spectrum-breadcrumbs-icon-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-separator-icon-compact);
+
+ /* multiline vertical spacing */
+ --spectrum-breadcrumbs-text-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-text-multiline);
+ --spectrum-breadcrumbs-text-spacing-block-end-multiline: var(--spectrum-breadcrumbs-bottom-to-text-multiline);
+ --spectrum-breadcrumbs-text-spacing-block-between-multiline: var(--spectrum-breadcrumbs-top-text-to-bottom-text); /* vertical between lines */
+ --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-separator-icon-multiline);
+ --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline); /* vertical between lines */
+
+ /* horizontal outer spacing of list */
+ --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text);
+ --spectrum-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text);
+
+ /* menu action button icon spacing */
+ --spectrum-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon);
+
+ /* action button spacing */
+ --spectrum-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu);
+ --spectrum-breadcrumbs-action-button-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* compact */
+
+ --spectrum-breadcrumbs-action-button-spacing-inline-start: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); /* if icon is first item */
+
+ --spectrum-breadcrumbs-action-button-spacing-block-multiline: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* multiline */
+ --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); /* multiline */
+
+ /* Focus Indicator */
+ --spectrum-breadcrumbs-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+
+ /* placeholder for border radius for focus indicator */
+ --spectrum-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-100);
+
+ /* Colors */
+ --spectrum-breadcrumbs-text-color: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-breadcrumbs-text-color-current: var(--spectrum-neutral-content-color-default);
+ --spectrum-breadcrumbs-text-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-breadcrumbs-separator-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color);
+
+ --spectrum-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color);
+ }
+}
diff --git a/components/breadcrumb/themes/spectrum.css b/components/breadcrumb/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/breadcrumb/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/button/CHANGELOG.md b/components/button/CHANGELOG.md
index d851493819a..7eaef637775 100644
--- a/components/button/CHANGELOG.md
+++ b/components/button/CHANGELOG.md
@@ -1,5 +1,206 @@
# Change Log
+## 14.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.13
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 14.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#3049](https://github.com/adobe/spectrum-css/pull/3049) [`db528ce`](https://github.com/adobe/spectrum-css/commit/db528ce0a6f7d817e6124604014faf9f4accfc1e) Thanks [@TarunAdobe](https://github.com/TarunAdobe)! - updated content color for button primary variant and fixes swc-342
+
+### Patch Changes
+
+- Updated dependencies [[`db528ce`](https://github.com/adobe/spectrum-css/commit/db528ce0a6f7d817e6124604014faf9f4accfc1e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.20
+
+## 14.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0da23e5`](https://github.com/adobe/spectrum-css/commit/0da23e5aee4c2f6298e9690a8c8db9bbe11243f8) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-315]: Static white button mods should be applied at component level
+
+## 14.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 14.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 14.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 14.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 14.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 14.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 14.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 14.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 14.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 14.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 14.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 14.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 14.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 13.3.0
### Minor Changes
diff --git a/components/button/index.css b/components/button/index.css
index b8cbb8ef146..aec84120376 100644
--- a/components/button/index.css
+++ b/components/button/index.css
@@ -11,101 +11,17 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
@import "@spectrum-css/commons/basebutton.css";
/* default for all buttons */
-.spectrum-Button {
- --spectrum-button-animation-duration: var(--spectrum-animation-duration-100);
- --spectrum-button-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-button-border-width: var(--spectrum-border-width-200);
- --spectrum-button-line-height: 1.2; /* Hack to keep buttons at 32px */
-
- --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-button-focus-ring-border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap));
- --spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color);
- --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-50);
-
- --mod-progress-circle-position: absolute;
-}
-
-.spectrum-Button--sizeS {
- --spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier));
-
- --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-75);
- --spectrum-button-height: var(--spectrum-component-height-75);
-
- --spectrum-button-font-size: var(--spectrum-font-size-75);
-
- --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width));
- --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75);
- --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width));
- --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75);
- --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small);
- --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small);
- --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75);
- --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75);
-}
-
-.spectrum-Button--sizeM {
- --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier));
-
- --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-100);
- --spectrum-button-height: var(--spectrum-component-height-100);
-
- --spectrum-button-font-size: var(--spectrum-font-size-100);
-
- --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width));
- --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100);
- --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width));
- --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100);
- --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium);
- --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium);
- --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
- --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100);
-}
-
-.spectrum-Button--sizeL {
- --spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier));
-
- --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-200);
- --spectrum-button-height: var(--spectrum-component-height-200);
-
- --spectrum-button-font-size: var(--spectrum-font-size-200);
-
- --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width));
- --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200);
- --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width));
- --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200);
- --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large);
- --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large);
- --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200);
- --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-200);
-}
-
-.spectrum-Button--sizeXL {
- --spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier));
-
- --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-300);
- --spectrum-button-height: var(--spectrum-component-height-300);
-
- --spectrum-button-font-size: var(--spectrum-font-size-300);
-
- --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width));
- --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300);
- --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width));
- --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300);
- --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large);
- --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large);
- --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300);
- --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300);
-}
-
.spectrum-Button {
@extend %spectrum-BaseButton;
@extend %spectrum-ButtonWithFocusRing;
+ /** @passthrough ProgressCircle */
+ --mod-progress-circle-position: absolute;
+
border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius));
border-width: var(--mod-button-border-width, var(--spectrum-button-border-width));
border-style: solid;
@@ -124,9 +40,10 @@
/* let staticColor variants inherit their color */
color: inherit;
- margin-block: var(--mod-button-margin-block);
- margin-inline-end: var(--mod-button-margin-right);
- margin-inline-start: var(--mod-button-margin-left);
+ /* Remove button the margin in Firefox and Safari. */
+ margin-block: var(--mod-button-margin-block, 0);
+ margin-inline-end: var(--mod-button-margin-right, 0);
+ margin-inline-start: var(--mod-button-margin-left, 0);
&:hover,
&:active {
@@ -134,9 +51,9 @@
}
.spectrum-Icon {
- /* Any block-size difference between the intended workflow icon size and actual icon used.
- Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
- --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)));
+ /* Any block-size difference between the intended workflow icon size and actual icon used.
+ Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
+ --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-size, var(--spectrum-button-intended-icon-size)));
margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2)));
@@ -146,11 +63,6 @@
align-self: flex-start;
}
- /* correct focus indicator radius for t-shirt sizing */
- &::after {
- border-radius: calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)));
- }
-
&.spectrum-Button--iconOnly {
min-inline-size: unset;
padding: calc(var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
@@ -174,6 +86,7 @@ a.spectrum-Button {
.spectrum-Button-label {
@extend %spectrum-ButtonLabel;
+
padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
line-height: var(--mod-button-line-height, var(--spectrum-button-line-height));
@@ -202,7 +115,7 @@ a.spectrum-Button {
position: absolute;
inset: 0;
margin: calc((var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + var(--mod-button-border-width, var(--spectrum-button-border-width))) * -1);
- border-radius: var(--mod-button-focus-ring-border-radius, var(--spectrum-button-focus-ring-border-radius));
+ border-radius: var(--mod-button-focus-ring-border-radius, calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))));
transition: box-shadow var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out;
pointer-events: none;
content: "";
@@ -306,11 +219,18 @@ a.spectrum-Button {
/* Static color variants */
-.spectrum-Button--staticWhite {
+.spectrum-Button.spectrum-Button--staticWhite {
--spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color));
+
+ &.is-selected {
+ --spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-default));
+ --spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-hover));
+ --spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-down));
+ --spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-focus));
+ }
}
-.spectrum-Button--staticBlack {
+.spectrum-Button.spectrum-Button--staticBlack {
--spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color));
}
diff --git a/components/button/metadata/button-accent.yml b/components/button/metadata/button-accent.yml
deleted file mode 100644
index 8d3be60b926..00000000000
--- a/components/button/metadata/button-accent.yml
+++ /dev/null
@@ -1,260 +0,0 @@
-name: Button - accent
-status: Verified
-description: The call to action button communicates strong emphasis and is reserved for encouraging critical actions.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Call-to-action-variant
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Fill or Outline class required
- All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class.
-
- ### CTA replaced by Accent with Fill
- Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`.
-
- ### Icon Only
- Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label.
- Provide an `aria-label` on the button itself when using this variant for accessibility.
-
- ### T-shirt sizing
- Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
-
- ### Change workflow icon size
-
- Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed:
-
- | Button classname | Workflow icon classname |
- | -------------------------- | --------------------------------- |
- | `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` |
- | `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` |
- | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` |
- | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` |
-
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: button-accent
- name: Sizing
- markup: |
-
-
-
S
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
M (default)
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
L
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
XL
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
- Button
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
S
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
M (default)
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
L
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
XL
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
- Button
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
here .
- - name: Migration Guide
- description: |
- ### Fill or Outline class required
- All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class.
-
- ### Negative replaced by Negative with Outline
- Replace all `.spectrum-Button--negative` with `.spectrum-Button--negative .spectrum-Button--outline`.
-
- ### Negative Quiet replaced by Negative with Outline
- Replace all `.spectrum-Button--negative .spectrum-Button--quiet` with `.spectrum-Button--negative .spectrum-Button--outline`.
-
- ### Icon Only
- Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label.
- Provide an `aria-label` on the button itself when using this variant for accessibility.
-
- ### T-shirt sizing
- Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
-
- ### Change workflow icon size
-
- Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed:
-
- | Button classname | Workflow icon classname |
- | -------------------------- | --------------------------------- |
- | `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` |
- | `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` |
- | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` |
- | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` |
-
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: button-negative
- name: Sizing
- markup: |
-
-
-
S
-
-
- Delete
-
-
-
-
-
- Delete
-
-
-
-
-
-
-
-
-
M (default)
-
-
- Delete
-
-
-
-
-
- Delete
-
-
-
-
-
-
-
-
-
-
L
-
-
- Delete
-
-
-
-
-
- Delete
-
-
-
-
-
-
-
-
-
-
XL
-
-
- Delete
-
-
-
-
-
- Delete
-
-
-
-
-
-
-
-
- Delete
-
-
-
-
-
- Delete
-
-
-
-
-
-
-
- - id: button-negative-outline
- name: Outline
- markup: |
-
-
-
S
-
-
- Delete
-
-
-
-
-
- Delete
-
-
-
-
-
-
-
-
-
M (default)
-
-
- Delete
-
-
-
-
-
- Delete
-
-
-
-
-
-
-
-
-
-
L
-
-
- Delete
-
-
-
-
-
- Delete
-
-
-
-
-
-
-
-
-
-
XL
-
-
- Delete
-
-
-
-
-
- Delete
-
-
-
-
-
-
-
-
- Delete
-
-
-
-
-
- Delete
-
-
-
-
-
-
diff --git a/components/button/metadata/button-pending.yml b/components/button/metadata/button-pending.yml
deleted file mode 100644
index 1c9fd32a4ec..00000000000
--- a/components/button/metadata/button-pending.yml
+++ /dev/null
@@ -1,1067 +0,0 @@
-name: Button - pending
-status: Verified
-description: The pending button is for indicating that a quick progress action is taking place. In this case, the label and optional icon disappear and a progress circle appears. The progress circle always shows an indeterminate progress. We recommend the use of the `.is-pending` class on the component's parent container, but there is also an option to use an attribute of `pending` instead. Buttons should have the `disabled` attribute when the pending state is applied.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Pending
-examples:
- - id: button-pending
- name: Default (accent, negative, primary, and secondary)
- markup: |
-
-
-
S
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
M (default)
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
L
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
XL
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
S
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
M (default)
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
L
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
XL
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
S
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
M (default)
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
L
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
XL
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
S
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
M (default)
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
L
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
-
XL
-
- Edit
-
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
-
here .
- - name: Migration Guide
- description: |
- ### Fill or Outline class required
- All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class.
-
- ### Primary replaced by Primary with Outline
- Replace all `.spectrum-Button--primary` with `.spectrum-Button--primary .spectrum-Button--outline`.
-
- ### Primary Quiet replaced by Secondary with Outline
- Replace all `.spectrum-Button--primary .spectrum-Button--quiet` with `.spectrum-Button--secondary .spectrum-Button--outline`.
-
- ### Icon Only
- Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label.
- Provide an `aria-label` on the button itself when using this variant for accessibility.
-
- ### T-shirt sizing
- Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
-
- ### Change workflow icon size
-
- Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed:
-
- | Button classname | Workflow icon classname |
- | -------------------------- | --------------------------------- |
- | `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` |
- | `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` |
- | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` |
- | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` |
-
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: button-primary
- name: Sizing
- markup: |
-
-
-
S
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
M (default)
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
L
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
XL
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
- - id: button-primary-outline
- name: Outline
- markup: |
-
-
-
S
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
M (default)
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
L
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
XL
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
diff --git a/components/button/metadata/button-secondary.yml b/components/button/metadata/button-secondary.yml
deleted file mode 100644
index 7b86a380ffc..00000000000
--- a/components/button/metadata/button-secondary.yml
+++ /dev/null
@@ -1,255 +0,0 @@
-name: Button - secondary
-status: Verified
-description: The secondary button is for low emphasis.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Secondary
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Fill or Outline class required
- All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class.
-
- ### Secondary replaced by Secondary with Outline
- Replace all `.spectrum-Button--secondary` with `.spectrum-Button--secondary .spectrum-Button--outline`.
-
- ### Secondary Quiet replaced by Secondary with Outline
- Replace all `.spectrum-Button--secondary .spectrum-Button--quiet` with `.spectrum-Button--secondary .spectrum-Button--outline`.
-
- ### Icon Only
- Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label.
- Provide an `aria-label` on the button itself when using this variant for accessibility.
-
- ### T-shirt sizing
- Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
-
- ### Change workflow icon size
-
- Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed:
-
- | Button classname | Workflow icon classname |
- | -------------------------- | --------------------------------- |
- | `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` |
- | `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` |
- | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` |
- | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` |
-
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: button-secondary
- name: Sizing
- markup: |
-
-
-
S
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
M (default)
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
L
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
XL
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
- - id: button-secondary
- name: Outline
- markup: |
-
-
-
S
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
M (default)
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
L
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
XL
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
diff --git a/components/button/metadata/button-staticcolor.yml b/components/button/metadata/button-staticcolor.yml
deleted file mode 100644
index ae8792424af..00000000000
--- a/components/button/metadata/button-staticcolor.yml
+++ /dev/null
@@ -1,575 +0,0 @@
-name: Button - static color
-status: Verified
-description: "When a button needs to be placed on top of a colored background or a visual, use the over background button. In order to implement this button, you must set the CSS color property of a parent element to the same value as the background the button is placed against."
-SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Over-background
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Fill or Outline class required
- All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class.
-
- ### Over background replaced by StaticWhite with Outline
- Replace all `.spectrum-Button--overBackground` with `.spectrum-Button--staticWhite .spectrum-Button--outline`.
-
- ### Over background Quiet replaced by StaticWhite with Outline
- Replace all `.spectrum-Button--overBackground .spectrum-Button--quiet` with `.spectrum-Button--staticWhite .spectrum-Button--outline`.
-
- ### Icon Only
- Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label.
- Provide an `aria-label` on the button itself when using this variant for accessibility.
-
- ### T-shirt sizing
- Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
-
- ### Change workflow icon size
-
- Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed:
-
- | Button classname | Workflow icon classname |
- | -------------------------- | --------------------------------- |
- | `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` |
- | `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` |
- | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` |
- | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` |
-
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: button-staticcolor
- name: Static White
- markup: |
-
-
-
-
S
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
M (default)
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
L
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
XL
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
- - id: button-staticcolor
- name: Static White - Secondary
- markup: |
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
- - id: button-staticcolor
- name: Static Black
- markup: |
-
-
-
-
S
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
M (default)
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
L
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
XL
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
- - id: button-staticcolor
- name: Static Black - Secondary
- markup: |
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
- - id: button-staticcolor
- name: Static White - Outline
- markup: |
-
-
-
-
S
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
M (default)
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
L
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
XL
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
- - id: button-staticcolor
- name: Static White - Outline, Secondary
- markup: |
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
- - id: button-staticcolor
- name: Static Black - Outline
- markup: |
-
-
-
-
S
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
M (default)
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
L
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
XL
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
-
- - id: button-staticcolor
- name: Static Black - Outline, Secondary
- markup: |
-
-
- Edit
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
diff --git a/components/button/metadata/metadata.json b/components/button/metadata/metadata.json
index c82fc9d582b..7ba7fc4093c 100644
--- a/components/button/metadata/metadata.json
+++ b/components/button/metadata/metadata.json
@@ -11,8 +11,6 @@
".spectrum-Button--sizeM",
".spectrum-Button--sizeS",
".spectrum-Button--sizeXL",
- ".spectrum-Button--staticBlack",
- ".spectrum-Button--staticWhite",
".spectrum-Button-label",
".spectrum-Button-label:empty",
".spectrum-Button.is-disabled",
@@ -140,7 +138,6 @@
"--spectrum-button-edge-to-visual",
"--spectrum-button-edge-to-visual-only",
"--spectrum-button-focus-indicator-color",
- "--spectrum-button-focus-ring-border-radius",
"--spectrum-button-focus-ring-gap",
"--spectrum-button-focus-ring-thickness",
"--spectrum-button-font-size",
@@ -150,6 +147,10 @@
"--spectrum-button-min-width",
"--spectrum-button-minimum-width-multiplier",
"--spectrum-button-padding-label-to-icon",
+ "--spectrum-button-static-white-content-color-default",
+ "--spectrum-button-static-white-content-color-down",
+ "--spectrum-button-static-white-content-color-focus",
+ "--spectrum-button-static-white-content-color-hover",
"--spectrum-button-top-to-icon",
"--spectrum-button-top-to-text",
"--spectrum-button-top-to-text-extra-large",
@@ -212,15 +213,16 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
+ "--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
+ "--spectrum-gray-25",
"--spectrum-gray-400",
+ "--spectrum-gray-50",
"--spectrum-gray-500",
"--spectrum-gray-600",
- "--spectrum-gray-75",
"--spectrum-gray-800",
"--spectrum-gray-900",
- "--spectrum-icon-block-size",
+ "--spectrum-icon-size",
"--spectrum-line-height-100",
"--spectrum-negative-background-color-default",
"--spectrum-negative-background-color-down",
@@ -255,18 +257,18 @@
"--spectrum-text-to-visual-200",
"--spectrum-text-to-visual-300",
"--spectrum-text-to-visual-75",
- "--spectrum-transparent-black-200",
+ "--spectrum-transparent-black-1000",
"--spectrum-transparent-black-300",
"--spectrum-transparent-black-400",
"--spectrum-transparent-black-500",
"--spectrum-transparent-black-600",
- "--spectrum-transparent-black-800",
+ "--spectrum-transparent-black-700",
"--spectrum-transparent-black-900",
- "--spectrum-transparent-white-200",
+ "--spectrum-transparent-white-1000",
"--spectrum-transparent-white-300",
"--spectrum-transparent-white-400",
"--spectrum-transparent-white-500",
- "--spectrum-transparent-white-800",
+ "--spectrum-transparent-white-600",
"--spectrum-transparent-white-900",
"--spectrum-white",
"--spectrum-workflow-icon-size-100",
@@ -275,319 +277,7 @@
"--spectrum-workflow-icon-size-50",
"--spectrum-workflow-icon-size-75"
],
- "system-theme": [
- "--system-spectrum-button-accent-background-color-default",
- "--system-spectrum-button-accent-background-color-disabled",
- "--system-spectrum-button-accent-background-color-down",
- "--system-spectrum-button-accent-background-color-focus",
- "--system-spectrum-button-accent-background-color-hover",
- "--system-spectrum-button-accent-border-color-default",
- "--system-spectrum-button-accent-border-color-disabled",
- "--system-spectrum-button-accent-border-color-down",
- "--system-spectrum-button-accent-border-color-focus",
- "--system-spectrum-button-accent-border-color-hover",
- "--system-spectrum-button-accent-content-color-default",
- "--system-spectrum-button-accent-content-color-disabled",
- "--system-spectrum-button-accent-content-color-down",
- "--system-spectrum-button-accent-content-color-focus",
- "--system-spectrum-button-accent-content-color-hover",
- "--system-spectrum-button-accent-outline-background-color-default",
- "--system-spectrum-button-accent-outline-background-color-disabled",
- "--system-spectrum-button-accent-outline-background-color-down",
- "--system-spectrum-button-accent-outline-background-color-focus",
- "--system-spectrum-button-accent-outline-background-color-hover",
- "--system-spectrum-button-accent-outline-border-color-default",
- "--system-spectrum-button-accent-outline-border-color-disabled",
- "--system-spectrum-button-accent-outline-border-color-down",
- "--system-spectrum-button-accent-outline-border-color-focus",
- "--system-spectrum-button-accent-outline-border-color-hover",
- "--system-spectrum-button-accent-outline-content-color-default",
- "--system-spectrum-button-accent-outline-content-color-disabled",
- "--system-spectrum-button-accent-outline-content-color-down",
- "--system-spectrum-button-accent-outline-content-color-focus",
- "--system-spectrum-button-accent-outline-content-color-hover",
- "--system-spectrum-button-background-color-default",
- "--system-spectrum-button-background-color-disabled",
- "--system-spectrum-button-background-color-down",
- "--system-spectrum-button-background-color-focus",
- "--system-spectrum-button-background-color-hover",
- "--system-spectrum-button-border-color-default",
- "--system-spectrum-button-border-color-disabled",
- "--system-spectrum-button-border-color-down",
- "--system-spectrum-button-border-color-focus",
- "--system-spectrum-button-border-color-hover",
- "--system-spectrum-button-content-color-default",
- "--system-spectrum-button-content-color-disabled",
- "--system-spectrum-button-content-color-down",
- "--system-spectrum-button-content-color-focus",
- "--system-spectrum-button-content-color-hover",
- "--system-spectrum-button-negative-background-color-default",
- "--system-spectrum-button-negative-background-color-disabled",
- "--system-spectrum-button-negative-background-color-down",
- "--system-spectrum-button-negative-background-color-focus",
- "--system-spectrum-button-negative-background-color-hover",
- "--system-spectrum-button-negative-border-color-default",
- "--system-spectrum-button-negative-border-color-disabled",
- "--system-spectrum-button-negative-border-color-down",
- "--system-spectrum-button-negative-border-color-focus",
- "--system-spectrum-button-negative-border-color-hover",
- "--system-spectrum-button-negative-content-color-default",
- "--system-spectrum-button-negative-content-color-disabled",
- "--system-spectrum-button-negative-content-color-down",
- "--system-spectrum-button-negative-content-color-focus",
- "--system-spectrum-button-negative-content-color-hover",
- "--system-spectrum-button-negative-outline-background-color-default",
- "--system-spectrum-button-negative-outline-background-color-disabled",
- "--system-spectrum-button-negative-outline-background-color-down",
- "--system-spectrum-button-negative-outline-background-color-focus",
- "--system-spectrum-button-negative-outline-background-color-hover",
- "--system-spectrum-button-negative-outline-border-color-default",
- "--system-spectrum-button-negative-outline-border-color-disabled",
- "--system-spectrum-button-negative-outline-border-color-down",
- "--system-spectrum-button-negative-outline-border-color-focus",
- "--system-spectrum-button-negative-outline-border-color-hover",
- "--system-spectrum-button-negative-outline-content-color-default",
- "--system-spectrum-button-negative-outline-content-color-disabled",
- "--system-spectrum-button-negative-outline-content-color-down",
- "--system-spectrum-button-negative-outline-content-color-focus",
- "--system-spectrum-button-negative-outline-content-color-hover",
- "--system-spectrum-button-primary-background-color-default",
- "--system-spectrum-button-primary-background-color-disabled",
- "--system-spectrum-button-primary-background-color-down",
- "--system-spectrum-button-primary-background-color-focus",
- "--system-spectrum-button-primary-background-color-hover",
- "--system-spectrum-button-primary-border-color-default",
- "--system-spectrum-button-primary-border-color-disabled",
- "--system-spectrum-button-primary-border-color-down",
- "--system-spectrum-button-primary-border-color-focus",
- "--system-spectrum-button-primary-border-color-hover",
- "--system-spectrum-button-primary-content-color-default",
- "--system-spectrum-button-primary-content-color-disabled",
- "--system-spectrum-button-primary-content-color-down",
- "--system-spectrum-button-primary-content-color-focus",
- "--system-spectrum-button-primary-content-color-hover",
- "--system-spectrum-button-primary-outline-background-color-default",
- "--system-spectrum-button-primary-outline-background-color-disabled",
- "--system-spectrum-button-primary-outline-background-color-down",
- "--system-spectrum-button-primary-outline-background-color-focus",
- "--system-spectrum-button-primary-outline-background-color-hover",
- "--system-spectrum-button-primary-outline-border-color-default",
- "--system-spectrum-button-primary-outline-border-color-disabled",
- "--system-spectrum-button-primary-outline-border-color-down",
- "--system-spectrum-button-primary-outline-border-color-focus",
- "--system-spectrum-button-primary-outline-border-color-hover",
- "--system-spectrum-button-primary-outline-content-color-default",
- "--system-spectrum-button-primary-outline-content-color-disabled",
- "--system-spectrum-button-primary-outline-content-color-down",
- "--system-spectrum-button-primary-outline-content-color-focus",
- "--system-spectrum-button-primary-outline-content-color-hover",
- "--system-spectrum-button-quiet-background-color-default",
- "--system-spectrum-button-quiet-background-color-disabled",
- "--system-spectrum-button-quiet-background-color-down",
- "--system-spectrum-button-quiet-background-color-focus",
- "--system-spectrum-button-quiet-background-color-hover",
- "--system-spectrum-button-quiet-border-color-default",
- "--system-spectrum-button-quiet-border-color-disabled",
- "--system-spectrum-button-quiet-border-color-down",
- "--system-spectrum-button-quiet-border-color-focus",
- "--system-spectrum-button-quiet-border-color-hover",
- "--system-spectrum-button-secondary-background-color-default",
- "--system-spectrum-button-secondary-background-color-disabled",
- "--system-spectrum-button-secondary-background-color-down",
- "--system-spectrum-button-secondary-background-color-focus",
- "--system-spectrum-button-secondary-background-color-hover",
- "--system-spectrum-button-secondary-border-color-default",
- "--system-spectrum-button-secondary-border-color-disabled",
- "--system-spectrum-button-secondary-border-color-down",
- "--system-spectrum-button-secondary-border-color-focus",
- "--system-spectrum-button-secondary-border-color-hover",
- "--system-spectrum-button-secondary-content-color-default",
- "--system-spectrum-button-secondary-content-color-disabled",
- "--system-spectrum-button-secondary-content-color-down",
- "--system-spectrum-button-secondary-content-color-focus",
- "--system-spectrum-button-secondary-content-color-hover",
- "--system-spectrum-button-secondary-outline-background-color-default",
- "--system-spectrum-button-secondary-outline-background-color-disabled",
- "--system-spectrum-button-secondary-outline-background-color-down",
- "--system-spectrum-button-secondary-outline-background-color-focus",
- "--system-spectrum-button-secondary-outline-background-color-hover",
- "--system-spectrum-button-secondary-outline-border-color-default",
- "--system-spectrum-button-secondary-outline-border-color-disabled",
- "--system-spectrum-button-secondary-outline-border-color-down",
- "--system-spectrum-button-secondary-outline-border-color-focus",
- "--system-spectrum-button-secondary-outline-border-color-hover",
- "--system-spectrum-button-secondary-outline-content-color-default",
- "--system-spectrum-button-secondary-outline-content-color-disabled",
- "--system-spectrum-button-secondary-outline-content-color-down",
- "--system-spectrum-button-secondary-outline-content-color-focus",
- "--system-spectrum-button-secondary-outline-content-color-hover",
- "--system-spectrum-button-selected-background-color-default",
- "--system-spectrum-button-selected-background-color-disabled",
- "--system-spectrum-button-selected-background-color-down",
- "--system-spectrum-button-selected-background-color-focus",
- "--system-spectrum-button-selected-background-color-hover",
- "--system-spectrum-button-selected-border-color-default",
- "--system-spectrum-button-selected-border-color-disabled",
- "--system-spectrum-button-selected-border-color-down",
- "--system-spectrum-button-selected-border-color-focus",
- "--system-spectrum-button-selected-border-color-hover",
- "--system-spectrum-button-selected-content-color-default",
- "--system-spectrum-button-selected-content-color-down",
- "--system-spectrum-button-selected-content-color-focus",
- "--system-spectrum-button-selected-content-color-hover",
- "--system-spectrum-button-selected-emphasized-background-color-default",
- "--system-spectrum-button-selected-emphasized-background-color-down",
- "--system-spectrum-button-selected-emphasized-background-color-focus",
- "--system-spectrum-button-selected-emphasized-background-color-hover",
- "--system-spectrum-button-staticblack-background-color-default",
- "--system-spectrum-button-staticblack-background-color-disabled",
- "--system-spectrum-button-staticblack-background-color-down",
- "--system-spectrum-button-staticblack-background-color-focus",
- "--system-spectrum-button-staticblack-background-color-hover",
- "--system-spectrum-button-staticblack-border-color-default",
- "--system-spectrum-button-staticblack-border-color-disabled",
- "--system-spectrum-button-staticblack-border-color-down",
- "--system-spectrum-button-staticblack-border-color-focus",
- "--system-spectrum-button-staticblack-border-color-hover",
- "--system-spectrum-button-staticblack-content-color-default",
- "--system-spectrum-button-staticblack-content-color-disabled",
- "--system-spectrum-button-staticblack-content-color-down",
- "--system-spectrum-button-staticblack-content-color-focus",
- "--system-spectrum-button-staticblack-content-color-hover",
- "--system-spectrum-button-staticblack-focus-indicator-color",
- "--system-spectrum-button-staticblack-outline-background-color-default",
- "--system-spectrum-button-staticblack-outline-background-color-disabled",
- "--system-spectrum-button-staticblack-outline-background-color-down",
- "--system-spectrum-button-staticblack-outline-background-color-focus",
- "--system-spectrum-button-staticblack-outline-background-color-hover",
- "--system-spectrum-button-staticblack-outline-border-color-default",
- "--system-spectrum-button-staticblack-outline-border-color-disabled",
- "--system-spectrum-button-staticblack-outline-border-color-down",
- "--system-spectrum-button-staticblack-outline-border-color-focus",
- "--system-spectrum-button-staticblack-outline-border-color-hover",
- "--system-spectrum-button-staticblack-outline-content-color-default",
- "--system-spectrum-button-staticblack-outline-content-color-disabled",
- "--system-spectrum-button-staticblack-outline-content-color-down",
- "--system-spectrum-button-staticblack-outline-content-color-focus",
- "--system-spectrum-button-staticblack-outline-content-color-hover",
- "--system-spectrum-button-staticblack-outline-focus-indicator-color",
- "--system-spectrum-button-staticblack-quiet-border-color-default",
- "--system-spectrum-button-staticblack-quiet-border-color-disabled",
- "--system-spectrum-button-staticblack-quiet-border-color-down",
- "--system-spectrum-button-staticblack-quiet-border-color-focus",
- "--system-spectrum-button-staticblack-quiet-border-color-hover",
- "--system-spectrum-button-staticblack-secondary-background-color-default",
- "--system-spectrum-button-staticblack-secondary-background-color-disabled",
- "--system-spectrum-button-staticblack-secondary-background-color-down",
- "--system-spectrum-button-staticblack-secondary-background-color-focus",
- "--system-spectrum-button-staticblack-secondary-background-color-hover",
- "--system-spectrum-button-staticblack-secondary-border-color-default",
- "--system-spectrum-button-staticblack-secondary-border-color-disabled",
- "--system-spectrum-button-staticblack-secondary-border-color-down",
- "--system-spectrum-button-staticblack-secondary-border-color-focus",
- "--system-spectrum-button-staticblack-secondary-border-color-hover",
- "--system-spectrum-button-staticblack-secondary-content-color-default",
- "--system-spectrum-button-staticblack-secondary-content-color-disabled",
- "--system-spectrum-button-staticblack-secondary-content-color-down",
- "--system-spectrum-button-staticblack-secondary-content-color-focus",
- "--system-spectrum-button-staticblack-secondary-content-color-hover",
- "--system-spectrum-button-staticblack-secondary-focus-indicator-color",
- "--system-spectrum-button-staticblack-secondary-outline-background-color-default",
- "--system-spectrum-button-staticblack-secondary-outline-background-color-disabled",
- "--system-spectrum-button-staticblack-secondary-outline-background-color-down",
- "--system-spectrum-button-staticblack-secondary-outline-background-color-focus",
- "--system-spectrum-button-staticblack-secondary-outline-background-color-hover",
- "--system-spectrum-button-staticblack-secondary-outline-border-color-default",
- "--system-spectrum-button-staticblack-secondary-outline-border-color-disabled",
- "--system-spectrum-button-staticblack-secondary-outline-border-color-down",
- "--system-spectrum-button-staticblack-secondary-outline-border-color-focus",
- "--system-spectrum-button-staticblack-secondary-outline-border-color-hover",
- "--system-spectrum-button-staticblack-secondary-outline-content-color-default",
- "--system-spectrum-button-staticblack-secondary-outline-content-color-disabled",
- "--system-spectrum-button-staticblack-secondary-outline-content-color-down",
- "--system-spectrum-button-staticblack-secondary-outline-content-color-focus",
- "--system-spectrum-button-staticblack-secondary-outline-content-color-hover",
- "--system-spectrum-button-staticblack-secondary-outline-focus-indicator-color",
- "--system-spectrum-button-staticwhite-background-color-default",
- "--system-spectrum-button-staticwhite-background-color-disabled",
- "--system-spectrum-button-staticwhite-background-color-down",
- "--system-spectrum-button-staticwhite-background-color-focus",
- "--system-spectrum-button-staticwhite-background-color-hover",
- "--system-spectrum-button-staticwhite-border-color-default",
- "--system-spectrum-button-staticwhite-border-color-disabled",
- "--system-spectrum-button-staticwhite-border-color-down",
- "--system-spectrum-button-staticwhite-border-color-focus",
- "--system-spectrum-button-staticwhite-border-color-hover",
- "--system-spectrum-button-staticwhite-content-color-default",
- "--system-spectrum-button-staticwhite-content-color-disabled",
- "--system-spectrum-button-staticwhite-content-color-down",
- "--system-spectrum-button-staticwhite-content-color-focus",
- "--system-spectrum-button-staticwhite-content-color-hover",
- "--system-spectrum-button-staticwhite-focus-indicator-color",
- "--system-spectrum-button-staticwhite-outline-background-color-default",
- "--system-spectrum-button-staticwhite-outline-background-color-disabled",
- "--system-spectrum-button-staticwhite-outline-background-color-down",
- "--system-spectrum-button-staticwhite-outline-background-color-focus",
- "--system-spectrum-button-staticwhite-outline-background-color-hover",
- "--system-spectrum-button-staticwhite-outline-border-color-default",
- "--system-spectrum-button-staticwhite-outline-border-color-disabled",
- "--system-spectrum-button-staticwhite-outline-border-color-down",
- "--system-spectrum-button-staticwhite-outline-border-color-focus",
- "--system-spectrum-button-staticwhite-outline-border-color-hover",
- "--system-spectrum-button-staticwhite-outline-content-color-default",
- "--system-spectrum-button-staticwhite-outline-content-color-disabled",
- "--system-spectrum-button-staticwhite-outline-content-color-down",
- "--system-spectrum-button-staticwhite-outline-content-color-focus",
- "--system-spectrum-button-staticwhite-outline-content-color-hover",
- "--system-spectrum-button-staticwhite-outline-focus-indicator-color",
- "--system-spectrum-button-staticwhite-quiet-border-color-default",
- "--system-spectrum-button-staticwhite-quiet-border-color-disabled",
- "--system-spectrum-button-staticwhite-quiet-border-color-down",
- "--system-spectrum-button-staticwhite-quiet-border-color-focus",
- "--system-spectrum-button-staticwhite-quiet-border-color-hover",
- "--system-spectrum-button-staticwhite-secondary-background-color-default",
- "--system-spectrum-button-staticwhite-secondary-background-color-disabled",
- "--system-spectrum-button-staticwhite-secondary-background-color-down",
- "--system-spectrum-button-staticwhite-secondary-background-color-focus",
- "--system-spectrum-button-staticwhite-secondary-background-color-hover",
- "--system-spectrum-button-staticwhite-secondary-border-color-default",
- "--system-spectrum-button-staticwhite-secondary-border-color-disabled",
- "--system-spectrum-button-staticwhite-secondary-border-color-down",
- "--system-spectrum-button-staticwhite-secondary-border-color-focus",
- "--system-spectrum-button-staticwhite-secondary-border-color-hover",
- "--system-spectrum-button-staticwhite-secondary-content-color-default",
- "--system-spectrum-button-staticwhite-secondary-content-color-disabled",
- "--system-spectrum-button-staticwhite-secondary-content-color-down",
- "--system-spectrum-button-staticwhite-secondary-content-color-focus",
- "--system-spectrum-button-staticwhite-secondary-content-color-hover",
- "--system-spectrum-button-staticwhite-secondary-focus-indicator-color",
- "--system-spectrum-button-staticwhite-secondary-outline-background-color-default",
- "--system-spectrum-button-staticwhite-secondary-outline-background-color-disabled",
- "--system-spectrum-button-staticwhite-secondary-outline-background-color-down",
- "--system-spectrum-button-staticwhite-secondary-outline-background-color-focus",
- "--system-spectrum-button-staticwhite-secondary-outline-background-color-hover",
- "--system-spectrum-button-staticwhite-secondary-outline-border-color-default",
- "--system-spectrum-button-staticwhite-secondary-outline-border-color-disabled",
- "--system-spectrum-button-staticwhite-secondary-outline-border-color-down",
- "--system-spectrum-button-staticwhite-secondary-outline-border-color-focus",
- "--system-spectrum-button-staticwhite-secondary-outline-border-color-hover",
- "--system-spectrum-button-staticwhite-secondary-outline-content-color-default",
- "--system-spectrum-button-staticwhite-secondary-outline-content-color-disabled",
- "--system-spectrum-button-staticwhite-secondary-outline-content-color-down",
- "--system-spectrum-button-staticwhite-secondary-outline-content-color-focus",
- "--system-spectrum-button-staticwhite-secondary-outline-content-color-hover",
- "--system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color",
- "--system-spectrum-button-staticwhite-selected-background-color-default",
- "--system-spectrum-button-staticwhite-selected-background-color-disabled",
- "--system-spectrum-button-staticwhite-selected-background-color-down",
- "--system-spectrum-button-staticwhite-selected-background-color-focus",
- "--system-spectrum-button-staticwhite-selected-background-color-hover",
- "--system-spectrum-button-staticwhite-selected-border-color-disabled",
- "--system-spectrum-button-staticwhite-selected-content-color-default",
- "--system-spectrum-button-staticwhite-selected-content-color-down",
- "--system-spectrum-button-staticwhite-selected-content-color-focus",
- "--system-spectrum-button-staticwhite-selected-content-color-hover"
- ],
+ "system-theme": [],
"passthroughs": [
"--mod-progress-circle-position",
"--mod-progress-circle-thickness",
diff --git a/components/button/package.json b/components/button/package.json
index 0e4246e236a..860731b4c0a 100644
--- a/components/button/package.json
+++ b/components/button/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/button",
- "version": "13.3.0",
+ "version": "14.0.0-s2-foundations.15",
"description": "The Spectrum CSS button component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js
index 0fc0cb8cd6a..476c7a85afd 100644
--- a/components/button/stories/button.stories.js
+++ b/components/button/stories/button.stories.js
@@ -93,28 +93,6 @@ export const Default = ButtonGroups.bind({});
Default.args = {};
// ********* VRT ONLY ********* //
-export const StaticWhite = ButtonGroups.bind({});
-StaticWhite.tags = ["!autodocs", "!dev"];
-StaticWhite.args = {
- staticColor: "white",
-};
-StaticWhite.parameters = {
- chromatic: {
- modes: disableDefaultModes
- },
-};
-
-export const StaticBlack = ButtonGroups.bind({});
-StaticBlack.tags = ["!autodocs", "!dev"];
-StaticBlack.args = {
- staticColor: "black",
-};
-StaticBlack.parameters = {
- chromatic: {
- modes: disableDefaultModes
- },
-};
-
export const WithForcedColors = ButtonGroups.bind({});
WithForcedColors.args = Default.args;
WithForcedColors.tags = ["!autodocs", "!dev"];
@@ -266,7 +244,7 @@ Pending.parameters = {
};
/**
- * A button in a disabled state shows that an action exists, but is not available in that circumstance.
+ * A button in a disabled state shows that an action exists, but is not available in that circumstance.
* This state can be used to maintain layout continuity and to communicate that an action may become
* available later.
*/
@@ -281,7 +259,7 @@ Disabled.parameters = {
};
/**
- * When the button text is too long for the horizontal space available, it wraps to form another line.
+ * When the button text is too long for the horizontal space available, it wraps to form another line.
* When there is no icon present, the text is aligned center. When there is an icon present, the text is
* aligned `start` (left with a writing direction of left-to-right) and the icon remains vertically aligned
* at the top.
diff --git a/components/button/stories/button.test.js b/components/button/stories/button.test.js
index ea61e2fc8cf..7b8496ee540 100644
--- a/components/button/stories/button.test.js
+++ b/components/button/stories/button.test.js
@@ -45,6 +45,14 @@ export const ButtonGroups = Variants({
variant,
treatment: "outline",
})),
+ {
+ testHeading: "Static black",
+ staticColor: "black",
+ },
+ {
+ testHeading: "Static white",
+ staticColor: "white",
+ },
{
testHeading: "Text wrapping with workflow icon",
customStyles: {
diff --git a/components/button/stories/template.js b/components/button/stories/template.js
index 00b2c727897..cf4cc30c252 100644
--- a/components/button/stories/template.js
+++ b/components/button/stories/template.js
@@ -9,6 +9,9 @@ import { when } from "lit/directives/when.js";
import { capitalize } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Button",
diff --git a/components/button/themes/express.css b/components/button/themes/express.css
index 0aa78f6519c..76c7da2854e 100644
--- a/components/button/themes/express.css
+++ b/components/button/themes/express.css
@@ -11,9 +11,12 @@
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Button {
--spectrum-button-background-color-default: var(--spectrum-gray-200);
--spectrum-button-background-color-hover: var(--spectrum-gray-300);
diff --git a/components/button/themes/spectrum-two.css b/components/button/themes/spectrum-two.css
new file mode 100644
index 00000000000..3c2f1ad10c1
--- /dev/null
+++ b/components/button/themes/spectrum-two.css
@@ -0,0 +1,540 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Button {
+ --spectrum-button-animation-duration: var(--spectrum-animation-duration-100);
+ --spectrum-button-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-button-border-width: var(--spectrum-border-width-200);
+ --spectrum-button-line-height: 1.2; /* Hack to keep buttons at 32px */
+
+ --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color);
+ --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-50);
+
+ --spectrum-button-background-color-default: var(--spectrum-gray-50);
+ --spectrum-button-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-button-background-color-down: var(--spectrum-gray-200);
+ --spectrum-button-background-color-focus: var(--spectrum-gray-100);
+
+ --spectrum-button-border-color-default: var(--spectrum-gray-400);
+ --spectrum-button-border-color-hover: var(--spectrum-gray-500);
+ --spectrum-button-border-color-down: var(--spectrum-gray-600);
+ --spectrum-button-border-color-focus: var(--spectrum-gray-500);
+
+ --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+
+ &.spectrum-Button--accent {
+ --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default);
+ --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover);
+ --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down);
+ --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus);
+
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-white);
+ --spectrum-button-content-color-hover: var(--spectrum-white);
+ --spectrum-button-content-color-down: var(--spectrum-white);
+ --spectrum-button-content-color-focus: var(--spectrum-white);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: transparent;
+ --spectrum-button-background-color-hover: var(--spectrum-accent-color-200);
+ --spectrum-button-background-color-down: var(--spectrum-accent-color-300);
+ --spectrum-button-background-color-focus: var(--spectrum-accent-color-200);
+
+ --spectrum-button-border-color-default: var(--spectrum-accent-color-900);
+ --spectrum-button-border-color-hover: var(--spectrum-accent-color-1000);
+ --spectrum-button-border-color-down: var(--spectrum-accent-color-1100);
+ --spectrum-button-border-color-focus: var(--spectrum-accent-color-1000);
+
+ --spectrum-button-content-color-default: var(--spectrum-accent-content-color-default);
+ --spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover);
+ --spectrum-button-content-color-down: var(--spectrum-accent-content-color-down);
+ --spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+ }
+ }
+
+ &.spectrum-Button--negative {
+ --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default);
+ --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover);
+ --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down);
+ --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus);
+
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-white);
+ --spectrum-button-content-color-hover: var(--spectrum-white);
+ --spectrum-button-content-color-down: var(--spectrum-white);
+ --spectrum-button-content-color-focus: var(--spectrum-white);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: transparent;
+ --spectrum-button-background-color-hover: var(--spectrum-negative-color-200);
+ --spectrum-button-background-color-down: var(--spectrum-negative-color-300);
+ --spectrum-button-background-color-focus: var(--spectrum-negative-color-200);
+
+ --spectrum-button-border-color-default: var(--spectrum-negative-color-900);
+ --spectrum-button-border-color-hover: var(--spectrum-negative-color-1000);
+ --spectrum-button-border-color-down: var(--spectrum-negative-color-1100);
+ --spectrum-button-border-color-focus: var(--spectrum-negative-color-1000);
+
+ --spectrum-button-content-color-default: var(--spectrum-negative-content-color-default);
+ --spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover);
+ --spectrum-button-content-color-down: var(--spectrum-negative-content-color-down);
+ --spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+ }
+ }
+
+ &.spectrum-Button--primary {
+ --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default);
+ --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
+ --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down);
+ --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
+
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-gray-25);
+ --spectrum-button-content-color-hover: var(--spectrum-gray-25);
+ --spectrum-button-content-color-down: var(--spectrum-gray-25);
+ --spectrum-button-content-color-focus: var(--spectrum-gray-25);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: transparent;
+ --spectrum-button-background-color-hover: var(--spectrum-gray-200);
+ --spectrum-button-background-color-down: var(--spectrum-gray-400);
+ --spectrum-button-background-color-focus: var(--spectrum-gray-200);
+
+ --spectrum-button-border-color-default: var(--spectrum-gray-800);
+ --spectrum-button-border-color-hover: var(--spectrum-gray-900);
+ --spectrum-button-border-color-down: var(--spectrum-gray-900);
+ --spectrum-button-border-color-focus: var(--spectrum-gray-900);
+
+ --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+ }
+ }
+
+ &.spectrum-Button--secondary {
+ --spectrum-button-background-color-default: var(--spectrum-gray-100);
+ --spectrum-button-background-color-hover: var(--spectrum-gray-200);
+ --spectrum-button-background-color-down: var(--spectrum-gray-400);
+ --spectrum-button-background-color-focus: var(--spectrum-gray-200);
+
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: transparent;
+ --spectrum-button-background-color-hover: var(--spectrum-gray-200);
+ --spectrum-button-background-color-down: var(--spectrum-gray-400);
+ --spectrum-button-background-color-focus: var(--spectrum-gray-200);
+
+ --spectrum-button-border-color-default: var(--spectrum-gray-200);
+ --spectrum-button-border-color-hover: var(--spectrum-gray-400);
+ --spectrum-button-border-color-down: var(--spectrum-gray-500);
+ --spectrum-button-border-color-focus: var(--spectrum-gray-400);
+
+ --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
+ }
+ }
+
+ &.spectrum-Button--quiet {
+ --spectrum-button-background-color-default: transparent;
+ --spectrum-button-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-button-background-color-down: var(--spectrum-gray-200);
+ --spectrum-button-background-color-focus: var(--spectrum-gray-100);
+
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: transparent;
+ }
+
+ &.is-selected {
+ --spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
+ --spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover);
+ --spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down);
+ --spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
+
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-white);
+ --spectrum-button-content-color-hover: var(--spectrum-white);
+ --spectrum-button-content-color-down: var(--spectrum-white);
+ --spectrum-button-content-color-focus: var(--spectrum-white);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+
+ &.spectrum-Button--emphasized {
+ --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default);
+ --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover);
+ --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down);
+ --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus);
+ }
+ }
+
+ &.spectrum-Button--staticBlack,
+ &.spectrum-Button--staticWhite {
+ &.spectrum-Button--quiet {
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-border-color-disabled: transparent;
+ }
+ }
+
+ /* static white */
+ &.spectrum-Button--staticWhite {
+ --spectrum-button-background-color-default: var(--spectrum-transparent-white-900);
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-white-1000);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-white-1000);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-white-1000);
+
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-black);
+ --spectrum-button-content-color-hover: var(--spectrum-black);
+ --spectrum-button-content-color-down: var(--spectrum-black);
+ --spectrum-button-content-color-focus: var(--spectrum-black);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: transparent;
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-white-500);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400);
+
+ --spectrum-button-border-color-default: var(--spectrum-transparent-white-900);
+ --spectrum-button-border-color-hover: var(--spectrum-transparent-white-1000);
+ --spectrum-button-border-color-down: var(--spectrum-transparent-white-1000);
+ --spectrum-button-border-color-focus: var(--spectrum-transparent-white-1000);
+
+ --spectrum-button-content-color-default: var(--spectrum-white);
+ --spectrum-button-content-color-hover: var(--spectrum-white);
+ --spectrum-button-content-color-down: var(--spectrum-white);
+ --spectrum-button-content-color-focus: var(--spectrum-white);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+ }
+
+ &.is-selected {
+ --spectrum-button-background-color-default: var(--spectrum-transparent-white-900);
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-white-1000);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-white-1000);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-white-1000);
+
+ --spectrum-button-static-white-content-color-default: var(--spectrum-black);
+ --spectrum-button-static-white-content-color-hover: var(--spectrum-black);
+ --spectrum-button-static-white-content-color-down: var(--spectrum-black);
+ --spectrum-button-static-white-content-color-focus: var(--spectrum-black);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ }
+ }
+
+ &.spectrum-Button--staticWhite.spectrum-Button--secondary {
+ --spectrum-button-background-color-default: var(--spectrum-transparent-white-300);
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-white-500);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400);
+
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-white);
+ --spectrum-button-content-color-hover: var(--spectrum-white);
+ --spectrum-button-content-color-down: var(--spectrum-white);
+ --spectrum-button-content-color-focus: var(--spectrum-white);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: transparent;
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-white-500);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400);
+
+ --spectrum-button-border-color-default: var(--spectrum-transparent-white-400);
+ --spectrum-button-border-color-hover: var(--spectrum-transparent-white-500);
+ --spectrum-button-border-color-down: var(--spectrum-transparent-white-600);
+ --spectrum-button-border-color-focus: var(--spectrum-transparent-white-500);
+
+ --spectrum-button-content-color-default: var(--spectrum-white);
+ --spectrum-button-content-color-hover: var(--spectrum-white);
+ --spectrum-button-content-color-down: var(--spectrum-white);
+ --spectrum-button-content-color-focus: var(--spectrum-white);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+ }
+ }
+
+ /* static black */
+ &.spectrum-Button--staticBlack {
+ --spectrum-button-background-color-default: var(--spectrum-transparent-black-900);
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-black-1000);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-black-1000);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-black-1000);
+
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-white);
+ --spectrum-button-content-color-hover: var(--spectrum-white);
+ --spectrum-button-content-color-down: var(--spectrum-white);
+ --spectrum-button-content-color-focus: var(--spectrum-white);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: transparent;
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-black-500);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400);
+
+ --spectrum-button-border-color-default: var(--spectrum-transparent-black-500);
+ --spectrum-button-border-color-hover: var(--spectrum-transparent-black-600);
+ --spectrum-button-border-color-down: var(--spectrum-transparent-black-700);
+ --spectrum-button-border-color-focus: var(--spectrum-transparent-black-600);
+
+ --spectrum-button-content-color-default: var(--spectrum-black);
+ --spectrum-button-content-color-hover: var(--spectrum-black);
+ --spectrum-button-content-color-down: var(--spectrum-black);
+ --spectrum-button-content-color-focus: var(--spectrum-black);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+ }
+ }
+
+ &.spectrum-Button--staticBlack.spectrum-Button--secondary {
+ --spectrum-button-background-color-default: var(--spectrum-transparent-black-300);
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-black-500);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400);
+
+ --spectrum-button-border-color-default: transparent;
+ --spectrum-button-border-color-hover: transparent;
+ --spectrum-button-border-color-down: transparent;
+ --spectrum-button-border-color-focus: transparent;
+
+ --spectrum-button-content-color-default: var(--spectrum-black);
+ --spectrum-button-content-color-hover: var(--spectrum-black);
+ --spectrum-button-content-color-down: var(--spectrum-black);
+ --spectrum-button-content-color-focus: var(--spectrum-black);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
+ --spectrum-button-border-color-disabled: transparent;
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+
+ &.spectrum-Button--outline {
+ --spectrum-button-background-color-default: transparent;
+ --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400);
+ --spectrum-button-background-color-down: var(--spectrum-transparent-black-500);
+ --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400);
+
+ --spectrum-button-border-color-default: var(--spectrum-transparent-black-400);
+ --spectrum-button-border-color-hover: var(--spectrum-transparent-black-500);
+ --spectrum-button-border-color-down: var(--spectrum-transparent-black-600);
+ --spectrum-button-border-color-focus: var(--spectrum-transparent-black-500);
+
+ --spectrum-button-content-color-default: var(--spectrum-black);
+ --spectrum-button-content-color-hover: var(--spectrum-black);
+ --spectrum-button-content-color-down: var(--spectrum-black);
+ --spectrum-button-content-color-focus: var(--spectrum-black);
+
+ --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+
+ --spectrum-button-background-color-disabled: transparent;
+ --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
+ --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+ }
+ }
+ }
+
+ .spectrum-Button--sizeS {
+ --spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier));
+
+ --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-75);
+ --spectrum-button-height: var(--spectrum-component-height-75);
+
+ --spectrum-button-font-size: var(--spectrum-font-size-75);
+
+ --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width));
+ --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75);
+ --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width));
+ --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75);
+ --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small);
+ --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small);
+ --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75);
+ --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75);
+ }
+
+ .spectrum-Button--sizeM {
+ --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier));
+
+ --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-100);
+ --spectrum-button-height: var(--spectrum-component-height-100);
+
+ --spectrum-button-font-size: var(--spectrum-font-size-100);
+
+ --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width));
+ --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100);
+ --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width));
+ --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100);
+ --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium);
+ --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium);
+ --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
+ --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100);
+ }
+
+ .spectrum-Button--sizeL {
+ --spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier));
+
+ --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-200);
+ --spectrum-button-height: var(--spectrum-component-height-200);
+
+ --spectrum-button-font-size: var(--spectrum-font-size-200);
+
+ --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width));
+ --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200);
+ --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width));
+ --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200);
+ --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large);
+ --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large);
+ --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200);
+ --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-200);
+ }
+
+ .spectrum-Button--sizeXL {
+ --spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier));
+
+ --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-300);
+ --spectrum-button-height: var(--spectrum-component-height-300);
+
+ --spectrum-button-font-size: var(--spectrum-font-size-300);
+
+ --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width));
+ --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300);
+ --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width));
+ --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300);
+ --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large);
+ --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large);
+ --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300);
+ --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300);
+ }
+}
diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css
index 851cb0efd65..5eec00363ce 100644
--- a/components/button/themes/spectrum.css
+++ b/components/button/themes/spectrum.css
@@ -11,7 +11,12 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-Button {
--spectrum-button-background-color-default: var(--spectrum-gray-75);
--spectrum-button-background-color-hover: var(--spectrum-gray-200);
@@ -23,121 +28,14 @@
--spectrum-button-border-color-down: var(--spectrum-gray-600);
--spectrum-button-border-color-focus: var(--spectrum-gray-500);
- --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-
- &.spectrum-Button--accent {
- --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default);
- --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover);
- --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down);
- --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus);
-
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-
- &.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
- --spectrum-button-background-color-hover: var(--spectrum-accent-color-200);
- --spectrum-button-background-color-down: var(--spectrum-accent-color-300);
- --spectrum-button-background-color-focus: var(--spectrum-accent-color-200);
-
- --spectrum-button-border-color-default: var(--spectrum-accent-color-900);
- --spectrum-button-border-color-hover: var(--spectrum-accent-color-1000);
- --spectrum-button-border-color-down: var(--spectrum-accent-color-1100);
- --spectrum-button-border-color-focus: var(--spectrum-accent-color-1000);
-
- --spectrum-button-content-color-default: var(--spectrum-accent-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-accent-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
- }
- }
-
- &.spectrum-Button--negative {
- --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default);
- --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover);
- --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down);
- --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus);
-
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-
- &.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
- --spectrum-button-background-color-hover: var(--spectrum-negative-color-200);
- --spectrum-button-background-color-down: var(--spectrum-negative-color-300);
- --spectrum-button-background-color-focus: var(--spectrum-negative-color-200);
-
- --spectrum-button-border-color-default: var(--spectrum-negative-color-900);
- --spectrum-button-border-color-hover: var(--spectrum-negative-color-1000);
- --spectrum-button-border-color-down: var(--spectrum-negative-color-1100);
- --spectrum-button-border-color-focus: var(--spectrum-negative-color-1000);
-
- --spectrum-button-content-color-default: var(--spectrum-negative-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-negative-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
- }
- }
-
&.spectrum-Button--primary {
- --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default);
- --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
- --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down);
- --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
-
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
--spectrum-button-content-color-default: var(--spectrum-white);
--spectrum-button-content-color-hover: var(--spectrum-white);
--spectrum-button-content-color-down: var(--spectrum-white);
--spectrum-button-content-color-focus: var(--spectrum-white);
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-
&.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
--spectrum-button-background-color-hover: var(--spectrum-gray-300);
--spectrum-button-background-color-down: var(--spectrum-gray-400);
--spectrum-button-background-color-focus: var(--spectrum-gray-300);
@@ -146,15 +44,6 @@
--spectrum-button-border-color-hover: var(--spectrum-gray-900);
--spectrum-button-border-color-down: var(--spectrum-gray-900);
--spectrum-button-border-color-focus: var(--spectrum-gray-900);
-
- --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
}
}
@@ -164,22 +53,7 @@
--spectrum-button-background-color-down: var(--spectrum-gray-400);
--spectrum-button-background-color-focus: var(--spectrum-gray-300);
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-
&.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
--spectrum-button-background-color-hover: var(--spectrum-gray-300);
--spectrum-button-background-color-down: var(--spectrum-gray-400);
--spectrum-button-background-color-focus: var(--spectrum-gray-300);
@@ -188,98 +62,16 @@
--spectrum-button-border-color-hover: var(--spectrum-gray-400);
--spectrum-button-border-color-down: var(--spectrum-gray-500);
--spectrum-button-border-color-focus: var(--spectrum-gray-400);
-
- --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
}
}
- &.spectrum-Button--quiet {
- --spectrum-button-background-color-default: transparent;
- --spectrum-button-background-color-hover: var(--spectrum-gray-200);
- --spectrum-button-background-color-down: var(--spectrum-gray-300);
- --spectrum-button-background-color-focus: var(--spectrum-gray-200);
-
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: transparent;
- }
-
- &.is-selected {
- --spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
- --spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover);
- --spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down);
- --spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
-
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-button-border-color-disabled: transparent;
-
- &.spectrum-Button--emphasized {
- --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default);
- --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover);
- --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down);
- --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus);
- }
- }
-
- &.spectrum-Button--staticBlack,
- &.spectrum-Button--staticWhite {
- &.spectrum-Button--quiet {
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-border-color-disabled: transparent;
- }
- }
-
- /* static white */
-
&.spectrum-Button--staticWhite {
--spectrum-button-background-color-default: var(--spectrum-transparent-white-800);
--spectrum-button-background-color-hover: var(--spectrum-transparent-white-900);
--spectrum-button-background-color-down: var(--spectrum-transparent-white-900);
--spectrum-button-background-color-focus: var(--spectrum-transparent-white-900);
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-black);
- --spectrum-button-content-color-hover: var(--spectrum-black);
- --spectrum-button-content-color-down: var(--spectrum-black);
- --spectrum-button-content-color-focus: var(--spectrum-black);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
-
&.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
--spectrum-button-background-color-hover: var(--spectrum-transparent-white-300);
--spectrum-button-background-color-down: var(--spectrum-transparent-white-400);
--spectrum-button-background-color-focus: var(--spectrum-transparent-white-300);
@@ -288,17 +80,6 @@
--spectrum-button-border-color-hover: var(--spectrum-transparent-white-900);
--spectrum-button-border-color-down: var(--spectrum-transparent-white-900);
--spectrum-button-border-color-focus: var(--spectrum-transparent-white-900);
-
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
}
&.is-selected {
@@ -306,14 +87,6 @@
--spectrum-button-background-color-hover: var(--spectrum-transparent-white-900);
--spectrum-button-background-color-down: var(--spectrum-transparent-white-900);
--spectrum-button-background-color-focus: var(--spectrum-transparent-white-900);
-
- --spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--spectrum-black));
- --spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-black));
- --spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--spectrum-black));
- --spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-black));
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
- --spectrum-button-border-color-disabled: transparent;
}
}
@@ -323,24 +96,7 @@
--spectrum-button-background-color-down: var(--spectrum-transparent-white-400);
--spectrum-button-background-color-focus: var(--spectrum-transparent-white-300);
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
-
&.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
--spectrum-button-background-color-hover: var(--spectrum-transparent-white-300);
--spectrum-button-background-color-down: var(--spectrum-transparent-white-400);
--spectrum-button-background-color-focus: var(--spectrum-transparent-white-300);
@@ -349,45 +105,16 @@
--spectrum-button-border-color-hover: var(--spectrum-transparent-white-400);
--spectrum-button-border-color-down: var(--spectrum-transparent-white-500);
--spectrum-button-border-color-focus: var(--spectrum-transparent-white-400);
-
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
}
}
- /* static black */
&.spectrum-Button--staticBlack {
--spectrum-button-background-color-default: var(--spectrum-transparent-black-800);
--spectrum-button-background-color-hover: var(--spectrum-transparent-black-900);
--spectrum-button-background-color-down: var(--spectrum-transparent-black-900);
--spectrum-button-background-color-focus: var(--spectrum-transparent-black-900);
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-white);
- --spectrum-button-content-color-hover: var(--spectrum-white);
- --spectrum-button-content-color-down: var(--spectrum-white);
- --spectrum-button-content-color-focus: var(--spectrum-white);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
-
&.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
--spectrum-button-background-color-hover: var(--spectrum-transparent-black-300);
--spectrum-button-background-color-down: var(--spectrum-transparent-black-400);
--spectrum-button-background-color-focus: var(--spectrum-transparent-black-300);
@@ -396,17 +123,6 @@
--spectrum-button-border-color-hover: var(--spectrum-transparent-black-500);
--spectrum-button-border-color-down: var(--spectrum-transparent-black-600);
--spectrum-button-border-color-focus: var(--spectrum-transparent-black-500);
-
- --spectrum-button-content-color-default: var(--spectrum-black);
- --spectrum-button-content-color-hover: var(--spectrum-black);
- --spectrum-button-content-color-down: var(--spectrum-black);
- --spectrum-button-content-color-focus: var(--spectrum-black);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
}
}
@@ -416,24 +132,7 @@
--spectrum-button-background-color-down: var(--spectrum-transparent-black-400);
--spectrum-button-background-color-focus: var(--spectrum-transparent-black-300);
- --spectrum-button-border-color-default: transparent;
- --spectrum-button-border-color-hover: transparent;
- --spectrum-button-border-color-down: transparent;
- --spectrum-button-border-color-focus: transparent;
-
- --spectrum-button-content-color-default: var(--spectrum-black);
- --spectrum-button-content-color-hover: var(--spectrum-black);
- --spectrum-button-content-color-down: var(--spectrum-black);
- --spectrum-button-content-color-focus: var(--spectrum-black);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
- --spectrum-button-border-color-disabled: transparent;
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
-
&.spectrum-Button--outline {
- --spectrum-button-background-color-default: transparent;
--spectrum-button-background-color-hover: var(--spectrum-transparent-black-300);
--spectrum-button-background-color-down: var(--spectrum-transparent-black-400);
--spectrum-button-background-color-focus: var(--spectrum-transparent-black-300);
@@ -442,17 +141,6 @@
--spectrum-button-border-color-hover: var(--spectrum-transparent-black-400);
--spectrum-button-border-color-down: var(--spectrum-transparent-black-500);
--spectrum-button-border-color-focus: var(--spectrum-transparent-black-400);
-
- --spectrum-button-content-color-default: var(--spectrum-black);
- --spectrum-button-content-color-hover: var(--spectrum-black);
- --spectrum-button-content-color-down: var(--spectrum-black);
- --spectrum-button-content-color-focus: var(--spectrum-black);
-
- --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-
- --spectrum-button-background-color-disabled: transparent;
- --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
- --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
}
}
}
diff --git a/components/buttongroup/CHANGELOG.md b/components/buttongroup/CHANGELOG.md
index bb217a5a3af..164dbb79254 100644
--- a/components/buttongroup/CHANGELOG.md
+++ b/components/buttongroup/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 8.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/button@14.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 7.1.3
### Patch Changes
diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css
index 2d3fa7ac5ff..ebedcd9c2aa 100644
--- a/components/buttongroup/index.css
+++ b/components/buttongroup/index.css
@@ -11,30 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-ButtonGroup {
- --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
- --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
-}
-
-.spectrum-ButtonGroup--sizeS {
- --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-200);
- --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-200);
-}
-
-.spectrum-ButtonGroup--sizeM {
- --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
- --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
-}
-
-.spectrum-ButtonGroup--sizeL {
- --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
- --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
-}
-
-.spectrum-ButtonGroup--sizeXL {
- --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
- --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
-}
+@import "./themes/spectrum-two.css";
.spectrum-ButtonGroup {
display: flex;
diff --git a/components/buttongroup/metadata/buttongroup.yml b/components/buttongroup/metadata/buttongroup.yml
deleted file mode 100644
index 7b208e22716..00000000000
--- a/components/buttongroup/metadata/buttongroup.yml
+++ /dev/null
@@ -1,74 +0,0 @@
-name: Button group
-SpectrumSiteSlug: https://spectrum.adobe.com/page/button-group/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
-examples:
- - id: buttongroup-horizontal
- name: Horizontal
- description: |
- Default spacing for Medium, Large, and Extra Large t-shirt sizes.
- markup: |
-
-
- No, thanks
-
-
- Remind me later
-
-
- Rate now
-
-
-
- - id: buttongroup-horizontal-small
- name: Horizontal - Small
- description: |
- Spacing for the Small t-shirt size.
- markup: |
-
-
- No, thanks
-
-
- Remind me later
-
-
- Rate now
-
-
-
- - id: buttongroup-vertical
- name: Vertical
- description: |
- Default spacing for Medium, Large, and Extra Large t-shirt sizes.
- markup: |
-
-
- No, thanks
-
-
- Remind me later
-
-
- Rate now
-
-
-
- - id: buttongroup-vertical-small
- name: Vertical - Small
- description: |
- Spacing for the Small t-shirt size.
- markup: |
-
-
- No, thanks
-
-
- Remind me later
-
-
- Rate now
-
-
diff --git a/components/buttongroup/package.json b/components/buttongroup/package.json
index 258d641d89d..acd2862fcf8 100644
--- a/components/buttongroup/package.json
+++ b/components/buttongroup/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/buttongroup",
- "version": "7.1.3",
+ "version": "8.0.0-s2-foundations.13",
"description": "The Spectrum CSS buttongroup component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/buttongroup/stories/template.js b/components/buttongroup/stories/template.js
index 1d85c23d2cc..464b4908442 100644
--- a/components/buttongroup/stories/template.js
+++ b/components/buttongroup/stories/template.js
@@ -3,6 +3,9 @@ import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ButtonGroup",
@@ -15,8 +18,7 @@ export const Template = ({
({ ...a, [c]: true }), {}),
})}
diff --git a/components/buttongroup/themes/express.css b/components/buttongroup/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/buttongroup/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/buttongroup/themes/spectrum-two.css b/components/buttongroup/themes/spectrum-two.css
new file mode 100644
index 00000000000..9458f27755c
--- /dev/null
+++ b/components/buttongroup/themes/spectrum-two.css
@@ -0,0 +1,39 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-ButtonGroup {
+ --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
+ --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
+ }
+
+ .spectrum-ButtonGroup--sizeS {
+ --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-200);
+ --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-200);
+ }
+
+ .spectrum-ButtonGroup--sizeM {
+ --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
+ --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
+ }
+
+ .spectrum-ButtonGroup--sizeL {
+ --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
+ --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
+ }
+
+ .spectrum-ButtonGroup--sizeXL {
+ --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
+ --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
+ }
+}
diff --git a/components/buttongroup/themes/spectrum.css b/components/buttongroup/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/buttongroup/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/calendar/CHANGELOG.md b/components/calendar/CHANGELOG.md
index 112f8d8d28e..1c21038462c 100644
--- a/components/calendar/CHANGELOG.md
+++ b/components/calendar/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
diff --git a/components/calendar/index.css b/components/calendar/index.css
index 271286337ad..22af5998ba5 100644
--- a/components/calendar/index.css
+++ b/components/calendar/index.css
@@ -11,55 +11,17 @@
* governing permissions and limitations under the License.
*/
+@import "./themes/spectrum-two.css";
+
.spectrum-Calendar {
- --spectrum-calendar-day-width: var(--spectrum-component-height-100);
- --spectrum-calendar-day-height: var(--spectrum-component-height-100);
- --spectrum-calendar-border-radius-reset: 0;
- --spectrum-calendar-border-width-reset: 0;
- --spectrum-calendar-day-border-size: var(--spectrum-border-width-200);
- --spectrum-calendar-margin-y: 24px;
- --spectrum-calendar-margin-x: 32px;
- --spectrum-calendar-day-padding: 4px;
- --spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7);
-
- --spectrum-calendar-title-text-letter-spacing: 0.06em;
- --spectrum-calendar-title-height: 32px;
- --spectrum-calendar-title-text-size: var(--spectrum-font-size-300);
-
- --spectrum-calendar-day-title-text-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-calendar-day-title-text-color: var(--spectrum-gray-700);
- --spectrum-calendar-day-title-text-size: var(--spectrum-font-size-50);
- --spectrum-calendar-day-text-size-han: var(--spectrum-font-size-50);
-
- --spectrum-calendar-day-text-size: var(--spectrum-font-size-100);
- --spectrum-calendar-day-text-color-selected: var(--spectrum-gray-900);
- --spectrum-calendar-day-text-color-hover: var(--spectrum-gray-900);
- --spectrum-calendar-day-text-color-cap-selected: var(--spectrum-gray-900);
- --spectrum-calendar-day-text-font-weight-selected: var(--spectrum-bold-font-weight);
- --spectrum-calendar-day-text-font-weight-cap-selected: var(--spectrum-bold-font-weight);
-
- --spectrum-calendar-day-today-text-color: var(--spectrum-gray-800);
- --spectrum-calendar-day-today-text-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-calendar-day-today-border-color: var(--spectrum-gray-800);
-
- --spectrum-calendar-day-today-text-color-disabled: var(--spectrum-gray-500);
- --spectrum-calendar-day-today-border-color-disabled: var(--spectrum-gray-400);
- --spectrum-calendar-day-text-color-disabled: var(--spectrum-disabled-content-color);
-
- --spectrum-calendar-day-text-color-key-focus: var(--spectrum-gray-900);
-
- --spectrum-calendar-button-icon-color: var(--spectrum-gray-700);
+ inline-size: var(--mod-calendar-width, var(--spectrum-calendar-width));
+ display: inline-block;
&:dir(rtl) {
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
}
}
-.spectrum-Calendar {
- inline-size: var(--mod-calendar-width, var(--spectrum-calendar-width));
- display: inline-block;
-}
-
.spectrum-Calendar--padded {
margin: var(--mod-calendar-margin-x, var(--spectrum-calendar-margin-x)) var(--mod-calendar-margin-y, var(--spectrum-calendar-margin-y));
}
@@ -132,6 +94,7 @@
/* Add letter spacing of 0.66px from Typography > Detail issue #407 */
letter-spacing: var(--mod-calendar-title-text-letter-spacing, var(--spectrum-calendar-title-text-letter-spacing));
+
}
}
@@ -436,6 +399,7 @@
--highcontrast-calendar-day-today-text-color-disabled: GrayText;
--highcontrast-calendar-day-today-text-color: ButtonText;
+ color: CanvasText;
forced-color-adjust: none;
&.is-range-selection {
diff --git a/components/calendar/metadata/calendar.yml b/components/calendar/metadata/calendar.yml
deleted file mode 100644
index 06611f7c127..00000000000
--- a/components/calendar/metadata/calendar.yml
+++ /dev/null
@@ -1,458 +0,0 @@
-name: Calendar
-sections:
- - name: Migration Guide
- description: |
- ### Previous/Next Icon size change
- ChevronLeftLarge/ChevronRightLarge was changed to ChevronLeftMedium/ChevronRightMedium.
-examples:
- - id: calendar
- name: Standard
- markup: |
-
-
-
-
-
-
- S M T W T F S
-
-
-
- 30 31 1 2 3 4 5
-
- 6 7 8 9 10 11 12
-
- 13 14 15 16 17 18 19
-
- 20 21 22 23 24 25 26
-
- 27 28 29 30 31 1 2
-
- 3 4 5 6 7 8 9
-
-
-
-
-
-
-
-
-
- SUN MON TUE WED THU FRI SAT
-
-
-
- 30 31 1 2 3 4 5
-
- 6 7 8 9 10 11 12
-
- 13 14 15 16 17 18 19
-
- 20 21 22 23 24 25 26
-
- 27 28 29 30 31 1 2
-
- 3 4 5 6 7 8 9
-
-
-
-
-
-
-
-
-
- S M T W T F S
-
-
-
- 30 31 1 2 3 4 5
-
- 6 7 8 9 10 11 12
-
- 13 14 15 16 17 18 19
-
- 20 21 22 23 24 25 26
-
- 27 28 29 30 31 1 2
-
- 3 4 5 6 7 8 9
-
-
-
-
-
-
-
-
-
- S M T W T F S
-
-
-
- 30 31 1 2 3 4 5
-
- 6 7 8 9 10 11 12
-
- 13 14 15 16 17 18 19
-
- 20 21 22 23 24 25 26
-
- 27 28 29 30 31 1 2
-
- 3 4 5 6 7 8 9
-
-
-
-
-
-
-
-
-
- S M T W T F S
-
-
-
- 30 31 1 2 3 4 5
-
- 6 7 8 9 10 11 12
-
- 13 14 15 16 17 18 19
-
- 20 21 22 23 24 25 26
-
- 27 28 29 30 31 1 2
-
- 3 4 5 6 7 8 9
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/calendar/themes/spectrum-two.css b/components/calendar/themes/spectrum-two.css
new file mode 100644
index 00000000000..11e905c488f
--- /dev/null
+++ b/components/calendar/themes/spectrum-two.css
@@ -0,0 +1,54 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Calendar {
+ --spectrum-calendar-day-width: var(--spectrum-component-height-100);
+ --spectrum-calendar-day-height: var(--spectrum-component-height-100);
+ --spectrum-calendar-border-radius-reset: 0;
+ --spectrum-calendar-border-width-reset: 0;
+ --spectrum-calendar-day-border-size: var(--spectrum-border-width-200);
+ --spectrum-calendar-margin-y: 24px;
+ --spectrum-calendar-margin-x: 32px;
+ --spectrum-calendar-day-padding: 4px;
+ --spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7);
+
+ --spectrum-calendar-title-text-letter-spacing: 0.06em;
+ --spectrum-calendar-title-height: 32px;
+ --spectrum-calendar-title-text-size: var(--spectrum-font-size-300);
+
+ --spectrum-calendar-day-title-text-font-weight: var(--spectrum-bold-font-weight);
+ --spectrum-calendar-day-title-text-color: var(--spectrum-gray-700);
+ --spectrum-calendar-day-title-text-size: var(--spectrum-font-size-50);
+ --spectrum-calendar-day-text-size-han: var(--spectrum-font-size-50);
+
+ --spectrum-calendar-day-text-size: var(--spectrum-font-size-100);
+ --spectrum-calendar-day-text-color-selected: var(--spectrum-gray-900);
+ --spectrum-calendar-day-text-color-hover: var(--spectrum-gray-900);
+ --spectrum-calendar-day-text-color-cap-selected: var(--spectrum-gray-900);
+ --spectrum-calendar-day-text-font-weight-selected: var(--spectrum-bold-font-weight);
+ --spectrum-calendar-day-text-font-weight-cap-selected: var(--spectrum-bold-font-weight);
+
+ --spectrum-calendar-day-today-text-color: var(--spectrum-gray-800);
+ --spectrum-calendar-day-today-text-font-weight: var(--spectrum-bold-font-weight);
+ --spectrum-calendar-day-today-border-color: var(--spectrum-gray-800);
+
+ --spectrum-calendar-day-today-text-color-disabled: var(--spectrum-gray-500);
+ --spectrum-calendar-day-today-border-color-disabled: var(--spectrum-gray-400);
+ --spectrum-calendar-day-text-color-disabled: var(--spectrum-disabled-content-color);
+
+ --spectrum-calendar-day-text-color-key-focus: var(--spectrum-gray-900);
+
+ --spectrum-calendar-button-icon-color: var(--spectrum-gray-700);
+ }
+}
diff --git a/components/calendar/themes/spectrum.css b/components/calendar/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/calendar/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/card/CHANGELOG.md b/components/card/CHANGELOG.md
index 2b87113478d..940178e0502 100644
--- a/components/card/CHANGELOG.md
+++ b/components/card/CHANGELOG.md
@@ -1,5 +1,264 @@
# Change Log
+## 10.0.0-s2-foundations.17
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`d8394c7`](https://github.com/adobe/spectrum-css/commit/d8394c7cd6e49e65928972eedaae0dbf013ea8f9) Thanks [@pfulton](https://github.com/pfulton)! - S2 preview background color mapping update
+
+- Updated dependencies [[`9ae725f`](https://github.com/adobe/spectrum-css/commit/9ae725f10ebbb78b62070c4c477cb41cfc1b1ed6), [`4e80ae6`](https://github.com/adobe/spectrum-css/commit/4e80ae67ddda329a5ed556b57426623c6f0f13f0)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.15
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.19
+
+## 10.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/typography@7.0.0-s2-foundations.14
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.16
+ - @spectrum-css/asset@6.0.0-s2-foundations.13
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 10.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6582314`](https://github.com/adobe/spectrum-css/commit/65823145e139caa56f5e73e8a36e73aff37672de) Thanks [@pfulton](https://github.com/pfulton)! - Updates to custom property inheritance and properties order
+
+### Patch Changes
+
+- Updated dependencies [[`6582314`](https://github.com/adobe/spectrum-css/commit/65823145e139caa56f5e73e8a36e73aff37672de)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.19
+
+## 10.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`1037169`](https://github.com/adobe/spectrum-css/commit/103716919fa4e0d43c68e67e1fd3355651c02016) Thanks [@pfulton](https://github.com/pfulton)! - Move --highcontrast references out of themes; remove remaining --mods from the themes
+
+## 10.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9f8732d`](https://github.com/adobe/spectrum-css/commit/9f8732d05da8c2be2ce3d95baac4b1272a6c62bd) Thanks [@pfulton](https://github.com/pfulton)! - Migrating Card component quiet and gallery variant mods to index css file
+
+## 10.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/typography@7.0.0-s2-foundations.13
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.12
+ - @spectrum-css/asset@6.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 10.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/typography@7.0.0-s2-foundations.12
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.11
+ - @spectrum-css/asset@6.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 10.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/typography@7.0.0-s2-foundations.11
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.10
+ - @spectrum-css/asset@6.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 10.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/typography@7.0.0-s2-foundations.9
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.9
+ - @spectrum-css/asset@6.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 10.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/typography@7.0.0-s2-foundations.8
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.8
+ - @spectrum-css/asset@6.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 10.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/typography@7.0.0-s2-foundations.7
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.7
+ - @spectrum-css/asset@6.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 10.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/typography@7.0.0-s2-foundations.6
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.6
+ - @spectrum-css/asset@6.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 10.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/typography@7.0.0-s2-foundations.5
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.5
+ - @spectrum-css/asset@6.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 10.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/typography@7.0.0-s2-foundations.4
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.4
+ - @spectrum-css/asset@6.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 10.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/typography@7.0.0-s2-foundations.3
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.3
+ - @spectrum-css/asset@6.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 10.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/typography@7.0.0-s2-foundations.2
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.2
+ - @spectrum-css/asset@6.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 10.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/typography@7.0.0-s2-foundations.1
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.1
+ - @spectrum-css/asset@6.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 10.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.0
+ - @spectrum-css/asset@6.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+ - @spectrum-css/typography@7.0.0-s2-foundations.0
+
## 9.1.1
### Patch Changes
diff --git a/components/card/index.css b/components/card/index.css
index 87ab611f7a3..2e01277d394 100644
--- a/components/card/index.css
+++ b/components/card/index.css
@@ -11,89 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-Card {
- /* Default Layout */
- --spectrum-card-background-color: var(--spectrum-background-layer-2-color);
- --spectrum-card-body-spacing: var(--spectrum-spacing-400);
- --spectrum-card-title-padding-top: var(--spectrum-spacing-300);
- --spectrum-card-title-padding-right: var(--spectrum-spacing-400);
- --spectrum-card-content-margin-top: var(--spectrum-spacing-100);
- --spectrum-card-content-margin-bottom: var(--spectrum-spacing-300);
- --spectrum-card-footer-padding-top: var(--spectrum-spacing-100);
- --spectrum-card-subtitle-padding-right: var(--spectrum-spacing-100);
-
- --spectrum-card-border-width: var(--spectrum-border-width-100);
- --spectrum-card-corner-radius: var(--spectrum-corner-radius-100);
- --spectrum-card-border-color: var(--spectrum-gray-200);
- --spectrum-card-border-color-hover: var(--spectrum-gray-300);
- --spectrum-card-border-color-selected: var(--spectrum-blue-700);
-
- --spectrum-card-divider-color: var(--spectrum-gray-300);
-
- /* Typography */
- --spectrum-card-title-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-card-title-font-size: var(--spectrum-heading-size-xxs);
- --spectrum-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
- --spectrum-card-title-font-style: var(--spectrum-heading-sans-serif-font-style);
- --spectrum-card-title-line-height: var(--spectrum-heading-line-height);
- --spectrum-card-title-font-color: var(--spectrum-heading-color);
-
- --spectrum-card-body-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-card-body-font-size: var(--spectrum-body-size-s);
- --spectrum-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-card-body-font-style: var(--spectrum-body-sans-serif-font-style);
- --spectrum-card-body-line-height: var(--spectrum-body-line-height);
- --spectrum-card-body-font-color: var(--spectrum-body-color);
-
- /* Quick Actions */
- --spectrum-card-actions-spacing: var(--spectrum-spacing-300);
- --spectrum-card-actions-size: var(--spectrum-card-selection-background-size);
- --spectrum-card-actions-border-radius: var(--spectrum-corner-radius-100);
-
- /* TODO update to --spectrum-card-selection-background-color token once an RGB stripped value is available */
- --spectrum-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb);
- --spectrum-card-actions-background-color-opacity: var(--spectrum-card-selection-background-color-opacity);
- --spectrum-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color);
- --spectrum-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x);
- --spectrum-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y);
- --spectrum-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur);
-
- /* Focus */
- --spectrum-card-focus-indicator-color: var(--spectrum-focus-indicator-color);
- --spectrum-card-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
-
- /* Selected */
- --spectrum-card-selected-background-opacity: 0.1; /* table-selected-row-background-opacity does not exist in tokens yet */
-
- --spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100);
- --spectrum-card-preview-background-color: var(--spectrum-background-base-color);
- --spectrum-card-preview-background-color-hover: var(--spectrum-gray-300);
-
- /* Horizontal */
- --spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300);
- --spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200);
-
- /* TODO: These are placeholder until recursive RGB is available */
- .spectrum--light &,
- .spectrum--lightest & {
- --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
- }
-
- .spectrum--dark & {
- --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
- }
-
- .spectrum--darkest & {
- --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb);
- }
-}
-
-/* Quiet/Gallery */
-.spectrum-Card--quiet,
-.spectrum-Card--gallery {
- --mod-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100));
- --mod-card-minimum-width: var(--mod-card-minimum-width-quiet, var(--spectrum-card-minimum-width));
-}
+@import "./themes/spectrum-two.css";
.spectrum-Card {
position: relative;
@@ -108,9 +26,7 @@
border-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius));
border-color: var(--highcontrast-card-border-color, var(--mod-card-border-color, var(--spectrum-card-border-color)));
- /* @deprecation --mod-spectrum-card-background-color has been renamed to
- --mod-card-background-color. The fallback will be removed in a future version. */
- background-color: var(--highcontrast-card-background-color, var(--mod-card-background-color, var(--mod-spectrum-card-background-color, var(--spectrum-card-background-color))));
+ background-color: var(--highcontrast-card-background-color, var(--mod-card-background-color, var(--spectrum-card-background-color)));
&::before {
content: "";
@@ -183,7 +99,6 @@
&:hover {
.spectrum-Card-quickActions,
.spectrum-Card-actions {
- /* Ideally, this would simply apply is-open to the QuickActions component */
visibility: visible;
opacity: 1;
pointer-events: all;
@@ -203,6 +118,18 @@
inset-inline-start: calc(var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
inset-block-start: calc(var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
+
+ /* From QuickAction component that is officially deprecated */
+ pointer-events: auto;
+ display:inline-flex;
+ align-items:center;
+ justify-content:center;
+ box-sizing:border-box;
+
+ transition:
+ transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out,
+ opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out,
+ visibility 0ms linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms));
}
.spectrum-Card-actions {
@@ -350,6 +277,9 @@
.spectrum-Card--quiet,
.spectrum-Card--gallery {
+ --spectrum-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-card-content-margin-top-quiet));
+ --spectrum-card-minimum-width: var(--mod-card-minimum-width-quiet, var(--spectrum-card-minimum-width-quiet));
+
block-size: 100%;
min-inline-size: var(--mod-card-minimum-width, var(--spectrum-card-minimum-width));
border-width: 0;
@@ -437,9 +367,6 @@
.spectrum-Card-body {
margin-block-start: var(--mod-card-content-margin-top, var(--spectrum-card-content-margin-top));
- }
-
- .spectrum-Card-body {
padding: 0;
}
diff --git a/components/card/metadata/card-asset.yml b/components/card/metadata/card-asset.yml
deleted file mode 100644
index 39137eeedca..00000000000
--- a/components/card/metadata/card-asset.yml
+++ /dev/null
@@ -1,47 +0,0 @@
-name: Card - asset preview
-description: A standard cards with a full-sized asset preview.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/cards/
-sections:
- - name: Migration Guide
- description: |
- ### Use Spectrum Heading for title and Spectrum Detail for subtitle
- To make the card component more flexible, products can have more fine control over the typography by using the Heading and Detail components with their corresponding sizes. To be more consistent with previous card designs you can use the following:
- * Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element.
- * Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`.
- ### Small Card deprecated
- Card only has one size moving forward and the minimum width has been updated to allow for smaller card widths if needed. There is no longer a need for the `spectrum-Card--sizeM` class on this component.
-examples:
- - id: card-asset
- name: Standard
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Optional description; should be kept to one or two lines
-
-
-
-
-
-
-
-
-
-
-
Optional description; should be kept to one or two lines
-
-
-
-
-
-
-
-
-
Optional description; should be kept to one or two lines
-
-
-
-
-
-
-
-
-
-
-
-
Optional description; should be kept to one or two lines
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Optional description; should be kept to one or two lines
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ ${Checkbox(
+ {
+ isChecked: isSelected,
+ title: "Select",
+ },
+ context
+ )}
+
`
)}
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/card/themes/spectrum-two.css b/components/card/themes/spectrum-two.css
new file mode 100644
index 00000000000..bf8224f9aa7
--- /dev/null
+++ b/components/card/themes/spectrum-two.css
@@ -0,0 +1,81 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Card {
+ /* Default Layout */
+ --spectrum-card-background-color: var(--spectrum-background-layer-2-color);
+ --spectrum-card-body-spacing: var(--spectrum-spacing-400);
+ --spectrum-card-title-padding-top: var(--spectrum-spacing-300);
+ --spectrum-card-title-padding-right: var(--spectrum-spacing-400);
+ --spectrum-card-content-margin-top: var(--spectrum-spacing-100);
+ --spectrum-card-content-margin-bottom: var(--spectrum-spacing-300);
+ --spectrum-card-footer-padding-top: var(--spectrum-spacing-100);
+ --spectrum-card-subtitle-padding-right: var(--spectrum-spacing-100);
+
+ --spectrum-card-border-width: var(--spectrum-border-width-100);
+ --spectrum-card-corner-radius: var(--spectrum-corner-radius-100);
+ --spectrum-card-border-color: var(--spectrum-gray-100);
+ --spectrum-card-border-color-hover: var(--spectrum-gray-200);
+ --spectrum-card-border-color-selected: var(--spectrum-blue-700);
+
+ --spectrum-card-divider-color: var(--spectrum-gray-200);
+
+ /* Typography */
+ --spectrum-card-title-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-card-title-font-size: var(--spectrum-heading-size-xxs);
+ --spectrum-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
+ --spectrum-card-title-font-style: var(--spectrum-heading-sans-serif-font-style);
+ --spectrum-card-title-line-height: var(--spectrum-heading-line-height);
+ --spectrum-card-title-font-color: var(--spectrum-heading-color);
+
+ --spectrum-card-body-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-card-body-font-size: var(--spectrum-body-size-s);
+ --spectrum-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
+ --spectrum-card-body-font-style: var(--spectrum-body-sans-serif-font-style);
+ --spectrum-card-body-line-height: var(--spectrum-body-line-height);
+ --spectrum-card-body-font-color: var(--spectrum-body-color);
+
+ /* Quick Actions */
+ --spectrum-card-actions-spacing: var(--spectrum-spacing-300);
+ --spectrum-card-actions-size: var(--spectrum-card-selection-background-size);
+ --spectrum-card-actions-border-radius: var(--spectrum-corner-radius-100);
+
+ /* TODO update to --spectrum-card-selection-background-color token once an RGB stripped value is available */
+ --spectrum-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb);
+ --spectrum-card-actions-background-color-opacity: var(--spectrum-card-selection-background-color-opacity);
+ --spectrum-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color);
+ --spectrum-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x);
+ --spectrum-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y);
+ --spectrum-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur);
+
+ /* Focus */
+ --spectrum-card-focus-indicator-color: var(--spectrum-focus-indicator-color);
+ --spectrum-card-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
+
+ /* Selected */
+ --spectrum-card-selected-background-opacity: 0.1;
+
+ --spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100);
+ --spectrum-card-preview-background-color: var(--spectrum-gray-100);
+ --spectrum-card-preview-background-color-hover: var(--spectrum-gray-200);
+
+ /* Horizontal */
+ --spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300);
+ --spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200);
+
+ /* Quiet/Gallery */
+ --spectrum-card-content-margin-top-quiet: var(--spectrum-spacing-100);
+ --spectrum-card-minimum-width-quiet: var(--spectrum-card-minimum-width);
+ }
+}
diff --git a/components/card/themes/spectrum.css b/components/card/themes/spectrum.css
new file mode 100644
index 00000000000..c3d1f63f477
--- /dev/null
+++ b/components/card/themes/spectrum.css
@@ -0,0 +1,36 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Card {
+ --spectrum-card-border-color: var(--spectrum-gray-200);
+ --spectrum-card-border-color-hover: var(--spectrum-gray-300);
+ --spectrum-card-divider-color: var(--spectrum-gray-300);
+ --spectrum-card-preview-background-color: var(--spectrum-background-base-color);
+ --spectrum-card-preview-background-color-hover: var(--spectrum-gray-300);
+ --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
+
+ .spectrum--dark & {
+ --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
+ }
+
+ .spectrum--darkest & {
+ --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb);
+ }
+ }
+}
diff --git a/components/checkbox/CHANGELOG.md b/components/checkbox/CHANGELOG.md
index a75dcb16cf8..f0d323aee26 100644
--- a/components/checkbox/CHANGELOG.md
+++ b/components/checkbox/CHANGELOG.md
@@ -1,5 +1,203 @@
# Change Log
+## 10.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 10.0.0-s2-foundations.15
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`be5d85f`](https://github.com/adobe/spectrum-css/commit/be5d85f36aa6f81485b02fe943c5de22922fe0ff) Thanks [@pfulton](https://github.com/pfulton)! - Fix S1 checkbox color
+
+## 10.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f38c66a`](https://github.com/adobe/spectrum-css/commit/f38c66a314c94058d7f8f084faa4967c89b20e7b) Thanks [@pfulton](https://github.com/pfulton)! - Fix icon sizing and checkbox border colors
+
+### Patch Changes
+
+- Updated dependencies [[`f38c66a`](https://github.com/adobe/spectrum-css/commit/f38c66a314c94058d7f8f084faa4967c89b20e7b)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.14
+
+## 10.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-238] t-shirt-based calc moved out of theme into base css
+
+### Patch Changes
+
+- Updated dependencies [[`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f), [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.14
+
+## 10.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 10.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 10.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 10.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 10.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 10.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 10.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 10.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 10.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 10.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 10.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 10.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 10.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 9.1.3
### Patch Changes
diff --git a/components/checkbox/index.css b/components/checkbox/index.css
index 482a192afcc..5ba53f4a32c 100644
--- a/components/checkbox/index.css
+++ b/components/checkbox/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
/* checkbox/index.css
*
@@ -19,98 +19,6 @@
* .spectrum-Checkbox-box::after is the focus indicator
*/
-/* Component tokens by t-shirt size */
-.spectrum-Checkbox {
- /* Color */
- --spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-checkbox-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- --spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75);
-
- --spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900);
- --spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000);
- --spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1100);
- --spectrum-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000);
-
- --spectrum-checkbox-emphasized-color-default: var(--spectrum-accent-color-900);
- --spectrum-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000);
- --spectrum-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100);
- --spectrum-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000);
-
- --spectrum-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default);
- --spectrum-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover);
- --spectrum-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down);
- --spectrum-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
-
- /* Font */
- --spectrum-checkbox-font-size: var(--spectrum-font-size-100);
- --spectrum-checkbox-line-height: var(--spectrum-line-height-100);
- --spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100);
-
- /* Size */
- --spectrum-checkbox-height: var(--spectrum-component-height-100);
- --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium);
- --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75);
-
- --spectrum-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-
- --spectrum-checkbox-border-width: var(--spectrum-border-width-200);
- --spectrum-checkbox-selected-border-width: calc(var(--spectrum-checkbox-control-size) / 2);
-
- /* Spacing */
- --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100);
- --spectrum-checkbox-animation-duration: var(--spectrum-animation-duration-100);
-}
-
-.spectrum-Checkbox--sizeS {
- --spectrum-checkbox-font-size: var(--spectrum-font-size-75);
-
- --spectrum-checkbox-height: var(--spectrum-component-height-75);
- --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small);
-
- --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75);
-}
-
-.spectrum-Checkbox--sizeM {
- --spectrum-checkbox-font-size: var(--spectrum-font-size-100);
-
- --spectrum-checkbox-height: var(--spectrum-component-height-100);
- --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium);
-
- --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100);
-}
-
-.spectrum-Checkbox--sizeL {
- --spectrum-checkbox-font-size: var(--spectrum-font-size-200);
-
- --spectrum-checkbox-height: var(--spectrum-component-height-200);
- --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large);
-
- --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200);
- --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200);
-}
-
-.spectrum-Checkbox--sizeXL {
- --spectrum-checkbox-font-size: var(--spectrum-font-size-300);
-
- --spectrum-checkbox-height: var(--spectrum-component-height-300);
- --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large);
-
- --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300);
- --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300);
-}
-
-/* stylelint-disable max-nesting-depth */
/* Default Unchecked */
.spectrum-Checkbox {
color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default)));
@@ -284,7 +192,6 @@
}
}
}
-/* stylelint-enable max-nesting-depth */
/* Emphasized */
.spectrum-Checkbox--emphasized {
@@ -477,6 +384,10 @@
}
.spectrum-Checkbox-box {
+ /* Fix vertical alignment when not wrapping since we're flex-start */
+ --spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)));
+ --spectrum-checkbox-selected-border-width: calc(var(--spectrum-checkbox-control-size) / 2);
+
display: flex;
align-items: center;
justify-content: center;
@@ -486,8 +397,6 @@
inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size));
block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size));
- /* Fix vertical alignment when not wrapping since we're flex-start */
- --spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)));
margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0;
flex-grow: 0;
@@ -526,9 +435,7 @@
inset-block-start: 0;
margin: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap));
- transition:
- box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out,
- margin var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out;
+ transition: box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out, margin var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out;
/* force ff to render on the pixel grid */
transform: translate(0, 0);
diff --git a/components/checkbox/metadata/checkbox.yml b/components/checkbox/metadata/checkbox.yml
deleted file mode 100644
index bb6268fa972..00000000000
--- a/components/checkbox/metadata/checkbox.yml
+++ /dev/null
@@ -1,617 +0,0 @@
-name: Checkbox
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/checkbox/
-description: |
- - Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.
- - Checkboxes should not be used on their own, they should always be used within a [FieldGroup](fieldgroup.html).
- - Invalid checkboxes are indicated with an alert [HelpText](helptext.html) when included in a Fieldgroup.
-
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Quiet and emphasized
- Spectrum has chosen the variant previously known as `quiet` to be the default and has added an `emphasized` variant with the same styles as the previous default.
- If you were using the `quiet` variant, the `.spectrum-Checkbox--quiet` class is no longer required and can be removed.
- If you need a switch to look like it did before this change, add `.spectrum-Checkbox--emphasized`.
- ### T-shirt sizing
- Checkbox now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-Checkbox--size*` class.
- Using the classes `.spectrum-Checkbox .spectrum-Checkbox--sizeM` will get result in the previous default checkbox size.
-examples:
- - id: checkbox-default
- name: Standard
- markup: |
-
-
- - id: checkbox-emphasized
- name: Emphasized
- markup: |
-
- - id: t-shirt-sizes
- name: T-Shirt Sizes
- markup: |
-
- - id: checkbox-wrapping
- name: Wrapping behavior
- markup: |
-
-
-
-
-
-
-
- Checkbox with an extraordinarily long label please don't do this but if you did it should wrap text when it gets longer than the container which contains the checkbox which has an unacceptably long label
-
diff --git a/components/checkbox/metadata/metadata.json b/components/checkbox/metadata/metadata.json
index d95164d16a1..e8d6231f4d1 100644
--- a/components/checkbox/metadata/metadata.json
+++ b/components/checkbox/metadata/metadata.json
@@ -27,10 +27,6 @@
".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before",
".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
- ".spectrum-Checkbox--sizeL",
- ".spectrum-Checkbox--sizeM",
- ".spectrum-Checkbox--sizeS",
- ".spectrum-Checkbox--sizeXL",
".spectrum-Checkbox-box",
".spectrum-Checkbox-box:after",
".spectrum-Checkbox-box:before",
@@ -74,6 +70,10 @@
".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label",
".spectrum-Checkbox.is-readOnly:active .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-readOnly:hover .spectrum-Checkbox-box:before",
+ ".spectrum-Checkbox.spectrum-Checkbox--sizeL",
+ ".spectrum-Checkbox.spectrum-Checkbox--sizeM",
+ ".spectrum-Checkbox.spectrum-Checkbox--sizeS",
+ ".spectrum-Checkbox.spectrum-Checkbox--sizeXL",
".spectrum-Checkbox:active .spectrum-Checkbox-box:before",
".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox:active .spectrum-Checkbox-label",
@@ -190,11 +190,10 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
+ "--spectrum-gray-50",
"--spectrum-gray-600",
"--spectrum-gray-700",
- "--spectrum-gray-75",
"--spectrum-gray-800",
- "--spectrum-gray-900",
"--spectrum-line-height-100",
"--spectrum-negative-color-1000",
"--spectrum-negative-color-1100",
@@ -212,12 +211,7 @@
"--spectrum-text-to-control-300",
"--spectrum-text-to-control-75"
],
- "system-theme": [
- "--system-spectrum-checkbox-control-color-default",
- "--system-spectrum-checkbox-control-color-down",
- "--system-spectrum-checkbox-control-color-focus",
- "--system-spectrum-checkbox-control-color-hover"
- ],
+ "system-theme": [],
"passthroughs": [],
"high-contrast": [
"--highcontrast-checkbox-background-color-default",
diff --git a/components/checkbox/package.json b/components/checkbox/package.json
index ddcef108414..273ecb14136 100644
--- a/components/checkbox/package.json
+++ b/components/checkbox/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/checkbox",
- "version": "9.1.3",
+ "version": "10.0.0-s2-foundations.16",
"description": "The Spectrum CSS checkbox component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/checkbox/stories/template.js b/components/checkbox/stories/template.js
index 6a11e647225..9210d919810 100644
--- a/components/checkbox/stories/template.js
+++ b/components/checkbox/stories/template.js
@@ -1,5 +1,5 @@
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
-import { getRandomId, Container } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
@@ -7,6 +7,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Checkbox",
diff --git a/components/checkbox/themes/express.css b/components/checkbox/themes/express.css
index 54d273354cf..03cadcfceff 100644
--- a/components/checkbox/themes/express.css
+++ b/components/checkbox/themes/express.css
@@ -11,9 +11,12 @@
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Checkbox {
--spectrum-checkbox-control-color-default: var(--spectrum-gray-800);
--spectrum-checkbox-control-color-hover: var(--spectrum-gray-900);
diff --git a/components/checkbox/themes/spectrum-two.css b/components/checkbox/themes/spectrum-two.css
new file mode 100644
index 00000000000..0eb7e4e6fa4
--- /dev/null
+++ b/components/checkbox/themes/spectrum-two.css
@@ -0,0 +1,95 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Checkbox {
+ --spectrum-checkbox-control-color-default: var(--spectrum-gray-600);
+ --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700);
+ --spectrum-checkbox-control-color-down: var(--spectrum-gray-800);
+ --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700);
+
+ /* Color */
+ --spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-checkbox-content-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ --spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50);
+
+ --spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900);
+ --spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000);
+ --spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1100);
+ --spectrum-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000);
+
+ --spectrum-checkbox-emphasized-color-default: var(--spectrum-accent-color-900);
+ --spectrum-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000);
+ --spectrum-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100);
+ --spectrum-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000);
+
+ --spectrum-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default);
+ --spectrum-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover);
+ --spectrum-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down);
+ --spectrum-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
+
+ /* Font */
+ --spectrum-checkbox-line-height: var(--spectrum-line-height-100);
+ --spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+ /* Size */
+ --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75);
+
+ --spectrum-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+
+ --spectrum-checkbox-border-width: var(--spectrum-border-width-200);
+
+ --spectrum-checkbox-animation-duration: var(--spectrum-animation-duration-100);
+
+ &.spectrum-Checkbox--sizeS {
+ --spectrum-checkbox-font-size: var(--spectrum-font-size-75);
+ --spectrum-checkbox-height: var(--spectrum-component-height-75);
+ --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small);
+ --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75);
+ }
+
+ &,
+ &.spectrum-Checkbox--sizeM {
+ --spectrum-checkbox-font-size: var(--spectrum-font-size-100);
+ --spectrum-checkbox-height: var(--spectrum-component-height-100);
+ --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium);
+ --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100);
+ }
+
+ &.spectrum-Checkbox--sizeL {
+ --spectrum-checkbox-font-size: var(--spectrum-font-size-200);
+ --spectrum-checkbox-height: var(--spectrum-component-height-200);
+ --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large);
+ --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200);
+ --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200);
+ }
+
+ &.spectrum-Checkbox--sizeXL {
+ --spectrum-checkbox-font-size: var(--spectrum-font-size-300);
+ --spectrum-checkbox-height: var(--spectrum-component-height-300);
+ --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large);
+ --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300);
+ --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300);
+ }
+ }
+}
diff --git a/components/checkbox/themes/spectrum.css b/components/checkbox/themes/spectrum.css
index 49c95dd11a1..7aacd0c2754 100644
--- a/components/checkbox/themes/spectrum.css
+++ b/components/checkbox/themes/spectrum.css
@@ -11,11 +11,13 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-Checkbox {
- --spectrum-checkbox-control-color-default: var(--spectrum-gray-600);
- --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700);
- --spectrum-checkbox-control-color-down: var(--spectrum-gray-800);
- --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700);
+ --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75);
}
}
diff --git a/components/clearbutton/CHANGELOG.md b/components/clearbutton/CHANGELOG.md
index 3d95eab25a0..3d924dd227b 100644
--- a/components/clearbutton/CHANGELOG.md
+++ b/components/clearbutton/CHANGELOG.md
@@ -1,5 +1,181 @@
# Change Log
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a66241b`](https://github.com/adobe/spectrum-css/commit/a66241bc5ec06ecb81b221187db1740caf1bd8f8) Thanks [@pfulton](https://github.com/pfulton)! - Migrating Clear Button disabled variants to index.css
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 6.1.3
### Patch Changes
diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css
index 062fab30977..bb0a6d4c438 100644
--- a/components/clearbutton/index.css
+++ b/components/clearbutton/index.css
@@ -11,60 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-ClearButton {
- --spectrum-clear-button-height: var(--spectrum-component-height-100);
- --spectrum-clear-button-width: var(--spectrum-component-height-100);
- --spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
-
- --spectrum-clear-button-icon-color: var(--spectrum-neutral-content-color-default);
- --spectrum-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-
- &.spectrum-ClearButton--sizeS {
- --spectrum-clear-button-height: var(--spectrum-component-height-75);
- --spectrum-clear-button-width: var(--spectrum-component-height-75);
- }
-
- &.spectrum-ClearButton--sizeL {
- --spectrum-clear-button-height: var(--spectrum-component-height-200);
- --spectrum-clear-button-width: var(--spectrum-component-height-200);
- }
-
- &.spectrum-ClearButton--sizeXL {
- --spectrum-clear-button-height: var(--spectrum-component-height-300);
- --spectrum-clear-button-width: var(--spectrum-component-height-300);
- }
-
- &.spectrum-ClearButton--quiet {
- --mod-clear-button-background-color: var(--spectrum-clear-button-background-color-quiet, transparent);
- --mod-clear-button-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent);
- --mod-clear-button-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent);
- --mod-clear-button-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent);
- }
-
- &.spectrum-ClearButton--overBackground {
- --mod-clear-button-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white));
- --mod-clear-button-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white));
- --mod-clear-button-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white));
- --mod-clear-button-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white));
-
- --mod-clear-button-background-color: var(--spectrum-clear-button-background-color-over-background, transparent);
- --mod-clear-button-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300));
- --mod-clear-button-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400));
- --mod-clear-button-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300));
- }
-
- &:disabled,
- &.is-disabled {
- --mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
- --mod-clear-button-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
- --mod-clear-button-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
- --mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
- }
-}
+@import "./themes/spectrum-two.css";
.spectrum-ClearButton {
block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height));
@@ -109,6 +56,12 @@
background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus));
}
}
+
+ &:disabled,
+ &.is-disabled {
+ --spectrum-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
+ --spectrum-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
+ }
}
.spectrum-ClearButton-fill {
diff --git a/components/clearbutton/metadata/clearbutton.yml b/components/clearbutton/metadata/clearbutton.yml
deleted file mode 100644
index b97e778950c..00000000000
--- a/components/clearbutton/metadata/clearbutton.yml
+++ /dev/null
@@ -1,106 +0,0 @@
-name: Clear button
-description: Used in search and tags.
-sections:
- - name: Migration Guide
- description: |
- ### New markup
- In order to support Express, ClearButton has new markup that includes an inner `.spectrum-ClearButton-fill` element.
-
- ### T-shirt sizing
- ClearButton now supports t-shirt sizing and requires that you specify the size of the clear button by adding a `.spectrum-ClearButton--size*` class.
-
- Also, use the correct icon size for cross icons:
-
- | T-shirt Size | Icon Size |
- |--------------------------------|------------------------------|
- | `spectrum-ClearButton--sizeS` | `spectrum-css-icon-Cross75` |
- | `spectrum-ClearButton--sizeM` | `spectrum-css-icon-Cross100` |
- | `spectrum-ClearButton--sizeL` | `spectrum-css-icon-Cross200` |
- | `spectrum-ClearButton--sizeXL` | `spectrum-css-icon-Cross300` |
-
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: clearbutton
- name: Sizing
- markup: |
-
-
-
-
M (default)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: clearbutton-quiet
- name: Quiet
- markup: |
-
-
-
-
-
-
- - id: clearbutton-overbackground
- name: Overbackground
- markup: |
-
diff --git a/components/clearbutton/metadata/metadata.json b/components/clearbutton/metadata/metadata.json
index 086704b7a34..c433116065b 100644
--- a/components/clearbutton/metadata/metadata.json
+++ b/components/clearbutton/metadata/metadata.json
@@ -72,24 +72,16 @@
"--spectrum-component-height-300",
"--spectrum-component-height-75",
"--spectrum-disabled-content-color",
- "--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
"--spectrum-in-field-button-edge-to-fill",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
"--spectrum-neutral-content-color-hover",
"--spectrum-neutral-content-color-key-focus",
- "--spectrum-transparent-white-300",
"--spectrum-transparent-white-400",
+ "--spectrum-transparent-white-500",
"--spectrum-white"
],
- "system-theme": [
- "--system-spectrum-clearbutton-spectrum-clear-button-background-color",
- "--system-spectrum-clearbutton-spectrum-clear-button-background-color-down",
- "--system-spectrum-clearbutton-spectrum-clear-button-background-color-hover",
- "--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus"
- ],
+ "system-theme": [],
"passthroughs": [],
"high-contrast": ["--highcontrast-clear-button-icon-color-hover"]
}
diff --git a/components/clearbutton/package.json b/components/clearbutton/package.json
index 26f7ff63127..8d5c1e7c6de 100644
--- a/components/clearbutton/package.json
+++ b/components/clearbutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/clearbutton",
- "version": "6.1.3",
+ "version": "7.0.0-s2-foundations.14",
"description": "The Spectrum CSS clearbutton component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js
index 9270808c04f..6706eaa93af 100644
--- a/components/clearbutton/stories/clearbutton.stories.js
+++ b/components/clearbutton/stories/clearbutton.stories.js
@@ -100,6 +100,7 @@ Sizing.args = {};
Sizing.tags = ["!dev"];
Sizing.parameters = {
chromatic: { disableSnapshot: true },
+
};
export const OverBackground = ClearButtonGroup.bind({});
@@ -109,7 +110,7 @@ OverBackground.args = {
};
OverBackground.parameters = {
chromatic: {
- modes: disableDefaultModes
+ chromatic: { disableSnapshot: true },
},
};
diff --git a/components/clearbutton/stories/clearbutton.test.js b/components/clearbutton/stories/clearbutton.test.js
index f4292fff350..f9fcd8b7b70 100644
--- a/components/clearbutton/stories/clearbutton.test.js
+++ b/components/clearbutton/stories/clearbutton.test.js
@@ -13,6 +13,10 @@ export const ClearButtonGroup = Variants({
testHeading: "Quiet",
isQuiet: true,
},
+ {
+ testHeading: "Static white",
+ staticColor: "white",
+ },
],
stateData: [
{
diff --git a/components/clearbutton/stories/template.js b/components/clearbutton/stories/template.js
index 3f8a9a8d9a4..fa2f9401429 100644
--- a/components/clearbutton/stories/template.js
+++ b/components/clearbutton/stories/template.js
@@ -6,6 +6,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ClearButton",
@@ -16,28 +19,29 @@ export const Template = ({
id = getRandomId("clearbutton"),
customClasses = [],
customStyles = {},
-}, context) => html`
- ({ ...a, [c]: true }), {}),
- })}
- id=${ifDefined(id)}
- style=${styleMap(customStyles)}
- ?disabled=${isDisabled}
- >
-
- ${Icon({
- size,
- iconName: "Cross",
- customClasses: [`${rootClass}-icon`],
- }, context)}
-
-
-`;
+} = {}, context = {}) => {
+ return html`
+ ({ ...a, [c]: true }), {}),
+ })}
+ id=${ifDefined(id)}
+ style=${styleMap(customStyles)}
+ ?disabled=${isDisabled}
+ >
+
+ ${Icon({
+ size,
+ iconName: "Cross",
+ customClasses: [`${rootClass}-icon`],
+ }, context)}
+
+
+ `;
+};
diff --git a/components/clearbutton/themes/express.css b/components/clearbutton/themes/express.css
index 3d3b47cc65b..7ad29df08bf 100644
--- a/components/clearbutton/themes/express.css
+++ b/components/clearbutton/themes/express.css
@@ -11,9 +11,12 @@
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-ClearButton {
--spectrum-clear-button-background-color: var(--spectrum-gray-200);
--spectrum-clear-button-background-color-hover: var(--spectrum-gray-300);
diff --git a/components/clearbutton/themes/spectrum-two.css b/components/clearbutton/themes/spectrum-two.css
new file mode 100644
index 00000000000..b9fc7058c22
--- /dev/null
+++ b/components/clearbutton/themes/spectrum-two.css
@@ -0,0 +1,72 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-ClearButton {
+ --spectrum-clear-button-background-color: transparent;
+ --spectrum-clear-button-background-color-hover: transparent;
+ --spectrum-clear-button-background-color-down: transparent;
+ --spectrum-clear-button-background-color-key-focus: transparent;
+
+ --spectrum-clear-button-height: var(--spectrum-component-height-100);
+ --spectrum-clear-button-width: var(--spectrum-component-height-100);
+ --spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
+
+ --spectrum-clear-button-icon-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ &.spectrum-ClearButton--sizeS {
+ --spectrum-clear-button-height: var(--spectrum-component-height-75);
+ --spectrum-clear-button-width: var(--spectrum-component-height-75);
+ }
+
+ &.spectrum-ClearButton--sizeL {
+ --spectrum-clear-button-height: var(--spectrum-component-height-200);
+ --spectrum-clear-button-width: var(--spectrum-component-height-200);
+ }
+
+ &.spectrum-ClearButton--sizeXL {
+ --spectrum-clear-button-height: var(--spectrum-component-height-300);
+ --spectrum-clear-button-width: var(--spectrum-component-height-300);
+ }
+
+ &.spectrum-ClearButton--quiet {
+ --spectrum-clear-button-background-color: var(--spectrum-clear-button-background-color-quiet, transparent);
+ --spectrum-clear-button-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent);
+ --spectrum-clear-button-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent);
+ --spectrum-clear-button-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent);
+ }
+
+ &.spectrum-ClearButton--overBackground {
+ --spectrum-clear-button-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white));
+ --spectrum-clear-button-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white));
+ --spectrum-clear-button-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white));
+ --spectrum-clear-button-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white));
+
+ --spectrum-clear-button-background-color: var(--spectrum-clear-button-background-color-over-background, transparent);
+ --spectrum-clear-button-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400));
+ --spectrum-clear-button-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-500));
+ --spectrum-clear-button-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400));
+ }
+
+ &:disabled,
+ &.is-disabled {
+ --spectrum-clear-button-icon-color: var(--spectrum-disabled-content-color);
+ --spectrum-clear-button-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
+ --spectrum-clear-button-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
+ --spectrum-clear-button-background-color: transparent;
+ }
+ }
+}
diff --git a/components/clearbutton/themes/spectrum.css b/components/clearbutton/themes/spectrum.css
index 84194abf9ab..70d5593ab70 100644
--- a/components/clearbutton/themes/spectrum.css
+++ b/components/clearbutton/themes/spectrum.css
@@ -11,11 +11,17 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-ClearButton {
- --spectrum-clear-button-background-color: transparent;
- --spectrum-clear-button-background-color-hover: transparent;
- --spectrum-clear-button-background-color-down: transparent;
- --spectrum-clear-button-background-color-key-focus: transparent;
- }
+ &.spectrum-ClearButton--overBackground {
+ --spectrum-clear-button-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300));
+ --spectrum-clear-button-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400));
+ --spectrum-clear-button-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300));
+ }
+ }
}
diff --git a/components/closebutton/CHANGELOG.md b/components/closebutton/CHANGELOG.md
index a287d62cfe2..5f9d01520af 100644
--- a/components/closebutton/CHANGELOG.md
+++ b/components/closebutton/CHANGELOG.md
@@ -1,5 +1,184 @@
# Change Log
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5d50b15`](https://github.com/adobe/spectrum-css/commit/5d50b1557e0d4f8236be43728cde66c9d41b16e7) Thanks [@pfulton](https://github.com/pfulton)! - Typo in CloseButton classes for sizing
+
+- Updated dependencies [[`6582314`](https://github.com/adobe/spectrum-css/commit/65823145e139caa56f5e73e8a36e73aff37672de)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.19
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.2.0
### Minor Changes
diff --git a/components/closebutton/index.css b/components/closebutton/index.css
index b88ecfcab23..1e9edda5318 100644
--- a/components/closebutton/index.css
+++ b/components/closebutton/index.css
@@ -11,93 +11,8 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
@import "@spectrum-css/commons/basebutton.css";
-
-.spectrum-CloseButton {
- /* Hardcoded tokens */
- --spectrum-closebutton-size-300: 24px;
- --spectrum-closebutton-size-400: 32px;
- --spectrum-closebutton-size-500: 40px;
- --spectrum-closebutton-size-600: 48px;
-
- /* Cross icon */
- --spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-closebutton-icon-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
- --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color);
-
- /* Focus ring */
- --spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- /* Size */
- --spectrum-closebutton-height: var(--spectrum-component-height-100);
- --spectrum-closebutton-width: var(--spectrum-closebutton-height);
- --spectrum-closebutton-size: var(--spectrum-closebutton-size-400);
- --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400);
-
- --spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100);
-}
-
-/* @deprecated .spectrum-Closebutton--sizeS */
-.spectrum-CloseButton--sizeS,
-.spectrum-Closebutton--sizeS {
- --spectrum-closebutton-height: var(--spectrum-component-height-75);
- --spectrum-closebutton-width: var(--spectrum-closebutton-height);
- --spectrum-closebutton-size: var(--spectrum-closebutton-size-300);
- --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-300);
-}
-
-/* @deprecated .spectrum-Closebutton--sizeM */
-.spectrum-CloseButton,
-.spectrum-CloseButton--sizeM,
-.spectrum-Closebutton--sizeM {
- --spectrum-closebutton-height: var(--spectrum-component-height-100);
- --spectrum-closebutton-width: var(--spectrum-closebutton-height);
- --spectrum-closebutton-size: var(--spectrum-closebutton-size-400);
- --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400);
-}
-
-/* @deprecated .spectrum-Closebutton--sizeL */
-.spectrum-CloseButton--sizeL,
-.spectrum-Closebutton--sizeL {
- --spectrum-closebutton-height: var(--spectrum-component-height-200);
- --spectrum-closebutton-width: var(--spectrum-closebutton-height);
- --spectrum-closebutton-size: var(--spectrum-closebutton-size-500);
- --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-500);
-}
-
-/* @deprecated .spectrum-Closebutton--sizeXL */
-.spectrum-CloseButton--sizeXL,
-.spectrum-Closebutton--sizeXL {
- --spectrum-closebutton-height: var(--spectrum-component-height-300);
- --spectrum-closebutton-width: var(--spectrum-closebutton-height);
- --spectrum-closebutton-size: var(--spectrum-closebutton-size-600);
- --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-600);
-}
-
-.spectrum-CloseButton--staticWhite {
- --spectrum-closebutton-static-background-color-default: transparent;
- --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-300);
- --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-400);
- --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-300);
- --spectrum-closebutton-icon-color-default: var(--spectrum-white);
- --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
- --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
-}
-
-.spectrum-CloseButton--staticBlack {
- --spectrum-closebutton-static-background-color-default: transparent;
- --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-300);
- --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-400);
- --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-300);
- --spectrum-closebutton-icon-color-default: var(--spectrum-black);
- --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color);
- --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
-}
+@import "./themes/spectrum-two.css";
/* Windows high contrast mode */
@media (forced-colors: active) {
@@ -140,15 +55,15 @@ a.spectrum-CloseButton {
.spectrum-CloseButton {
@extend %spectrum-BaseButton;
- block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-height));
- inline-size: var(--mod-closebutton-width, var(--spectrum-closebutton-width));
+ block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size));
+ inline-size: var(--mod-closebutton-width, var(--spectrum-closebutton-size));
position: relative;
color: inherit;
border-color: transparent;
- border-radius: var(--mod-closebutton-border-radius, var(--spectrum-closebutton-border-radius));
+ border-radius: var(--mod-closebutton-border-radius, var(--spectrum-closebutton-size));
border-width: 0;
justify-content: center;
diff --git a/components/closebutton/metadata/closebutton.yml b/components/closebutton/metadata/closebutton.yml
deleted file mode 100644
index 26e2d624c45..00000000000
--- a/components/closebutton/metadata/closebutton.yml
+++ /dev/null
@@ -1,204 +0,0 @@
-name: Close button
-SpectrumSiteSlug: https://spectrum.adobe.com/page/close-button/
-status: Verified
-description: |
- A button used to close or dismiss components.
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Sizing
- Close button supports different sized icons. By default, you should use the following icons:
-
- | Close button classname | UI icon classname |
- | ------------------------------- | --------------------------- |
- | `.spectrum-CloseButton--sizeS` | `.spectrum-UIIcon-Cross75` |
- | `.spectrum-CloseButton--sizeM` | `.spectrum-UIIcon-Cross100` |
- | `.spectrum-CloseButton--sizeL` | `.spectrum-UIIcon-Cross200` |
- | `.spectrum-CloseButton--sizeXL` | `.spectrum-UIIcon-Cross300` |
-
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: close
- name: Icon Size - Regular
- markup: |
-
-
-
-
M (default)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
M (default)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: closebutton-staticwhite
- name: Static White
- markup: |
-
-
-
-
Default
-
-
-
-
-
-
-
-
-
-
Disabled
-
-
-
-
-
-
-
-
-
-
-
-
-
Default
-
-
-
-
-
-
-
-
-
-
Disabled
-
-
-
-
-
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-CloseButton {
+ --spectrum-closebutton-background-color-default: transparent;
+ --spectrum-closebutton-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-closebutton-background-color-down: var(--spectrum-gray-200);
+ --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100);
+
+ /* Cross icon */
+ --spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-closebutton-icon-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
+ --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color);
+
+ /* Focus ring */
+ --spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ --spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100);
+
+ &.spectrum-CloseButton--sizeS {
+ --spectrum-closebutton-size: var(--spectrum-component-height-75);
+ }
+
+ &,
+ &.spectrum-CloseButton--sizeM {
+ --spectrum-closebutton-size: var(--spectrum-component-height-100);
+ }
+
+ &.spectrum-CloseButton--sizeL {
+ --spectrum-closebutton-size: var(--spectrum-component-height-200);
+ }
+
+ &.spectrum-CloseButton--sizeXL {
+ --spectrum-closebutton-size: var(--spectrum-component-height-300);
+ }
+
+ &.spectrum-CloseButton--staticWhite {
+ --spectrum-closebutton-static-background-color-default: transparent;
+ --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-400);
+ --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-500);
+ --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-400);
+ --spectrum-closebutton-icon-color-default: var(--spectrum-white);
+ --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
+ --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
+ }
+
+ &.spectrum-CloseButton--staticBlack {
+ --spectrum-closebutton-static-background-color-default: transparent;
+ --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-400);
+ --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-500);
+ --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-400);
+ --spectrum-closebutton-icon-color-default: var(--spectrum-black);
+ --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color);
+ --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
+ }
+ }
+}
diff --git a/components/closebutton/themes/spectrum.css b/components/closebutton/themes/spectrum.css
index 84b1402f85c..089b7185f28 100644
--- a/components/closebutton/themes/spectrum.css
+++ b/components/closebutton/themes/spectrum.css
@@ -11,11 +11,27 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-CloseButton {
- --spectrum-closebutton-background-color-default: transparent;
--spectrum-closebutton-background-color-hover: var(--spectrum-gray-200);
--spectrum-closebutton-background-color-down: var(--spectrum-gray-300);
--spectrum-closebutton-background-color-focus: var(--spectrum-gray-200);
+
+ &.spectrum-CloseButton--staticWhite {
+ --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-300);
+ --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-400);
+ --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-300);
+ }
+
+ &.spectrum-CloseButton--staticBlack {
+ --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-300);
+ --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-400);
+ --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-300);
+ }
}
}
diff --git a/components/coachindicator/CHANGELOG.md b/components/coachindicator/CHANGELOG.md
index 80da828558c..aec724866e7 100644
--- a/components/coachindicator/CHANGELOG.md
+++ b/components/coachindicator/CHANGELOG.md
@@ -1,5 +1,167 @@
# Change Log
+## 3.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 3.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#3041](https://github.com/adobe/spectrum-css/pull/3041) [`7be40c3`](https://github.com/adobe/spectrum-css/commit/7be40c334748f3e1064c614af793117f06146475) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - --mod properties were moved out of `coachindicator/themes/spectrum-two.css` into `coachindicator/index.css` so --mods can be applied at the component level.
+
+## 3.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 3.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 3.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 3.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 3.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 3.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 3.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 3.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 3.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 3.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 3.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 3.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 3.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 2.1.4
### Patch Changes
@@ -20,6 +182,12 @@
- [#2842](https://github.com/adobe/spectrum-css/pull/2842) [`4cd3a15`](https://github.com/adobe/spectrum-css/commit/4cd3a15db914b667f5d606388051ecd2cd318134) Thanks [@castastrophe](https://github.com/castastrophe)! - Updated CSSNano plugin to toggle reduceIdent off to prevent invalid abstractions from breaking named grid templates.
+## 2.1.2
+
+### Patch Changes
+
+- [#2842](https://github.com/adobe/spectrum-css/pull/2842) [`4cd3a15`](https://github.com/adobe/spectrum-css/commit/4cd3a15db914b667f5d606388051ecd2cd318134) Thanks [@castastrophe](https://github.com/castastrophe)! - Updated CSSNano plugin to toggle reduceIdent off to prevent invalid abstractions from breaking named grid templates.
+
## 2.1.1
### Patch Changes
diff --git a/components/coachindicator/animation.css b/components/coachindicator/animation.css
deleted file mode 100644
index 9a025fb13d8..00000000000
--- a/components/coachindicator/animation.css
+++ /dev/null
@@ -1,55 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-.spectrum-CoachIndicator {
- --spectrum-coach-indicator-animation-keyframe-0-scale: 1;
- --spectrum-coach-indicator-animation-keyframe-0-opacity: 0;
- --spectrum-coach-indicator-animation-keyframe-50-scale: 1.5;
- --spectrum-coach-indicator-animation-keyframe-50-opacity: 1;
- --spectrum-coach-indicator-animation-keyframe-100-scale: 2;
- --spectrum-coach-indicator-animation-keyframe-100-opacity: 0;
- --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: 0.8;
-}
-
-@keyframes pulse {
- 0% {
- transform: scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale));
- opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity);
- }
-
- 50% {
- transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale));
- opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity);
- }
-
- 100% {
- transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
- opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
- }
-}
-
-@keyframes pulse-quiet {
- 0% {
- transform: scale(var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale));
- opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity);
- }
-
- 50% {
- transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale));
- opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity);
- }
-
- 100% {
- transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
- opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
- }
-}
diff --git a/components/coachindicator/index.css b/components/coachindicator/index.css
index 9d385914d5b..632c4a99f99 100644
--- a/components/coachindicator/index.css
+++ b/components/coachindicator/index.css
@@ -11,43 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "animation.css";
-
-.spectrum-CoachIndicator {
- --spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
- --spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
- --spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
- --spectrum-coach-indicator-inline-size: var(--spectrum-coach-indicator-min-inline-size);
- --spectrum-coach-indicator-block-size: var(--spectrum-coach-indicator-min-block-size);
- --spectrum-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter);
- --spectrum-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter);
-
- --spectrum-coach-indicator-top: calc((var(--spectrum-coach-indicator-block-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
- --spectrum-coach-indicator-left: calc((var(--spectrum-coach-indicator-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
-
- /* animation */
- --spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000);
- --spectrum-coach-animation-indicator-ring-inner-delay-multiple: -0.5;
- --spectrum-coach-animation-indicator-ring-center-delay-multiple: -0.66;
- --spectrum-coach-animation-indicator-ring-outer-delay-multiple: -1;
- --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33;
- --spectrum-coach-indicator-animation-name: pulse;
- --spectrum-coach-indicator-inner-animation-delay-multiple: var(--spectrum-coach-animation-indicator-ring-inner-delay-multiple);
-}
-
-.spectrum-CoachIndicator--quiet {
- --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
- --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
- --mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
- --mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
- --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter));
- --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter));
-
- --mod-coach-indicator-top: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
- --mod-coach-indicator-left: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
- --mod-coach-indicator-animation-name: pulse-quiet;
- --mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple));
-}
+@import "./themes/spectrum-two.css";
.spectrum-CoachIndicator {
position: relative;
@@ -58,6 +22,19 @@
inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-inline-size));
block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-block-size));
+
+ &.spectrum-CoachIndicator--quiet {
+ --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
+ --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
+ --mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
+ --mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
+ --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size));
+ --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size));
+
+ --mod-coach-indicator-top: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
+ --mod-coach-indicator-left: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
+ --mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple));
+ }
}
.spectrum-CoachIndicator-ring {
@@ -102,3 +79,37 @@
animation: none;
}
}
+
+@keyframes pulse {
+ 0% {
+ transform: scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale));
+ opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity);
+ }
+
+ 50% {
+ transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale));
+ opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity);
+ }
+
+ 100% {
+ transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
+ opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
+ }
+}
+
+@keyframes pulse-quiet {
+ 0% {
+ transform: scale(var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale));
+ opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity);
+ }
+
+ 50% {
+ transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale));
+ opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity);
+ }
+
+ 100% {
+ transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
+ opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
+ }
+}
diff --git a/components/coachindicator/metadata/coachindicator.yml b/components/coachindicator/metadata/coachindicator.yml
deleted file mode 100644
index 383b91c4fd7..00000000000
--- a/components/coachindicator/metadata/coachindicator.yml
+++ /dev/null
@@ -1,47 +0,0 @@
-name: Coach indicator
-SpectrumSiteSlug: https://spectrum.adobe.com/page/coach-mark/
-sections:
- - name: Migration Guide
- description: |
- - Coach Indicator is now a seperate component from Coach Mark
-examples:
- - id: coach-indicator
- name: Standard
- markup: |
-
-
-
-
-
- - id: coach-indicator-quiet
- name: Quiet
- markup: |
-
-
-
-
-
diff --git a/components/coachindicator/metadata/metadata.json b/components/coachindicator/metadata/metadata.json
index 6e93ca9156d..18fe7a23593 100644
--- a/components/coachindicator/metadata/metadata.json
+++ b/components/coachindicator/metadata/metadata.json
@@ -4,11 +4,11 @@
".spectrum-CoachIndicator",
".spectrum-CoachIndicator--dark .spectrum-CoachIndicator-ring",
".spectrum-CoachIndicator--light .spectrum-CoachIndicator-ring",
- ".spectrum-CoachIndicator--quiet",
".spectrum-CoachIndicator-ring",
".spectrum-CoachIndicator-ring:first-child",
".spectrum-CoachIndicator-ring:nth-child(2)",
".spectrum-CoachIndicator-ring:nth-child(3)",
+ ".spectrum-CoachIndicator.spectrum-CoachIndicator--quiet",
"0%",
"50%",
"to"
@@ -53,6 +53,7 @@
"--spectrum-coach-indicator-quiet-animation-keyframe-0-scale",
"--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple",
"--spectrum-coach-indicator-quiet-ring-diameter",
+ "--spectrum-coach-indicator-quiet-ring-diameter-size",
"--spectrum-coach-indicator-ring-block-size",
"--spectrum-coach-indicator-ring-border-size",
"--spectrum-coach-indicator-ring-dark-color",
@@ -68,7 +69,9 @@
"--spectrum-coach-animation-indicator-ring-center-delay-multiple",
"--spectrum-coach-animation-indicator-ring-duration",
"--spectrum-coach-animation-indicator-ring-inner-delay-multiple",
- "--spectrum-coach-animation-indicator-ring-outer-delay-multiple"
+ "--spectrum-coach-animation-indicator-ring-outer-delay-multiple",
+ "--spectrum-gray-25",
+ "--spectrum-gray-900"
],
"system-theme": [],
"passthroughs": [],
diff --git a/components/coachindicator/package.json b/components/coachindicator/package.json
index b1c5bc0d87c..896178ef453 100644
--- a/components/coachindicator/package.json
+++ b/components/coachindicator/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/coachindicator",
- "version": "2.1.4",
+ "version": "3.0.0-s2-foundations.14",
"description": "The Spectrum CSS Coach Indicator component ",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/coachindicator/stories/coachindicator.stories.js b/components/coachindicator/stories/coachindicator.stories.js
index 9d6e59b0cc6..2dfacc8a739 100644
--- a/components/coachindicator/stories/coachindicator.stories.js
+++ b/components/coachindicator/stories/coachindicator.stories.js
@@ -2,7 +2,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isQuiet } from "@spectrum-css/preview/types";
import pkgJson from "../package.json";
import { CoachIndicatorGroup } from "./coachindicator.test.js";
-import { AllVariantsCoachIndicatorGroup } from "./template";
+import { AllVariantsCoachIndicatorGroup } from "./template.js";
/**
* The coach indicator component can be used to bring added attention to specific parts of a page.
diff --git a/components/coachindicator/stories/template.js b/components/coachindicator/stories/template.js
index 62cd68e7ff1..3dd24772184 100644
--- a/components/coachindicator/stories/template.js
+++ b/components/coachindicator/stories/template.js
@@ -4,6 +4,9 @@ import { classMap } from "lit-html/directives/class-map.js";
import { styleMap } from "lit-html/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-CoachIndicator",
@@ -11,21 +14,23 @@ export const Template = ({
variant,
customClasses = [],
customStyles = {},
-}) => html`
- ({ ...a, [c]: true }), {}),
- })}
- style=${styleMap(customStyles)}
- >
- ${Array.from({ length: 3 }).map(() => html`
-
- `)}
-
({ ...a, [c]: true }), {}),
+ })}
+ style=${styleMap(customStyles)}
+ >
+ ${Array.from({ length: 3 }).map(() => html`
+
+ `)}
+
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/coachindicator/themes/spectrum-two.css b/components/coachindicator/themes/spectrum-two.css
new file mode 100644
index 00000000000..ebcdc6afbac
--- /dev/null
+++ b/components/coachindicator/themes/spectrum-two.css
@@ -0,0 +1,52 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-CoachIndicator {
+ --spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
+ --spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
+ --spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
+ --spectrum-coach-indicator-inline-size: var(--spectrum-coach-indicator-min-inline-size);
+ --spectrum-coach-indicator-block-size: var(--spectrum-coach-indicator-min-block-size);
+ --spectrum-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter);
+ --spectrum-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter);
+
+ --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
+ --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-25);
+
+ --spectrum-coach-indicator-top: calc((var(--spectrum-coach-indicator-block-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
+ --spectrum-coach-indicator-left: calc((var(--spectrum-coach-indicator-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size));
+
+ /* animation */
+ --spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000);
+ --spectrum-coach-animation-indicator-ring-inner-delay-multiple: -0.5;
+ --spectrum-coach-animation-indicator-ring-center-delay-multiple: -0.66;
+ --spectrum-coach-animation-indicator-ring-outer-delay-multiple: -1;
+ --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33;
+ --spectrum-coach-indicator-animation-name: pulse;
+ --spectrum-coach-indicator-inner-animation-delay-multiple: var(--spectrum-coach-animation-indicator-ring-inner-delay-multiple);
+
+ --spectrum-coach-indicator-animation-keyframe-0-scale: 1;
+ --spectrum-coach-indicator-animation-keyframe-0-opacity: 0;
+ --spectrum-coach-indicator-animation-keyframe-50-scale: 1.5;
+ --spectrum-coach-indicator-animation-keyframe-50-opacity: 1;
+ --spectrum-coach-indicator-animation-keyframe-100-scale: 2;
+ --spectrum-coach-indicator-animation-keyframe-100-opacity: 0;
+ --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: 0.8;
+
+ &.spectrum-CoachIndicator--quiet {
+ --spectrum-coach-indicator-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter);
+ --spectrum-coach-indicator-animation-name: pulse-quiet;
+ }
+ }
+}
diff --git a/components/coachindicator/themes/spectrum.css b/components/coachindicator/themes/spectrum.css
new file mode 100644
index 00000000000..ad7c2429e0e
--- /dev/null
+++ b/components/coachindicator/themes/spectrum.css
@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-CoachIndicator {
+ --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
+ }
+}
diff --git a/components/coachmark/CHANGELOG.md b/components/coachmark/CHANGELOG.md
index 544dbebeb7e..c95d303a681 100644
--- a/components/coachmark/CHANGELOG.md
+++ b/components/coachmark/CHANGELOG.md
@@ -1,5 +1,267 @@
# Change Log
+## 8.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.13
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.13
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/button@14.0.0-s2-foundations.15
+ - @spectrum-css/menu@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#3015](https://github.com/adobe/spectrum-css/pull/3015) [`db6f93d`](https://github.com/adobe/spectrum-css/commit/db6f93d6cb4b745a53a03a363284ac9e4f9cd46a) Thanks [@cdransf](https://github.com/cdransf)! - Move the coachmark modifiers out of the theme to the base index.css.
+
+### Patch Changes
+
+- Updated dependencies [[`f15243a`](https://github.com/adobe/spectrum-css/commit/f15243adaa633531e82edbb61b2e4444517af64e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.16
+
+## 8.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-239] passthroughs referencing global token values in index.css abstracted to define alias' in the coach mark theme file
+
+### Patch Changes
+
+- Updated dependencies [[`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f), [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.14
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.12
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.12
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/button@14.0.0-s2-foundations.12
+ - @spectrum-css/menu@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.11
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.11
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/button@14.0.0-s2-foundations.11
+ - @spectrum-css/menu@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.10
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.10
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/button@14.0.0-s2-foundations.10
+ - @spectrum-css/menu@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.9
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.9
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/button@14.0.0-s2-foundations.9
+ - @spectrum-css/menu@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.8
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.8
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/button@14.0.0-s2-foundations.8
+ - @spectrum-css/menu@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.7
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.7
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/button@14.0.0-s2-foundations.7
+ - @spectrum-css/menu@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.6
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+ - @spectrum-css/button@14.0.0-s2-foundations.6
+ - @spectrum-css/menu@8.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.5
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.5
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/button@14.0.0-s2-foundations.5
+ - @spectrum-css/menu@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.4
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.4
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/button@14.0.0-s2-foundations.4
+ - @spectrum-css/menu@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.3
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.3
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/button@14.0.0-s2-foundations.3
+ - @spectrum-css/menu@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.2
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.2
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/button@14.0.0-s2-foundations.2
+ - @spectrum-css/menu@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.1
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.1
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/button@14.0.0-s2-foundations.1
+ - @spectrum-css/menu@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/button@14.0.0-s2-foundations.0
+ - @spectrum-css/menu@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/actionmenu@7.0.0-s2-foundations.0
+ - @spectrum-css/buttongroup@8.0.0-s2-foundations.0
+
## 7.1.3
### Patch Changes
diff --git a/components/coachmark/index.css b/components/coachmark/index.css
index 79550d30787..ffe9c5be395 100644
--- a/components/coachmark/index.css
+++ b/components/coachmark/index.css
@@ -11,55 +11,19 @@
* governing permissions and limitations under the License.
*/
-.spectrum-CoachMark {
- --spectrum-coachmark-min-width: var(--spectrum-coach-mark-minimum-width);
- --spectrum-coachmark-width: var(--spectrum-coach-mark-width);
- --spectrum-coachmark-max-width: var(--spectrum-coach-mark-maximum-width);
-
- --spectrum-coachmark-media-height: var(--spectrum-coach-mark-media-height);
- --spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height);
-
- --spectrum-coachmark-border-size: var(--mod-popover-border-width);
- --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius);
+@import "./themes/spectrum-two.css";
- /* layout */
- --spectrum-coachmark-padding: var(--spectrum-coach-mark-edge-to-content);
- --spectrum-coachmark-heading-to-action-button: var(--spectrum-spacing-300);
- --spectrum-coachmark-header-to-body: var(--spectrum-spacing-200);
- --spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300);
-
- /* font */
- --spectrum-coachmark-title-color: var(--spectrum-heading-color);
- --spectrum-coachmark-title-font-family: var(--spectrum-sans-serif-font);
- --spectrum-coachmark-title-font-style: var(--spectrum-heading-serif-font-style);
- --spectrum-coachmark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight);
- --spectrum-coachmark-title-font-size: var(--spectrum-coach-mark-title-size);
- --spectrum-coachmark-title-text-line-height: var(--spectrum-heading-line-height);
-
- --spectrum-coachmark-content-font-color: var(--spectrum-body-color);
- --spectrum-coachmark-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-coachmark-content-font-family: var(--spectrum-sans-serif-font);
- --spectrum-coachmark-content-font-style: var(--spectrum-body-sans-serif-font-style);
- --spectrum-coachmark-content-line-height: var(--spectrum-body-line-height);
- --spectrum-coachmark-content-font-size: var(--spectrum-coach-mark-body-size);
-
- --spectrum-coachmark-step-color: var(--spectrum-coach-mark-pagination-color);
- --spectrum-coachmark-step-font-weight: var(--spectrum-body-medium-font-weight);
- --spectrum-coachmark-step-font-family: var(--spectrum-sans-serif-font);
- --spectrum-coachmark-step-font-style: var(--spectrum-body-sans-serif-font-style);
- --spectrum-coachmark-step-line-height: var(--spectrum-body-line-height);
- --spectrum-coachmark-step-font-size: var(--spectrum-coach-mark-pagination-body-size);
- --spectrum-coachmark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge);
-
- /* mods */
+.spectrum-CoachMark {
+ /** @passthroughs */
--mod-buttongroup-justify-content: flex-end;
- --mod-popover-border-width: var(--spectrum-border-width-100);
- --mod-popover-corner-radius: var(--spectrum-corner-radius-100);
+ --mod-popover-border-width: var(--spectrum-coachmark-popover-border-width);
+ --mod-popover-corner-radius: var(--spectrum-coachmark-popover-corner-radius);
--mod-popover-content-area-spacing-vertical: 0;
--mod-button-edge-to-visual-only: 9px;
-}
-.spectrum-CoachMark {
+ --spectrum-coachmark-border-size: var(--mod-popover-border-width);
+ --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius);
+
position: relative;
min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coachmark-min-width));
max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coachmark-max-width));
@@ -71,7 +35,8 @@
}
.spectrum-CoachMark-buttongroup--mobile {
- --mod-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
+ --mod-buttongroup-spacing-horizontal: var(--spectrum-coachmark-buttongroup-spacing-horizontal);
+
display: var(--spectrum-coachmark-buttongroup-mobile-display);
}
diff --git a/components/coachmark/metadata/coachmark.yml b/components/coachmark/metadata/coachmark.yml
deleted file mode 100644
index 077941d0cf6..00000000000
--- a/components/coachmark/metadata/coachmark.yml
+++ /dev/null
@@ -1,211 +0,0 @@
-name: Coach mark
-SpectrumSiteSlug: https://spectrum.adobe.com/page/coach-mark/
-sections:
- - name: Migration Guide
- description: |
- - Coach Mark is now a seperate component from Coach Indicator
-examples:
- - id: coachmark
- name: Standard
- markup: |
-
-
-
-
-
- Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
-
-
-
-
-
-
-
-
-
- Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
-
-
-
-
-
-
-
-
-
-
-
-
-
- Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
-
-
-
-
-
-
-
-
-
-
-
-
-
- Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/coachmark/themes/spectrum-two.css b/components/coachmark/themes/spectrum-two.css
new file mode 100644
index 00000000000..3e7d52e4d33
--- /dev/null
+++ b/components/coachmark/themes/spectrum-two.css
@@ -0,0 +1,57 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-CoachMark {
+ --spectrum-coachmark-min-width: var(--spectrum-coach-mark-minimum-width);
+ --spectrum-coachmark-width: var(--spectrum-coach-mark-width);
+ --spectrum-coachmark-max-width: var(--spectrum-coach-mark-maximum-width);
+
+ --spectrum-coachmark-media-height: var(--spectrum-coach-mark-media-height);
+ --spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height);
+
+ /* layout */
+ --spectrum-coachmark-padding: var(--spectrum-coach-mark-edge-to-content);
+ --spectrum-coachmark-heading-to-action-button: var(--spectrum-spacing-300);
+ --spectrum-coachmark-header-to-body: var(--spectrum-spacing-200);
+ --spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300);
+
+ /* font */
+ --spectrum-coachmark-title-color: var(--spectrum-heading-color);
+ --spectrum-coachmark-title-font-family: var(--spectrum-sans-serif-font);
+ --spectrum-coachmark-title-font-style: var(--spectrum-heading-serif-font-style);
+ --spectrum-coachmark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight);
+ --spectrum-coachmark-title-font-size: var(--spectrum-coach-mark-title-size);
+ --spectrum-coachmark-title-text-line-height: var(--spectrum-heading-line-height);
+
+ --spectrum-coachmark-content-font-color: var(--spectrum-body-color);
+ --spectrum-coachmark-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
+ --spectrum-coachmark-content-font-family: var(--spectrum-sans-serif-font);
+ --spectrum-coachmark-content-font-style: var(--spectrum-body-sans-serif-font-style);
+ --spectrum-coachmark-content-line-height: var(--spectrum-body-line-height);
+ --spectrum-coachmark-content-font-size: var(--spectrum-coach-mark-body-size);
+
+ --spectrum-coachmark-step-color: var(--spectrum-coach-mark-pagination-color);
+ --spectrum-coachmark-step-font-weight: var(--spectrum-body-medium-font-weight);
+ --spectrum-coachmark-step-font-family: var(--spectrum-sans-serif-font);
+ --spectrum-coachmark-step-font-style: var(--spectrum-body-sans-serif-font-style);
+ --spectrum-coachmark-step-line-height: var(--spectrum-body-line-height);
+ --spectrum-coachmark-step-font-size: var(--spectrum-coach-mark-pagination-body-size);
+ --spectrum-coachmark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge);
+
+ /* passthrough abstractions */
+ --spectrum-coachmark-popover-border-width: var(--spectrum-border-width-100);
+ --spectrum-coachmark-popover-corner-radius: var(--spectrum-corner-radius-100);
+ --spectrum-coachmark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
+ }
+}
diff --git a/components/coachmark/themes/spectrum.css b/components/coachmark/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/coachmark/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/colorarea/CHANGELOG.md b/components/colorarea/CHANGELOG.md
index 0caa23d8a32..744783a9f07 100644
--- a/components/colorarea/CHANGELOG.md
+++ b/components/colorarea/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/colorarea/index.css b/components/colorarea/index.css
index cf24c6c22d7..83594a02b5b 100644
--- a/components/colorarea/index.css
+++ b/components/colorarea/index.css
@@ -10,16 +10,8 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
-.spectrum-ColorArea {
- --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
- --spectrum-colorarea-border-color: rgba(0, 0, 0, 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
- --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
- --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
- --spectrum-colorarea-height: var(--spectrum-color-area-height);
- --spectrum-colorarea-width: var(--spectrum-color-area-width);
- --spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width);
- --spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height);
-}
+
+@import "./themes/spectrum-two.css";
/* Windows High Contrast Mode */
@media (forced-colors: active) {
diff --git a/components/colorarea/metadata/colorarea.yml b/components/colorarea/metadata/colorarea.yml
deleted file mode 100644
index ae2e5ea9e5b..00000000000
--- a/components/colorarea/metadata/colorarea.yml
+++ /dev/null
@@ -1,65 +0,0 @@
-name: Color area
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/color-area/
-description: |
- - The `.spectrum-ColorHandle` should be moved with the `transform: translate(x, y)` style property as the sliders are dragged
- - Set the `background` style property of `.spectrum-ColorArea-gradient` to the gradient of the colors to be selected
- - Set the `value` attribute of `.spectrum-ColorArea-slider[name=x]` to the currently selected x value (i.e. saturation)
- - Set the `value` attribute of `.spectrum-ColorArea-slider[name=y]` to the currently selected y value (i.e. value)
- - Set the value of the ColorHandle component to the selected color
- - Marshall focus between the saturation and value sliders according to which keys are pressed (up/down for value, left/right for saturation)
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- - canvas variant has been removed
-examples:
- - id: color-area
- name: Standard
- markup: |
-
-
- - id: color-area
- name: Disabled
- markup: |
-
-
- - id: color-area
- name: Custom Size
- markup: |
-
diff --git a/components/colorarea/metadata/metadata.json b/components/colorarea/metadata/metadata.json
index 700f0f3caf3..21a748b6a12 100644
--- a/components/colorarea/metadata/metadata.json
+++ b/components/colorarea/metadata/metadata.json
@@ -30,6 +30,8 @@
"--spectrum-color-area-minimum-width",
"--spectrum-color-area-width",
"--spectrum-colorarea-border-color",
+ "--spectrum-colorarea-border-color-opacity",
+ "--spectrum-colorarea-border-color-rgb",
"--spectrum-colorarea-border-radius",
"--spectrum-colorarea-border-width",
"--spectrum-colorarea-disabled-background-color",
diff --git a/components/colorarea/package.json b/components/colorarea/package.json
index 0b912f9b9f8..132d8e5c2c5 100644
--- a/components/colorarea/package.json
+++ b/components/colorarea/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/colorarea",
- "version": "5.1.3",
+ "version": "6.0.0-s2-foundations.13",
"description": "The Spectrum CSS Color Area component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/colorarea/stories/colorarea.test.js b/components/colorarea/stories/colorarea.test.js
index e55ef65e161..0536a118c06 100644
--- a/components/colorarea/stories/colorarea.test.js
+++ b/components/colorarea/stories/colorarea.test.js
@@ -14,7 +14,6 @@ export const ColorAreaGroup = Variants({
},
],
stateData: [
-
{
testHeading: "Disabled",
isDisabled: true,
diff --git a/components/colorarea/stories/template.js b/components/colorarea/stories/template.js
index 35a66e3cc69..541357db203 100644
--- a/components/colorarea/stories/template.js
+++ b/components/colorarea/stories/template.js
@@ -4,6 +4,9 @@ import { classMap } from "lit/directives/class-map.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ColorArea",
@@ -16,6 +19,7 @@ export const Template = ({
selectedColor = "rgba(255, 0, 0, 1)",
} = {}, context = {}) => {
const { updateArgs } = context;
+
return html`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/colorarea/themes/spectrum-two.css b/components/colorarea/themes/spectrum-two.css
new file mode 100644
index 00000000000..4ba68fa1502
--- /dev/null
+++ b/components/colorarea/themes/spectrum-two.css
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-ColorArea {
+ --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
+ --spectrum-colorarea-border-color: rgb(0 0 0 / 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
+ --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
+ --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
+ --spectrum-colorarea-height: var(--spectrum-color-area-height);
+ --spectrum-colorarea-width: var(--spectrum-color-area-width);
+ --spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width);
+ --spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height);
+ }
+}
diff --git a/components/colorarea/themes/spectrum.css b/components/colorarea/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/colorarea/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/colorhandle/CHANGELOG.md b/components/colorhandle/CHANGELOG.md
index d08033a1fb8..c083c23d749 100644
--- a/components/colorhandle/CHANGELOG.md
+++ b/components/colorhandle/CHANGELOG.md
@@ -1,5 +1,195 @@
# Change Log
+## 9.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.13
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 9.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#3016](https://github.com/adobe/spectrum-css/pull/3016) [`9dd8558`](https://github.com/adobe/spectrum-css/commit/9dd85581dff69b051a16a3b71054fa65334d106b) Thanks [@cdransf](https://github.com/cdransf)! - Move the color handle passthrough modifiers out of the theme to the base index.css.
+
+## 9.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.12
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 9.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.11
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 9.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.10
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 9.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.9
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 9.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.8
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 9.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.7
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 9.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.6
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.6
+
+## 9.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.5
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 9.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.4
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 9.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.3
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 9.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.2
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 9.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.1
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 9.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.0
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.0
+
## 8.1.3
### Patch Changes
diff --git a/components/colorhandle/index.css b/components/colorhandle/index.css
index b6ce941d068..6908571f9c1 100644
--- a/components/colorhandle/index.css
+++ b/components/colorhandle/index.css
@@ -10,32 +10,13 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
-.spectrum-ColorHandle {
- --spectrum-colorhandle-size: var(--spectrum-color-handle-size);
- --spectrum-colorhandle-focused-size: var(--spectrum-color-handle-size-key-focus);
- --spectrum-colorhandle-hitarea-size: var(--spectrum-color-control-track-width);
-
- --spectrum-colorhandle-animation-duration: var(--spectrum-animation-duration-100);
- --spectrum-colorhandle-animation-easing: ease-in-out;
-
- /* outer border as box shadow on the colorhandle */
- --spectrum-colorhandle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */
- --spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width);
- /* inner border as inset boxshadow on the colorhandle-inner */
- --spectrum-colorhandle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */
- --spectrum-colorhandle-inner-border-width: var(--spectrum-color-handle-inner-border-width);
+@import "./themes/spectrum-two.css";
- /* primary border on color handle */
- --spectrum-colorhandle-border-width: var(--spectrum-color-handle-border-width);
- --spectrum-colorhandle-border-color: var(--spectrum-white);
-
- --spectrum-colorhandle-border-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-colorhandle-fill-color-disabled: var(--spectrum-disabled-background-color);
+.spectrum-ColorHandle {
+ /* @passthrough -- opacity checkerboard customization */
--mod-opacity-checkerboard-position: 50%;
-}
-.spectrum-ColorHandle {
display: block;
position: absolute;
z-index: 1; /* Be above */
@@ -54,6 +35,8 @@
border-radius: 100%;
+ transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing));
+
&::after {
content: "";
inset-inline: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2));
@@ -65,8 +48,6 @@
border-radius: var(--mod-colorhandle-hitarea-border-radius, 100%);
}
- transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing));
-
&.is-focused,
&:focus-visible {
/* Bigger handle when focused */
diff --git a/components/colorhandle/metadata/colorhandle.yml b/components/colorhandle/metadata/colorhandle.yml
deleted file mode 100644
index 1367e3caf31..00000000000
--- a/components/colorhandle/metadata/colorhandle.yml
+++ /dev/null
@@ -1,60 +0,0 @@
-name: Color handle
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/color-area/
-description: |
- - Set the `--spectrum-picked-color` custom property to the CSS color value you want to show
- - Apply `.is-open` to `.spectrum-ColorLoupe` display the loupe
-sections:
- - name: Migration Guide
- description: |
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: color-area
- name: Standard
- demoClassName: spectrum-CSSExample-example--spacious
- markup: |
-
- - id: color-area
- name: Disabled
- demoClassName: spectrum-CSSExample-example--spacious
- markup: |
-
- - id: color-area
- name: Open
- demoClassName: spectrum-CSSExample-example--spacious
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/colorhandle/themes/spectrum-two.css b/components/colorhandle/themes/spectrum-two.css
new file mode 100644
index 00000000000..f3ef852ab6b
--- /dev/null
+++ b/components/colorhandle/themes/spectrum-two.css
@@ -0,0 +1,38 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-ColorHandle {
+ --spectrum-colorhandle-size: var(--spectrum-color-handle-size);
+ --spectrum-colorhandle-focused-size: var(--spectrum-color-handle-size-key-focus);
+ --spectrum-colorhandle-hitarea-size: var(--spectrum-color-control-track-width);
+
+ --spectrum-colorhandle-animation-duration: var(--spectrum-animation-duration-100);
+ --spectrum-colorhandle-animation-easing: ease-in-out;
+
+ /* outer border as box shadow on the colorhandle */
+ --spectrum-colorhandle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */
+ --spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width);
+
+ /* inner border as inset boxshadow on the colorhandle-inner */
+ --spectrum-colorhandle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */
+ --spectrum-colorhandle-inner-border-width: var(--spectrum-color-handle-inner-border-width);
+
+ /* primary border on color handle */
+ --spectrum-colorhandle-border-width: var(--spectrum-color-handle-border-width);
+ --spectrum-colorhandle-border-color: var(--spectrum-white);
+
+ --spectrum-colorhandle-border-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-colorhandle-fill-color-disabled: var(--spectrum-disabled-background-color);
+ }
+}
diff --git a/components/colorhandle/themes/spectrum.css b/components/colorhandle/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/colorhandle/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/colorloupe/CHANGELOG.md b/components/colorloupe/CHANGELOG.md
index 06ee063a5d1..72129e2bea8 100644
--- a/components/colorloupe/CHANGELOG.md
+++ b/components/colorloupe/CHANGELOG.md
@@ -1,5 +1,161 @@
# Change Log
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/colorloupe/index.css b/components/colorloupe/index.css
index 2f243c42612..0e0ba122aaa 100644
--- a/components/colorloupe/index.css
+++ b/components/colorloupe/index.css
@@ -10,26 +10,8 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
-.spectrum-ColorLoupe {
- --spectrum-colorloupe-width: var(--spectrum-color-loupe-width);
- --spectrum-colorloupe-height: var(--spectrum-color-loupe-height);
-
- --spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle);
- --spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */
-
- --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-x);
- --spectrum-colorloupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y);
- --spectrum-colorloupe-drop-shadow-blur: var(--spectrum-color-loupe-drop-shadow-blur);
- --spectrum-colorloupe-drop-shadow-color: var(--spectrum-color-loupe-drop-shadow-color);
- --spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width);
- --spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width);
- --spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border);
- --spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border);
-
- --spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark);
- --spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light);
-}
+@import "./themes/spectrum-two.css";
.spectrum-ColorLoupe {
inline-size: var(--spectrum-colorloupe-width);
@@ -42,9 +24,7 @@
inset-block-end: calc((var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width)) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset)));
inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2));
- transition:
- transform 100ms ease-in-out,
- opacity 125ms ease-in-out;
+ transition: transform 100ms ease-in-out, opacity 125ms ease-in-out;
pointer-events: none;
filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-colorloupe-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-colorloupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-colorloupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-colorloupe-drop-shadow-color)));
diff --git a/components/colorloupe/metadata/colorloupe.yml b/components/colorloupe/metadata/colorloupe.yml
deleted file mode 100644
index 00520ee320d..00000000000
--- a/components/colorloupe/metadata/colorloupe.yml
+++ /dev/null
@@ -1,39 +0,0 @@
-name: Color loupe
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/color-loupe/
-description: |
- - Set the `--spectrum-picked-color` custom property to the CSS color value you want to show
- - Apply `.is-open` to display the loupe
- - Color Loupe does not have a disabled style; do not show it when the handle its attached to is disabled.
-examples:
- - id: color-loupe
- name: Standard
- demoClassName: spectrum-CSSExample-example--spacious
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/components/colorloupe/package.json b/components/colorloupe/package.json
index 24301bbeaac..c47064e8a51 100644
--- a/components/colorloupe/package.json
+++ b/components/colorloupe/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/colorloupe",
- "version": "5.1.3",
+ "version": "6.0.0-s2-foundations.13",
"description": "The Spectrum CSS Color Loupe component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/colorloupe/stories/template.js b/components/colorloupe/stories/template.js
index 0205238614a..8f3a3989b48 100644
--- a/components/colorloupe/stories/template.js
+++ b/components/colorloupe/stories/template.js
@@ -3,6 +3,9 @@ import { classMap } from "lit/directives/class-map.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ColorLoupe",
@@ -11,7 +14,8 @@ export const Template = ({
customStyles = {},
customClasses = [],
selectedColor = "rgba(255, 0, 0, 0.5)",
-} = {}) => svg`
+} = {}) => {
+ return svg`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/colorloupe/themes/spectrum-two.css b/components/colorloupe/themes/spectrum-two.css
new file mode 100644
index 00000000000..d04f3765aa0
--- /dev/null
+++ b/components/colorloupe/themes/spectrum-two.css
@@ -0,0 +1,35 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-ColorLoupe {
+ --spectrum-colorloupe-width: var(--spectrum-color-loupe-width);
+ --spectrum-colorloupe-height: var(--spectrum-color-loupe-height);
+
+ --spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle);
+ --spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */
+
+ --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-x);
+ --spectrum-colorloupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y);
+ --spectrum-colorloupe-drop-shadow-blur: var(--spectrum-color-loupe-drop-shadow-blur);
+ --spectrum-colorloupe-drop-shadow-color: var(--spectrum-color-loupe-drop-shadow-color);
+
+ --spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width);
+ --spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width);
+ --spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border);
+ --spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border);
+
+ --spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark);
+ --spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light);
+ }
+}
diff --git a/components/colorloupe/themes/spectrum.css b/components/colorloupe/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/colorloupe/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/colorslider/CHANGELOG.md b/components/colorslider/CHANGELOG.md
index 4d9b2943e22..f1324148a78 100644
--- a/components/colorslider/CHANGELOG.md
+++ b/components/colorslider/CHANGELOG.md
@@ -1,5 +1,200 @@
# Change Log
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.13
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#3017](https://github.com/adobe/spectrum-css/pull/3017) [`2715979`](https://github.com/adobe/spectrum-css/commit/2715979ffef5eda39cf2701d0cccd18efd94136c) Thanks [@cdransf](https://github.com/cdransf)! - Move the color slider passthrough modifiers out of the theme to the base index.css.
+
+### Patch Changes
+
+- Updated dependencies [[`9dd8558`](https://github.com/adobe/spectrum-css/commit/9dd85581dff69b051a16a3b71054fa65334d106b)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.12
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.11
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.10
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.9
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.8
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.7
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.6
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.5
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.4
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.3
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.2
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.1
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.0
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.0
+
## 6.1.3
### Patch Changes
diff --git a/components/colorslider/index.css b/components/colorslider/index.css
index c8b855b9bd9..069547f657c 100644
--- a/components/colorslider/index.css
+++ b/components/colorslider/index.css
@@ -11,21 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-ColorSlider {
- /* Size and Spacing */
- --spectrum-color-slider-handle-margin-block: var(--spectrum-component-top-to-text-75);
-
- /* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
- --spectrum-color-slider-border-color-rgba: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity));
-
- /* Checkerboard pattern */
- --spectrum-color-slider-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size);
- --spectrum-color-slider-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark);
- --spectrum-color-slider-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light);
-
- /* Settings for nested Color handle */
- --mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px);
-}
+@import "./themes/spectrum-two.css";
@media (forced-colors: active) {
.spectrum-ColorSlider {
@@ -37,6 +23,9 @@
}
.spectrum-ColorSlider {
+ /* @passthroughs -- settings for nested color handle */
+ --mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px);
+
position: relative;
display: block;
diff --git a/components/colorslider/metadata/colorslider.yml b/components/colorslider/metadata/colorslider.yml
deleted file mode 100644
index 50edaee50bb..00000000000
--- a/components/colorslider/metadata/colorslider.yml
+++ /dev/null
@@ -1,197 +0,0 @@
-name: Color slider
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/color-slider/
-description: |
- - Set the color of the nested Color handle component to match Color slider's currently selected color using its custom property: `--spectrum-picked-color`.
- - The `.spectrum-ColorHandle` should be moved with `inset-inline-*` (horizontal) or `inset-block-*` (vertical) style properties as the slider is dragged.
- - Ensure that you set the `min` and `max` attributes of the `.spectrum-ColorSlider-slider` input to the corresponding scale (i.e. `0` to `1` for `a`, `0` to `255` for `r`, etc).
- - Ensure that you set the `step` attribute of the `.spectrum-ColorSlider-slider` input appropriately (i.e. `0.1` for `a`, `s`, `v` or `1` and `h`, `r`, etc).
- - Set the `background` style property of `.spectrum-ColorSlider-gradient` to the gradient of the colors to be selected. The CSS will automatically reverse the gradient element horizontally when using a RTL (right-to-left) base direction.
- - Alternatively, provide a `` or `here .
- - name: Migration Guide
- description: |
- - The component now supports a RTL (right-to-left) base direction with logical properties, and reverses the gradient.
- - Color slider examples no longer display a "canvas" variant.
-examples:
- - id: color-slider
- name: Standard
- markup: |
-
-
- - id: color-slider-alpha
- name: Alpha
- markup: |
-
-
- - id: color-slider-disabled
- name: Disabled
- markup: |
-
-
- - id: color-slider-vertical
- name: Vertical
- markup: |
-
-
- - id: color-slider-with-image
- name: Standard (with image)
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/colorslider/themes/spectrum-two.css b/components/colorslider/themes/spectrum-two.css
new file mode 100644
index 00000000000..4f81f14b83d
--- /dev/null
+++ b/components/colorslider/themes/spectrum-two.css
@@ -0,0 +1,27 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-ColorSlider {
+ /* Size and Spacing */
+ --spectrum-color-slider-handle-margin-block: var(--spectrum-component-top-to-text-75);
+
+ /* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
+ --spectrum-color-slider-border-color-rgba: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity));
+
+ /* Checkerboard pattern */
+ --spectrum-color-slider-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size);
+ --spectrum-color-slider-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark);
+ --spectrum-color-slider-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light);
+ }
+}
diff --git a/components/colorslider/themes/spectrum.css b/components/colorslider/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/colorslider/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/colorwheel/CHANGELOG.md b/components/colorwheel/CHANGELOG.md
index 89ea46070f2..5aff8c5cb74 100644
--- a/components/colorwheel/CHANGELOG.md
+++ b/components/colorwheel/CHANGELOG.md
@@ -1,5 +1,203 @@
# Change Log
+## 5.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.14
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.13
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 5.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.12
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.12
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 5.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.11
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.11
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 5.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.10
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.10
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 5.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.9
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.9
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 5.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.8
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.8
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 5.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.7
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.7
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 5.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.6
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.6
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.6
+
+## 5.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.5
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.5
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 5.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.4
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.4
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 5.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.3
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.3
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 5.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.2
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.2
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 5.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.1
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.1
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 5.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/colorarea@6.0.0-s2-foundations.0
+ - @spectrum-css/colorhandle@9.0.0-s2-foundations.0
+ - @spectrum-css/colorloupe@6.0.0-s2-foundations.0
+
## 4.1.3
### Patch Changes
diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css
index 20d95047da6..7aac955ca2f 100644
--- a/components/colorwheel/index.css
+++ b/components/colorwheel/index.css
@@ -10,31 +10,24 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
-.spectrum-ColorWheel {
- --spectrum-colorwheel-width: var(--spectrum-color-wheel-width);
- --spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width);
- --spectrum-colorwheel-height: var(--spectrum-color-wheel-width);
- --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200);
- --spectrum-colorwheel-border-width: var(--spectrum-border-width-100);
- --spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width);
- --spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin);
- --spectrum-colorwheel-colorhandle-position: calc((var(--spectrum-colorwheel-width) / 2) - (var(--spectrum-colorwheel-track-width) / 2));
-}
+
+@import "./themes/spectrum-two.css";
/* Windows High Contrast Mode */
@media (forced-colors: active) {
.spectrum-ColorWheel {
--highcontrast-colorwheel-border-color-disabled: GrayText;
--highcontrast-colorwheel-fill-color-disabled: Canvas;
- }
- .spectrum-ColorWheel {
forced-color-adjust: none;
}
}
.spectrum-ColorWheel {
+ /* --_track-width and --_border-width to be used with JS in calculating the clip-path paths and colorarea-container-size */
+ --_track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width));
+ --_border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width));
+
position: relative;
display: block;
min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-colorwheel-min-width));
@@ -47,10 +40,6 @@
z-index: 2;
}
- /* --track-width and --border-width to be used with JS in calculating the clip-path paths and colorarea-container-size */
- --track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width));
- --border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width));
-
&.is-disabled {
pointer-events: none;
}
@@ -124,7 +113,7 @@
.spectrum-ColorWheel-wheel {
position: absolute;
- background: conic-gradient(from 90deg, red, rgb(255, 128, 0), rgb(255, 255, 0), rgb(128, 255, 0), rgb(0, 255, 0), rgb(0, 255, 128), rgb(0, 255, 255), rgb(0, 128, 255), rgb(0, 0, 255), rgb(128, 0, 255), rgb(255, 0, 255), rgb(255, 0, 128), red);
+ background: conic-gradient(from 90deg, red, rgb(255 128 0), rgb(255 255 0), rgb(128 255 0), rgb(0 255 0), rgb(0 255 128), rgb(0 255 255), rgb(0 128 255), rgb(0 0 255), rgb(128 0 255), rgb(255 0 255), rgb(255 0 128), red);
inset-block: var(--spectrum-colorwheel-border-width);
inset-inline: var(--spectrum-colorwheel-border-width);
clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path)));
diff --git a/components/colorwheel/metadata/colorwheel.yml b/components/colorwheel/metadata/colorwheel.yml
deleted file mode 100644
index 27dd8f12780..00000000000
--- a/components/colorwheel/metadata/colorwheel.yml
+++ /dev/null
@@ -1,91 +0,0 @@
-name: Color wheel
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/color-wheel/
-description: |
- - For a given rotation on the wheel, `X`, the `.spectrum-ColorHandle` should be moved by applying the style property `transform: translate(${Y * Math.cos(X)}px, ${Y * Math.sin(X)}px)`, where Y is ((radius - `.spectrum-colorwheel-track-width`) / 2))
- - Set the `value` attribute of `.spectrum-ColorWheel-value` to the currently selected color (i.e. `hsl(326, 100%, 50%)`)
- - Add `.is-dragged` when the handle is being dragged
- - To display with ColorArea inside of ColorWheel, add ColorArea to `spectrum-ColorWheel-colorarea-container` with `style="--mod-colorarea-width: 70.1%; --mod-colorarea-height: 70.1%"`
- - `.spectrum-colorwheel-colorarea-container-size` is hard coded to position the ColorArea within the ColorWheel using `.spectrum-color-wheel-color-area-margin`. Using JS container size can be calcaulted with `Math.sqrt(2 * R * R)`, where R is the innerRadius as calcaulted for the clip paths
- - `.spectrum-colorwheel-path`, `.spectrum-colorwheel-path-borders` and `.spectrum-colorwheel-colorarea-container` are hard coded in CSS and include token values in custom CSS variables so they can be accessed with JS to and used to calcualte these values, `const wheel = document.querySelector(".spectrum-ColorWheel-wheel") getComputedStyle(wheel).getPropertyValue('--track-width'))`
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- - Colorwheel no longer displays a canvas variant
- - ColorWheel refactored to use a clip-path instead of an svg with a mask
-examples:
- - id: color-wheel
- name: Standard
- markup: |
-
- - id: color-wheel
- name: Disabled
- markup: |
-
- - id: color-wheel
- name: Standard with ColorArea
- markup: |
-
diff --git a/components/colorwheel/package.json b/components/colorwheel/package.json
index d7f5f1aea8a..c7aecb94d8d 100644
--- a/components/colorwheel/package.json
+++ b/components/colorwheel/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/colorwheel",
- "version": "4.1.3",
+ "version": "5.0.0-s2-foundations.13",
"description": "The Spectrum CSS Color Area component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/colorwheel/stories/template.js b/components/colorwheel/stories/template.js
index 1d02f5e7823..851150ffd37 100644
--- a/components/colorwheel/stories/template.js
+++ b/components/colorwheel/stories/template.js
@@ -5,6 +5,9 @@ import { classMap } from "lit/directives/class-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ColorWheel",
diff --git a/components/colorwheel/themes/express.css b/components/colorwheel/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/colorwheel/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/colorwheel/themes/spectrum-two.css b/components/colorwheel/themes/spectrum-two.css
new file mode 100644
index 00000000000..66ddfcbb48c
--- /dev/null
+++ b/components/colorwheel/themes/spectrum-two.css
@@ -0,0 +1,26 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-ColorWheel {
+ --spectrum-colorwheel-width: var(--spectrum-color-wheel-width);
+ --spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width);
+ --spectrum-colorwheel-height: var(--spectrum-color-wheel-width);
+ --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200);
+ --spectrum-colorwheel-border-width: var(--spectrum-border-width-100);
+ --spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width);
+ --spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin);
+ --spectrum-colorwheel-colorhandle-position: calc((var(--spectrum-colorwheel-width) / 2) - (var(--spectrum-colorwheel-track-width) / 2));
+ }
+}
diff --git a/components/colorwheel/themes/spectrum.css b/components/colorwheel/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/colorwheel/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/combobox/CHANGELOG.md b/components/combobox/CHANGELOG.md
index 4db24a7d7cb..662b882431b 100644
--- a/components/combobox/CHANGELOG.md
+++ b/components/combobox/CHANGELOG.md
@@ -1,5 +1,276 @@
# Change Log
+## 4.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4e80ae6`](https://github.com/adobe/spectrum-css/commit/4e80ae67ddda329a5ed556b57426623c6f0f13f0) Thanks [@pfulton](https://github.com/pfulton)! - ActionButton:
+
+ - Correct --spectrum-actionbutton-background-color-selected-disabled to be --spectrum-actionbutton-(background|border)-color-disabled-selected
+
+ Combobox:
+
+ - Move --spectrum-combobox-min-inline-size and --spectrum-combobox-button-width to the index.css
+
+ FieldGroup:
+
+ - Swap gap back to margin-inline-end on FieldGroup
+
+ Typography:
+
+ - Remap body size to xs if xxs provided
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9ae725f`](https://github.com/adobe/spectrum-css/commit/9ae725f10ebbb78b62070c4c477cb41cfc1b1ed6) Thanks [@pfulton](https://github.com/pfulton)! - Combobox moved the quiet min-inline-size property to index.css from theme to pick up the t-shirt sizing for the calc.
+
+ Typography increases specificity for the t-shirt sizing.
+
+ Stepper fixes for the disabled + hovered states as well as regressions fixed for the quiet variant.
+
+## 4.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.13
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.14
+ - @spectrum-css/textfield@8.0.0-s2-foundations.14
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/menu@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#3036](https://github.com/adobe/spectrum-css/pull/3036) [`96686a5`](https://github.com/adobe/spectrum-css/commit/96686a56e2532bc747985b40686783ddd9b98221) Thanks [@rise-erpelding](https://github.com/rise-erpelding)! - [CSS-890]: adjusts --mods to be applied inside of index.css
+
+### Patch Changes
+
+- Updated dependencies [[`96686a5`](https://github.com/adobe/spectrum-css/commit/96686a56e2532bc747985b40686783ddd9b98221)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.18
+
+## 4.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a0d6de4`](https://github.com/adobe/spectrum-css/commit/a0d6de45845c9158ca30da1a34e30461a9d0af31) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-240] Quiet combobox picker button should have transparent borders
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.12
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.12
+ - @spectrum-css/textfield@8.0.0-s2-foundations.12
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/menu@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.11
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.11
+ - @spectrum-css/textfield@8.0.0-s2-foundations.11
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/menu@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.10
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.10
+ - @spectrum-css/textfield@8.0.0-s2-foundations.10
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/menu@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`da47fa2`](https://github.com/adobe/spectrum-css/commit/da47fa2cb18373e74a6718775f2db90bb25868d4), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.9
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.9
+ - @spectrum-css/textfield@8.0.0-s2-foundations.9
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/menu@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.8
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.8
+ - @spectrum-css/textfield@8.0.0-s2-foundations.8
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/menu@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.7
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.7
+ - @spectrum-css/textfield@8.0.0-s2-foundations.7
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/menu@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.6
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.6
+ - @spectrum-css/textfield@8.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+ - @spectrum-css/menu@8.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.5
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.5
+ - @spectrum-css/textfield@8.0.0-s2-foundations.5
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/menu@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.4
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.4
+ - @spectrum-css/textfield@8.0.0-s2-foundations.4
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/menu@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.3
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.3
+ - @spectrum-css/textfield@8.0.0-s2-foundations.3
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/menu@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.2
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.2
+ - @spectrum-css/textfield@8.0.0-s2-foundations.2
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/menu@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.1
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.1
+ - @spectrum-css/textfield@8.0.0-s2-foundations.1
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/menu@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.0
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.0
+ - @spectrum-css/textfield@8.0.0-s2-foundations.0
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/menu@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 3.1.4
### Patch Changes
diff --git a/components/combobox/index.css b/components/combobox/index.css
index af500b165ac..4498aee162e 100644
--- a/components/combobox/index.css
+++ b/components/combobox/index.css
@@ -11,42 +11,30 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
-.spectrum-Combobox {
- --spectrum-combobox-inline-size: var(--spectrum-field-width);
- --spectrum-combobox-block-size: var(--spectrum-component-height-100);
- --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size));
- --spectrum-combobox-button-width: var(--spectrum-combobox-block-size);
- --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100);
- --spectrum-combobox-font-size: var(--spectrum-font-size-100);
-
- --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium);
- --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium);
- --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium);
- --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium);
- --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100);
- --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100);
- --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100);
-
- --spectrum-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- --spectrum-combobox-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-combobox-border-width: var(--spectrum-border-width-100);
+@media (forced-colors: active) {
+ .spectrum-Combobox {
+ --highcontrast-combobox-border-color-highlight: Highlight;
+ --highcontrast-combobox-border-color-invalid: Highlight;
- --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component);
+ .spectrum-Combobox-button.spectrum-PickerButton--quiet {
+ .spectrum-PickerButton-fill {
+ forced-color-adjust: none;
+ }
- --spectrum-combobox-font-style: var(--spectrum-default-font-style);
- --spectrum-combobox-line-height: var(--spectrum-line-height-100);
+ .spectrum-PickerButton-icon {
+ /* Should match foreground color of the Textfield. */
+ color: CanvasText;
+ }
+ }
+ }
+}
- --spectrum-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default);
- --spectrum-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover);
- --spectrum-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus);
- --spectrum-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover);
- --spectrum-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus);
+.spectrum-Combobox {
+ --spectrum-combobox-button-inline-offset: 0px;
+ --spectrum-combobox-min-inline-size: calc(var(--spectrum-combobox-minimum-width-multiplier) * var(--spectrum-combobox-block-size));
+ --spectrum-combobox-button-width: var(--spectrum-combobox-block-size);
/* @passthroughs start -- settings for nested Textfield component */
--mod-textfield-focus-indicator-gap: var(--mod-combobox-focus-indicator-gap, var(--spectrum-combobox-focus-indicator-gap));
@@ -90,115 +78,7 @@
--mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled);
--mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled);
/* @passthroughs end -- settings for nested Picker Button component */
-}
-
-.spectrum-Combobox--sizeS {
- --spectrum-combobox-block-size: var(--spectrum-component-height-75);
- --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75);
- --spectrum-combobox-font-size: var(--spectrum-font-size-75);
-
- --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small);
- --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
- --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small);
- --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-small);
- --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75);
- --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75);
- --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75);
-}
-
-.spectrum-Combobox--sizeM {
- --spectrum-combobox-block-size: var(--spectrum-component-height-100);
- --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100);
- --spectrum-combobox-font-size: var(--spectrum-font-size-100);
-
- --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium);
- --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium);
- --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium);
- --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium);
- --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100);
- --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100);
- --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100);
-}
-
-.spectrum-Combobox--sizeL {
- --spectrum-combobox-block-size: var(--spectrum-component-height-200);
- --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200);
- --spectrum-combobox-font-size: var(--spectrum-font-size-200);
-
- --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large);
- --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large);
- --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large);
- --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-large);
- --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200);
- --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200);
- --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200);
- --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200);
-}
-
-.spectrum-Combobox--sizeXL {
- --spectrum-combobox-block-size: var(--spectrum-component-height-300);
- --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-300);
- --spectrum-combobox-font-size: var(--spectrum-font-size-300);
-
- --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large);
- --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
- --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large);
- --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large);
- --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300);
- --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300);
- --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300);
- --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300);
-}
-
-.spectrum-Combobox--quiet {
- --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-quiet-minimum-width-multiplier) * var(--spectrum-combobox-block-size));
- --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet);
- --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet);
- --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium);
- --spectrum-combobox-button-inline-offset: calc((var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2) - (var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / 2));
-
- &.spectrum-Combobox--sizeS {
- --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small);
- }
-
- &.spectrum-Combobox--sizeM {
- --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium);
- }
-
- &.spectrum-Combobox--sizeL {
- --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-large);
- }
-
- &.spectrum-Combobox--sizeXL {
- --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large);
- }
-
- /* Settings for nested Picker Button component. */
- --mod-picker-button-background-color-quiet: transparent;
- --mod-picker-button-border-color-quiet: transparent;
-}
-
-@media (forced-colors: active) {
- .spectrum-Combobox {
- --highcontrast-combobox-border-color-highlight: Highlight;
- --highcontrast-combobox-border-color-invalid: Highlight;
-
- .spectrum-Combobox-button.spectrum-PickerButton--quiet {
- .spectrum-PickerButton-fill {
- forced-color-adjust: none;
- }
-
- .spectrum-PickerButton-icon {
- /* Should match foreground color of the Textfield. */
- color: CanvasText;
- }
- }
- }
-}
-.spectrum-Combobox {
position: relative;
display: inline-flex;
flex-flow: row nowrap;
@@ -231,7 +111,7 @@
/* PICKER BUTTON */
.spectrum-Combobox-button {
position: absolute;
- inset-inline-end: calc(-1 * var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px)));
+ inset-inline-end: calc(-1 * var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset)));
/* Default */
&:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet) {
@@ -345,7 +225,7 @@
.spectrum-Combobox-textfield.is-invalid &,
.spectrum-Combobox-textfield.is-loading & {
padding-inline-end: calc(
- var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px)) -
+ var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset)) -
(var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2)
);
}
@@ -370,13 +250,19 @@
}
/* QUIET VARIATION (no visible background) */
-.spectrum-Combobox--quiet {
- border-radius: 0;
+.spectrum-Combobox.spectrum-Combobox--quiet {
+ --spectrum-combobox-min-inline-size: calc(var(--spectrum-combobox-minimum-width-multiplier) * var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)));
+ --spectrum-combobox-button-inline-offset: calc((var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2) - (var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / 2));
+ --spectrum-combobox-border-radius: 0;
- .spectrum-Combobox-textfield {
- &.is-invalid .spectrum-Textfield-validationIcon {
- inset-inline-end: var(--mod-combobox-button-width, var(--spectrum-combobox-button-width));
- }
+ /* Settings for nested Picker Button component. */
+ --mod-picker-button-background-color-quiet: transparent;
+ --mod-picker-button-border-color-quiet: transparent;
+ --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet);
+
+
+ .spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon {
+ inset-inline-end: var(--mod-combobox-button-width, var(--spectrum-combobox-button-width));
}
.spectrum-Combobox-input {
@@ -386,11 +272,11 @@
padding-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)));
padding-inline-start: var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text));
- padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px)));
+ padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset)));
}
.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input,
.spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input {
- padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px)));
+ padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset)));
}
}
diff --git a/components/combobox/metadata/combobox.yml b/components/combobox/metadata/combobox.yml
deleted file mode 100644
index c0b03aa21c7..00000000000
--- a/components/combobox/metadata/combobox.yml
+++ /dev/null
@@ -1,376 +0,0 @@
-name: Combobox
-description: Combobox combines a text field with a picker menu.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/combo-box/
-sections:
- - name: Migration Guide
- description: |
- ### Component separated from InputGroup
- This component was previously a variant style for InputGroup. **InputGroup is now deprecated**.
- The classes containing `InputGroup` have been renamed or removed. For details, see the "renamed" and "removed" sections below or the example markup.
-
- ### New Picker markup
- Instead of a `.spectrum-Picker`, Combobox now uses `.spectrum-PickerButton`. Refer to the example markup for usage details.
-
- ### New Textfield markup
- Combobox now uses the new Textfield markup. See the [Textfield migration guide](textfield.html#migrationguide) for more information.
-
- ### Additional clases
- The following classes must be added:
-
- * `.spectrum-Combobox-textfield` is now required on the Textfield outer element (`.spectrum-Textfield`)
- * `.spectrum-Combobox-input` is now required on the `
-
-
-
-
-
Open
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Open
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Standard
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Quiet
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Combobox {
+ --spectrum-combobox-border-color-default: var(--spectrum-gray-500);
+ --spectrum-combobox-border-color-hover: var(--spectrum-gray-600);
+ --spectrum-combobox-border-color-focus: var(--spectrum-gray-500);
+ --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-600);
+ --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600);
+
+ --spectrum-combobox-inline-size: var(--spectrum-field-width);
+ --spectrum-combobox-minimum-width-multiplier: var(--spectrum-combo-box-minimum-width-multiplier);
+
+ --spectrum-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ --spectrum-combobox-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-combobox-border-width: var(--spectrum-border-width-100);
+
+ --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component);
+
+ --spectrum-combobox-font-style: var(--spectrum-default-font-style);
+ --spectrum-combobox-line-height: var(--spectrum-line-height-100);
+
+ --spectrum-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default);
+ --spectrum-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover);
+ --spectrum-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus);
+ --spectrum-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover);
+ --spectrum-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus);
+
+ &.spectrum-Combobox--sizeS {
+ --spectrum-combobox-block-size: var(--spectrum-component-height-75);
+ --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75);
+ --spectrum-combobox-font-size: var(--spectrum-font-size-75);
+
+ --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small);
+ --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
+ --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small);
+ --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-small);
+ --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75);
+ --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75);
+ --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75);
+ }
+
+ &,
+ &.spectrum-Combobox--sizeM {
+ --spectrum-combobox-block-size: var(--spectrum-component-height-100);
+ --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100);
+ --spectrum-combobox-font-size: var(--spectrum-font-size-100);
+
+ --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium);
+ --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium);
+ --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium);
+ --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium);
+ --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100);
+ --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100);
+ --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100);
+ }
+
+ &.spectrum-Combobox--sizeL {
+ --spectrum-combobox-block-size: var(--spectrum-component-height-200);
+ --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200);
+ --spectrum-combobox-font-size: var(--spectrum-font-size-200);
+
+ --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large);
+ --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large);
+ --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large);
+ --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-large);
+ --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200);
+ --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200);
+ --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200);
+ --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200);
+ }
+
+ &.spectrum-Combobox--sizeXL {
+ --spectrum-combobox-block-size: var(--spectrum-component-height-300);
+ --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-300);
+ --spectrum-combobox-font-size: var(--spectrum-font-size-300);
+
+ --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large);
+ --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
+ --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large);
+ --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large);
+ --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300);
+ --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300);
+ --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300);
+ --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300);
+ }
+
+ &.spectrum-Combobox--quiet {
+ --spectrum-combobox-minimum-width-multiplier: var(--spectrum-combo-box-quiet-minimum-width-multiplier);
+ --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet);
+ --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet);
+
+ &.spectrum-Combobox--sizeS {
+ --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small);
+ }
+
+ &,
+ &.spectrum-Combobox--sizeM {
+ --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium);
+ }
+
+ &.spectrum-Combobox--sizeL {
+ --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-large);
+ }
+
+ &.spectrum-Combobox--sizeXL {
+ --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large);
+ }
+ }
+ }
+}
diff --git a/components/combobox/themes/spectrum.css b/components/combobox/themes/spectrum.css
index 31c5e848d42..5a930981122 100644
--- a/components/combobox/themes/spectrum.css
+++ b/components/combobox/themes/spectrum.css
@@ -11,12 +11,7 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Combobox {
- --spectrum-combobox-border-color-default: var(--spectrum-gray-500);
- --spectrum-combobox-border-color-hover: var(--spectrum-gray-600);
- --spectrum-combobox-border-color-focus: var(--spectrum-gray-500);
- --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-600);
- --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600);
- }
-}
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/commons/CHANGELOG.md b/components/commons/CHANGELOG.md
index a1221c1b9b1..c267957138a 100644
--- a/components/commons/CHANGELOG.md
+++ b/components/commons/CHANGELOG.md
@@ -1,5 +1,161 @@
# Change Log
+## 11.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 11.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 11.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 11.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 11.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 11.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 11.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 11.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 11.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 11.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 11.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 11.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 11.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 11.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 10.1.0
### Minor Changes
diff --git a/components/commons/basebutton.css b/components/commons/basebutton.css
index 4d16c2fac24..3dbe78cd83d 100644
--- a/components/commons/basebutton.css
+++ b/components/commons/basebutton.css
@@ -32,6 +32,11 @@
/* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */
font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
+ -webkit-font-smoothing: antialiased;
+
+ /* Font smoothing for Firefox */
+ -moz-osx-font-smoothing: grayscale;
+
/* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */
line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
text-decoration: none;
@@ -53,10 +58,7 @@
color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-
- /* Remove the inner border and padding in Firefox (normalize). */
+ /* Fix Firefox */
&::-moz-focus-inner {
border-style: none;
padding: 0;
@@ -90,7 +92,7 @@
display: block;
/* @deprecation --mod-focus-indicator-gap has been renamed and will be removed in a future version. */
- margin: calc(var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) * -1);
+ margin: calc(-1 * var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))));
/* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
transition:
diff --git a/components/commons/overlay.css b/components/commons/overlay.css
index c3a57da85dd..fc40b564b05 100644
--- a/components/commons/overlay.css
+++ b/components/commons/overlay.css
@@ -13,7 +13,7 @@
/* TODO: replace legacy animation variables with core tokens when available */
-/** @note used in modal, popover, quickaction, tooltip, underlay */
+/** @note used in modal, tooltip, underlay */
%spectrum-overlay {
pointer-events: none;
visibility: hidden;
@@ -24,30 +24,10 @@
visibility 0ms linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms));
}
-/** @note used in modal, popover, quickaction, tooltip, underlay */
+/** @note used in modal, tooltip, underlay */
%spectrum-overlay--open {
pointer-events: auto;
visibility: visible;
opacity: 1;
transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0ms));
}
-
-/** @note currently unused */
-%spectrum-overlay--bottom--open {
- transform: translateY(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px)));
-}
-
-/** @note currently unused */
-%spectrum-overlay--top--open {
- transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))));
-}
-
-/** @note used in quickaction */
-%spectrum-overlay--right--open {
- transform: translateX(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px)));
-}
-
-/** @note used in quickaction */
-%spectrum-overlay--left--open {
- transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))));
-}
diff --git a/components/commons/package.json b/components/commons/package.json
index 2e480bf4bb2..be0b1d4f086 100644
--- a/components/commons/package.json
+++ b/components/commons/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/commons",
- "version": "10.1.0",
+ "version": "11.0.0-s2-foundations.13",
"description": "Common mixins for Spectrum CSS components",
"license": "Apache-2.0",
"author": "Adobe",
@@ -14,6 +14,13 @@
"url": "https://github.com/adobe/spectrum-css/issues"
},
"main": "index.css",
+ "exports": {
+ ".": "./index.css",
+ "./CHANGELOG.md": "./CHANGELOG.md",
+ "./README.md": "./README.md",
+ "./*.css": "./*.css",
+ "./package.json": "./package.json"
+ },
"peerDependencies": {
"@spectrum-css/tokens": ">=14"
},
diff --git a/components/contextualhelp/CHANGELOG.md b/components/contextualhelp/CHANGELOG.md
index 3ada3a3f246..6f732de457c 100644
--- a/components/contextualhelp/CHANGELOG.md
+++ b/components/contextualhelp/CHANGELOG.md
@@ -1,5 +1,203 @@
# Change Log
+## 4.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/link@6.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/link@6.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/link@6.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/link@6.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/link@6.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/link@6.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/link@6.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+ - @spectrum-css/link@6.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/link@6.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/link@6.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/link@6.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/link@6.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/link@6.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/link@6.0.0-s2-foundations.0
+
## 3.1.3
### Patch Changes
diff --git a/components/contextualhelp/index.css b/components/contextualhelp/index.css
index fa89a7a3783..943e81dc845 100644
--- a/components/contextualhelp/index.css
+++ b/components/contextualhelp/index.css
@@ -11,22 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-ContextualHelp {
- /* Layout Variables */
- --spectrum-contextual-help-padding: var(--spectrum-spacing-400);
- --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
- --spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300);
-
- /* Typography Variables */
- --spectrum-contextual-help-heading-size: var(--spectrum-contextual-help-title-size);
- --spectrum-contextual-help-heading-color: var(--spectrum-heading-color);
- --spectrum-contextual-help-body-color: var(--spectrum-body-color);
-
- /* Mobile styling */
- .spectrum--large & {
- --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
- }
-}
+@import "./themes/spectrum-two.css";
.spectrum-ContextualHelp {
position: relative;
diff --git a/components/contextualhelp/metadata/contextualhelp.yml b/components/contextualhelp/metadata/contextualhelp.yml
deleted file mode 100644
index 7e06a9641ca..00000000000
--- a/components/contextualhelp/metadata/contextualhelp.yml
+++ /dev/null
@@ -1,61 +0,0 @@
-name: Contextual help
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/contextual-help/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
-examples:
- - id: contextualhelp-variants
- name: Info Icon
- markup: |
-
-
-
-
-
-
-
-
-
Permission required
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
Permission required
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Permission required
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
Learn about permissions
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/contextualhelp/themes/spectrum-two.css b/components/contextualhelp/themes/spectrum-two.css
new file mode 100644
index 00000000000..96cf07c4a4f
--- /dev/null
+++ b/components/contextualhelp/themes/spectrum-two.css
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-ContextualHelp {
+ /* Layout Variables */
+ --spectrum-contextual-help-padding: var(--spectrum-spacing-400);
+ --spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300);
+
+ /* Typography Variables */
+ --spectrum-contextual-help-heading-size: var(--spectrum-contextual-help-title-size);
+ --spectrum-contextual-help-heading-color: var(--spectrum-heading-color);
+ --spectrum-contextual-help-body-color: var(--spectrum-body-color);
+ }
+}
diff --git a/components/contextualhelp/themes/spectrum.css b/components/contextualhelp/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/contextualhelp/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/datepicker/CHANGELOG.md b/components/datepicker/CHANGELOG.md
index 28a4f084f20..e0f6ee559d1 100644
--- a/components/datepicker/CHANGELOG.md
+++ b/components/datepicker/CHANGELOG.md
@@ -1,5 +1,217 @@
# Change Log
+## 4.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.14
+ - @spectrum-css/textfield@8.0.0-s2-foundations.14
+ - @spectrum-css/calendar@6.0.0-s2-foundations.13
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.12
+ - @spectrum-css/textfield@8.0.0-s2-foundations.12
+ - @spectrum-css/calendar@6.0.0-s2-foundations.12
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.11
+ - @spectrum-css/textfield@8.0.0-s2-foundations.11
+ - @spectrum-css/calendar@6.0.0-s2-foundations.11
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.10
+ - @spectrum-css/textfield@8.0.0-s2-foundations.10
+ - @spectrum-css/calendar@6.0.0-s2-foundations.10
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`da47fa2`](https://github.com/adobe/spectrum-css/commit/da47fa2cb18373e74a6718775f2db90bb25868d4), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.9
+ - @spectrum-css/textfield@8.0.0-s2-foundations.9
+ - @spectrum-css/calendar@6.0.0-s2-foundations.9
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.8
+ - @spectrum-css/textfield@8.0.0-s2-foundations.8
+ - @spectrum-css/calendar@6.0.0-s2-foundations.8
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.7
+ - @spectrum-css/textfield@8.0.0-s2-foundations.7
+ - @spectrum-css/calendar@6.0.0-s2-foundations.7
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.6
+ - @spectrum-css/textfield@8.0.0-s2-foundations.6
+ - @spectrum-css/calendar@6.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.5
+ - @spectrum-css/textfield@8.0.0-s2-foundations.5
+ - @spectrum-css/calendar@6.0.0-s2-foundations.5
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.4
+ - @spectrum-css/textfield@8.0.0-s2-foundations.4
+ - @spectrum-css/calendar@6.0.0-s2-foundations.4
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.3
+ - @spectrum-css/textfield@8.0.0-s2-foundations.3
+ - @spectrum-css/calendar@6.0.0-s2-foundations.3
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.2
+ - @spectrum-css/textfield@8.0.0-s2-foundations.2
+ - @spectrum-css/calendar@6.0.0-s2-foundations.2
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.1
+ - @spectrum-css/textfield@8.0.0-s2-foundations.1
+ - @spectrum-css/calendar@6.0.0-s2-foundations.1
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/pickerbutton@6.0.0-s2-foundations.0
+ - @spectrum-css/textfield@8.0.0-s2-foundations.0
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/calendar@6.0.0-s2-foundations.0
+
## 3.2.3
### Patch Changes
diff --git a/components/datepicker/index.css b/components/datepicker/index.css
index 7a5a6e71859..d5b8b1ccf56 100644
--- a/components/datepicker/index.css
+++ b/components/datepicker/index.css
@@ -11,64 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-DatePicker {
- --spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-datepicker-border-radius-quiet: 0;
- --spectrum-datepicker-border-width: var(--spectrum-border-width-100);
- --spectrum-datepicker-min-width: var(--spectrum-field-width);
- --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100);
-
- /* button */
- --spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500);
- --spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default);
- --spectrum-datepicker-pickerbutton-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100));
- --spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset));
- --spectrum-datepicker-quiet-button-offset: var(--spectrum-text-to-visual-100);
- --spectrum-datepicker-icon-to-button: var(--spectrum-text-to-visual-100);
- --spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100);
-
- /* focus */
- --spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100);
- --spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100);
- --spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color);
- --spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75);
-
- /* color */
- --spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default);
- --spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500);
- --spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color);
-
- /* dash */
- --spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100);
- --spectrum-datepicker-dash-color: var(--spectrum-neutral-content-color-default);
- --spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-datepicker-range-dash-marin-inline-start: calc(-0.5 * var(--spectrum-datepicker-dash-font-size));
- --spectrum-datepicker-range-dash-padding-top: 0;
-
- /* calculating widths */
- /* todo: if we add t-shirt sizing, this will be wrong ❤️ */
- --spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size));
- --spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height));
- --spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
-
- --spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding));
- --spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second));
-
- --spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first));
- --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
- --spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width));
- --spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
-
- /* padding inline end */
- --spectrum-datepicker-padding-inline-end: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2));
- --spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset));
- --spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2));
- --spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text));
-}
+@import "./themes/spectrum-two.css";
.spectrum-DatePicker {
position: relative;
diff --git a/components/datepicker/metadata/datepicker.yml b/components/datepicker/metadata/datepicker.yml
deleted file mode 100644
index 06dce8a4789..00000000000
--- a/components/datepicker/metadata/datepicker.yml
+++ /dev/null
@@ -1,313 +0,0 @@
-name: Date picker
-description: A date picker displays a Text Field input with a button next to it, and can display two Text Fields next to each other for choosing a date range.
-sections:
- - name: Migration Guide
- description: |
- ### Component separated from InputGroup
- This component was previously a variant within InputGroup. **InputGroup is now deprecated**.
- The classes containing `InputGroup` have been renamed or removed. For details, see the "renamed" and "removed" sections below or the example markup.
-
- ### New Picker markup
- Instead of a `.spectrum-Picker`, DatePicker now uses `.spectrum-PickerButton`. Refer to the example markup for usage details.
-
- ### Workflow icon size changed to medium
- If your markup is still using the small icon, replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
-
- ### Renamed classes
-
- * v1.0.0: All date picker classes have been renamed to have a capital P: `.spectrum-Datepicker` is now `.spectrum-DatePicker`
- * v1.0.0: `.spectrum-InputGroup-textfield` is now `.spectrum-DatePicker-textfield`, `.spectrum-InputGroup-input` is now `.spectrum-DatePicker-input`, and `.spectrum-InputGroup-button` is now `.spectrum-DatePicker-button`
- * `.spectrum-Datepicker--rangeDash` was renamed to `.spectrum-DatePicker-rangeDash`
-
- ### Removed elements
-
- * v1.0.0: The class `.InputGroup` is no longer used and can be be removed from the parent element
- * `.spectrum-Datepicker-focusRing` is no longer required and should be removed
-
-examples:
- - id: datepicker
- name: Standard
- markup: |
-
- - id: datepicker-readonly
- name: Read-only
- markup: |
-
- - id: datepicker-quiet
- name: Quiet
- markup: |
-
- - id: datepicker-invalid
- name: Invalid
- markup: |
-
-
-
Standard
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Quiet
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-DatePicker {
+ --spectrum-datepicker-initial-height: var(--spectrum-component-height-100);
+
+ --spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-datepicker-border-radius-quiet: 0;
+ --spectrum-datepicker-border-width: var(--spectrum-border-width-100);
+ --spectrum-datepicker-min-width: var(--spectrum-field-width);
+ --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100);
+
+ /* button */
+ --spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500);
+ --spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default);
+ --spectrum-datepicker-pickerbutton-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100));
+ --spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset));
+ --spectrum-datepicker-quiet-button-offset: var(--spectrum-text-to-visual-100);
+ --spectrum-datepicker-icon-to-button: var(--spectrum-text-to-visual-100);
+ --spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100);
+
+ /* focus */
+ --spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100);
+ --spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100);
+ --spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color);
+ --spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75);
+
+ /* color */
+ --spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default);
+ --spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500);
+ --spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color);
+
+ /* dash */
+ --spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100);
+ --spectrum-datepicker-dash-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-datepicker-range-dash-marin-inline-start: calc(-0.5 * var(--spectrum-datepicker-dash-font-size));
+ --spectrum-datepicker-range-dash-padding-top: 0;
+
+ /* calculating widths */
+ /* todo: if we add t-shirt sizing, this will be wrong ❤️ */
+ --spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size));
+ --spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height));
+ --spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
+
+ --spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding));
+ --spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second));
+
+ --spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first));
+ --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
+ --spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width));
+ --spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
+
+ /* padding inline end */
+ --spectrum-datepicker-padding-inline-end: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2));
+ --spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset));
+ --spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2));
+ --spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text));
+ }
+}
diff --git a/components/datepicker/themes/spectrum.css b/components/datepicker/themes/spectrum.css
index c409dbd2e9a..5a930981122 100644
--- a/components/datepicker/themes/spectrum.css
+++ b/components/datepicker/themes/spectrum.css
@@ -11,8 +11,7 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-DatePicker {
- --spectrum-datepicker-initial-height: var(--spectrum-component-height-100);
- }
-}
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/dial/CHANGELOG.md b/components/dial/CHANGELOG.md
index 7de270958fa..21fd3c379be 100644
--- a/components/dial/CHANGELOG.md
+++ b/components/dial/CHANGELOG.md
@@ -1,5 +1,161 @@
# Change Log
+## 4.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 3.1.3
### Patch Changes
diff --git a/components/dial/index.css b/components/dial/index.css
index c04feaf08cd..b8877b49fd8 100644
--- a/components/dial/index.css
+++ b/components/dial/index.css
@@ -11,57 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-Dial {
- --spectrum-dial-background-color-default: var(--spectrum-gray-100);
-
- --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300);
- --spectrum-dial-border-color-disabled: var(--spectrum-gray-300);
-
- --spectrum-dial-handle-marker-color: var(--spectrum-gray-700);
- --spectrum-dial-border-color: var(--spectrum-gray-700);
-
- --spectrum-dial-handle-marker-color-down: var(--spectrum-gray-800);
- --spectrum-dial-border-color-down: var(--spectrum-gray-800);
- --spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800);
- --spectrum-dial-border-color-hover: var(--spectrum-gray-800);
-
- --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50);
- --spectrum-dial-border-color-key-focus: var(--spectrum-gray-50);
-
- --spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700);
- --spectrum-dial-border-color-mouse-focus: var(--spectrum-gray-700);
-
- --spectrum-dial-min-max-tick-color: var(--spectrum-gray-600);
-
- --spectrum-dial-label-text-color: var(--spectrum-gray-700);
- --spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700);
- --spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400);
-
- --spectrum-dial-container-width: 48px;
-
- --spectrum-dial-handle-marker-width: 12px;
- --spectrum-dial-handle-marker-height: 2px;
-
- --spectrum-dial-handle-marker-border-radius: 1px;
-
- --spectrum-dial-handle-size: 100%;
- --spectrum-dial-min-height: 0;
- --spectrum-dial-controls-min-height: 0;
-
- --spectrum-dial-min-max-tick-angles: 45deg;
-
- --spectrum-dial-width: 32px;
- --spectrum-dial-height: 32px;
-
- --spectrum-dial-handle-border-size: var(--spectrum-border-width-200);
- --spectrum-dial-label-text-size: var(--spectrum-font-size-75);
- --spectrum-dial-label-line-height: var(--spectrum-line-height-200);
-}
-
-.spectrum-Dial--small {
- --spectrum-dial-width: 24px;
- --spectrum-dial-height: 24px;
-}
+@import "./themes/spectrum-two.css";
.spectrum-Dial {
position: relative;
@@ -237,7 +187,8 @@
padding: 0;
position: absolute;
overflow: hidden;
- /* @todo Look into replacing with opacity 0. The tiny opacity value appears to be a workaround for a ChromeVox legacy bug (circa 2018). */
+
+ /* stylelint-disable-next-line number-max-precision -- @todo Replace with opacity 0. Workaround for a ChromeVox legacy bug (circa 2018). */
opacity: 0.000001;
cursor: default;
appearance: none;
diff --git a/components/dial/metadata/dial.yml b/components/dial/metadata/dial.yml
deleted file mode 100644
index 26f8ddd44b2..00000000000
--- a/components/dial/metadata/dial.yml
+++ /dev/null
@@ -1,83 +0,0 @@
-name: Dial
-description: A dial for turning it up to 11.
-examples:
- - id: dial
- name: Standard
- markup: |
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/dial/themes/spectrum-two.css b/components/dial/themes/spectrum-two.css
new file mode 100644
index 00000000000..5debb640d02
--- /dev/null
+++ b/components/dial/themes/spectrum-two.css
@@ -0,0 +1,66 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Dial {
+ --spectrum-dial-background-color-default: var(--spectrum-gray-75);
+
+ --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-200);
+ --spectrum-dial-border-color-disabled: var(--spectrum-gray-200);
+
+ --spectrum-dial-handle-marker-color: var(--spectrum-gray-700);
+ --spectrum-dial-border-color: var(--spectrum-gray-700);
+
+ --spectrum-dial-handle-marker-color-down: var(--spectrum-gray-800);
+ --spectrum-dial-border-color-down: var(--spectrum-gray-800);
+ --spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800);
+ --spectrum-dial-border-color-hover: var(--spectrum-gray-800);
+
+ --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25);
+ --spectrum-dial-border-color-key-focus: var(--spectrum-gray-25);
+
+ --spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700);
+ --spectrum-dial-border-color-mouse-focus: var(--spectrum-gray-700);
+
+ --spectrum-dial-min-max-tick-color: var(--spectrum-gray-600);
+
+ --spectrum-dial-label-text-color: var(--spectrum-gray-700);
+ --spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700);
+ --spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400);
+
+ --spectrum-dial-container-width: 48px;
+
+ --spectrum-dial-handle-marker-width: 12px;
+ --spectrum-dial-handle-marker-height: 2px;
+
+ --spectrum-dial-handle-marker-border-radius: 1px;
+
+ --spectrum-dial-handle-size: 100%;
+ --spectrum-dial-min-height: 0;
+ --spectrum-dial-controls-min-height: 0;
+
+ --spectrum-dial-min-max-tick-angles: 45deg;
+
+ --spectrum-dial-width: 32px;
+ --spectrum-dial-height: 32px;
+
+ --spectrum-dial-handle-border-size: var(--spectrum-border-width-200);
+ --spectrum-dial-label-text-size: var(--spectrum-font-size-75);
+ --spectrum-dial-label-line-height: var(--spectrum-line-height-200);
+ }
+
+ .spectrum-Dial--small {
+ --spectrum-dial-width: 24px;
+ --spectrum-dial-height: 24px;
+ }
+}
diff --git a/tokens/dist/css/express/custom-medium-vars.css b/components/dial/themes/spectrum.css
similarity index 56%
rename from tokens/dist/css/express/custom-medium-vars.css
rename to components/dial/themes/spectrum.css
index aeb5ff2f344..b0ee0f29a64 100644
--- a/tokens/dist/css/express/custom-medium-vars.css
+++ b/components/dial/themes/spectrum.css
@@ -11,13 +11,17 @@
* governing permissions and limitations under the License.
*/
-.spectrum--express.spectrum--medium{
- --spectrum-colorwheel-path:"M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0";
- --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
- --spectrum-dialog-confirm-border-radius:6px;
+/* @combine .spectrum.spectrum--legacy */
- --spectrum-dial-border-radius:12px;
+@import "./spectrum-two.css";
- --spectrum-assetcard-focus-ring-border-radius:10px;
+@container style(--system: legacy) {
+ .spectrum-Dial {
+ --spectrum-dial-background-color-default: var(--spectrum-gray-100);
+ --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300);
+ --spectrum-dial-border-color-disabled: var(--spectrum-gray-300);
+ --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50);
+ --spectrum-dial-border-color-key-focus: var(--spectrum-gray-50);
+ }
}
diff --git a/components/dialog/CHANGELOG.md b/components/dialog/CHANGELOG.md
index b8f34fde21d..03655ccd45e 100644
--- a/components/dialog/CHANGELOG.md
+++ b/components/dialog/CHANGELOG.md
@@ -1,5 +1,217 @@
# Change Log
+## 11.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.14
+ - @spectrum-css/underlay@5.0.0-s2-foundations.13
+ - @spectrum-css/divider@4.0.0-s2-foundations.13
+ - @spectrum-css/modal@6.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 11.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.12
+ - @spectrum-css/underlay@5.0.0-s2-foundations.12
+ - @spectrum-css/divider@4.0.0-s2-foundations.12
+ - @spectrum-css/modal@6.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 11.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.11
+ - @spectrum-css/underlay@5.0.0-s2-foundations.11
+ - @spectrum-css/divider@4.0.0-s2-foundations.11
+ - @spectrum-css/modal@6.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 11.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.10
+ - @spectrum-css/underlay@5.0.0-s2-foundations.10
+ - @spectrum-css/divider@4.0.0-s2-foundations.10
+ - @spectrum-css/modal@6.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 11.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.9
+ - @spectrum-css/underlay@5.0.0-s2-foundations.9
+ - @spectrum-css/divider@4.0.0-s2-foundations.9
+ - @spectrum-css/modal@6.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 11.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.8
+ - @spectrum-css/underlay@5.0.0-s2-foundations.8
+ - @spectrum-css/divider@4.0.0-s2-foundations.8
+ - @spectrum-css/modal@6.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 11.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.7
+ - @spectrum-css/underlay@5.0.0-s2-foundations.7
+ - @spectrum-css/divider@4.0.0-s2-foundations.7
+ - @spectrum-css/modal@6.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 11.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.6
+ - @spectrum-css/underlay@5.0.0-s2-foundations.6
+ - @spectrum-css/divider@4.0.0-s2-foundations.6
+ - @spectrum-css/modal@6.0.0-s2-foundations.6
+
+## 11.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.5
+ - @spectrum-css/underlay@5.0.0-s2-foundations.5
+ - @spectrum-css/divider@4.0.0-s2-foundations.5
+ - @spectrum-css/modal@6.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 11.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.4
+ - @spectrum-css/underlay@5.0.0-s2-foundations.4
+ - @spectrum-css/divider@4.0.0-s2-foundations.4
+ - @spectrum-css/modal@6.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 11.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.3
+ - @spectrum-css/underlay@5.0.0-s2-foundations.3
+ - @spectrum-css/divider@4.0.0-s2-foundations.3
+ - @spectrum-css/modal@6.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 11.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.2
+ - @spectrum-css/underlay@5.0.0-s2-foundations.2
+ - @spectrum-css/divider@4.0.0-s2-foundations.2
+ - @spectrum-css/modal@6.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 11.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.1
+ - @spectrum-css/underlay@5.0.0-s2-foundations.1
+ - @spectrum-css/divider@4.0.0-s2-foundations.1
+ - @spectrum-css/modal@6.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 11.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.0
+ - @spectrum-css/divider@4.0.0-s2-foundations.0
+ - @spectrum-css/modal@6.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/underlay@5.0.0-s2-foundations.0
+
## 10.1.4
### Patch Changes
diff --git a/components/dialog/index.css b/components/dialog/index.css
index 78b31a80fd6..ec4faabb42c 100644
--- a/components/dialog/index.css
+++ b/components/dialog/index.css
@@ -11,30 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-Dialog {
- /* The font-size of the fullscreen dialog header */
- --spectrum-dialog-fullscreen-header-text-size: 28px;
- --spectrum-dialog-min-inline-size: 288px;
- --spectrum-dialog-confirm-small-width: 400px;
- --spectrum-dialog-confirm-medium-width: 480px;
- --spectrum-dialog-confirm-large-width: 640px;
- --spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300);
- --spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200);
- --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800);
- --spectrum-dialog-confirm-title-text-color: var(--spectrum-gray-900);
- --spectrum-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100);
- --spectrum-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100);
- --spectrum-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-
- --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50);
- --spectrum-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1);
- --spectrum-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
- --spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100);
- --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600);
- --spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100);
- --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300));
- --spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50);
-}
+@import "./themes/spectrum-two.css";
.spectrum-Dialog {
/* Be a flexbox to allow a full sized content area that scrolls */
@@ -82,7 +59,6 @@
grid-template-columns:
var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto)
var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
- grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
grid-template-areas:
"hero hero hero hero hero hero"
". . . . . ."
@@ -90,7 +66,7 @@
". divider divider divider divider ."
". content content content content ."
". footer footer buttonGroup buttonGroup ."
- ". . . . . .";
+ ". . . . . .";grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
inline-size: 100%;
}
@@ -169,6 +145,7 @@
/* this is kinda dumb, but needed for the keyboard focus rings so they don't get clipped. is there a better way to treat this */
padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2);
margin: 0 var(--mod-dialog-confirm-description-margin, var(--spectrum-dialog-confirm-description-margin));
+
}
.spectrum-Dialog-footer {
@@ -209,7 +186,6 @@
grid-template-columns:
var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto)
minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
- grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
grid-template-areas:
"hero hero hero hero hero hero hero"
". . . . . closeButton closeButton"
@@ -217,7 +193,7 @@
". divider divider divider divider divider ."
". content content content content content ."
". footer footer buttonGroup buttonGroup buttonGroup ."
- ". . . . . . .";
+ ". . . . . . .";grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
.spectrum-Dialog-buttonGroup {
display: none;
@@ -322,8 +298,7 @@
". divider divider divider divider divider ."
". content content content content content ."
". footer footer buttonGroup buttonGroup buttonGroup ."
- ". . . . . . .";
- }
+ ". . . . . . .";}
.spectrum-Dialog .spectrum-Dialog-header {
justify-content: flex-start;
@@ -342,8 +317,7 @@
". divider ."
". content ."
". buttonGroup ."
- ". . .";
- }
+ ". . .";}
.spectrum-Dialog-buttonGroup {
padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top));
diff --git a/components/dialog/metadata/dialog.yml b/components/dialog/metadata/dialog.yml
deleted file mode 100644
index a587473500b..00000000000
--- a/components/dialog/metadata/dialog.yml
+++ /dev/null
@@ -1,333 +0,0 @@
-name: Dialog
-description: 'In order to avoid blurry Dialogs, wrap them in `` and apply `.is-open` to both the Wrapper and the Dialog at the same time. See [this example](#dialog-wrapped) for a working demonstration.'
-SpectrumSiteSlug: https://spectrum.adobe.com/page/dialog/
-sections:
- - name: Migration Guide
- description: |
- - Alert variants of Dialog have been removed from Dialog into their own compoment, Alert Dialog.
-examples:
- - id: dialog
- name: Dialog - Small
- status: Verified
- description: A small dialog
- demoClassName: spectrum-CSSExample-example--overlay
- markup: |
-
Open Small Dialog
-
-
-
-
-
-
Disclaimer
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
-
-
-
-
-
-
- - id: dialog
- name: Dialog - Medium
- status: Verified
- description: A medium dialog
- demoClassName: spectrum-CSSExample-example--overlay
- markup: |
-
Open Medium Dialog
-
-
-
-
-
-
Disclaimer
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
-
-
-
-
-
-
- - id: dialog
- name: Dialog - Large
- status: Verified
- description: A large dialog
- demoClassName: spectrum-CSSExample-example--overlay
- markup: |
-
Open Large Dialog
-
-
-
-
-
-
Disclaimer
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
-
-
-
-
-
-
- - id: dialog
- name: Dialog - Dismissible
- status: Verified
- description: A dialog that can be dismissed without taking an action. Dismissible dialogs should never have buttons.
- demoClassName: spectrum-CSSExample-example--overlay
- markup: |
-
Open Dismissible Dialog
-
-
-
-
-
-
Disclaimer
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
- Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id
- faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper
- dignissim cras lobortis.
-
-
-
-
-
-
-
-
- - id: dialog
- name: Dialog - No Divider
- status: Verified
- description: Dialogs can forgo the divider if they have content that spans the entire width of the dialog.
- demoClassName: spectrum-CSSExample-example--overlay
- markup: |
-
Open No Divider Dialog
-
-
-
-
-
-
Disclaimer
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
- Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id
- faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper
- dignissim cras lobortis.
-
-
-
-
-
-
-
-
- - id: dialog
- name: Dialog - Hero
- status: Verified
- description: Dialogs can have a hero header.
- demoClassName: spectrum-CSSExample-example--overlay
- markup: |
-
Open Hero Dialog
-
-
-
-
-
-
Disclaimer
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
-
-
-
-
-
-
-
-
- - id: dialog-scrolling
- name: Dialog - Scrolling
- status: Contribution
- description: A dialog without `.spectrum-Dialog--alert` can expand to a larger size to house larger contents.
- demoClassName: spectrum-CSSExample-example--overlay
- markup: |
-
Open Scrolling Dialog
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
- voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
- quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
- autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
- officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
- facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum
- rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
- voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
- quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
- autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
- officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
- facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum
- rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
- voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
- quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
- autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
- officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
- facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum
- rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
-
-
-
-
-
- - id: dialog-fullscreen
- name: Dialog - Fullscreen
- status: Contribution
- description: A fullscreen dialog will automatically fill almost all of the available screen space.
- demoClassName: spectrum-CSSExample-example--overlay
- markup: |
-
Open Fullscreen Dialog
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
- voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
- quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
- autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
- officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
- facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum
- rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
- voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
- quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
- autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
- officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
- facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum
- rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
- voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
- quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
- autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
- officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
- facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum
- rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
-
-
-
-
-
- - id: dialog-fullscreen
- name: Dialog - Fullscreen Takeover
- status: Contribution
- description: A fullscreen takeover dialog will fill all of the available screen space.
- demoClassName: spectrum-CSSExample-example--overlay
- markup: |
-
Open Fullscreen Takeover Dialog
-
-
-
-
-
-
This is a fullscreen takeover dialog.
-
-
-
-
-
diff --git a/components/dialog/package.json b/components/dialog/package.json
index 4618269b741..0bb68b6a134 100644
--- a/components/dialog/package.json
+++ b/components/dialog/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/dialog",
- "version": "10.1.4",
+ "version": "11.0.0-s2-foundations.13",
"description": "The Spectrum CSS dialog component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/dialog/stories/template.js b/components/dialog/stories/template.js
index 860bd6b6302..f97d22a7bd1 100644
--- a/components/dialog/stories/template.js
+++ b/components/dialog/stories/template.js
@@ -10,6 +10,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Dialog",
@@ -29,7 +32,10 @@ export const Template = ({
customStyles = {},
} = {}, context = {}) => {
const { updateArgs } = context;
- const toggleOpen = () => updateArgs({ isOpen: !isOpen });
+
+ const toggleOpen = function () {
+ updateArgs({ isOpen: !isOpen });
+ };
const Dialog = html`
layout !== l),
[`${rootClass}--${layout}`]: typeof layout !== "undefined",
- [`${rootClass}--${size}`]: typeof size !== "undefined",
+ [`${rootClass}--${size}`]: typeof size !== "undefined",
[`${rootClass}--noDivider`]: !hasDivider,
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
@@ -50,7 +56,7 @@ export const Template = ({
${when(typeof heroImageUrl !== "undefined", () =>
html`
-
@@ -119,4 +125,3 @@ export const Template = ({
return Dialog;
}
};
-
diff --git a/components/dialog/themes/express.css b/components/dialog/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/dialog/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/dialog/themes/spectrum-two.css b/components/dialog/themes/spectrum-two.css
new file mode 100644
index 00000000000..82952d5395c
--- /dev/null
+++ b/components/dialog/themes/spectrum-two.css
@@ -0,0 +1,39 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Dialog {
+ /* The font-size of the fullscreen dialog header */
+ --spectrum-dialog-fullscreen-header-text-size: 28px;
+ --spectrum-dialog-min-inline-size: 288px;
+ --spectrum-dialog-confirm-small-width: 400px;
+ --spectrum-dialog-confirm-medium-width: 480px;
+ --spectrum-dialog-confirm-large-width: 640px;
+ --spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300);
+ --spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200);
+ --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800);
+ --spectrum-dialog-confirm-title-text-color: var(--spectrum-gray-900);
+ --spectrum-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100);
+ --spectrum-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100);
+ --spectrum-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
+
+ --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50);
+ --spectrum-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1);
+ --spectrum-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
+ --spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100);
+ --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600);
+ --spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100);
+ --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300));
+ --spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50);
+ }
+}
diff --git a/components/dialog/themes/spectrum.css b/components/dialog/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/dialog/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/divider/CHANGELOG.md b/components/divider/CHANGELOG.md
index 8d19694dd5f..f77667fcdf5 100644
--- a/components/divider/CHANGELOG.md
+++ b/components/divider/CHANGELOG.md
@@ -1,5 +1,161 @@
# Change Log
+## 4.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 3.1.3
### Patch Changes
diff --git a/components/divider/index.css b/components/divider/index.css
index ea5859e45b6..9fc3f0c0ee6 100644
--- a/components/divider/index.css
+++ b/components/divider/index.css
@@ -11,60 +11,12 @@
* governing permissions and limitations under the License.
*/
-.spectrum-Divider {
- /* default thickness no size */
- --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium);
-
- /* default background color no size */
- --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium);
-
- /* background colors */
- --spectrum-divider-background-color-small: var(--spectrum-gray-300);
- --spectrum-divider-background-color-medium: var(--spectrum-gray-300);
- --spectrum-divider-background-color-large: var(--spectrum-gray-800);
-
- /* static white background colors */
- --spectrum-divider-background-color-small-static-white: var(--spectrum-transparent-white-300);
- --spectrum-divider-background-color-medium-static-white: var(--spectrum-transparent-white-300);
- --spectrum-divider-background-color-large-static-white: var(--spectrum-transparent-white-800);
-
- /* static black background colors */
- --spectrum-divider-background-color-small-static-black: var(--spectrum-transparent-black-300);
- --spectrum-divider-background-color-medium-static-black: var(--spectrum-transparent-black-300);
- --spectrum-divider-background-color-large-static-black: var(--spectrum-transparent-black-800);
-}
-
-/* small divider */
-.spectrum-Divider--sizeS {
- --spectrum-divider-thickness: var(--spectrum-divider-thickness-small);
- --spectrum-divider-background-color: var(--spectrum-divider-background-color-small);
-}
-
-/* medium divider */
-.spectrum-Divider--sizeM {
- --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium);
- --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium);
-}
-
-/* large divider */
-.spectrum-Divider--sizeL {
- --spectrum-divider-thickness: var(--spectrum-divider-thickness-large);
- --spectrum-divider-background-color: var(--spectrum-divider-background-color-large);
-}
+@import "./themes/spectrum-two.css";
/* windows high contrast mode */
@media (forced-colors: active) {
- .spectrum-Divider,
- .spectrum-Divider--sizeS,
- .spectrum-Divider--sizeM,
- .spectrum-Divider--sizeL {
- --spectrum-divider-background-color: CanvasText;
- --spectrum-divider-background-color-small-static-white: CanvasText;
- --spectrum-divider-background-color-medium-static-white: CanvasText;
- --spectrum-divider-background-color-large-static-white: CanvasText;
- --spectrum-divider-background-color-small-static-black: CanvasText;
- --spectrum-divider-background-color-medium-static-black: CanvasText;
- --spectrum-divider-background-color-large-static-black: CanvasText;
+ .spectrum-Divider {
+ background-color: CanvasText !important;
}
}
@@ -80,6 +32,22 @@
border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness));
background-color: var(--mod-divider-background-color, var(--spectrum-divider-background-color));
+
+ &.spectrum-Divider--sizeS {
+ --spectrum-divider-thickness: var(--spectrum-divider-thickness-small);
+ --spectrum-divider-background-color: var(--spectrum-divider-background-color-small);
+ }
+
+ &,
+ &.spectrum-Divider--sizeM {
+ --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium);
+ --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium);
+ }
+
+ &.spectrum-Divider--sizeL {
+ --spectrum-divider-thickness: var(--spectrum-divider-thickness-large);
+ --spectrum-divider-background-color: var(--spectrum-divider-background-color-large);
+ }
}
/* static white variant colors */
diff --git a/components/divider/metadata/divider.yml b/components/divider/metadata/divider.yml
deleted file mode 100644
index f994fc5f66a..00000000000
--- a/components/divider/metadata/divider.yml
+++ /dev/null
@@ -1,126 +0,0 @@
-name: Divider
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/divider/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Change workflow icon size to medium
- Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
-
- ### T-shirt sizing
- Divider supports t-shirt sizes of small, medium and large. Divider requires that you specify the size by adding a `.spectrum-Divider--size*` class. No specified size class results in a medium size divider.
-examples:
- - id: divider-large
- name: "Large"
- markup: |
- Large
- Page or Section Titles.
-
- - id: divider-medium
- name: "Medium"
- markup: |
- Medium
- Divide subsections, or divide different groups of elements (between panels, rails, etc.)
-
- - id: divider-small
- name: "Small"
- markup: |
- Small
- Divide like-elements (tables, tool groups, elements within a panel, etc.)
-
- - id: divider-vertical-small
- name: "Vertical"
- description: |
- When a vertical Divider is used inside of a flex container, use `align-self: stretch; height: auto` on the Divider.
- markup: |
-
-
- - id: divider-static-white
- name: Static White
- markup: |
-
-
-
Small
- Medium
- Large
-
-
-
-
Small
- Medium
- Large
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/divider/themes/spectrum-two.css b/components/divider/themes/spectrum-two.css
new file mode 100644
index 00000000000..261e20f0a19
--- /dev/null
+++ b/components/divider/themes/spectrum-two.css
@@ -0,0 +1,31 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Divider {
+ /* background colors */
+ --spectrum-divider-background-color-small: var(--spectrum-gray-200);
+ --spectrum-divider-background-color-medium: var(--spectrum-gray-200);
+ --spectrum-divider-background-color-large: var(--spectrum-gray-800);
+
+ /* static white background colors */
+ --spectrum-divider-background-color-small-static-white: var(--spectrum-transparent-white-400);
+ --spectrum-divider-background-color-medium-static-white: var(--spectrum-transparent-white-400);
+ --spectrum-divider-background-color-large-static-white: var(--spectrum-transparent-white-900);
+
+ /* static black background colors */
+ --spectrum-divider-background-color-small-static-black: var(--spectrum-transparent-black-400);
+ --spectrum-divider-background-color-medium-static-black: var(--spectrum-transparent-black-400);
+ --spectrum-divider-background-color-large-static-black: var(--spectrum-transparent-black-900);
+ }
+}
diff --git a/components/divider/themes/spectrum.css b/components/divider/themes/spectrum.css
new file mode 100644
index 00000000000..7688e6187a6
--- /dev/null
+++ b/components/divider/themes/spectrum.css
@@ -0,0 +1,35 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Divider {
+ /* background colors */
+ --spectrum-divider-background-color-small: var(--spectrum-gray-300);
+ --spectrum-divider-background-color-medium: var(--spectrum-gray-300);
+
+ /* static white background colors */
+ --spectrum-divider-background-color-small-static-white: var(--spectrum-transparent-white-300);
+ --spectrum-divider-background-color-medium-static-white: var(--spectrum-transparent-white-300);
+ --spectrum-divider-background-color-large-static-white: var(--spectrum-transparent-white-800);
+
+ /* static black background colors */
+ --spectrum-divider-background-color-small-static-black: var(--spectrum-transparent-black-300);
+ --spectrum-divider-background-color-medium-static-black: var(--spectrum-transparent-black-300);
+ --spectrum-divider-background-color-large-static-black: var(--spectrum-transparent-black-800);
+ }
+}
diff --git a/components/dropindicator/CHANGELOG.md b/components/dropindicator/CHANGELOG.md
index a3bd0e6e9e1..ea8fab10092 100644
--- a/components/dropindicator/CHANGELOG.md
+++ b/components/dropindicator/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/dropindicator/index.css b/components/dropindicator/index.css
index 84bff4ead14..b28281cd63f 100644
--- a/components/dropindicator/index.css
+++ b/components/dropindicator/index.css
@@ -11,19 +11,14 @@
* governing permissions and limitations under the License.
*/
+@import "./themes/spectrum-two.css";
+
@media (forced-colors: active) {
.spectrum-DropIndicator {
--highcontrast-dropindicator-color: Highlight;
}
}
-.spectrum-DropIndicator {
- --spectrum-dropindicator-border-color: var(--spectrum-dropindicator-color);
- --spectrum-dropindicator-circle-color: var(--spectrum-dropindicator-color);
- --spectrum-dropindicator-border-size: var(--spectrum-border-width-200);
- --spectrum-dropindicator-circle-size: 12px;
-}
-
.spectrum-DropIndicator {
position: relative;
background: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-border-color, var(--spectrum-dropindicator-border-color)));
diff --git a/components/dropindicator/metadata/dropindicator.yml b/components/dropindicator/metadata/dropindicator.yml
deleted file mode 100644
index a63b135eb70..00000000000
--- a/components/dropindicator/metadata/dropindicator.yml
+++ /dev/null
@@ -1,10 +0,0 @@
-name: Drop indicator
-description: A Drop Indicator is used to show the insertion position into a list or table.
-examples:
- - id: dropindicator
- name: Standard
- markup: |
-
diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json
index 383768c8e16..fae7e40e476 100644
--- a/components/dropindicator/package.json
+++ b/components/dropindicator/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/dropindicator",
- "version": "5.1.3",
+ "version": "6.0.0-s2-foundations.13",
"description": "The Spectrum CSS dropindicator component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/dropindicator/stories/template.js b/components/dropindicator/stories/template.js
index e9d57e8ffcf..6106bd1cc66 100644
--- a/components/dropindicator/stories/template.js
+++ b/components/dropindicator/stories/template.js
@@ -4,6 +4,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-DropIndicator",
diff --git a/components/dropindicator/themes/express.css b/components/dropindicator/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/dropindicator/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/tokens/dist/css/components/bridge/actiongroup.css b/components/dropindicator/themes/spectrum-two.css
similarity index 64%
rename from tokens/dist/css/components/bridge/actiongroup.css
rename to components/dropindicator/themes/spectrum-two.css
index 79d96d08704..206c1331639 100644
--- a/tokens/dist/css/components/bridge/actiongroup.css
+++ b/components/dropindicator/themes/spectrum-two.css
@@ -11,8 +11,11 @@
* governing permissions and limitations under the License.
*/
-.spectrum-ActionGroup {
- --spectrum-actiongroup-gap-size-compact: var(--system-spectrum-actiongroup-gap-size-compact);
- --spectrum-actiongroup-horizontal-spacing-compact: var(--system-spectrum-actiongroup-horizontal-spacing-compact);
- --spectrum-actiongroup-vertical-spacing-compact: var(--system-spectrum-actiongroup-vertical-spacing-compact);
+@container style(--system: spectrum) {
+ .spectrum-DropIndicator {
+ --spectrum-dropindicator-border-color: var(--spectrum-dropindicator-color);
+ --spectrum-dropindicator-circle-color: var(--spectrum-dropindicator-color);
+ --spectrum-dropindicator-border-size: var(--spectrum-border-width-200);
+ --spectrum-dropindicator-circle-size: 12px;
+ }
}
diff --git a/components/dropindicator/themes/spectrum.css b/components/dropindicator/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/dropindicator/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/dropzone/CHANGELOG.md b/components/dropzone/CHANGELOG.md
index 1339f2acc4d..f02b3f06b76 100644
--- a/components/dropzone/CHANGELOG.md
+++ b/components/dropzone/CHANGELOG.md
@@ -1,5 +1,209 @@
# Change Log
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.13
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/link@6.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`877ca25`](https://github.com/adobe/spectrum-css/commit/877ca2516363e9483e7b3ecbfddc900b4e6a9a65) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-241] In order to show dropzone background color, --spectrum-drop-zone-background-color has been changed to --mod-drop-zone-background-color in &.is-dragged and &.is-filled
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.12
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/link@6.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.11
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/link@6.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.10
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/link@6.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.9
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/link@6.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.8
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/link@6.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.7
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/link@6.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/link@6.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.5
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/link@6.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.4
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/link@6.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.3
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/link@6.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.2
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/link@6.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.1
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/link@6.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/illustratedmessage@8.0.0-s2-foundations.0
+ - @spectrum-css/link@6.0.0-s2-foundations.0
+
## 6.1.3
### Patch Changes
diff --git a/components/dropzone/index.css b/components/dropzone/index.css
index 58913ca04e3..588e58b3acf 100644
--- a/components/dropzone/index.css
+++ b/components/dropzone/index.css
@@ -11,51 +11,10 @@
* governing permissions and limitations under the License.
*/
+@import "./themes/spectrum-two.css";
+
.spectrum-DropZone {
- --spectrum-drop-zone-padding: var(--spectrum-spacing-400);
- --spectrum-drop-zone-illustration-to-heading: var(--spectrum-spacing-400);
- --spectrum-drop-zone-heading-to-body: var(--spectrum-spacing-75);
-
- --spectrum-drop-zone-border-width: var(--spectrum-border-width-200);
- --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100);
- --spectrum-drop-zone-border-color: var(--spectrum-gray-300);
-
- --spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
- --spectrum-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style);
- --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size);
- --spectrum-drop-zone-heading-line-height: var(--spectrum-heading-line-height);
- --spectrum-drop-zone-heading-color: var(--spectrum-heading-color);
-
- --spectrum-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style);
- --spectrum-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size);
- --spectrum-drop-zone-body-line-height: var(--spectrum-body-line-height);
- --spectrum-drop-zone-body-color: var(--spectrum-body-color);
-
- --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb);
- --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color);
- --spectrum-drop-zone-illustration-color: var(--spectrum-neutral-visual-color);
- --spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color);
-
- /* Filled styles */
- --spectrum-drop-zone-content-height: var(--spectrum-component-height-300);
- --spectrum-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width);
- --spectrum-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300);
- --spectrum-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300);
- --spectrum-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
-
- --spectrum-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-drop-zone-content-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-drop-zone-content-font-style: var(--spectrum-default-font-style);
- --spectrum-drop-zone-content-font-size: var(--spectrum-font-size-300);
- --spectrum-drop-zone-content-line-height: var(--spectrum-line-height-100);
-
- --spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color);
- --spectrum-drop-zone-content-color: var(--spectrum-white);
-
- /* Settings for a nested illustrated message */
+ /* @passthrough IllustratedMessage -- settings for a nested illustrated message */
--mod-illustrated-message-content-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width));
--mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color, var(--spectrum-drop-zone-illustration-color));
--mod-illustrated-message-title-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-drop-zone-illustration-to-heading));
@@ -76,20 +35,11 @@
--mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-drop-zone-body-line-height));
--mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-drop-zone-body-color));
- /* Settings for a nested actionbutton */
+ /** @passthrough ActionButton -- settings for a nested actionbutton */
--mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-drop-zone-content-font-size));
--mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-drop-zone-content-color));
--mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-drop-zone-content-edge-to-text));
- /* cjk language support */
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-cjk-title-size);
- }
-}
-
-.spectrum-DropZone {
box-sizing: border-box;
inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width));
padding: calc(var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)));
@@ -97,13 +47,18 @@
border-color: var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color));
border-width: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width));
border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-drop-zone-corner-radius));
- border-style: var(--mod-drop-zone-border-style, dashed);
- background-size: cover;
+ border-style: var(--mod-drop-zone-border-style, var(--spectrum-drop-zone-border-style, dashed));
background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color));
+ background-size: cover;
+
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-heading-font-size-cjk);
+ }
&.is-dragged {
- /* @deprecation --mod-drop-zone-border-style--dragged will be removed during the S2 migration; please update your code to --mod-drop-zone-border-style-dragged */
- --mod-drop-zone-border-style: var(--mod-drop-zone-border-style--dragged, var(--mod-drop-zone-border-style-dragged, solid));
+ --mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid);
--mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-background-color-opacity)));
--spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)));
@@ -131,7 +86,7 @@
}
.spectrum-DropZone-content {
- display: var(--mod-drop-zone-content-display, none);
+ display: var(--mod-drop-zone-content-display, var(--spectrum-drop-zone-content-display, none));
block-size: 100%;
align-items: center;
justify-content: center;
diff --git a/components/dropzone/metadata/dropzone.yml b/components/dropzone/metadata/dropzone.yml
deleted file mode 100644
index ee00e8e082d..00000000000
--- a/components/dropzone/metadata/dropzone.yml
+++ /dev/null
@@ -1,33 +0,0 @@
-name: Drop zone
-description: 'A Drop Zone is an area on the screen into a which an object can be dragged and dropped to accomplish a task. For example, a Drop Zone might be used in an upload workflow to enable the user to simply drop a file from their operating system into the Drop Zone, which is a more efficient and intuitive action, rather than utilize the standard "Choose File" dialog.'
-examples:
- - id: dropzone
- name: Default
- markup: |
-
-
-
-
Drag and drop your file
-
Select a file from your computer.
-
-
-
-
-
Drag and drop your file
-
Select a file from your computer.
-
-
-
-
- Drop file to replace
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/dropzone/themes/spectrum-two.css b/components/dropzone/themes/spectrum-two.css
new file mode 100644
index 00000000000..5a768a931c7
--- /dev/null
+++ b/components/dropzone/themes/spectrum-two.css
@@ -0,0 +1,61 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-DropZone {
+ --spectrum-drop-zone-padding: var(--spectrum-spacing-400);
+ --spectrum-drop-zone-illustration-to-heading: var(--spectrum-spacing-400);
+ --spectrum-drop-zone-heading-to-body: var(--spectrum-spacing-75);
+
+ --spectrum-drop-zone-border-width: var(--spectrum-border-width-200);
+ --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100);
+ --spectrum-drop-zone-border-color: var(--spectrum-gray-200);
+
+ --spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
+ --spectrum-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style);
+ --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size);
+ --spectrum-drop-zone-heading-line-height: var(--spectrum-heading-line-height);
+ --spectrum-drop-zone-heading-color: var(--spectrum-heading-color);
+
+ --spectrum-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
+ --spectrum-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style);
+ --spectrum-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size);
+ --spectrum-drop-zone-body-line-height: var(--spectrum-body-line-height);
+ --spectrum-drop-zone-body-color: var(--spectrum-body-color);
+
+ --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb);
+ --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color);
+ --spectrum-drop-zone-illustration-color: var(--spectrum-neutral-visual-color);
+ --spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color);
+
+ /* Filled styles */
+ --spectrum-drop-zone-content-height: var(--spectrum-component-height-300);
+ --spectrum-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width);
+ --spectrum-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300);
+ --spectrum-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300);
+ --spectrum-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
+
+ --spectrum-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-drop-zone-content-font-weight: var(--spectrum-bold-font-weight);
+ --spectrum-drop-zone-content-font-style: var(--spectrum-default-font-style);
+ --spectrum-drop-zone-content-font-size: var(--spectrum-font-size-300);
+ --spectrum-drop-zone-content-line-height: var(--spectrum-line-height-100);
+
+ --spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color);
+ --spectrum-drop-zone-content-color: var(--spectrum-white);
+
+ --spectrum-drop-zone-heading-font-size-cjk: var(--spectrum-drop-zone-cjk-title-size);
+ }
+}
diff --git a/components/page/index.css b/components/dropzone/themes/spectrum.css
similarity index 75%
rename from components/page/index.css
rename to components/dropzone/themes/spectrum.css
index 28bab4cccc2..d8cc6efa999 100644
--- a/components/page/index.css
+++ b/components/dropzone/themes/spectrum.css
@@ -11,9 +11,13 @@
* governing permissions and limitations under the License.
*/
-:root {
- background-color: var(--spectrum-gray-100);
- /* Prevent tap highlights */
- -webkit-tap-highlight-color: var(--spectrum-transparent-black-100);
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-DropZone {
+ --spectrum-drop-zone-border-color: var(--spectrum-gray-300);
+ }
}
diff --git a/components/fieldgroup/CHANGELOG.md b/components/fieldgroup/CHANGELOG.md
index ece8235168a..dfb4798951f 100644
--- a/components/fieldgroup/CHANGELOG.md
+++ b/components/fieldgroup/CHANGELOG.md
@@ -1,5 +1,223 @@
# Change Log
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4e80ae6`](https://github.com/adobe/spectrum-css/commit/4e80ae67ddda329a5ed556b57426623c6f0f13f0) Thanks [@pfulton](https://github.com/pfulton)! - ActionButton:
+
+ - Correct --spectrum-actionbutton-background-color-selected-disabled to be --spectrum-actionbutton-(background|border)-color-disabled-selected
+
+ Combobox:
+
+ - Move --spectrum-combobox-min-inline-size and --spectrum-combobox-button-width to the index.css
+
+ FieldGroup:
+
+ - Swap gap back to margin-inline-end on FieldGroup
+
+ Typography:
+
+ - Remap body size to xs if xxs provided
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.16
+ - @spectrum-css/helptext@6.0.0-s2-foundations.13
+ - @spectrum-css/radio@10.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.12
+ - @spectrum-css/helptext@6.0.0-s2-foundations.12
+ - @spectrum-css/radio@10.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.11
+ - @spectrum-css/helptext@6.0.0-s2-foundations.11
+ - @spectrum-css/radio@10.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.10
+ - @spectrum-css/helptext@6.0.0-s2-foundations.10
+ - @spectrum-css/radio@10.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.9
+ - @spectrum-css/helptext@6.0.0-s2-foundations.9
+ - @spectrum-css/radio@10.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.8
+ - @spectrum-css/helptext@6.0.0-s2-foundations.8
+ - @spectrum-css/radio@10.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.7
+ - @spectrum-css/helptext@6.0.0-s2-foundations.7
+ - @spectrum-css/radio@10.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.6
+ - @spectrum-css/helptext@6.0.0-s2-foundations.6
+ - @spectrum-css/radio@10.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.5
+ - @spectrum-css/helptext@6.0.0-s2-foundations.5
+ - @spectrum-css/radio@10.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.4
+ - @spectrum-css/helptext@6.0.0-s2-foundations.4
+ - @spectrum-css/radio@10.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.3
+ - @spectrum-css/helptext@6.0.0-s2-foundations.3
+ - @spectrum-css/radio@10.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.2
+ - @spectrum-css/helptext@6.0.0-s2-foundations.2
+ - @spectrum-css/radio@10.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.1
+ - @spectrum-css/helptext@6.0.0-s2-foundations.1
+ - @spectrum-css/radio@10.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.0
+ - @spectrum-css/radio@10.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/helptext@6.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/fieldgroup/index.css b/components/fieldgroup/index.css
index e253a7a71ca..f4207eabbb9 100644
--- a/components/fieldgroup/index.css
+++ b/components/fieldgroup/index.css
@@ -11,6 +11,8 @@
* governing permissions and limitations under the License.
*/
+@import "./themes/spectrum-two.css";
+
/* fieldgroup/index.css
*
* fieldgroup contains four component dependences:
@@ -18,12 +20,6 @@
*
*/
-/* custom properties */
-.spectrum-FieldGroup {
- --spectrum-fieldgroup-margin: var(--spectrum-spacing-300);
- --spectrum-fieldgroup-readonly-delimiter: "\002c";
-}
-
/* field group */
.spectrum-FieldGroup {
display: flex;
diff --git a/components/fieldgroup/metadata/fieldgroup.yml b/components/fieldgroup/metadata/fieldgroup.yml
deleted file mode 100644
index 291711c17e8..00000000000
--- a/components/fieldgroup/metadata/fieldgroup.yml
+++ /dev/null
@@ -1,527 +0,0 @@
-name: Field group
-description: |
- - A group of fields, usually Radios or Checkboxes.
- - Field group incorporates the Help text component which may appear below a Field group.
- - Help text is necessary to denote invalid checkbox fields, invalid radio button fields, and required fields.
- - Invalid radio buttons are signified only by negative Help text.
- - Invalid checkboxes are signified by negative Help text and the negative/invalid color on the input box.
-sections:
- - name: Migration Guide
- description: |
- ### Field group now includes Field label and Help text
- - Include Field Label as size medium, `spectrum-FieldLabel spectrum-FieldLabel--sizeM`.
- - Include Help text as `spectrum-HelpText-text`.
- ### Field group label has two layout options
- - Label can be top aligned with `spectrum-FieldGroup spectrum-FieldGroup--toplabel`.
- - Label can be side aligned with `spectrum-FieldGroup spectrum-FieldGroup--sidelabel`.
- ### Field group must now include `spectrum-FieldGroupInputLayout` as the immediate parent of the Field group items
- - Due to the addition of label, a new nested div must wrap the fieldgroup items to control their layout separately from the label
-
-examples:
- - id: fieldgroup-vertical
- name: Vertical
- description: A vertical group of fields.
- markup: |
-
-
- - id: fieldgroup-horizontal
- name: Horizontal
- description: A horizontal group of fields.
- markup: |
-
-
- - id: fieldgroup-invalid
- name: Invalid
- description: An invalid group of fields.
- markup: |
-
-
-
- - id: fieldgroup-required-optional
- name: Required or Optional
- description: An optional or required group of fields.
- markup: |
-
-
- - id: fieldgroup-sidelabel
- name: Side Label Position
- markup: |
-
-
-
-
Side Label Vertical Radio
-
-
-
-
-
Side Label Vertical Checkbox
-
-
-
-
-
Side Label Horizontal Radio
-
-
-
-
-
Side Label Horizontal Checkbox
-
-
-
-
-
-
-
-
-
- Apples
-
-
-
-
-
-
- Peaches
-
-
-
-
-
-
-
- Grapes
-
-
-
-
-
-
- Bananas
-
-
diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json
index 43623c96af0..272f6352295 100644
--- a/components/fieldgroup/package.json
+++ b/components/fieldgroup/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/fieldgroup",
- "version": "5.1.3",
+ "version": "6.0.0-s2-foundations.14",
"description": "The Spectrum CSS fieldgroup component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/fieldgroup/stories/template.js b/components/fieldgroup/stories/template.js
index 12ec029017b..a0a4c95f17b 100644
--- a/components/fieldgroup/stories/template.js
+++ b/components/fieldgroup/stories/template.js
@@ -7,23 +7,23 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
-export const Template = (
- {
- rootClass = "spectrum-FieldGroup",
- customClasses = [],
- layout = "vertical",
- inputType = "radio",
- isReadOnly = false,
- isRequired = false,
- label,
- labelPosition,
- isInvalid,
- helpText,
- items = [],
- } = {},
- context = {},
-) => {
+export const Template = ({
+ rootClass = "spectrum-FieldGroup",
+ customClasses = [],
+ layout = "vertical",
+ inputType = "radio",
+ isReadOnly = false,
+ isRequired = false,
+ label,
+ labelPosition,
+ isInvalid,
+ helpText,
+ items = [],
+} = {}, context = {}) => {
return html`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/tokens/dist/css/components/bridge/alertbanner.css b/components/fieldgroup/themes/spectrum-two.css
similarity index 77%
rename from tokens/dist/css/components/bridge/alertbanner.css
rename to components/fieldgroup/themes/spectrum-two.css
index 030ea9fb330..dbecf1d4c89 100644
--- a/tokens/dist/css/components/bridge/alertbanner.css
+++ b/components/fieldgroup/themes/spectrum-two.css
@@ -11,6 +11,9 @@
* governing permissions and limitations under the License.
*/
-.spectrum-AlertBanner {
- --spectrum-alert-banner-netural-background: var(--system-spectrum-alertbanner-spectrum-alert-banner-netural-background);
+@container style(--system: spectrum) {
+ .spectrum-FieldGroup {
+ --spectrum-fieldgroup-margin: var(--spectrum-spacing-300);
+ --spectrum-fieldgroup-readonly-delimiter: "\002c";
+ }
}
diff --git a/components/fieldgroup/themes/spectrum.css b/components/fieldgroup/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/fieldgroup/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/fieldlabel/CHANGELOG.md b/components/fieldlabel/CHANGELOG.md
index 3bd83d3c162..880504060ec 100644
--- a/components/fieldlabel/CHANGELOG.md
+++ b/components/fieldlabel/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 9.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 9.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 9.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 9.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 9.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 9.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 9.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 9.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 9.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 9.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 9.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 9.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 9.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 9.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 8.1.3
### Patch Changes
diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css
index f63c9c3b1f4..d63bdcefba9 100644
--- a/components/fieldlabel/index.css
+++ b/components/fieldlabel/index.css
@@ -11,72 +11,17 @@
* governing permissions and limitations under the License.
*/
-.spectrum-FieldLabel {
- --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
- --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default);
-
- --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
-
- --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
- --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100);
-}
-
-.spectrum-FieldLabel--sizeS {
- --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
- --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
- --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
-
- --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
- --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100);
-
- --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small);
-}
-
-.spectrum-FieldLabel--sizeM {
- --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
- --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
- --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
-
- --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
- --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
-
- --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
-}
-
-.spectrum-FieldLabel--sizeL {
- --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100);
- --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
- --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
-
- --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
- --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
-
- --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
-}
-
-.spectrum-FieldLabel--sizeXL {
- --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200);
- --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200);
- --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
- --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200);
-
- --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
- --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
-
- --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
-}
+@import "./themes/spectrum-two.css";
.spectrum-FieldLabel {
display: block;
box-sizing: border-box;
min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height));
- padding-block: var(--mod-field-label-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text));
- padding-inline: 0;
+ padding-block: var(--mod-fieldlabel-padding-block, var(--mod-field-label-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text)));
+ padding-inline: var(--mod-fieldlabel-padding-inline, 0);
+ margin-block: var(--mod-fieldlabel-margin-block, var(--mod-fieldlabel-margin-block-start, 0) var(--mod-fieldlabel-margin-block-end, 0));
+ margin-inline: var(--mod-fieldlabel-margin-inline, var(--mod-fieldlabel-margin-inline-start, 0) var(--mod-fieldlabel-margin-inline-end, 0));
font-size: var(--mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size));
font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-fieldlabel-font-weight));
@@ -86,13 +31,13 @@
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
- color: var(--spectrum-fieldlabel-color);
+ color: var(--mod-fieldlabel-color, var(--spectrum-fieldlabel-color));
/* CJK (Chinese, Japanese, and Korean) language support */
&:lang(ja),
&:lang(zh),
&:lang(ko) {
- line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-fieldlabel-line-height-cjk));
+ --mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-fieldlabel-line-height-cjk));
}
}
@@ -130,6 +75,7 @@
/* @deprecation --mod-tableform-item-block-spacing has been renamed to
--mod-form-item-block-spacing. The fallback will be removed in a future version. */
row-gap: var(--mod-form-item-block-spacing, var(--mod-tableform-item-block-spacing, var(--spectrum-tableform-item-block-spacing)));
+
}
/* Row */
diff --git a/components/fieldlabel/metadata/fieldlabel.yml b/components/fieldlabel/metadata/fieldlabel.yml
deleted file mode 100644
index 4a1a2c3ab65..00000000000
--- a/components/fieldlabel/metadata/fieldlabel.yml
+++ /dev/null
@@ -1,121 +0,0 @@
-name: Field label
-SpectrumSiteSlug: https://spectrum.adobe.com/page/text-field/#Include-a-label
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### T-shirt sizing
- Field label now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-FieldLabel--size*` class.
-examples:
- - id: fieldlabel-sizing
- name: Sizing
- markup: |
-
-
-
S
-
-
Life story
-
-
-
-
-
M (default)
-
-
Life story
-
-
-
-
-
-
L
-
-
Life story
-
-
-
-
-
-
XL
-
-
Life story
-
-
-
-
Life story
-
-
-
- Life story
-
-
- - id: fieldlabel-side-left
- name: Left
- description: A left aligned Field label.
- markup: |
- Life story
-
-
-
-
- - id: fieldlabel-side-right
- name: Right
- description: A right aligned Field label.
- markup: |
- Life story
-
-
-
-
- - id: fieldlabel-required
- name: Required
- description: A Field label for a required field can display either the text "(required)", or an asterisk. If using the asterisk icon, do not leave any space between the label text and the start of the `` element in the markup, so extra space is not added in addition to the inline margin.
- markup: |
-
- Life story
-
-
-
-
-
- Life story (required)
-
-
-
-
- Life story
-
-
-
-
-
-
-
- Life story
-
-
-
-
diff --git a/components/fieldlabel/metadata/form.yml b/components/fieldlabel/metadata/form.yml
deleted file mode 100644
index 92375a2152c..00000000000
--- a/components/fieldlabel/metadata/form.yml
+++ /dev/null
@@ -1,261 +0,0 @@
-name: Form
-description: Form provides structure and spacing for your form fields.
-examples:
- - id: form-labels-left
- name: Standard - left-aligned text
- description: A two column layout with left-aligned label text. Apply `.spectrum-FieldLabel--left` to each Field label.
- markup: |
-
- - id: form-labels-right
- name: Right-aligned text
- description: A two column layout with right-aligned label text. Apply `.spectrum-FieldLabel--right` to each Field label.
- markup: |
-
- - id: form-labels-above
- name: Labels above
- description: "A stacked layout with the labels above the form fields. Apply the variant class `.spectrum-Form--labelsAbove` to the Form itself. You do not need to apply a specific class to the Field label."
- markup: |
-
diff --git a/components/fieldlabel/metadata/metadata.json b/components/fieldlabel/metadata/metadata.json
index 409f73ab3ab..aa7b129cf0b 100644
--- a/components/fieldlabel/metadata/metadata.json
+++ b/components/fieldlabel/metadata/metadata.json
@@ -4,13 +4,13 @@
".spectrum-FieldLabel",
".spectrum-FieldLabel--left",
".spectrum-FieldLabel--right",
- ".spectrum-FieldLabel--sizeL",
- ".spectrum-FieldLabel--sizeM",
- ".spectrum-FieldLabel--sizeS",
- ".spectrum-FieldLabel--sizeXL",
".spectrum-FieldLabel-requiredIcon",
".spectrum-FieldLabel.is-disabled",
".spectrum-FieldLabel.is-disabled .spectrum-FieldLabel-requiredIcon",
+ ".spectrum-FieldLabel.spectrum-FieldLabel--sizeL",
+ ".spectrum-FieldLabel.spectrum-FieldLabel--sizeM",
+ ".spectrum-FieldLabel.spectrum-FieldLabel--sizeS",
+ ".spectrum-FieldLabel.spectrum-FieldLabel--sizeXL",
".spectrum-FieldLabel:lang(ja)",
".spectrum-FieldLabel:lang(ko)",
".spectrum-FieldLabel:lang(zh)",
@@ -30,11 +30,20 @@
"--mod-field-label-bottom-to-text",
"--mod-field-label-text-to-asterisk",
"--mod-field-label-top-to-text",
+ "--mod-fieldlabel-color",
"--mod-fieldlabel-font-size",
"--mod-fieldlabel-font-weight",
"--mod-fieldlabel-line-height",
"--mod-fieldlabel-line-height-cjk",
+ "--mod-fieldlabel-margin-block",
+ "--mod-fieldlabel-margin-block-end",
+ "--mod-fieldlabel-margin-block-start",
+ "--mod-fieldlabel-margin-inline",
+ "--mod-fieldlabel-margin-inline-end",
+ "--mod-fieldlabel-margin-inline-start",
"--mod-fieldlabel-min-height",
+ "--mod-fieldlabel-padding-block",
+ "--mod-fieldlabel-padding-inline",
"--mod-fieldlabel-side-margin-block-start",
"--mod-fieldlabel-side-padding-right",
"--mod-form-grid-template-columns",
diff --git a/components/fieldlabel/metadata/mods.md b/components/fieldlabel/metadata/mods.md
index 35f6422ca6a..e3355f4d3b9 100644
--- a/components/fieldlabel/metadata/mods.md
+++ b/components/fieldlabel/metadata/mods.md
@@ -5,11 +5,20 @@
| `--mod-field-label-bottom-to-text` |
| `--mod-field-label-text-to-asterisk` |
| `--mod-field-label-top-to-text` |
+| `--mod-fieldlabel-color` |
| `--mod-fieldlabel-font-size` |
| `--mod-fieldlabel-font-weight` |
| `--mod-fieldlabel-line-height` |
| `--mod-fieldlabel-line-height-cjk` |
+| `--mod-fieldlabel-margin-block` |
+| `--mod-fieldlabel-margin-block-end` |
+| `--mod-fieldlabel-margin-block-start` |
+| `--mod-fieldlabel-margin-inline` |
+| `--mod-fieldlabel-margin-inline-end` |
+| `--mod-fieldlabel-margin-inline-start` |
| `--mod-fieldlabel-min-height` |
+| `--mod-fieldlabel-padding-block` |
+| `--mod-fieldlabel-padding-inline` |
| `--mod-fieldlabel-side-margin-block-start` |
| `--mod-fieldlabel-side-padding-right` |
| `--mod-form-grid-template-columns` |
diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json
index c7fdef1d037..556690bb627 100644
--- a/components/fieldlabel/package.json
+++ b/components/fieldlabel/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/fieldlabel",
- "version": "8.1.3",
+ "version": "9.0.0-s2-foundations.13",
"description": "The Spectrum CSS fieldlabel component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/fieldlabel/stories/form.template.js b/components/fieldlabel/stories/form.template.js
index 27b5ec90669..3715e1be20c 100644
--- a/components/fieldlabel/stories/form.template.js
+++ b/components/fieldlabel/stories/form.template.js
@@ -8,6 +8,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Form",
@@ -16,35 +19,37 @@ export const Template = ({
customStyles = {},
id = getRandomId("form"),
items = [],
-}, context) => html`
-
-`;
+ `;
+ })}
+
+ `;
+};
diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js
index 7f5477e4d5f..97fd584410a 100644
--- a/components/fieldlabel/stories/template.js
+++ b/components/fieldlabel/stories/template.js
@@ -7,6 +7,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-FieldLabel",
diff --git a/components/fieldlabel/themes/express.css b/components/fieldlabel/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/fieldlabel/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/fieldlabel/themes/spectrum-two.css b/components/fieldlabel/themes/spectrum-two.css
new file mode 100644
index 00000000000..f58541f2250
--- /dev/null
+++ b/components/fieldlabel/themes/spectrum-two.css
@@ -0,0 +1,74 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-FieldLabel {
+ --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
+ --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default);
+
+ --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
+
+ --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight);
+ --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
+ --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+ &.spectrum-FieldLabel--sizeS {
+ --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
+ --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+ --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
+
+ --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
+ --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100);
+
+ --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small);
+ }
+
+ &,
+ &.spectrum-FieldLabel--sizeM {
+ --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
+ --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+ --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
+
+ --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
+ --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
+
+ --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
+ }
+
+ &.spectrum-FieldLabel--sizeL {
+ --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100);
+ --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+ --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
+
+ --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
+ --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
+
+ --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
+ }
+
+ &.spectrum-FieldLabel--sizeXL {
+ --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200);
+ --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200);
+ --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+ --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200);
+
+ --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
+ --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
+
+ --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
+ }
+ }
+}
diff --git a/components/fieldlabel/themes/spectrum.css b/components/fieldlabel/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/fieldlabel/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/floatingactionbutton/CHANGELOG.md b/components/floatingactionbutton/CHANGELOG.md
index e45eb97d0d5..607a160f2df 100644
--- a/components/floatingactionbutton/CHANGELOG.md
+++ b/components/floatingactionbutton/CHANGELOG.md
@@ -1,5 +1,150 @@
# Change Log
+## 3.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`43c7d40`](https://github.com/adobe/spectrum-css/commit/43c7d40cd97d75162fa954a9bd35cfcdbc37ccd1) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to static white background color and selected states
+
+### Patch Changes
+
+- Updated dependencies [[`6582314`](https://github.com/adobe/spectrum-css/commit/65823145e139caa56f5e73e8a36e73aff37672de)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.19
+
+## 3.0.0-s2-foundations.11
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 3.0.0-s2-foundations.10
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 3.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 3.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 3.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 3.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 3.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 3.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 3.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 3.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 3.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 3.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 2.1.3
### Patch Changes
diff --git a/components/floatingactionbutton/index.css b/components/floatingactionbutton/index.css
index 7f75872dbbb..966f6d8d77f 100644
--- a/components/floatingactionbutton/index.css
+++ b/components/floatingactionbutton/index.css
@@ -11,45 +11,10 @@
* governing permissions and limitations under the License.
*/
-.spectrum-FloatingActionButton {
- --spectrum-floating-action-button-size: var(--spectrum-component-height-200);
- --spectrum-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200);
- --spectrum-floating-action-button-padding: var(--spectrum-component-pill-edge-to-visual-only-200);
- --spectrum-floating-action-button-margin: var(--spectrum-spacing-200);
- --spectrum-floating-action-button-drop-shadow-x: var(--spectrum-drop-shadow-x);
-
- --spectrum-floating-action-button-focus-ring-width: var(--spectrum-focus-indicator-thickness);
- --spectrum-floating-action-button-focus-ring-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-floating-action-button-focus-ring-color: var(--spectrum-focus-indicator-color);
-
- --spectrum-floating-action-button-background-color: var(--spectrum-accent-background-color-default);
- --spectrum-floating-action-button-background-color-hover: var(--spectrum-accent-background-color-hover);
- --spectrum-floating-action-button-background-color-down: var(--spectrum-accent-background-color-down);
- --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-accent-background-color-key-focus);
- --spectrum-floating-action-button-icon-color: var(--spectrum-white);
- --spectrum-floating-action-button-icon-color-hover: var(--spectrum-white);
- --spectrum-floating-action-button-icon-color-down: var(--spectrum-white);
- --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-white);
-}
-
-.spectrum-FloatingActionButton--secondary {
- --spectrum-floating-action-button-background-color: var(--spectrum-background-layer-2-color);
- --spectrum-floating-action-button-background-color-hover: var(--spectrum-background-layer-2-color);
- --spectrum-floating-action-button-background-color-down: var(--spectrum-background-layer-2-color);
- --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-background-layer-2-color);
- --spectrum-floating-action-button-icon-color: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-floating-action-button-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
- --spectrum-floating-action-button-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
- --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-}
+@import "./themes/spectrum-two.css";
@media (forced-colors: active) {
.spectrum-FloatingActionButton {
- &::after {
- /* make sure focus-ring renders */
- forced-color-adjust: none;
- }
-
--highcontrast-floating-action-button-background-color: ButtonText;
--highcontrast-floating-action-button-background-color-hover: Highlight;
--highcontrast-floating-action-button-background-color-down: Highlight;
@@ -59,6 +24,11 @@
--highcontrast-floating-action-button-icon-color-hover: ButtonFace;
--highcontrast-floating-action-button-icon-color-down: ButtonFace;
--highcontrast-floating-action-button-icon-color-key-focus: ButtonFace;
+
+ &::after {
+ /* make sure focus-ring renders */
+ forced-color-adjust: none;
+ }
}
}
diff --git a/components/floatingactionbutton/metadata/floatingactionbutton.yml b/components/floatingactionbutton/metadata/floatingactionbutton.yml
deleted file mode 100644
index c2d5f13c39f..00000000000
--- a/components/floatingactionbutton/metadata/floatingactionbutton.yml
+++ /dev/null
@@ -1,27 +0,0 @@
-name: Floating action button
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/floating-action-button/
-description: |
- - Floating action button is used to give users a more prominent button for high frequency actions
- - When using Floating Action Button in dark themes, the `background-layer-color-2` will often show up on the base color `gray-50` or `gray-75` or on content, images, etc.
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
-examples:
- - id: floatingactionbutton-primary
- name: Primary
- markup: |
-
-
-
-
- - id: floatingactionbutton-secondary
- name: Secondary
- markup: |
-
-
-
-
diff --git a/components/floatingactionbutton/package.json b/components/floatingactionbutton/package.json
index 85e4e686b88..e414bf00622 100644
--- a/components/floatingactionbutton/package.json
+++ b/components/floatingactionbutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/floatingactionbutton",
- "version": "2.1.3",
+ "version": "3.0.0-s2-foundations.12",
"description": "The Spectrum CSS floatingactionbutton component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/floatingactionbutton/stories/template.js b/components/floatingactionbutton/stories/template.js
index 6d181eb7b89..3dcea7418bb 100644
--- a/components/floatingactionbutton/stories/template.js
+++ b/components/floatingactionbutton/stories/template.js
@@ -6,6 +6,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-FloatingActionButton",
diff --git a/components/floatingactionbutton/themes/express.css b/components/floatingactionbutton/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/floatingactionbutton/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/floatingactionbutton/themes/spectrum-two.css b/components/floatingactionbutton/themes/spectrum-two.css
new file mode 100644
index 00000000000..59a0892c7dd
--- /dev/null
+++ b/components/floatingactionbutton/themes/spectrum-two.css
@@ -0,0 +1,46 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-FloatingActionButton {
+ --spectrum-floating-action-button-size: var(--spectrum-component-height-200);
+ --spectrum-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200);
+ --spectrum-floating-action-button-padding: var(--spectrum-component-pill-edge-to-visual-only-200);
+ --spectrum-floating-action-button-margin: var(--spectrum-spacing-200);
+ --spectrum-floating-action-button-drop-shadow-x: var(--spectrum-drop-shadow-x);
+
+ --spectrum-floating-action-button-focus-ring-width: var(--spectrum-focus-indicator-thickness);
+ --spectrum-floating-action-button-focus-ring-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-floating-action-button-focus-ring-color: var(--spectrum-focus-indicator-color);
+
+ --spectrum-floating-action-button-background-color: var(--spectrum-accent-background-color-default);
+ --spectrum-floating-action-button-background-color-hover: var(--spectrum-accent-background-color-hover);
+ --spectrum-floating-action-button-background-color-down: var(--spectrum-accent-background-color-down);
+ --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-accent-background-color-key-focus);
+ --spectrum-floating-action-button-icon-color: var(--spectrum-white);
+ --spectrum-floating-action-button-icon-color-hover: var(--spectrum-white);
+ --spectrum-floating-action-button-icon-color-down: var(--spectrum-white);
+ --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-white);
+ }
+
+ .spectrum-FloatingActionButton--secondary {
+ --spectrum-floating-action-button-background-color: var(--spectrum-background-layer-2-color);
+ --spectrum-floating-action-button-background-color-hover: var(--spectrum-background-layer-2-color);
+ --spectrum-floating-action-button-background-color-down: var(--spectrum-background-layer-2-color);
+ --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-background-layer-2-color);
+ --spectrum-floating-action-button-icon-color: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-floating-action-button-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+ --spectrum-floating-action-button-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
+ --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+ }
+}
diff --git a/components/floatingactionbutton/themes/spectrum.css b/components/floatingactionbutton/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/floatingactionbutton/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/helptext/CHANGELOG.md b/components/helptext/CHANGELOG.md
index 2dc3348bd02..667c60bcec0 100644
--- a/components/helptext/CHANGELOG.md
+++ b/components/helptext/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/helptext/index.css b/components/helptext/index.css
index e9ff01d5240..7874b0ce2bd 100644
--- a/components/helptext/index.css
+++ b/components/helptext/index.css
@@ -11,77 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-HelpText {
- --spectrum-helptext-line-height: var(--spectrum-line-height-100);
- --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-helptext-disabled-content-color: var(--spectrum-disabled-content-color);
-
- &.spectrum-HelpText--neutral {
- --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
- }
-
- &.spectrum-HelpText--negative {
- --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900);
- --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900);
- }
-
- &.is-disabled {
- --spectrum-helptext-content-color-default: var(--spectrum-helptext-disabled-content-color);
- --spectrum-helptext-icon-color-default: var(--spectrum-helptext-disabled-content-color);
- }
-
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-helptext-line-height-cjk: var(--spectrum-cjk-line-height-100);
- }
-}
-
-.spectrum-HelpText--sizeS {
- --spectrum-helptext-min-height: var(--spectrum-component-height-75);
- --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75);
- --spectrum-helptext-font-size: var(--spectrum-font-size-75);
- --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75);
- --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small);
- --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
- --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
-}
-
-.spectrum-HelpText--sizeM {
- --spectrum-helptext-min-height: var(--spectrum-component-height-75);
- --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100);
- --spectrum-helptext-font-size: var(--spectrum-font-size-75);
- --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75);
- --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium);
- --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
- --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
-}
-
-.spectrum-HelpText--sizeL {
- --spectrum-helptext-min-height: var(--spectrum-component-height-100);
- --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200);
- --spectrum-helptext-font-size: var(--spectrum-font-size-100);
- --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100);
- --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large);
- --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
- --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-}
-
-.spectrum-HelpText--sizeXL {
- --spectrum-helptext-min-height: var(--spectrum-component-height-200);
- --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300);
- --spectrum-helptext-font-size: var(--spectrum-font-size-200);
- --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200);
- --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large);
- --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
- --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200);
- --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
-}
+@import "./themes/spectrum-two.css";
@media (forced-colors: active) {
.spectrum-HelpText {
@@ -98,6 +28,8 @@
}
.spectrum-HelpText {
+ --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
+
color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
display: flex;
font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size));
diff --git a/components/helptext/metadata/helptext.yml b/components/helptext/metadata/helptext.yml
deleted file mode 100644
index 5e1b6d9eb31..00000000000
--- a/components/helptext/metadata/helptext.yml
+++ /dev/null
@@ -1,123 +0,0 @@
-name: Help text
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/help-text/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
-examples:
- - id: helptext-sizing
- name: Sizing
- markup: |
-
-
-
S
-
-
Create a password with at least 8 characters.
-
-
-
-
M
-
-
Create a password with at least 8 characters.
-
-
-
-
L
-
-
Create a password with at least 8 characters.
-
-
-
-
XL
-
-
Create a password with at least 8 characters.
-
-
-
-
-
Negative
-
-
Create a password with at least 8 characters.
-
-
-
-
Negative with icon
-
-
-
-
Create a password with at least 8 characters.
-
-
-
-
-
S
-
-
-
-
Create a password with at least 8 characters.
-
-
-
-
M
-
-
-
-
Create a password with at least 8 characters.
-
-
-
-
L
-
-
-
-
Create a password with at least 8 characters.
-
-
-
-
XL
-
-
-
-
Create a password with at least 8 characters.
-
-
-
-
-
Wrapping
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
-
-
-
-
Disabled
-
-
Create a password with at least 8 characters.
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/helptext/themes/spectrum-two.css b/components/helptext/themes/spectrum-two.css
new file mode 100644
index 00000000000..84aba5c3564
--- /dev/null
+++ b/components/helptext/themes/spectrum-two.css
@@ -0,0 +1,82 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-HelpText {
+ --spectrum-helptext-line-height: var(--spectrum-line-height-100);
+ --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-helptext-disabled-content-color: var(--spectrum-disabled-content-color);
+
+ &.spectrum-HelpText--neutral {
+ --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
+ }
+
+ &.spectrum-HelpText--negative {
+ --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900);
+ --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900);
+ }
+
+ &.is-disabled {
+ --spectrum-helptext-content-color-default: var(--spectrum-helptext-disabled-content-color);
+ --spectrum-helptext-icon-color-default: var(--spectrum-helptext-disabled-content-color);
+ }
+
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --spectrum-helptext-line-height-cjk: var(--spectrum-cjk-line-height-100);
+ }
+ }
+
+ .spectrum-HelpText--sizeS {
+ --spectrum-helptext-min-height: var(--spectrum-component-height-75);
+ --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75);
+ --spectrum-helptext-font-size: var(--spectrum-font-size-75);
+ --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75);
+ --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small);
+ --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+ }
+
+ .spectrum-HelpText--sizeM {
+ --spectrum-helptext-min-height: var(--spectrum-component-height-75);
+ --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100);
+ --spectrum-helptext-font-size: var(--spectrum-font-size-75);
+ --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75);
+ --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium);
+ --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+ }
+
+ .spectrum-HelpText--sizeL {
+ --spectrum-helptext-min-height: var(--spectrum-component-height-100);
+ --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200);
+ --spectrum-helptext-font-size: var(--spectrum-font-size-100);
+ --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100);
+ --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large);
+ --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+ }
+
+ .spectrum-HelpText--sizeXL {
+ --spectrum-helptext-min-height: var(--spectrum-component-height-200);
+ --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300);
+ --spectrum-helptext-font-size: var(--spectrum-font-size-200);
+ --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200);
+ --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large);
+ --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200);
+ --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+ }
+}
diff --git a/components/helptext/themes/spectrum.css b/components/helptext/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/helptext/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/icon/CHANGELOG.md b/components/icon/CHANGELOG.md
index 9ad19ce8f73..9098d3ba585 100644
--- a/components/icon/CHANGELOG.md
+++ b/components/icon/CHANGELOG.md
@@ -1,5 +1,179 @@
# Change Log
+## 8.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`f38c66a`](https://github.com/adobe/spectrum-css/commit/f38c66a314c94058d7f8f084faa4967c89b20e7b) Thanks [@pfulton](https://github.com/pfulton)! - Fix icon sizing and checkbox border colors
+
+## 8.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.12
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.11
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.10
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`494da11`](https://github.com/adobe/spectrum-css/commit/494da118554c2ecc425564e42d25424325efc331) Thanks [@pfulton](https://github.com/pfulton)! - ## Feature [@spectrum-css/icon]
+
+ Update source files to load the mappings from component-level to global tokens for size and transform values. This will allow for more consistent and predictable behavior when using the `size` and `transform` props on icons when switching between contexts for S1, S2, and Express.
+
+ ## Patch [@spectrum-css/typography]
+
+ Remove the sourcemap footer from compiled assets.
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 7.1.4
### Patch Changes
diff --git a/components/icon/icons.css b/components/icon/icons.css
deleted file mode 100644
index e413ba95173..00000000000
--- a/components/icon/icons.css
+++ /dev/null
@@ -1,39 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum-Icon,
-.spectrum-UIIcon {
- --spectrum-icon-inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size)));
- --spectrum-icon-block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size)));
-
- display: inline-block;
- inline-size: var(--spectrum-icon-inline-size);
- block-size: var(--spectrum-icon-block-size);
-
- /* Use custom pass through or inherit the text color. */
- color: var(--mod-icon-color, inherit);
-
- /* Fill should match the current text color. */
- fill: currentColor;
-
- /* Don't catch clicks or hover, otherwise they may not escape the SVG. */
- pointer-events: none;
-}
-
-@media (forced-colors: active) {
- .spectrum-Icon,
- .spectrum-UIIcon {
- /* Automatically adjust the SVG to pick up the text color for High Contrast mode */
- forced-color-adjust: auto;
- }
-}
diff --git a/components/icon/index.css b/components/icon/index.css
index a9a0b75f267..0718d7cce9d 100644
--- a/components/icon/index.css
+++ b/components/icon/index.css
@@ -11,6 +11,145 @@
* governing permissions and limitations under the License.
*/
-@import "icons.css";
-@import "workflow-icons.css";
-@import "ui-icons.css";
+ @import "./themes/spectrum-two.css";
+
+ /*
+ * Component-specific icon transforms
+ */
+ .spectrum-UIIcon-ChevronDown50,
+ .spectrum-UIIcon-ChevronDown75,
+ .spectrum-UIIcon-ChevronDown100,
+ .spectrum-UIIcon-ChevronDown200,
+ .spectrum-UIIcon-ChevronDown300,
+ .spectrum-UIIcon-ChevronDown400,
+ .spectrum-UIIcon-ChevronDown500,
+ .spectrum-UIIcon-ArrowDown75,
+ .spectrum-UIIcon-ArrowDown100,
+ .spectrum-UIIcon-ArrowDown200,
+ .spectrum-UIIcon-ArrowDown300,
+ .spectrum-UIIcon-ArrowDown400,
+ .spectrum-UIIcon-ArrowDown500,
+ .spectrum-UIIcon-ArrowDown600 {
+ --spectrum-icon-transform: rotate(90deg);
+ }
+
+ .spectrum-UIIcon-ChevronLeft50,
+ .spectrum-UIIcon-ChevronLeft75,
+ .spectrum-UIIcon-ChevronLeft100,
+ .spectrum-UIIcon-ChevronLeft200,
+ .spectrum-UIIcon-ChevronLeft300,
+ .spectrum-UIIcon-ChevronLeft400,
+ .spectrum-UIIcon-ChevronLeft500,
+ .spectrum-UIIcon-ArrowLeft75,
+ .spectrum-UIIcon-ArrowLeft100,
+ .spectrum-UIIcon-ArrowLeft200,
+ .spectrum-UIIcon-ArrowLeft300,
+ .spectrum-UIIcon-ArrowLeft400,
+ .spectrum-UIIcon-ArrowLeft500,
+ .spectrum-UIIcon-ArrowLeft600 {
+ --spectrum-icon-transform: rotate(180deg);
+ }
+
+ .spectrum-UIIcon-ChevronUp50,
+ .spectrum-UIIcon-ChevronUp75,
+ .spectrum-UIIcon-ChevronUp100,
+ .spectrum-UIIcon-ChevronUp200,
+ .spectrum-UIIcon-ChevronUp300,
+ .spectrum-UIIcon-ChevronUp400,
+ .spectrum-UIIcon-ChevronUp500,
+ .spectrum-UIIcon-ArrowUp75,
+ .spectrum-UIIcon-ArrowUp100,
+ .spectrum-UIIcon-ArrowUp200,
+ .spectrum-UIIcon-ArrowUp300,
+ .spectrum-UIIcon-ArrowUp400,
+ .spectrum-UIIcon-ArrowUp500,
+ .spectrum-UIIcon-ArrowUp600 {
+ --spectrum-icon-transform: rotate(270deg);
+ }
+
+ /*
+ * Icon root class styles
+ */
+.spectrum-Icon,
+.spectrum-UIIcon {
+ /* XXS icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */
+ &.spectrum-Icon--sizeXXS {
+ --spectrum-icon-size: var(--spectrum-icon-size-xxs);
+ }
+
+ &.spectrum-Icon--sizeXS {
+ --spectrum-icon-size: var(--spectrum-icon-size-xs);
+ }
+
+ &.spectrum-Icon--sizeS {
+ --spectrum-icon-size: var(--spectrum-icon-size-s);
+ }
+
+ &,
+ &.spectrum-Icon--sizeM {
+ --spectrum-icon-size: var(--spectrum-icon-size-m);
+ }
+
+ &.spectrum-Icon--sizeL {
+ --spectrum-icon-size: var(--spectrum-icon-size-l);
+ }
+
+ &.spectrum-Icon--sizeXL {
+ --spectrum-icon-size: var(--spectrum-icon-size-xl);
+ }
+
+ &.spectrum-Icon--sizeXXL {
+ --spectrum-icon-size: var(--spectrum-icon-size-xxl);
+ }
+
+ /* Don't catch clicks or hover, otherwise they may not escape the SVG. */
+ pointer-events: none;
+
+ /* Only some icons have a transform applied to them */
+ transform: var(--spectrum-icon-transform, none);
+
+ display: inline-block;
+ inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size)));
+ block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size)));
+
+ /* Use custom pass through or inherit the text color. */
+ color: var(--mod-icon-color, inherit);
+
+ /* Fill should match the current text color. */
+ fill: currentColor;
+
+ img,
+ svg {
+ inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size)));
+ block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size)));
+ }
+
+ /* Hide the SVG overflow in IE. */
+ &:not(:root) {
+ overflow: hidden;
+ }
+}
+
+/*
+ * Medium/large scale
+ * ------------------
+ * In the "combined" versiom of the UI Icon SVGs, the medium and the large icons are
+ * contained within the same SVG. The two separate elements are shown or hidden based
+ * on the current platform scale.
+ */
+
+.spectrum-UIIcon--medium {
+ display: var(--mod-ui-icon-medium-display, var(--spectrum-ui-icon-medium-display, block));
+}
+
+.spectrum-UIIcon--large {
+ display: var(--mod-ui-icon-large-display, var(--spectrum-ui-icon-large-display, none));
+}
+
+@media (forced-colors: active) {
+ .spectrum-Icon,
+ .spectrum-UIIcon {
+ /* Automatically adjust the SVG to pick up the text color for High Contrast mode */
+ forced-color-adjust: auto;
+ }
+}
diff --git a/components/icon/metadata/metadata.json b/components/icon/metadata/metadata.json
index 7f5d27e3789..5d2e119f7f2 100644
--- a/components/icon/metadata/metadata.json
+++ b/components/icon/metadata/metadata.json
@@ -4,13 +4,17 @@
".spectrum-Icon",
".spectrum-Icon img",
".spectrum-Icon svg",
- ".spectrum-Icon--sizeL",
- ".spectrum-Icon--sizeS",
- ".spectrum-Icon--sizeXL",
- ".spectrum-Icon--sizeXS",
- ".spectrum-Icon--sizeXXL",
- ".spectrum-Icon--sizeXXS",
+ ".spectrum-Icon.spectrum-Icon--sizeL",
+ ".spectrum-Icon.spectrum-Icon--sizeM",
+ ".spectrum-Icon.spectrum-Icon--sizeS",
+ ".spectrum-Icon.spectrum-Icon--sizeXL",
+ ".spectrum-Icon.spectrum-Icon--sizeXS",
+ ".spectrum-Icon.spectrum-Icon--sizeXXL",
+ ".spectrum-Icon.spectrum-Icon--sizeXXS",
+ ".spectrum-Icon:not(:root)",
".spectrum-UIIcon",
+ ".spectrum-UIIcon img",
+ ".spectrum-UIIcon svg",
".spectrum-UIIcon--large",
".spectrum-UIIcon--medium",
".spectrum-UIIcon-ArrowDown100",
@@ -99,7 +103,15 @@
".spectrum-UIIcon-Dash50",
".spectrum-UIIcon-Dash500",
".spectrum-UIIcon-Dash600",
- ".spectrum-UIIcon-Dash75"
+ ".spectrum-UIIcon-Dash75",
+ ".spectrum-UIIcon.spectrum-Icon--sizeL",
+ ".spectrum-UIIcon.spectrum-Icon--sizeM",
+ ".spectrum-UIIcon.spectrum-Icon--sizeS",
+ ".spectrum-UIIcon.spectrum-Icon--sizeXL",
+ ".spectrum-UIIcon.spectrum-Icon--sizeXS",
+ ".spectrum-UIIcon.spectrum-Icon--sizeXXL",
+ ".spectrum-UIIcon.spectrum-Icon--sizeXXS",
+ ".spectrum-UIIcon:not(:root)"
],
"modifiers": [
"--mod-icon-block-size",
@@ -110,9 +122,15 @@
"--mod-ui-icon-medium-display"
],
"component": [
- "--spectrum-icon-block-size",
- "--spectrum-icon-inline-size",
- "--spectrum-icon-size"
+ "--spectrum-icon-size",
+ "--spectrum-icon-size-l",
+ "--spectrum-icon-size-m",
+ "--spectrum-icon-size-s",
+ "--spectrum-icon-size-xl",
+ "--spectrum-icon-size-xs",
+ "--spectrum-icon-size-xxl",
+ "--spectrum-icon-size-xxs",
+ "--spectrum-icon-transform"
],
"global": [
"--spectrum-arrow-icon-size-100",
diff --git a/components/icon/package.json b/components/icon/package.json
index 4773bd3a8d9..a277c0baf48 100644
--- a/components/icon/package.json
+++ b/components/icon/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/icon",
- "version": "7.1.4",
+ "version": "8.0.0-s2-foundations.15",
"description": "The Spectrum CSS icon component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js
index 978535f323c..e5c368ff4cc 100644
--- a/components/icon/stories/icon.stories.js
+++ b/components/icon/stories/icon.stories.js
@@ -102,7 +102,10 @@ WithForcedColors.tags = ["!autodocs", "!dev"];
WithForcedColors.parameters = {
chromatic: {
forcedColors: "active",
- modes: disableDefaultModes
+ modes: {
+ ...disableDefaultModes,
+ "Mobile": { disable: true },
+ },
},
};
diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js
index cf4b2067091..16f3b57bffb 100644
--- a/components/icon/stories/template.js
+++ b/components/icon/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { unsafeSVG } from "lit/directives/unsafe-svg.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
/**
* @typedef { keyof import("./icon.stories.js").default.args } IconArgs
@@ -111,6 +114,7 @@ export const Template = ({
uiIconSizes,
} = {}, context = {}) => {
const { globals = {}, loaded = {} } = context;
+
const scale = globals.scale ?? "medium";
if (!workflowIcons || !uiIcons || !uiIconSizes) {
diff --git a/components/icon/themes/express.css b/components/icon/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/icon/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/icon/themes/spectrum-two.css b/components/icon/themes/spectrum-two.css
new file mode 100644
index 00000000000..b891e1acee5
--- /dev/null
+++ b/components/icon/themes/spectrum-two.css
@@ -0,0 +1,378 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Icon {
+ --spectrum-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs);
+ --spectrum-icon-size-xs: var(--spectrum-workflow-icon-size-50);
+ --spectrum-icon-size-s: var(--spectrum-workflow-icon-size-75);
+ --spectrum-icon-size-m: var(--spectrum-workflow-icon-size-100);
+ --spectrum-icon-size-l: var(--spectrum-workflow-icon-size-200);
+ --spectrum-icon-size-xl: var(--spectrum-workflow-icon-size-300);
+ --spectrum-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl);
+ }
+
+ /* Chevron */
+ .spectrum-UIIcon-ChevronRight50,
+ .spectrum-UIIcon-ChevronDown50 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
+ }
+
+ .spectrum-UIIcon-ChevronRight75,
+ .spectrum-UIIcon-ChevronDown75 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
+ }
+
+ .spectrum-UIIcon-ChevronRight100,
+ .spectrum-UIIcon-ChevronDown100 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
+ }
+
+ .spectrum-UIIcon-ChevronRight200,
+ .spectrum-UIIcon-ChevronDown200 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
+ }
+
+ .spectrum-UIIcon-ChevronRight300,
+ .spectrum-UIIcon-ChevronDown300 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
+ }
+
+ .spectrum-UIIcon-ChevronRight400,
+ .spectrum-UIIcon-ChevronDown400 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
+ }
+
+ .spectrum-UIIcon-ChevronRight500,
+ .spectrum-UIIcon-ChevronDown500 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
+ }
+
+ .spectrum-UIIcon-ChevronDown100 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
+ }
+
+ .spectrum-UIIcon-ChevronDown200 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
+ }
+
+ .spectrum-UIIcon-ChevronDown300 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
+ }
+
+ .spectrum-UIIcon-ChevronDown400 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
+ }
+
+ .spectrum-UIIcon-ChevronDown500 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
+ }
+
+ .spectrum-UIIcon-ChevronLeft50 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
+ }
+
+ .spectrum-UIIcon-ChevronLeft75 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
+ }
+
+ .spectrum-UIIcon-ChevronLeft100 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
+ }
+
+ .spectrum-UIIcon-ChevronLeft200 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
+ }
+
+ .spectrum-UIIcon-ChevronLeft300 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
+ }
+
+ .spectrum-UIIcon-ChevronLeft400 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
+ }
+
+ .spectrum-UIIcon-ChevronLeft500 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
+ }
+
+ .spectrum-UIIcon-ChevronUp50 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
+ }
+
+ .spectrum-UIIcon-ChevronUp75 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
+ }
+
+ .spectrum-UIIcon-ChevronUp100 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
+ }
+
+ .spectrum-UIIcon-ChevronUp200 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
+ }
+
+ .spectrum-UIIcon-ChevronUp300 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
+ }
+
+ .spectrum-UIIcon-ChevronUp400 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
+ }
+
+ .spectrum-UIIcon-ChevronUp500 {
+ --spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
+ }
+
+ /* Arrow */
+ .spectrum-UIIcon-ArrowRight75 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
+ }
+
+ .spectrum-UIIcon-ArrowRight100 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
+ }
+
+ .spectrum-UIIcon-ArrowRight200 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
+ }
+
+ .spectrum-UIIcon-ArrowRight300 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
+ }
+
+ .spectrum-UIIcon-ArrowRight400 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
+ }
+
+ .spectrum-UIIcon-ArrowRight500 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
+ }
+
+ .spectrum-UIIcon-ArrowRight600 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
+ }
+
+ .spectrum-UIIcon-ArrowDown75 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
+ }
+
+ .spectrum-UIIcon-ArrowDown100 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
+ }
+
+ .spectrum-UIIcon-ArrowDown200 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
+ }
+
+ .spectrum-UIIcon-ArrowDown300 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
+ }
+
+ .spectrum-UIIcon-ArrowDown400 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
+ }
+
+ .spectrum-UIIcon-ArrowDown500 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
+ }
+
+ .spectrum-UIIcon-ArrowDown600 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
+ }
+
+ .spectrum-UIIcon-ArrowLeft75 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
+ }
+
+ .spectrum-UIIcon-ArrowLeft100 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
+ }
+
+ .spectrum-UIIcon-ArrowLeft200 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
+ }
+
+ .spectrum-UIIcon-ArrowLeft300 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
+ }
+
+ .spectrum-UIIcon-ArrowLeft400 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
+ }
+
+ .spectrum-UIIcon-ArrowLeft500 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
+ }
+
+ .spectrum-UIIcon-ArrowLeft600 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
+ }
+
+ .spectrum-UIIcon-ArrowUp75 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
+ }
+
+ .spectrum-UIIcon-ArrowUp100 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
+ }
+
+ .spectrum-UIIcon-ArrowUp200 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
+ }
+
+ .spectrum-UIIcon-ArrowUp300 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
+ }
+
+ .spectrum-UIIcon-ArrowUp400 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
+ }
+
+ .spectrum-UIIcon-ArrowUp500 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
+ }
+
+ .spectrum-UIIcon-ArrowUp600 {
+ --spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
+ }
+
+ /* Checkmark */
+ .spectrum-UIIcon-Checkmark50 {
+ --spectrum-icon-size: var(--spectrum-checkmark-icon-size-50);
+ }
+
+ .spectrum-UIIcon-Checkmark75 {
+ --spectrum-icon-size: var(--spectrum-checkmark-icon-size-75);
+ }
+
+ .spectrum-UIIcon-Checkmark100 {
+ --spectrum-icon-size: var(--spectrum-checkmark-icon-size-100);
+ }
+
+ .spectrum-UIIcon-Checkmark200 {
+ --spectrum-icon-size: var(--spectrum-checkmark-icon-size-200);
+ }
+
+ .spectrum-UIIcon-Checkmark300 {
+ --spectrum-icon-size: var(--spectrum-checkmark-icon-size-300);
+ }
+
+ .spectrum-UIIcon-Checkmark400 {
+ --spectrum-icon-size: var(--spectrum-checkmark-icon-size-400);
+ }
+
+ .spectrum-UIIcon-Checkmark500 {
+ --spectrum-icon-size: var(--spectrum-checkmark-icon-size-500);
+ }
+
+ .spectrum-UIIcon-Checkmark600 {
+ --spectrum-icon-size: var(--spectrum-checkmark-icon-size-600);
+ }
+
+ /* Dash */
+ .spectrum-UIIcon-Dash50 {
+ --spectrum-icon-size: var(--spectrum-dash-icon-size-50);
+ }
+
+ .spectrum-UIIcon-Dash75 {
+ --spectrum-icon-size: var(--spectrum-dash-icon-size-75);
+ }
+
+ .spectrum-UIIcon-Dash100 {
+ --spectrum-icon-size: var(--spectrum-dash-icon-size-100);
+ }
+
+ .spectrum-UIIcon-Dash200 {
+ --spectrum-icon-size: var(--spectrum-dash-icon-size-200);
+ }
+
+ .spectrum-UIIcon-Dash300 {
+ --spectrum-icon-size: var(--spectrum-dash-icon-size-300);
+ }
+
+ .spectrum-UIIcon-Dash400 {
+ --spectrum-icon-size: var(--spectrum-dash-icon-size-400);
+ }
+
+ .spectrum-UIIcon-Dash500 {
+ --spectrum-icon-size: var(--spectrum-dash-icon-size-500);
+ }
+
+ .spectrum-UIIcon-Dash600 {
+ --spectrum-icon-size: var(--spectrum-dash-icon-size-600);
+ }
+
+ /* Cross */
+ .spectrum-UIIcon-Cross75 {
+ --spectrum-icon-size: var(--spectrum-cross-icon-size-75);
+ }
+
+ .spectrum-UIIcon-Cross100 {
+ --spectrum-icon-size: var(--spectrum-cross-icon-size-100);
+ }
+
+ .spectrum-UIIcon-Cross200 {
+ --spectrum-icon-size: var(--spectrum-cross-icon-size-200);
+ }
+
+ .spectrum-UIIcon-Cross300 {
+ --spectrum-icon-size: var(--spectrum-cross-icon-size-300);
+ }
+
+ .spectrum-UIIcon-Cross400 {
+ --spectrum-icon-size: var(--spectrum-cross-icon-size-400);
+ }
+
+ .spectrum-UIIcon-Cross500 {
+ --spectrum-icon-size: var(--spectrum-cross-icon-size-500);
+ }
+
+ .spectrum-UIIcon-Cross600 {
+ --spectrum-icon-size: var(--spectrum-cross-icon-size-600);
+ }
+
+ /* Corner Triangle */
+ .spectrum-UIIcon-CornerTriangle75 {
+ --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-75);
+ }
+
+ .spectrum-UIIcon-CornerTriangle100 {
+ --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-100);
+ }
+
+ .spectrum-UIIcon-CornerTriangle200 {
+ --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-200);
+ }
+
+ .spectrum-UIIcon-CornerTriangle300 {
+ --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-300);
+ }
+
+ /* Asterisk */
+ .spectrum-UIIcon-Asterisk75 {
+ --spectrum-icon-size: var(--spectrum-asterisk-icon-size-75);
+ }
+
+ .spectrum-UIIcon-Asterisk100 {
+ --spectrum-icon-size: var(--spectrum-asterisk-icon-size-100);
+ }
+
+ .spectrum-UIIcon-Asterisk200 {
+ --spectrum-icon-size: var(--spectrum-asterisk-icon-size-200);
+ }
+
+ .spectrum-UIIcon-Asterisk300 {
+ --spectrum-icon-size: var(--spectrum-asterisk-icon-size-300);
+ }
+}
diff --git a/components/icon/themes/spectrum.css b/components/icon/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/icon/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/icon/ui-icons.css b/components/icon/ui-icons.css
deleted file mode 100644
index ce39d50ea8c..00000000000
--- a/components/icon/ui-icons.css
+++ /dev/null
@@ -1,432 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/*
- * Medium/large scale
- * ------------------
- * In the "combined" versiom of the UI Icon SVGs, the medium and the large icons are
- * contained within the same SVG. The two separate elements are shown or hidden based
- * on the current platform scale.
- */
-
-.spectrum-UIIcon--medium {
- display: var(--mod-ui-icon-medium-display, var(--spectrum-ui-icon-medium-display, block));
-}
-
-.spectrum-UIIcon--large {
- display: var(--mod-ui-icon-large-display, var(--spectrum-ui-icon-large-display, none));
-}
-
-/*
- * UI icons list
- * -------------
- * - Unlike workflow icons, UI icons come in various sizes, defined by their own tokens.
- * - Their base icon is rotated for directional variations (e.g. left and down).
- */
-
-/* Chevron */
-.spectrum-UIIcon-ChevronRight50 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
-}
-
-.spectrum-UIIcon-ChevronRight75 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
-}
-
-.spectrum-UIIcon-ChevronRight100 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
-}
-
-.spectrum-UIIcon-ChevronRight200 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
-}
-
-.spectrum-UIIcon-ChevronRight300 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
-}
-
-.spectrum-UIIcon-ChevronRight400 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
-}
-
-.spectrum-UIIcon-ChevronRight500 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
-}
-
-.spectrum-UIIcon-ChevronDown50 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
- transform: rotate(90deg);
-}
-
-.spectrum-UIIcon-ChevronDown75 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
- transform: rotate(90deg);
-}
-
-.spectrum-UIIcon-ChevronDown100 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
- transform: rotate(90deg);
-}
-
-.spectrum-UIIcon-ChevronDown200 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
- transform: rotate(90deg);
-}
-
-.spectrum-UIIcon-ChevronDown300 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
- transform: rotate(90deg);
-}
-
-.spectrum-UIIcon-ChevronDown400 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
- transform: rotate(90deg);
-}
-
-.spectrum-UIIcon-ChevronDown500 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
- transform: rotate(90deg);
-}
-
-.spectrum-UIIcon-ChevronLeft50 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
- transform: rotate(180deg);
-}
-
-.spectrum-UIIcon-ChevronLeft75 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
- transform: rotate(180deg);
-}
-
-.spectrum-UIIcon-ChevronLeft100 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
- transform: rotate(180deg);
-}
-
-.spectrum-UIIcon-ChevronLeft200 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
- transform: rotate(180deg);
-}
-
-.spectrum-UIIcon-ChevronLeft300 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
- transform: rotate(180deg);
-}
-
-.spectrum-UIIcon-ChevronLeft400 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
- transform: rotate(180deg);
-}
-
-.spectrum-UIIcon-ChevronLeft500 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
- transform: rotate(180deg);
-}
-
-.spectrum-UIIcon-ChevronUp50 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-50);
- transform: rotate(270deg);
-}
-
-.spectrum-UIIcon-ChevronUp75 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-75);
- transform: rotate(270deg);
-}
-
-.spectrum-UIIcon-ChevronUp100 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-100);
- transform: rotate(270deg);
-}
-
-.spectrum-UIIcon-ChevronUp200 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-200);
- transform: rotate(270deg);
-}
-
-.spectrum-UIIcon-ChevronUp300 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-300);
- transform: rotate(270deg);
-}
-
-.spectrum-UIIcon-ChevronUp400 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-400);
- transform: rotate(270deg);
-}
-
-.spectrum-UIIcon-ChevronUp500 {
- --spectrum-icon-size: var(--spectrum-chevron-icon-size-500);
- transform: rotate(270deg);
-}
-
-/* Arrow */
-.spectrum-UIIcon-ArrowRight75 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
-}
-
-.spectrum-UIIcon-ArrowRight100 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
-}
-
-.spectrum-UIIcon-ArrowRight200 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
-}
-
-.spectrum-UIIcon-ArrowRight300 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
-}
-
-.spectrum-UIIcon-ArrowRight400 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
-}
-
-.spectrum-UIIcon-ArrowRight500 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
-}
-
-.spectrum-UIIcon-ArrowRight600 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
-}
-
-.spectrum-UIIcon-ArrowDown75 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
- transform: rotate(90deg);
-}
-
-.spectrum-UIIcon-ArrowDown100 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
- transform: rotate(90deg);
-}
-
-.spectrum-UIIcon-ArrowDown200 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
- transform: rotate(90deg);
-}
-
-.spectrum-UIIcon-ArrowDown300 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
- transform: rotate(90deg);
-}
-
-.spectrum-UIIcon-ArrowDown400 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
- transform: rotate(90deg);
-}
-
-.spectrum-UIIcon-ArrowDown500 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
- transform: rotate(90deg);
-}
-
-.spectrum-UIIcon-ArrowDown600 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
- transform: rotate(90deg);
-}
-
-.spectrum-UIIcon-ArrowLeft75 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
- transform: rotate(180deg);
-}
-
-.spectrum-UIIcon-ArrowLeft100 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
- transform: rotate(180deg);
-}
-
-.spectrum-UIIcon-ArrowLeft200 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
- transform: rotate(180deg);
-}
-
-.spectrum-UIIcon-ArrowLeft300 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
- transform: rotate(180deg);
-}
-
-.spectrum-UIIcon-ArrowLeft400 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
- transform: rotate(180deg);
-}
-
-.spectrum-UIIcon-ArrowLeft500 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
- transform: rotate(180deg);
-}
-
-.spectrum-UIIcon-ArrowLeft600 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
- transform: rotate(180deg);
-}
-
-.spectrum-UIIcon-ArrowUp75 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-75);
- transform: rotate(270deg);
-}
-
-.spectrum-UIIcon-ArrowUp100 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-100);
- transform: rotate(270deg);
-}
-
-.spectrum-UIIcon-ArrowUp200 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-200);
- transform: rotate(270deg);
-}
-
-.spectrum-UIIcon-ArrowUp300 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-300);
- transform: rotate(270deg);
-}
-
-.spectrum-UIIcon-ArrowUp400 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-400);
- transform: rotate(270deg);
-}
-
-.spectrum-UIIcon-ArrowUp500 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-500);
- transform: rotate(270deg);
-}
-
-.spectrum-UIIcon-ArrowUp600 {
- --spectrum-icon-size: var(--spectrum-arrow-icon-size-600);
- transform: rotate(270deg);
-}
-
-/* Checkmark */
-.spectrum-UIIcon-Checkmark50 {
- --spectrum-icon-size: var(--spectrum-checkmark-icon-size-50);
-}
-
-.spectrum-UIIcon-Checkmark75 {
- --spectrum-icon-size: var(--spectrum-checkmark-icon-size-75);
-}
-
-.spectrum-UIIcon-Checkmark100 {
- --spectrum-icon-size: var(--spectrum-checkmark-icon-size-100);
-}
-
-.spectrum-UIIcon-Checkmark200 {
- --spectrum-icon-size: var(--spectrum-checkmark-icon-size-200);
-}
-
-.spectrum-UIIcon-Checkmark300 {
- --spectrum-icon-size: var(--spectrum-checkmark-icon-size-300);
-}
-
-.spectrum-UIIcon-Checkmark400 {
- --spectrum-icon-size: var(--spectrum-checkmark-icon-size-400);
-}
-
-.spectrum-UIIcon-Checkmark500 {
- --spectrum-icon-size: var(--spectrum-checkmark-icon-size-500);
-}
-
-.spectrum-UIIcon-Checkmark600 {
- --spectrum-icon-size: var(--spectrum-checkmark-icon-size-600);
-}
-
-/* Dash */
-.spectrum-UIIcon-Dash50 {
- --spectrum-icon-size: var(--spectrum-dash-icon-size-50);
-}
-
-.spectrum-UIIcon-Dash75 {
- --spectrum-icon-size: var(--spectrum-dash-icon-size-75);
-}
-
-.spectrum-UIIcon-Dash100 {
- --spectrum-icon-size: var(--spectrum-dash-icon-size-100);
-}
-
-.spectrum-UIIcon-Dash200 {
- --spectrum-icon-size: var(--spectrum-dash-icon-size-200);
-}
-
-.spectrum-UIIcon-Dash300 {
- --spectrum-icon-size: var(--spectrum-dash-icon-size-300);
-}
-
-.spectrum-UIIcon-Dash400 {
- --spectrum-icon-size: var(--spectrum-dash-icon-size-400);
-}
-
-.spectrum-UIIcon-Dash500 {
- --spectrum-icon-size: var(--spectrum-dash-icon-size-500);
-}
-
-.spectrum-UIIcon-Dash600 {
- --spectrum-icon-size: var(--spectrum-dash-icon-size-600);
-}
-
-/* Cross */
-.spectrum-UIIcon-Cross75 {
- --spectrum-icon-size: var(--spectrum-cross-icon-size-75);
-}
-
-.spectrum-UIIcon-Cross100 {
- --spectrum-icon-size: var(--spectrum-cross-icon-size-100);
-}
-
-.spectrum-UIIcon-Cross200 {
- --spectrum-icon-size: var(--spectrum-cross-icon-size-200);
-}
-
-.spectrum-UIIcon-Cross300 {
- --spectrum-icon-size: var(--spectrum-cross-icon-size-300);
-}
-
-.spectrum-UIIcon-Cross400 {
- --spectrum-icon-size: var(--spectrum-cross-icon-size-400);
-}
-
-.spectrum-UIIcon-Cross500 {
- --spectrum-icon-size: var(--spectrum-cross-icon-size-500);
-}
-
-.spectrum-UIIcon-Cross600 {
- --spectrum-icon-size: var(--spectrum-cross-icon-size-600);
-}
-
-/* Corner Triangle */
-.spectrum-UIIcon-CornerTriangle75 {
- --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-75);
-}
-
-.spectrum-UIIcon-CornerTriangle100 {
- --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-100);
-}
-
-.spectrum-UIIcon-CornerTriangle200 {
- --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-200);
-}
-
-.spectrum-UIIcon-CornerTriangle300 {
- --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-300);
-}
-
-/* Asterisk */
-.spectrum-UIIcon-Asterisk75 {
- --spectrum-icon-size: var(--spectrum-asterisk-icon-size-75);
-}
-
-.spectrum-UIIcon-Asterisk100 {
- --spectrum-icon-size: var(--spectrum-asterisk-icon-size-100);
-}
-
-.spectrum-UIIcon-Asterisk200 {
- --spectrum-icon-size: var(--spectrum-asterisk-icon-size-200);
-}
-
-.spectrum-UIIcon-Asterisk300 {
- --spectrum-icon-size: var(--spectrum-asterisk-icon-size-300);
-}
diff --git a/components/icon/workflow-icons.css b/components/icon/workflow-icons.css
deleted file mode 100644
index 22c35deb803..00000000000
--- a/components/icon/workflow-icons.css
+++ /dev/null
@@ -1,50 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum-Icon {
- --spectrum-icon-size: var(--spectrum-workflow-icon-size-100);
-}
-
-/* XXS icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */
-.spectrum-Icon--sizeXXS {
- --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxs);
-}
-
-.spectrum-Icon--sizeXS {
- --spectrum-icon-size: var(--spectrum-workflow-icon-size-50);
-}
-
-.spectrum-Icon--sizeS {
- --spectrum-icon-size: var(--spectrum-workflow-icon-size-75);
-}
-
-.spectrum-Icon--sizeL {
- --spectrum-icon-size: var(--spectrum-workflow-icon-size-200);
-}
-
-.spectrum-Icon--sizeXL {
- --spectrum-icon-size: var(--spectrum-workflow-icon-size-300);
-}
-
-/* XXL icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */
-.spectrum-Icon--sizeXXL {
- --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxl);
-}
-
-.spectrum-Icon {
- img,
- svg {
- inline-size: var(--spectrum-icon-inline-size);
- block-size: var(--spectrum-icon-block-size);
- }
-}
diff --git a/components/illustratedmessage/CHANGELOG.md b/components/illustratedmessage/CHANGELOG.md
index 1c1c538cb0e..c4f254a9809 100644
--- a/components/illustratedmessage/CHANGELOG.md
+++ b/components/illustratedmessage/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 8.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/typography@7.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/typography@7.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/typography@7.0.0-s2-foundations.0
+
## 7.1.3
### Patch Changes
diff --git a/components/illustratedmessage/index.css b/components/illustratedmessage/index.css
index 4663cd886aa..ae48a68291c 100644
--- a/components/illustratedmessage/index.css
+++ b/components/illustratedmessage/index.css
@@ -11,40 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-IllustratedMessage {
- /* Size & Spacing */
- --spectrum-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width);
- --spectrum-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width);
- --spectrum-illustrated-message-title-to-heading: var(--spectrum-spacing-400);
- --spectrum-illustrated-message-heading-to-description: var(--spectrum-spacing-75);
-
- /* Illustration */
- --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color);
- --spectrum-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color);
-
- /* Title */
- --spectrum-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
- --spectrum-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style);
- --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size);
- --spectrum-illustrated-message-title-line-height: var(--spectrum-heading-line-height);
- --spectrum-illustrated-message-title-color: var(--spectrum-heading-color);
-
- /* Description */
- --spectrum-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style);
- --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size);
- --spectrum-illustrated-message-description-line-height: var(--spectrum-body-line-height);
- --spectrum-illustrated-message-description-color: var(--spectrum-body-color);
-
- /* CJK (Chinese, Japanese, and Korean) language support */
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-cjk-title-size);
- }
-}
+@import "./themes/spectrum-two.css";
@media (forced-colors: active) {
.spectrum-IllustratedMessage {
@@ -93,6 +60,7 @@
max-inline-size: var(--mod-illustrated-message-heading-max-inline-size, var(--spectrum-illustrated-message-heading-max-inline-size));
margin-block-start: 0;
margin-block-end: var(--mod-illustrated-message-heading-to-body, 0);
+
}
.spectrum-IllustratedMessage-description {
diff --git a/components/illustratedmessage/metadata/illustratedmessage.yml b/components/illustratedmessage/metadata/illustratedmessage.yml
deleted file mode 100644
index 3760b7ba401..00000000000
--- a/components/illustratedmessage/metadata/illustratedmessage.yml
+++ /dev/null
@@ -1,26 +0,0 @@
-name: Illustrated message
-description: The Illustrated Message displays an illustration along with a heading and description. Optionally, part of the illustration can use an accent color. It can be used for status and errors, or as a call to action. For example, the Drop Zone component makes use of Illustrated Message as an area to drag and drop files.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/informational-illustrations/
-sections:
- - name: Migration Guide
- description: |
- ### Removed Classes
- `.spectrum-IllustratedMessage--cta` — The Standard variant currently provides the same styles.
-examples:
- - id: illustratedmessage-default
- name: Standard
- markup: |
-
-
Asset 1
-
Error 404: Page not found
-
This page isn't available. Try checking the URL or visit a different page.
-
-
-
Drag and drop your file
-
Select a file from your computer.
-
({ ...a, [c]: true }), {}),
- })}
- >
- ${illustrationSvgMarkup(useAccentColor)}
- ${when(heading, () =>
- Typography({
- semantics: "heading",
- "size": "m",
- customClasses: [`${rootClass}-heading`],
- content: [heading],
- }, context)
- )}
- ${when(description, () =>
- Typography({
- semantics: "body",
- "size": "s",
- customClasses: [`${rootClass}-description`],
- content: [
- ...description.map((c) => (typeof c === "function" ? c({}) : c))
- ],
- }, context)
- )}
-
-`;
+} = {}, context = {}) => {
+ return html`
+ ({ ...a, [c]: true }), {}),
+ })}
+ >
+ ${illustrationSvgMarkup(useAccentColor)}
+ ${when(heading, () =>
+ Typography({
+ semantics: "heading",
+ "size": "m",
+ customClasses: [`${rootClass}-heading`],
+ content: [heading],
+ }, context)
+ )}
+ ${when(description, () =>
+ Typography({
+ semantics: "body",
+ "size": "s",
+ customClasses: [`${rootClass}-description`],
+ content: [
+ ...description.map((c) => (typeof c === "function" ? c({}) : c))
+ ],
+ }, context)
+ )}
+
+ `;
+};
const illustrationSvgMarkup = (withAccentColorClass = false) => html`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/illustratedmessage/themes/spectrum-two.css b/components/illustratedmessage/themes/spectrum-two.css
new file mode 100644
index 00000000000..792f05c6180
--- /dev/null
+++ b/components/illustratedmessage/themes/spectrum-two.css
@@ -0,0 +1,49 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-IllustratedMessage {
+ /* Size & Spacing */
+ --spectrum-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width);
+ --spectrum-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width);
+ --spectrum-illustrated-message-title-to-heading: var(--spectrum-spacing-400);
+ --spectrum-illustrated-message-heading-to-description: var(--spectrum-spacing-75);
+
+ /* Illustration */
+ --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color);
+ --spectrum-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color);
+
+ /* Title */
+ --spectrum-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
+ --spectrum-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style);
+ --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size);
+ --spectrum-illustrated-message-title-line-height: var(--spectrum-heading-line-height);
+ --spectrum-illustrated-message-title-color: var(--spectrum-heading-color);
+
+ /* Description */
+ --spectrum-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight);
+ --spectrum-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style);
+ --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size);
+ --spectrum-illustrated-message-description-line-height: var(--spectrum-body-line-height);
+ --spectrum-illustrated-message-description-color: var(--spectrum-body-color);
+
+ /* CJK (Chinese, Japanese, and Korean) language support */
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-cjk-title-size);
+ }
+ }
+}
diff --git a/components/illustratedmessage/themes/spectrum.css b/components/illustratedmessage/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/illustratedmessage/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/infieldbutton/CHANGELOG.md b/components/infieldbutton/CHANGELOG.md
index 058d2e70791..114ebfb98f3 100644
--- a/components/infieldbutton/CHANGELOG.md
+++ b/components/infieldbutton/CHANGELOG.md
@@ -1,5 +1,181 @@
# Change Log
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#3040](https://github.com/adobe/spectrum-css/pull/3040) [`cf2e737`](https://github.com/adobe/spectrum-css/commit/cf2e73743b2c3d43d4c51fceeabfb99fda1ac4b5) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - Migrating --mod to index.css from infield button, logic button and table components
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css
index 82cd68d3a81..5f951982070 100644
--- a/components/infieldbutton/index.css
+++ b/components/infieldbutton/index.css
@@ -11,102 +11,13 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
-.spectrum-InfieldButton {
- /* Medium size is the default */
- --spectrum-infield-button-height: var(--spectrum-component-height-100);
- --spectrum-infield-button-width: var(--spectrum-component-height-100);
- --spectrum-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding);
-
- --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill);
- --spectrum-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill);
- --spectrum-infield-button-fill-padding: 0px;
- --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium);
- --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
- --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium);
-
- --spectrum-infield-button-animation-duration: var(--spectrum-animation-duration-100);
-
- --spectrum-infield-button-icon-color: var(--spectrum-neutral-content-color-default);
- --spectrum-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-infield-button-fill-justify-content: center;
-
- &:disabled {
- --mod-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color));
- --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
- --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
- --mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color));
-
- --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color));
- --mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
- --mod-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
- --mod-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color));
- }
-
- &.spectrum-InfieldButton--sizeS {
- --spectrum-infield-button-height: var(--spectrum-component-height-75);
- --spectrum-infield-button-width: var(--spectrum-component-height-75);
- --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small);
- --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
- --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small);
- }
-
- &.spectrum-InfieldButton--sizeL {
- --spectrum-infield-button-height: var(--spectrum-component-height-200);
- --spectrum-infield-button-width: var(--spectrum-component-height-200);
- --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large);
- --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
- --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large);
- }
-
- &.spectrum-InfieldButton--sizeXL {
- --spectrum-infield-button-height: var(--spectrum-component-height-300);
- --spectrum-infield-button-width: var(--spectrum-component-height-300);
- --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large);
- --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
- --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large);
- }
-
- &.spectrum-InfieldButton--top,
- &.spectrum-InfieldButton--bottom {
- --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium));
-
- &.spectrum-InfieldButton--sizeS {
- --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small));
- }
-
- &.spectrum-InfieldButton--sizeL {
- --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large));
- }
-
- &.spectrum-InfieldButton--sizeXL {
- --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large));
- }
- }
-
- &.spectrum-InfieldButton--quiet {
- --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent);
- --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent);
- --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent);
- --mod-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent);
-
- --mod-infield-border-color: var(--mod-infield-border-color-quiet, transparent);
- --mod-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0);
-
- &:disabled {
- --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent);
- --mod-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent);
- }
- }
-
- &:hover:not(:disabled),
- &:active:not(:disabled),
- &:focus-visible:not(:disabled) {
- @media (forced-colors: active) {
+@media (forced-colors: active) {
+ .spectrum-InfieldButton {
+ &:hover:not(:disabled),
+ &:active:not(:disabled),
+ &:focus-visible:not(:disabled) {
--highcontrast-infield-button-border-color: Highlight;
}
}
@@ -161,7 +72,49 @@
}
}
+ &.spectrum-InfieldButton--top,
+ &.spectrum-InfieldButton--bottom {
+ --spectrum-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium));
+
+ &.spectrum-InfieldButton--sizeS {
+ --spectrum-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small));
+ }
+
+ &.spectrum-InfieldButton--sizeL {
+ --spectrum-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large));
+ }
+
+ &.spectrum-InfieldButton--sizeXL {
+ --spectrum-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large));
+ }
+ }
+
+ &.spectrum-InfieldButton--quiet {
+ --spectrum-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent);
+ --spectrum-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent);
+ --spectrum-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent);
+ --spectrum-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent);
+
+ --spectrum-infield-border-color: var(--mod-infield-border-color-quiet, transparent);
+ --spectrum-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0);
+
+ &:disabled {
+ --spectrum-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent);
+ --spectrum-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent);
+ }
+ }
+
&:disabled {
+ --spectrum-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color));
+ --spectrum-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
+ --spectrum-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
+ --spectrum-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color));
+
+ --spectrum-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color));
+ --spectrum-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
+ --spectrum-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
+ --spectrum-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color));
+
cursor: auto;
}
@@ -203,8 +156,6 @@
display: flex;
align-items: center;
justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content));
-
- transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out;
}
/* Stacked in-field buttons */
diff --git a/components/infieldbutton/metadata/infieldbutton.yml b/components/infieldbutton/metadata/infieldbutton.yml
deleted file mode 100644
index 4fff0bdff64..00000000000
--- a/components/infieldbutton/metadata/infieldbutton.yml
+++ /dev/null
@@ -1,220 +0,0 @@
-name: In-field button
-status: Contribution
-SpectrumSiteSlug: https://spectrum.adobe.com/page/picker/
-sections:
- - name: Migration Guide
- description: |
- ### In-field button uses the [Quiet](infieldbutton.html#quiet) variant instead of loudness levels.
-
- The Loudness level classes, `.spectrum-InfieldButton--low`, `.spectrum-InfieldButton--medium`, and `.spectrum-InfieldButton--high`, have been removed.
-
- - Use the base class, `.spectrum-InfieldButton`, to apply the default button styles. The default styles correspond to what was previously the Loudness - High variant, which used the class `.spectrum-InfieldButton--high`.
- - Use the modifier class, `spectrum-InfieldButton--quiet`, to apply the quiet variant styles. Quiet corresponds to what was previously the Loudness - Low variant, which used the class `.spectrum-InfieldButton--low` class.
-
- The Loudness - Medium variant has been removed, so there is no equivalent.
-
- ### Stacked in-field buttons
-
- In order to create the stacked In-field buttons, give the first button a class of `spectrum-InfieldButton--top` and the second a class of `spectrum-InfieldButton--bottom`
-
-examples:
- - id: infieldbutton-sizing
- name: Sizing
- markup: |
-
-
- - id: infieldbutton-quiet
- name: Quiet
- markup: |
-
-
- - id: infieldbutton-position
- name: Position
- markup: |
-
-
- - id: infieldbutton-disabled
- name: Disabled
- markup: |
-
-
-
-
-
-
-
- - id: infieldbutton-stacked
- name: Stacked
- markup: |
-
-
-
M
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: infieldbutton-stacked
- name: Stacked
- markup: |
-
-
-
S
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
M
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
L
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
XL
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/components/infieldbutton/metadata/metadata.json b/components/infieldbutton/metadata/metadata.json
index 68851e8f6d8..ecb6eae18bd 100644
--- a/components/infieldbutton/metadata/metadata.json
+++ b/components/infieldbutton/metadata/metadata.json
@@ -38,7 +38,6 @@
".spectrum-InfieldButton:hover:not(:disabled)"
],
"modifiers": [
- "--mod-infield-border-color",
"--mod-infield-border-color-quiet",
"--mod-infield-button-background-color",
"--mod-infield-button-background-color-disabled",
@@ -137,31 +136,18 @@
"--spectrum-component-height-300",
"--spectrum-component-height-75",
"--spectrum-corner-radius-100",
- "--spectrum-corner-radius-75",
"--spectrum-disabled-background-color",
"--spectrum-disabled-content-color",
- "--spectrum-global-animation-duration-100",
+ "--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
- "--spectrum-gray-75",
+ "--spectrum-gray-50",
+ "--spectrum-infield-border-color",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
"--spectrum-neutral-content-color-hover",
"--spectrum-neutral-content-color-key-focus"
],
- "system-theme": [
- "--system-spectrum-infieldbutton-spectrum-infield-button-background-color",
- "--system-spectrum-infieldbutton-spectrum-infield-button-background-color-down",
- "--system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover",
- "--system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus",
- "--system-spectrum-infieldbutton-spectrum-infield-button-border-color",
- "--system-spectrum-infieldbutton-spectrum-infield-button-border-radius",
- "--system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset",
- "--system-spectrum-infieldbutton-spectrum-infield-button-border-width",
- "--system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start",
- "--system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start"
- ],
+ "system-theme": [],
"passthroughs": [],
"high-contrast": ["--highcontrast-infield-button-border-color"]
}
diff --git a/components/infieldbutton/metadata/mods.md b/components/infieldbutton/metadata/mods.md
index b9732dd92fc..f81a9c2af65 100644
--- a/components/infieldbutton/metadata/mods.md
+++ b/components/infieldbutton/metadata/mods.md
@@ -1,6 +1,5 @@
| Modifiable custom properties |
| ------------------------------------------------------------- |
-| `--mod-infield-border-color` |
| `--mod-infield-border-color-quiet` |
| `--mod-infield-button-background-color` |
| `--mod-infield-button-background-color-disabled` |
diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json
index 5cb36e1429b..6b326970188 100644
--- a/components/infieldbutton/package.json
+++ b/components/infieldbutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/infieldbutton",
- "version": "5.1.3",
+ "version": "6.0.0-s2-foundations.14",
"description": "The Spectrum CSS infield button component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js
index 4a329934732..54fa61e9afa 100644
--- a/components/infieldbutton/stories/template.js
+++ b/components/infieldbutton/stories/template.js
@@ -4,25 +4,25 @@ import { classMap } from "lit/directives/class-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
-export const Template = (
- {
- rootClass = "spectrum-InfieldButton",
- customClasses = [],
- size = "m",
- position,
- isQuiet,
- iconName = "Add",
- isDisabled,
- isInvalid,
- isHovered,
- isActive,
- isFocused,
- isStacked,
- tabIndex = 0,
- } = {},
- context = {},
-) => {
+export const Template = ({
+ rootClass = "spectrum-InfieldButton",
+ customClasses = [],
+ size = "m",
+ position,
+ isQuiet,
+ iconName = "Add",
+ isDisabled,
+ isInvalid,
+ isHovered,
+ isActive,
+ isFocused,
+ isStacked,
+ tabIndex = 0,
+} = {}, context = {}) => {
return isStacked
? html`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-InfieldButton {
+ --spectrum-infield-button-border-width: var(--spectrum-border-width-100);
+ --spectrum-infield-button-border-color: inherit;
+
+ --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-infield-button-border-radius-reset: 0;
+
+ /* Have to call these out specifically due to Express differences */
+ --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset);
+ --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset);
+
+ --spectrum-infield-button-background-color: var(--spectrum-gray-50);
+ --spectrum-infield-button-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-infield-button-background-color-down: var(--spectrum-gray-200);
+ --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-100);
+
+ /* Medium size is the default */
+ --spectrum-infield-button-height: var(--spectrum-component-height-100);
+ --spectrum-infield-button-width: var(--spectrum-component-height-100);
+ --spectrum-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding);
+
+ --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill);
+ --spectrum-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill);
+ --spectrum-infield-button-fill-padding: 0px;
+ --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium);
+ --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
+ --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium);
+
+ --spectrum-infield-button-animation-duration: var(--spectrum-animation-duration-100);
+
+ --spectrum-infield-button-icon-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-infield-button-fill-justify-content: center;
+
+ &:disabled {
+ --spectrum-infield-button-background-color: var(--spectrum-disabled-background-color);
+ --spectrum-infield-button-background-color-hover: var(--spectrum-disabled-background-color);
+ --spectrum-infield-button-background-color-down: var(--spectrum-disabled-background-color);
+ --spectrum-infield-button-border-color: var(--spectrum-disabled-background-color);
+
+ --spectrum-infield-button-icon-color: var(--spectrum-disabled-content-color);
+ --spectrum-infield-button-icon-color-hover: var(--spectrum-disabled-content-color);
+ --spectrum-infield-button-icon-color-down: var(--spectrum-disabled-content-color);
+ --spectrum-infield-button-icon-color-key-focus: var(--spectrum-disabled-content-color);
+ }
+
+ &.spectrum-InfieldButton--sizeS {
+ --spectrum-infield-button-height: var(--spectrum-component-height-75);
+ --spectrum-infield-button-width: var(--spectrum-component-height-75);
+ --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small);
+ --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
+ --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small);
+ }
+
+ &.spectrum-InfieldButton--sizeL {
+ --spectrum-infield-button-height: var(--spectrum-component-height-200);
+ --spectrum-infield-button-width: var(--spectrum-component-height-200);
+ --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large);
+ --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
+ --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large);
+ }
+
+ &.spectrum-InfieldButton--sizeXL {
+ --spectrum-infield-button-height: var(--spectrum-component-height-300);
+ --spectrum-infield-button-width: var(--spectrum-component-height-300);
+ --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large);
+ --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
+ --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large);
+ }
+
+ &.spectrum-InfieldButton--top,
+ &.spectrum-InfieldButton--bottom {
+ --spectrum-infield-button-width: var(--spectrum-in-field-button-width-stacked-medium);
+
+ &.spectrum-InfieldButton--sizeS {
+ --spectrum-infield-button-width: var(--spectrum-in-field-button-width-stacked-small);
+ }
+
+ &.spectrum-InfieldButton--sizeL {
+ --spectrum-infield-button-width: var(--spectrum-in-field-button-width-stacked-large);
+ }
+
+ &.spectrum-InfieldButton--sizeXL {
+ --spectrum-infield-button-width: var(--spectrum-in-field-button-width-stacked-extra-large);
+ }
+ }
+
+ &.spectrum-InfieldButton--quiet {
+ --spectrum-infield-button-background-color: transparent;
+ --spectrum-infield-button-background-color-hover: transparent;
+ --spectrum-infield-button-background-color-down: transparent;
+ --spectrum-infield-button-background-color-key-focus: transparent;
+
+ --spectrum-infield-border-color: transparent;
+ --spectrum-infield-button-border-width: 0;
+
+ &:disabled {
+ --spectrum-infield-button-background-color: transparent;
+ --spectrum-infield-button-border-color: transparent;
+ }
+ }
+ }
+}
diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css
index 9bb80540e20..509a19abeda 100644
--- a/components/infieldbutton/themes/spectrum.css
+++ b/components/infieldbutton/themes/spectrum.css
@@ -11,18 +11,13 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-InfieldButton {
- --spectrum-infield-button-border-width: var(--spectrum-border-width-100);
- --spectrum-infield-button-border-color: inherit;
- --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-infield-button-border-radius-reset: 0;
+/* @combine .spectrum.spectrum--legacy */
- /* Have to call these out specifically due to Express differences */
- --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset);
- --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset);
+@import "./spectrum-two.css";
+@container style(--system: legacy) {
+ .spectrum-InfieldButton {
--spectrum-infield-button-background-color: var(--spectrum-gray-75);
--spectrum-infield-button-background-color-hover: var(--spectrum-gray-200);
--spectrum-infield-button-background-color-down: var(--spectrum-gray-300);
diff --git a/components/inlinealert/CHANGELOG.md b/components/inlinealert/CHANGELOG.md
index bf1f924c219..bd716cc6288 100644
--- a/components/inlinealert/CHANGELOG.md
+++ b/components/inlinealert/CHANGELOG.md
@@ -1,5 +1,189 @@
# Change Log
+## 9.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 9.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 9.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 9.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 9.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 9.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 9.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 9.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/button@14.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 9.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 9.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 9.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 9.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 9.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 9.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/button@14.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 8.1.3
### Patch Changes
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index 527bdff26db..08299a00eba 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -11,42 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-InLineAlert {
- /* Font */
- --spectrum-inlinealert-heading-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-inlinealert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
- --spectrum-inlinealert-heading-font-style: var(--spectrum-heading-sans-serif-font-style);
- --spectrum-inlinealert-heading-font-size: var(--spectrum-heading-size-xxs);
- --spectrum-inlinealert-heading-line-height: var(--spectrum-heading-line-height);
-
- --spectrum-inlinealert-content-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-inlinealert-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-inlinealert-content-font-style: var(--spectrum-body-sans-serif-font-style);
- --spectrum-inlinealert-content-font-size: var(--spectrum-body-size-s);
- --spectrum-inlinealert-content-line-height: var(--spectrum-body-line-height);
-
- /* Size */
- --spectrum-inlinealert-border-width: var(--spectrum-border-width-200);
- --spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-inlinealert-icon-size: var(--spectrum-workflow-icon-size-100);
- --spectrum-inlinealert-min-inline-size: var(--spectrum-in-line-alert-minimum-width);
- --spectrum-inlinealert-header-min-block-size: var(--spectrum-component-height-50);
-
- /* Spacing */
- --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400);
- --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400);
- --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-spacing-300);
-
- /* Color */
- --spectrum-inlinealert-background-color: var(--spectrum-background-layer-2-color);
- --spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color);
- --spectrum-inlinealert-header-color: var(--spectrum-heading-color);
- --spectrum-inlinealert-content-color: var(--spectrum-body-color);
- --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-informative-visual-color);
- --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color);
- --spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color);
- --spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color);
-}
+@import "./themes/spectrum-two.css";
.spectrum-InLineAlert {
position: relative;
@@ -118,6 +83,7 @@
line-height: var(--mod-inlinealert-content-line-height, var(--spectrum-inlinealert-content-line-height));
color: var(--highcontrast-inlinealert-content-color, var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color)));
+
}
.spectrum-InLineAlert-footer {
diff --git a/components/inlinealert/metadata/inlinealert.yml b/components/inlinealert/metadata/inlinealert.yml
deleted file mode 100644
index 12435584c79..00000000000
--- a/components/inlinealert/metadata/inlinealert.yml
+++ /dev/null
@@ -1,89 +0,0 @@
-name: In-line alert
-SpectrumSiteSlug: https://spectrum.adobe.com/page/in-line-alert/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
-examples:
- - id: inlinealert-neutral
- name: Neutral
- markup: |
-
- - id: inlinealert-info
- name: Informative
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Info_18_S.svg` icon in the Express workflow icon set.*
- markup: |
-
- - id: inlinealert-positive
- name: Positive
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_CheckmarkCircle_18_S.svg` icon in the Express workflow icon set.*
- markup: |
-
- - id: inlinealert-notice
- name: Notice
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_S.svg` icon in the Express workflow icon set.*
- markup: |
-
- - id: inlinealert-negative
- name: Negative
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_S.svg` icon in the Express workflow icon set.*
- markup: |
-
- - id: inlinealert-closable
- name: Closable
- dnaStatus: Contribution
- description: |
- An in-line alert with a close button in the footer. Combine this strategy with any variant.
-
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_S.svg` icon in the Express workflow icon set.*
- markup: |
-
-
-
This is an alert.
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/inlinealert/themes/spectrum-two.css b/components/inlinealert/themes/spectrum-two.css
new file mode 100644
index 00000000000..cb25df52527
--- /dev/null
+++ b/components/inlinealert/themes/spectrum-two.css
@@ -0,0 +1,51 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-InLineAlert {
+ /* Font */
+ --spectrum-inlinealert-heading-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-inlinealert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
+ --spectrum-inlinealert-heading-font-style: var(--spectrum-heading-sans-serif-font-style);
+ --spectrum-inlinealert-heading-font-size: var(--spectrum-heading-size-xxs);
+ --spectrum-inlinealert-heading-line-height: var(--spectrum-heading-line-height);
+
+ --spectrum-inlinealert-content-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-inlinealert-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
+ --spectrum-inlinealert-content-font-style: var(--spectrum-body-sans-serif-font-style);
+ --spectrum-inlinealert-content-font-size: var(--spectrum-body-size-s);
+ --spectrum-inlinealert-content-line-height: var(--spectrum-body-line-height);
+
+ /* Size */
+ --spectrum-inlinealert-border-width: var(--spectrum-border-width-200);
+ --spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-inlinealert-icon-size: var(--spectrum-workflow-icon-size-100);
+ --spectrum-inlinealert-min-inline-size: var(--spectrum-in-line-alert-minimum-width);
+ --spectrum-inlinealert-header-min-block-size: var(--spectrum-component-height-50);
+
+ /* Spacing */
+ --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400);
+ --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400);
+ --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-spacing-300);
+
+ /* Color */
+ --spectrum-inlinealert-background-color: var(--spectrum-background-layer-2-color);
+ --spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color);
+ --spectrum-inlinealert-header-color: var(--spectrum-heading-color);
+ --spectrum-inlinealert-content-color: var(--spectrum-body-color);
+ --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-informative-visual-color);
+ --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color);
+ --spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color);
+ --spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color);
+ }
+}
diff --git a/components/inlinealert/themes/spectrum.css b/components/inlinealert/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/inlinealert/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/link/CHANGELOG.md b/components/link/CHANGELOG.md
index 4c693e168f1..a138f0d4851 100644
--- a/components/link/CHANGELOG.md
+++ b/components/link/CHANGELOG.md
@@ -1,5 +1,161 @@
# Change Log
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/link/index.css b/components/link/index.css
index 08ada8cfbf1..508d040afe1 100644
--- a/components/link/index.css
+++ b/components/link/index.css
@@ -11,25 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-Link {
- --spectrum-link-animation-duration: var(--spectrum-animation-duration-100);
-
- /* Colors */
- /* Primary */
- --spectrum-link-text-color-primary-default: var(--spectrum-accent-content-color-default);
- --spectrum-link-text-color-primary-hover: var(--spectrum-accent-content-color-hover);
- --spectrum-link-text-color-primary-active: var(--spectrum-accent-content-color-down);
- --spectrum-link-text-color-primary-focus: var(--spectrum-accent-content-color-key-focus);
-
- /* Secondary */
- --spectrum-link-text-color-secondary-default: var(--spectrum-neutral-content-color-default);
- --spectrum-link-text-color-secondary-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-link-text-color-secondary-active: var(--spectrum-neutral-content-color-down);
- --spectrum-link-text-color-secondary-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-link-text-color-white: var(--spectrum-white);
- --spectrum-link-text-color-black: var(--spectrum-black);
-}
+@import "./themes/spectrum-two.css";
/* Windows high contrast mode */
@media (forced-colors: active) {
diff --git a/components/link/metadata/link.yml b/components/link/metadata/link.yml
deleted file mode 100644
index 58bc1ccb4c3..00000000000
--- a/components/link/metadata/link.yml
+++ /dev/null
@@ -1,75 +0,0 @@
-id: link-primary-m
-name: Link
-SpectrumSiteSlug: https://spectrum.adobe.com/page/link/
-status: Verified
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Subtle variant
- Subtle variant was removed. Please use Quiet.
-examples:
- - id: link-primary
- name: Primary
- status: Verified
- markup: |
- Link using spectrum-Link
- - id: link-secondary
- name: Secondary
- status: Verified
- markup: |
- Link using spectrum-Link--secondary
-
- - id: link-static-white
- name: Static White
- status: Verified
- markup: |
-
-
- Hello, this is my spectrum-Link--staticWhite . This is just filler text, but if you keep reading maybe something good will happen.
-
-
-
- Hello, this is my spectrum-Link--staticBlack . This is just filler text, but if you keep reading maybe something good will happen.
-
-
This uses spectrum-Link--quiet .
-
- - id: link-quiet-secondary-m
- name: Quiet (Secondary)
- status: Verified
- markup: |
- This uses spectrum-Link--quiet and spectrum-Link--secondary .
-
- - id: link-quiet-static-white
- name: Quiet (Static White)
- status: Verified
- markup: |
-
-
- - id: link-quiet-static-black
- name: Quiet (Static Black)
- status: Verified
- markup: |
-
diff --git a/components/link/package.json b/components/link/package.json
index 7320f95ae8e..61dce9c714f 100644
--- a/components/link/package.json
+++ b/components/link/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/link",
- "version": "5.1.3",
+ "version": "6.0.0-s2-foundations.13",
"description": "The Spectrum CSS link component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js
index 5fc8782e289..da92c01ca44 100644
--- a/components/link/stories/link.stories.js
+++ b/components/link/stories/link.stories.js
@@ -144,9 +144,7 @@ StaticWhite.args = {
};
StaticWhite.tags = ["!dev"];
StaticWhite.parameters = {
- chromatic: {
- modes: disableDefaultModes,
- },
+ chromatic: { disableSnapshot: true },
};
/**
@@ -160,9 +158,7 @@ StaticBlack.args = {
};
StaticBlack.tags = ["!dev"];
StaticBlack.parameters = {
- chromatic: {
- modes: disableDefaultModes,
- },
+ chromatic: { disableSnapshot: true },
};
export const QuietStaticWhite = Default.bind({});
@@ -174,9 +170,7 @@ QuietStaticWhite.args = {
};
QuietStaticWhite.tags = ["!dev"];
QuietStaticWhite.parameters = {
- chromatic: {
- modes: disableDefaultModes,
- },
+ chromatic: { disableSnapshot: true },
};
export const QuietStaticBlack = Default.bind({});
@@ -188,9 +182,7 @@ QuietStaticBlack.args = {
};
QuietStaticBlack.tags = ["!dev"];
QuietStaticBlack.parameters = {
- chromatic: {
- modes: disableDefaultModes,
- },
+ chromatic: { disableSnapshot: true },
};
// ********* VRT ONLY ********* //
diff --git a/components/link/stories/link.test.js b/components/link/stories/link.test.js
index 59b47b589c4..c28a4a1f9a0 100644
--- a/components/link/stories/link.test.js
+++ b/components/link/stories/link.test.js
@@ -20,6 +20,14 @@ export const LinkGroup = Variants({
isQuiet: true,
variant: "secondary",
},
+ {
+ testHeading: "Static black",
+ staticColor: "black",
+ },
+ {
+ testHeading: "Static white",
+ staticColor: "white",
+ },
],
stateData: [
{
diff --git a/components/link/stories/template.js b/components/link/stories/template.js
index 2c4cd925c15..e999236a81f 100644
--- a/components/link/stories/template.js
+++ b/components/link/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { capitalize } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Link",
@@ -19,31 +22,33 @@ export const Template = ({
isVisited = false,
id = getRandomId("link"),
customClasses = [],
-} = {}) => html`
- ({ ...a, [c]: true }), {}),
- })}
- id=${ifDefined(id)}
- href=${ifDefined(url)}
- >
- ${text}
-
-`;
+} = {}) => {
+ return html`
+ ({ ...a, [c]: true }), {}),
+ })}
+ id=${ifDefined(id)}
+ href=${ifDefined(url)}
+ >
+ ${text}
+
+ `;
+};
export const TemplateWithFillerText = (args, context) => html`
Hello, this is a
- ${Template({...args, context})}
+ ${Template(args, context)}
. This is just filler text, but if you keep reading maybe something good will happen.
`;
diff --git a/components/link/themes/express.css b/components/link/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/link/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/link/themes/spectrum-two.css b/components/link/themes/spectrum-two.css
new file mode 100644
index 00000000000..e5e6a28245f
--- /dev/null
+++ b/components/link/themes/spectrum-two.css
@@ -0,0 +1,34 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Link {
+ --spectrum-link-animation-duration: var(--spectrum-animation-duration-100);
+
+ /* Colors */
+ /* Primary */
+ --spectrum-link-text-color-primary-default: var(--spectrum-accent-content-color-default);
+ --spectrum-link-text-color-primary-hover: var(--spectrum-accent-content-color-hover);
+ --spectrum-link-text-color-primary-active: var(--spectrum-accent-content-color-down);
+ --spectrum-link-text-color-primary-focus: var(--spectrum-accent-content-color-key-focus);
+
+ /* Secondary */
+ --spectrum-link-text-color-secondary-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-link-text-color-secondary-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-link-text-color-secondary-active: var(--spectrum-neutral-content-color-down);
+ --spectrum-link-text-color-secondary-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-link-text-color-white: var(--spectrum-white);
+ --spectrum-link-text-color-black: var(--spectrum-black);
+ }
+}
diff --git a/components/link/themes/spectrum.css b/components/link/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/link/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/logicbutton/CHANGELOG.md b/components/logicbutton/CHANGELOG.md
index a119747c390..0f30597f683 100644
--- a/components/logicbutton/CHANGELOG.md
+++ b/components/logicbutton/CHANGELOG.md
@@ -1,5 +1,167 @@
# Change Log
+## 5.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 5.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#3040](https://github.com/adobe/spectrum-css/pull/3040) [`cf2e737`](https://github.com/adobe/spectrum-css/commit/cf2e73743b2c3d43d4c51fceeabfb99fda1ac4b5) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - Migrating --mod to index.css from infield button, logic button and table components
+
+## 5.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 5.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 5.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 5.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 5.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 5.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 5.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 5.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 5.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 5.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 5.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 5.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 5.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 4.1.3
### Patch Changes
diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css
index bbcdde6513c..c78184aa5c9 100644
--- a/components/logicbutton/index.css
+++ b/components/logicbutton/index.css
@@ -12,41 +12,7 @@
*/
@import "@spectrum-css/commons/basebutton.css";
-
-.spectrum-LogicButton {
- --spectrum-logic-button-height: 24px;
- --spectrum-logic-button-padding: var(--spectrum-component-edge-to-text-50);
- --spectrum-logic-button-font-size: var(--spectrum-font-size-100);
- --spectrum-logic-button-font-weight: var(--spectrum-bold-font-weight);
-
- --spectrum-logic-button-border-width: var(--spectrum-border-width-200);
- --spectrum-logic-button-border-radius: var(--spectrum-corner-radius-100);
-
- --spectrum-logic-button-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
- --spectrum-logic-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-logic-button-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- --spectrum-logic-button-and-text-color: var(--spectrum-white);
- --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100);
- --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
-
- --spectrum-logic-button-or-text-color: var(--spectrum-white);
-
- &:disabled,
- &.is-disabled {
- --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-gray-200));
- --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-gray-200));
- --mod-logic-button-and-text-color: var(--mod-logic-button-and-text-color-disabled, var(--spectrum-gray-500));
- --mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-gray-200));
- --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-gray-200));
-
- --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-gray-200));
- --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-gray-200));
- --mod-logic-button-or-text-color: var(--mod-logic-button-or-text-color-disabled, var(--spectrum-gray-500));
- --mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-gray-200));
- --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-gray-200));
- }
-}
+@import "./themes/spectrum-two.css";
.spectrum-LogicButton {
@extend %spectrum-BaseButton;
@@ -76,10 +42,25 @@
box-shadow: 0 0 0 var(--mod-logic-button-focus-indicator-width, var(--spectrum-logic-button-focus-indicator-width)) var(--highcontrast-logic-button-focus-indicator-color, var(--mod-logic-button-focus-indicator-color, var(--spectrum-logic-button-focus-indicator-color)));
}
}
+
+ &:disabled,
+ &.is-disabled {
+ --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-logic-button-and-background-color-default-disabled));
+ --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-logic-button-and-border-color-disabled));
+ --mod-logic-button-and-text-color: var(--mod-logic-button-and-text-color-disabled, var(--spectrum-logic-button-and-text-color-disabled));
+ --mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-logic-button-and-background-color-hover-disabled));
+ --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-logic-button-and-border-color-hover-disabled));
+
+ --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-logic-button-or-background-color-disabled));
+ --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-logic-button-or-border-color-disabled));
+ --mod-logic-button-or-text-color: var(--mod-logic-button-or-text-color-disabled, var(--spectrum-logic-button-or-text-color-disabled));
+ --mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-logic-button-or-background-color-hover-disabled));
+ --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-logic-button-or-border-color-hover-disabled));
+ }
}
.spectrum-LogicButton--and {
- background-color: var(--highcontrast-logic-button-and-background-color, var(--mod-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color)));
+ background-color: var(--highcontrast-logic-button-and-background-color, var(--mod-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color-default)));
border-color: var(--highcontrast-logic-button-and-border-color, var(--mod-logic-button-and-border-color, var(--spectrum-logic-button-and-border-color)));
color: var(--highcontrast-logic-button-and-text-color, var(--mod-logic-button-and-text-color, var(--spectrum-logic-button-and-text-color)));
@@ -103,10 +84,22 @@
@media (forced-colors: active) {
.spectrum-LogicButton::after {
--highcontrast-logic-button-focus-indicator-color: Highlight;
+
forced-color-adjust: none;
}
.spectrum-LogicButton {
+ --highcontrast-logic-button-and-background-color: ButtonFace;
+ --highcontrast-logic-button-and-background-color-hover: ButtonFace;
+ --highcontrast-logic-button-and-border-color: ButtonText;
+ --highcontrast-logic-button-and-border-color-hover: Highlight;
+ --highcontrast-logic-button-and-text-color: ButtonText;
+ --highcontrast-logic-button-or-background-color: ButtonFace;
+ --highcontrast-logic-button-or-background-color-hover: ButtonFace;
+ --highcontrast-logic-button-or-border-color: ButtonText;
+ --highcontrast-logic-button-or-border-color-hover: Highlight;
+ --highcontrast-logic-button-or-text-color: ButtonText;
+
forced-color-adjust: none;
&:disabled,
@@ -118,16 +111,5 @@
--highcontrast-logic-button-or-border-color: GrayText;
--highcontrast-logic-button-or-text-color: GrayText;
}
-
- --highcontrast-logic-button-and-background-color: ButtonFace;
- --highcontrast-logic-button-and-background-color-hover: ButtonFace;
- --highcontrast-logic-button-and-border-color: ButtonText;
- --highcontrast-logic-button-and-border-color-hover: Highlight;
- --highcontrast-logic-button-and-text-color: ButtonText;
- --highcontrast-logic-button-or-background-color: ButtonFace;
- --highcontrast-logic-button-or-background-color-hover: ButtonFace;
- --highcontrast-logic-button-or-border-color: ButtonText;
- --highcontrast-logic-button-or-border-color-hover: Highlight;
- --highcontrast-logic-button-or-text-color: ButtonText;
}
}
diff --git a/components/logicbutton/metadata/logicbutton.yml b/components/logicbutton/metadata/logicbutton.yml
deleted file mode 100644
index f8dba482fc8..00000000000
--- a/components/logicbutton/metadata/logicbutton.yml
+++ /dev/null
@@ -1,19 +0,0 @@
-id: logicbutton-and
-name: Logic button
-description: A LogicButton displays an operator within a boolean logic sequence.
-sections:
- - name: Migration Guide
- description: |
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: logicbutton-and
- name: And
- markup: |
- And
- And
- - id: logicbutton-or
- name: Or
- markup: |
- Or
- Or
diff --git a/components/logicbutton/metadata/metadata.json b/components/logicbutton/metadata/metadata.json
index 36af6ae9a7a..a8beede92ff 100644
--- a/components/logicbutton/metadata/metadata.json
+++ b/components/logicbutton/metadata/metadata.json
@@ -51,10 +51,16 @@
],
"component": [
"--spectrum-logic-button-and-background-color",
+ "--spectrum-logic-button-and-background-color-default",
+ "--spectrum-logic-button-and-background-color-default-disabled",
"--spectrum-logic-button-and-background-color-hover",
+ "--spectrum-logic-button-and-background-color-hover-disabled",
"--spectrum-logic-button-and-border-color",
+ "--spectrum-logic-button-and-border-color-disabled",
"--spectrum-logic-button-and-border-color-hover",
+ "--spectrum-logic-button-and-border-color-hover-disabled",
"--spectrum-logic-button-and-text-color",
+ "--spectrum-logic-button-and-text-color-disabled",
"--spectrum-logic-button-border-radius",
"--spectrum-logic-button-border-width",
"--spectrum-logic-button-focus-indicator-color",
@@ -64,10 +70,15 @@
"--spectrum-logic-button-font-weight",
"--spectrum-logic-button-height",
"--spectrum-logic-button-or-background-color",
+ "--spectrum-logic-button-or-background-color-disabled",
"--spectrum-logic-button-or-background-color-hover",
+ "--spectrum-logic-button-or-background-color-hover-disabled",
"--spectrum-logic-button-or-border-color",
+ "--spectrum-logic-button-or-border-color-disabled",
"--spectrum-logic-button-or-border-color-hover",
+ "--spectrum-logic-button-or-border-color-hover-disabled",
"--spectrum-logic-button-or-text-color",
+ "--spectrum-logic-button-or-text-color-disabled",
"--spectrum-logic-button-padding"
],
"global": [
@@ -81,7 +92,7 @@
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
"--spectrum-font-size-100",
- "--spectrum-gray-200",
+ "--spectrum-gray-100",
"--spectrum-gray-500",
"--spectrum-line-height-100",
"--spectrum-sans-font-family-stack",
diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json
index 3ff22f27461..46c50e80902 100644
--- a/components/logicbutton/package.json
+++ b/components/logicbutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/logicbutton",
- "version": "4.1.3",
+ "version": "5.0.0-s2-foundations.14",
"description": "The Spectrum CSS logicbutton component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/logicbutton/stories/template.js b/components/logicbutton/stories/template.js
index 889eda68e38..5b0730616ef 100644
--- a/components/logicbutton/stories/template.js
+++ b/components/logicbutton/stories/template.js
@@ -2,28 +2,33 @@ import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-LogicButton",
customClasses = [],
variant = "and",
isDisabled = false,
-} = {}) => html`
- ({ ...a, [c]: true }), {}),
- })}
- aria-disabled=${isDisabled ? "true" : "false"}
- ?disabled=${isDisabled}
- type="button"
- >
- ${variant
- ? variant.charAt(0).toUpperCase() + variant.slice(1)
- : undefined}
-
-`;
+} = {}) => {
+ return html`
+ ({ ...a, [c]: true }), {}),
+ })}
+ aria-disabled=${isDisabled ? "true" : "false"}
+ ?disabled=${isDisabled}
+ type="button"
+ >
+ ${variant
+ ? variant.charAt(0).toUpperCase() + variant.slice(1)
+ : undefined}
+
+ `;
+};
export const VariantGroup = (args, context) => html`
${Template({...args}, context)}
diff --git a/components/logicbutton/themes/express.css b/components/logicbutton/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/logicbutton/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/logicbutton/themes/spectrum-two.css b/components/logicbutton/themes/spectrum-two.css
new file mode 100644
index 00000000000..89d8597a5a5
--- /dev/null
+++ b/components/logicbutton/themes/spectrum-two.css
@@ -0,0 +1,47 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-LogicButton {
+ --spectrum-logic-button-height: 24px;
+ --spectrum-logic-button-padding: var(--spectrum-component-edge-to-text-50);
+ --spectrum-logic-button-font-size: var(--spectrum-font-size-100);
+ --spectrum-logic-button-font-weight: var(--spectrum-bold-font-weight);
+
+ --spectrum-logic-button-border-width: var(--spectrum-border-width-200);
+ --spectrum-logic-button-border-radius: var(--spectrum-corner-radius-100);
+
+ --spectrum-logic-button-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
+ --spectrum-logic-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-logic-button-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ --spectrum-logic-button-and-text-color: var(--spectrum-white);
+ --spectrum-logic-button-and-background-color-default: var(--spectrum-logic-button-and-background-color);
+ --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100);
+ --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
+
+ --spectrum-logic-button-or-text-color: var(--spectrum-white);
+
+ --spectrum-logic-button-and-background-color-default-disabled: var(--spectrum-gray-100);
+ --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100);
+ --spectrum-logic-button-and-text-color-disabled: var(--spectrum-gray-500);
+ --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-100);
+ --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-100);
+
+ --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-100);
+ --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-100);
+ --spectrum-logic-button-or-text-color-disabled: var(--spectrum-gray-500);
+ --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-100);
+ --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-100);
+ }
+}
diff --git a/components/logicbutton/themes/spectrum.css b/components/logicbutton/themes/spectrum.css
new file mode 100644
index 00000000000..3265830b412
--- /dev/null
+++ b/components/logicbutton/themes/spectrum.css
@@ -0,0 +1,31 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-LogicButton {
+ --spectrum-logic-button-and-background-color-default-disabled: var(--spectrum-gray-200);
+ --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-200);
+ --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-200);
+ --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-200);
+
+ --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-200);
+ --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-200);
+ --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-200);
+ --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-200);
+ }
+}
diff --git a/components/menu/CHANGELOG.md b/components/menu/CHANGELOG.md
index ae72deefcb2..c6ecb352039 100644
--- a/components/menu/CHANGELOG.md
+++ b/components/menu/CHANGELOG.md
@@ -1,5 +1,231 @@
# Change Log
+## 8.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.16
+ - @spectrum-css/divider@4.0.0-s2-foundations.13
+ - @spectrum-css/switch@6.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tray@4.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.12
+ - @spectrum-css/divider@4.0.0-s2-foundations.12
+ - @spectrum-css/switch@6.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tray@4.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.11
+ - @spectrum-css/divider@4.0.0-s2-foundations.11
+ - @spectrum-css/switch@6.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tray@4.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.10
+ - @spectrum-css/divider@4.0.0-s2-foundations.10
+ - @spectrum-css/switch@6.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tray@4.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.9
+ - @spectrum-css/divider@4.0.0-s2-foundations.9
+ - @spectrum-css/switch@6.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tray@4.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.8
+ - @spectrum-css/divider@4.0.0-s2-foundations.8
+ - @spectrum-css/switch@6.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tray@4.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.7
+ - @spectrum-css/divider@4.0.0-s2-foundations.7
+ - @spectrum-css/switch@6.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tray@4.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.6
+ - @spectrum-css/divider@4.0.0-s2-foundations.6
+ - @spectrum-css/switch@6.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+ - @spectrum-css/tray@4.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.5
+ - @spectrum-css/divider@4.0.0-s2-foundations.5
+ - @spectrum-css/switch@6.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tray@4.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.4
+ - @spectrum-css/divider@4.0.0-s2-foundations.4
+ - @spectrum-css/switch@6.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tray@4.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.3
+ - @spectrum-css/divider@4.0.0-s2-foundations.3
+ - @spectrum-css/switch@6.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tray@4.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.2
+ - @spectrum-css/divider@4.0.0-s2-foundations.2
+ - @spectrum-css/switch@6.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tray@4.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.1
+ - @spectrum-css/divider@4.0.0-s2-foundations.1
+ - @spectrum-css/switch@6.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tray@4.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.0
+ - @spectrum-css/divider@4.0.0-s2-foundations.0
+ - @spectrum-css/switch@6.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+ - @spectrum-css/tray@4.0.0-s2-foundations.0
+
## 7.1.7
### Patch Changes
diff --git a/components/menu/index.css b/components/menu/index.css
index ef81aa6c6fa..00c5dc540a2 100644
--- a/components/menu/index.css
+++ b/components/menu/index.css
@@ -11,176 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-Menu {
- --spectrum-menu-item-min-height: var(--spectrum-component-height-100);
- --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100);
- --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100);
- --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100);
- --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100);
-
- --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100);
- --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100);
-
- --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100);
-
- --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75);
-
- --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100);
- --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100);
-
- --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium);
-
- --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium);
- --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium);
- --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium);
-
- --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50);
- --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50);
-
- --spectrum-menu-item-label-line-height: var(--spectrum-line-height-100);
- --spectrum-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100);
- --spectrum-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description);
- --spectrum-menu-item-focus-indicator-width: var(--spectrum-border-width-200);
- --spectrum-menu-item-focus-indicator-color: var(--spectrum-blue-800);
- --spectrum-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100);
-
- --spectrum-menu-item-label-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-menu-item-label-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-menu-item-label-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-menu-item-label-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-menu-item-label-icon-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-menu-item-label-icon-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-menu-item-label-icon-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-menu-item-label-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-menu-item-label-content-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-menu-item-label-icon-color-disabled: var(--spectrum-disabled-content-color);
-
- --spectrum-menu-item-description-line-height: var(--spectrum-line-height-100);
- --spectrum-menu-item-description-line-height-cjk: var(--spectrum-cjk-line-height-100);
-
- --spectrum-menu-item-description-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-menu-item-description-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
- --spectrum-menu-item-description-color-down: var(--spectrum-neutral-subdued-content-color-down);
- --spectrum-menu-item-description-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
- --spectrum-menu-item-description-color-disabled: var(--spectrum-disabled-content-color);
-
- --spectrum-menu-section-header-line-height: var(--spectrum-line-height-100);
- --spectrum-menu-section-header-line-height-cjk: var(--spectrum-cjk-line-height-100);
- --spectrum-menu-section-header-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-menu-section-header-color: var(--spectrum-gray-900);
- --spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900);
-
- --spectrum-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900);
- --spectrum-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000);
- --spectrum-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100);
- --spectrum-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000);
-
- --spectrum-menu-drillin-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-menu-drillin-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
- --spectrum-menu-drillin-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
- --spectrum-menu-drillin-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-
- --spectrum-menu-item-value-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-menu-item-value-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
- --spectrum-menu-item-value-color-down: var(--spectrum-neutral-subdued-content-color-down);
- --spectrum-menu-item-value-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-
- --spectrum-menu-checkmark-display-hidden: none;
- --spectrum-menu-checkmark-display-shown: block;
- --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);
-
- --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium);
-
- /* "one" icon: chevron + additional icon (we don't count the chevron as an icon because it HAS to be there for a collapsible) */
- --spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-text-to-control) + var(--spectrum-menu-item-icon-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width)));
-
- /* "no" icon: just the chevron (we're not counting it because it HAS to be there for a collapsible) */
- --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width)));
-}
-
-.spectrum-Menu--sizeS {
- --spectrum-menu-item-min-height: var(--spectrum-component-height-75);
- --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75);
- --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75);
- --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75);
- --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75);
-
- --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75);
- --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75);
-
- --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75);
-
- --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50);
-
- --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75);
- --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75);
-
- --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small);
-
- --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small);
- --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small);
- --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small);
-
- --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small);
-}
-
-.spectrum-Menu--sizeL {
- --spectrum-menu-item-min-height: var(--spectrum-component-height-200);
- --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200);
- --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200);
- --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200);
- --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200);
-
- --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200);
- --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200);
- --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200);
-
- --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200);
-
- --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100);
-
- --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200);
- --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200);
-
- --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large);
-
- --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large);
- --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large);
- --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large);
-
- --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large);
-}
-
-.spectrum-Menu--sizeXL {
- --spectrum-menu-item-min-height: var(--spectrum-component-height-300);
- --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300);
- --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300);
- --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300);
- --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300);
-
- --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300);
- --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300);
- --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300);
-
- --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300);
-
- --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200);
-
- --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300);
- --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300);
-
- --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large);
-
- --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large);
- --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large);
- --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large);
-
- --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large);
-}
+@import "./themes/spectrum-two.css";
@media (forced-colors: active) {
.spectrum-Menu {
@@ -281,11 +112,13 @@
/* Provide inline-start spacing for potential checkmarks. */
.spectrum-Menu-item {
--spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-hidden);
+
padding-inline-start: var(--mod-menu-item-selectable-edge-to-text-not-selected, var(--spectrum-menu-item-selectable-edge-to-text-not-selected));
/* Remove inline-start spacing once an item is selected and a checkmark appears. */
&.is-selected {
--spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);
+
padding-inline-start: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
}
}
@@ -366,6 +199,7 @@
line-height: var(--mod-menu-item-label-line-height, var(--spectrum-menu-item-label-line-height));
min-block-size: var(--mod-menu-item-min-height, var(--spectrum-menu-item-min-height));
+
padding-block-start: var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text));
padding-block-end: var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text));
padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
@@ -376,11 +210,11 @@
.spectrum-Menu-itemCheckbox {
--mod-checkbox-top-to-text: 0;
--mod-checkbox-text-to-control: 0;
+
min-block-size: 0;
.spectrum-Checkbox-box {
margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));
-
margin-block-start: var(--mod-menu-item-top-to-checkbox, var(--spectrum-menu-item-top-to-checkbox));
margin-block-end: 0;
}
@@ -558,6 +392,9 @@
}
.spectrum-Menu-itemLabel {
+ --spectrum-switch-control-label-spacing: 0;
+ --spectrum-switch-spacing-top-to-label: 0;
+
grid-area: labelArea;
font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-content-color-default, var(--spectrum-menu-item-label-content-color-default)));
@@ -763,8 +600,8 @@
}
.spectrum-Menu-itemIcon {
- fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
+ fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
}
&:hover {
@@ -782,8 +619,8 @@
}
.spectrum-Menu-itemIcon {
- fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
+ fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
}
}
}
@@ -826,6 +663,6 @@
.spectrum-Menu .spectrum-Menu-backIcon {
margin-block: var(--mod-menu-back-icon-margin-block, var(--spectrum-menu-back-icon-margin));
margin-inline: var(--mod-menu-back-icon-margin-inline, var(--spectrum-menu-back-icon-margin));
- fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default));
- color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default));
+ fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color)));
+ color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color)));
}
diff --git a/components/menu/metadata/menu.yml b/components/menu/metadata/menu.yml
deleted file mode 100644
index 27f5e85cf32..00000000000
--- a/components/menu/metadata/menu.yml
+++ /dev/null
@@ -1,1411 +0,0 @@
-name: Menu
-SpectrumSiteSlug: https://spectrum.adobe.com/page/menu/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### T-shirt sizing
- Menu now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-Menu--size*` class.
-
- ### Use small divider classes
- When using a section divider, add `.spectrum-Divider` and `spectrum-Divider--sizeS` classes to `spectrum-Menu-divider`. The divider has also changed from medium to small.
-
- ### Change workflow icon size to medium
- Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
-
- ### Menu item with switch mark up ###
- In the case of a menu item that includes an icon and a switch, the label and icon should be seperate elements. As opposed to the icon SVG being with in the label. This matches the pattern of other variants with icons within the menu item.
-
-examples:
- - id: sizing
- name: Sizing
- markup: |
-
- - id: sizing-with-icons
- name: Sizing with Icons
- markup: |
-
- - id: with-disabled-items
- name: With disabled item(s)
- markup: |
-
-
-
Menu with icons
-
-
-
-
-
-
Menu with descriptions
-
-
-
-
-
-
Menu with icons & descriptions
-
-
-
-
-
-
-
Menu without descriptions
-
-
-
-
-
-
Menu with descriptions
-
-
-
-
-
({ ...a, [c]: true }), {}),
- })}
- style=${styleMap(customStyles)}
- id=${ifDefined(id)}
- role=${ifDefined(role)}
- aria-selected=${isSelected ? "true" : "false"}
- aria-disabled=${isDisabled ? "true" : "false"}
- tabindex=${ifDefined(!isDisabled ? "0" : undefined)}
- >
- ${when(isCollapsible || (selectionMode == "single" && isSelected), () =>
- Icon(
- {
- iconName: iconWithScale(
- size,
- isCollapsible ? "ChevronRight" : "Checkmark",
- ),
- setName: "ui",
- size,
- customClasses: [
- `${rootClass}Icon`,
- isCollapsible ? "spectrum-Menu-chevron" : "spectrum-Menu-checkmark",
- ],
- },
- context,
- ),
- )}
- ${when(selectionMode === "multiple" && !hasActions, () =>
- Checkbox(
- {
- size,
- isEmphasized: true,
- isChecked: isSelected,
- isDisabled,
- id: `menu-checkbox-${idx}`,
- customClasses: [`${rootClass}Checkbox`],
- },
- context,
- ),
- )}
- ${when(iconName, () =>
- Icon(
- {
- iconName,
- setName: iconSet,
- size,
- customClasses: [`${rootClass}Icon`, `${rootClass}Icon--workflowIcon`],
- },
- context,
- ),
- )}
- ${when(
- isCollapsible,
- () => html`
-
- ${label}
-
- `,
- () => html`
-
- ${label}
-
- `,
- )}
- ${when(
- description,
- () => html`
-
- ${description}
-
- `,
- )}
- ${when(
- value,
- () => html`
-
- ${value}
-
- `,
- )}
- ${when(
- hasActions && selectionMode == "multiple",
- () => html`
-
- ${Switch(
- {
+export const MenuItem = ({
+ rootClass = "spectrum-Menu-item",
+ label,
+ description,
+ iconName,
+ iconSet = "workflow",
+ hasActions = false,
+ id = getRandomId("menuitem"),
+ idx = 0,
+ isActive = false,
+ isCollapsible = false,
+ isDisabled = false,
+ isDrillIn = false,
+ isFocused = false,
+ isHighlighted = false,
+ isHovered = false,
+ isOpen = false,
+ isSelected = false,
+ items = [],
+ role = "menuitem",
+ shouldTruncate = false,
+ size = "m",
+ selectionMode = "none",
+ value,
+ customClasses = [],
+ customStyles = {},
+} = {}, context = {}) => {
+ return html`
+
({ ...a, [c]: true }), {}),
+ })}
+ style=${styleMap(customStyles)}
+ id=${ifDefined(id)}
+ role=${ifDefined(role)}
+ aria-selected=${isSelected ? "true" : "false"}
+ aria-disabled=${isDisabled ? "true" : "false"}
+ tabindex=${ifDefined(!isDisabled ? "0" : undefined)}
+ >
+ ${when(isCollapsible || (selectionMode == "single" && isSelected), () =>
+ Icon(
+ {
+ iconName: iconWithScale(
size,
- isChecked: isSelected,
- isDisabled,
- label: null,
- id: `menu-switch-${idx}`,
- customClasses: [`${rootClass}Switch`],
- },
- context,
- )}
-
- `,
- )}
- ${when(isDrillIn, () =>
- Icon(
- {
- iconName: iconWithScale(size, "ChevronRight"),
- setName: "ui",
- size,
- customClasses: [`${rootClass}Icon`, "spectrum-Menu-chevron"],
- },
- context,
- ),
- )}
- ${when(isCollapsible && items.length > 0, () =>
- Template(
- {
- items,
- isOpen,
- size,
- shouldTruncate,
- },
- context,
- ),
- )}
-
-`;
-
-export const MenuGroup = (
- {
- heading,
- id = getRandomId("menugroup"),
- idx = 0,
- items = [],
- isDisabled = false,
- isSelectable = false,
- isTraySubmenu = false,
- shouldTruncate = false,
- subrole = "menuitem",
- size = "m",
- customStyles = {},
- } = {},
- context = {},
-) => html`
-
- ${when(
- !isTraySubmenu,
- () => html`
-
- ${heading}
-
- `,
- () => html`
-
-
+ `,
+ )}
+ ${when(isDrillIn, () =>
+ Icon(
+ {
+ iconName: iconWithScale(size, "ChevronRight"),
+ setName: "ui",
+ size,
+ customClasses: [`${rootClass}Icon`, "spectrum-Menu-chevron"],
+ },
+ context,
+ ),
+ )}
+ ${when(isCollapsible && items.length > 0, () =>
+ Template(
+ {
+ items,
+ isOpen,
+ size,
+ shouldTruncate,
+ },
+ context,
+ ),
+ )}
+
+ `;
+};
+
+export const MenuGroup = ({
+ heading,
+ id = getRandomId("menugroup"),
+ idx = 0,
+ items = [],
+ isDisabled = false,
+ isSelectable = false,
+ isTraySubmenu = false,
+ shouldTruncate = false,
+ subrole = "menuitem",
+ size = "m",
+ customStyles = {},
+} = {}, context = {}) => {
+ return html`
+
+ ${when(
+ !isTraySubmenu,
+ () => html`
+
+ ${heading}
+
+ `,
+ () => html`
+
+
+ ${when(
+ heading,
+ () => html`
+
+ ${heading}
+
+ `,
+ )}
+
+ `,
+ )}
+ ${Template(
+ {
+ role: "group",
+ subrole,
+ labelledby: id,
+ items,
+ isDisabled,
+ isSelectable,
+ shouldTruncate: true,
+ size,
+ },
+ context,
+ )}
+
+ `;
+};
-export const Template = (
- {
- rootClass = "spectrum-Menu",
- customClasses = [],
- customStyles = {},
- id = getRandomId("menu"),
- hasActions = false,
- hasDividers = false,
- isDisabled = false,
- isOpen = false,
- isTraySubmenu = false,
- items = [],
- labelledby = getRandomId("menu-label"),
- role = "menu",
- selectionMode = "none",
- singleItemValue,
- shouldTruncate,
- size = "m",
- subrole = "menuitem",
- } = {},
- context = {},
-) => {
+export const Template = ({
+ rootClass = "spectrum-Menu",
+ customClasses = [],
+ customStyles = {},
+ id = getRandomId("menu"),
+ hasActions = false,
+ hasDividers = false,
+ isDisabled = false,
+ isOpen = false,
+ isTraySubmenu = false,
+ items = [],
+ labelledby = getRandomId("menu-label"),
+ role = "menu",
+ selectionMode = "none",
+ singleItemValue,
+ shouldTruncate,
+ size = "m",
+ subrole = "menuitem",
+} = {}, context = {}) => {
const menuMarkup = html`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/menu/themes/spectrum-two.css b/components/menu/themes/spectrum-two.css
new file mode 100644
index 00000000000..3fb0e679559
--- /dev/null
+++ b/components/menu/themes/spectrum-two.css
@@ -0,0 +1,193 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Menu {
+ --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50);
+ --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50);
+
+ --spectrum-menu-item-label-line-height: var(--spectrum-line-height-100);
+ --spectrum-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100);
+ --spectrum-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description);
+ --spectrum-menu-item-focus-indicator-width: var(--spectrum-border-width-200);
+ --spectrum-menu-item-focus-indicator-color: var(--spectrum-blue-800);
+ --spectrum-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100);
+
+ --spectrum-menu-item-label-content-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-menu-item-label-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-menu-item-label-content-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-menu-item-label-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-menu-item-label-icon-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-menu-item-label-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-menu-item-label-icon-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-menu-item-label-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-menu-item-label-content-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-menu-item-label-icon-color-disabled: var(--spectrum-disabled-content-color);
+
+ --spectrum-menu-item-description-line-height: var(--spectrum-line-height-100);
+ --spectrum-menu-item-description-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+ --spectrum-menu-item-description-color-default: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-menu-item-description-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+ --spectrum-menu-item-description-color-down: var(--spectrum-neutral-subdued-content-color-down);
+ --spectrum-menu-item-description-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+ --spectrum-menu-item-description-color-disabled: var(--spectrum-disabled-content-color);
+
+ --spectrum-menu-section-header-line-height: var(--spectrum-line-height-100);
+ --spectrum-menu-section-header-line-height-cjk: var(--spectrum-cjk-line-height-100);
+ --spectrum-menu-section-header-font-weight: var(--spectrum-bold-font-weight);
+ --spectrum-menu-section-header-color: var(--spectrum-gray-900);
+ --spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900);
+
+ --spectrum-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900);
+ --spectrum-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000);
+ --spectrum-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100);
+ --spectrum-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000);
+
+ --spectrum-menu-drillin-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-menu-drillin-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+ --spectrum-menu-drillin-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
+ --spectrum-menu-drillin-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+
+ --spectrum-menu-item-value-color-default: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-menu-item-value-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+ --spectrum-menu-item-value-color-down: var(--spectrum-neutral-subdued-content-color-down);
+ --spectrum-menu-item-value-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+
+ --spectrum-menu-checkmark-display-hidden: none;
+ --spectrum-menu-checkmark-display-shown: block;
+ --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);
+
+ /* "one" icon: chevron + additional icon (we don't count the chevron as an icon because it HAS to be there for a collapsible) */
+ --spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-text-to-control) + var(--spectrum-menu-item-icon-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width)));
+
+ /* "no" icon: just the chevron (we're not counting it because it HAS to be there for a collapsible) */
+ --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width)));
+
+ --spectrum-menu-item-background-color-default: var(--spectrum-gray-25);
+ --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity));
+ --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity));
+ --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity));
+
+ &.spectrum-Menu--sizeS {
+ --spectrum-menu-item-min-height: var(--spectrum-component-height-75);
+ --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75);
+ --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75);
+ --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75);
+ --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75);
+
+ --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75);
+ --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75);
+
+ --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75);
+
+ --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50);
+
+ --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75);
+ --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75);
+
+ --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small);
+
+ --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small);
+ --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small);
+ --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small);
+
+ --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small);
+ }
+
+ &,
+ &.spectrum-Menu--sizeM {
+ --spectrum-menu-item-min-height: var(--spectrum-component-height-100);
+ --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100);
+ --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100);
+ --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100);
+ --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100);
+
+ --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100);
+ --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100);
+
+ --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100);
+
+ --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75);
+
+ --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100);
+ --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100);
+
+ --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium);
+
+ --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium);
+ --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium);
+ --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium);
+
+ --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium);
+ }
+
+ &.spectrum-Menu--sizeL {
+ --spectrum-menu-item-min-height: var(--spectrum-component-height-200);
+ --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200);
+ --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200);
+ --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200);
+ --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200);
+
+ --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200);
+ --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200);
+ --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200);
+
+ --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200);
+
+ --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100);
+
+ --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200);
+ --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200);
+
+ --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large);
+
+ --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large);
+ --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large);
+ --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large);
+
+ --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large);
+ }
+
+ &.spectrum-Menu--sizeXL {
+ --spectrum-menu-item-min-height: var(--spectrum-component-height-300);
+ --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300);
+ --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300);
+ --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300);
+ --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300);
+
+ --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300);
+ --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300);
+ --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300);
+
+ --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300);
+
+ --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200);
+
+ --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300);
+ --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300);
+
+ --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large);
+
+ --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large);
+ --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large);
+ --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large);
+
+ --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large);
+ }
+ }
+}
diff --git a/tokens/custom-express/custom-medium-vars.css b/components/menu/themes/spectrum.css
similarity index 51%
rename from tokens/custom-express/custom-medium-vars.css
rename to components/menu/themes/spectrum.css
index 3ea2be5d865..3454f406fee 100644
--- a/tokens/custom-express/custom-medium-vars.css
+++ b/components/menu/themes/spectrum.css
@@ -11,15 +11,16 @@
* governing permissions and limitations under the License.
*/
-/* This file contains overrides and additions to core tokens */
-.spectrum--express.spectrum--medium {
- --spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0";
- --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0";
+/* @combine .spectrum.spectrum--legacy */
- --spectrum-dialog-confirm-border-radius: 6px;
+@import "./spectrum-two.css";
- --spectrum-dial-border-radius: 12px;
-
- --spectrum-assetcard-focus-ring-border-radius: 10px;
+@container style(--system: legacy) {
+ .spectrum-Menu {
+ --spectrum-menu-item-background-color-default: var(--spectrum-gray-50);
+ --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-900), var(--spectrum-transparent-black-200-opacity));
+ --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-900), var(--spectrum-transparent-black-200-opacity));
+ --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900), var(--spectrum-transparent-black-200-opacity));
+ }
}
diff --git a/components/miller/CHANGELOG.md b/components/miller/CHANGELOG.md
index b24ffe4697e..2ae70f7596d 100644
--- a/components/miller/CHANGELOG.md
+++ b/components/miller/CHANGELOG.md
@@ -1,5 +1,203 @@
# Change Log
+## 7.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.13
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.16
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.12
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.11
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.10
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.9
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.8
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.7
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.6
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.5
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.4
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.3
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.2
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.1
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/assetlist@7.0.0-s2-foundations.0
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 6.1.3
### Patch Changes
diff --git a/components/miller/index.css b/components/miller/index.css
index 8093f1bec55..b66c77823e1 100644
--- a/components/miller/index.css
+++ b/components/miller/index.css
@@ -11,12 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-MillerColumns {
- --spectrum-millercolumns-inline-size: 272px;
- --spectrum-millercolumns-padding: var(--spectrum-spacing-100);
- --spectrum-millercolumns-margin-inline-start: var(--spectrum-spacing-100);
- --spectrum-millercolumns-margin-inline-end: var(--spectrum-spacing-100);
-}
+@import "./themes/spectrum-two.css";
.spectrum-MillerColumns {
overflow-x: auto;
diff --git a/components/miller/metadata/miller.yml b/components/miller/metadata/miller.yml
deleted file mode 100644
index fc5b01b03b8..00000000000
--- a/components/miller/metadata/miller.yml
+++ /dev/null
@@ -1,180 +0,0 @@
-name: Miller columns
-examples:
- - id: miller-column
- name: Miller Columns (Branches Selectable)
- description: Miller columns that allow both files and folders to be selected.
- markup: |
-
- - id: miller-column
- name: Miller Columns (Files Selectable)
- description: Miller columns that only allow files to be selected.
- markup: |
-
diff --git a/components/miller/package.json b/components/miller/package.json
index 2877bfc78f3..f2c8607d7ab 100644
--- a/components/miller/package.json
+++ b/components/miller/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/miller",
- "version": "6.1.3",
+ "version": "7.0.0-s2-foundations.13",
"description": "The Spectrum CSS miller component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/miller/stories/template.js b/components/miller/stories/template.js
index 66caafe96fe..9476ef5fc35 100644
--- a/components/miller/stories/template.js
+++ b/components/miller/stories/template.js
@@ -3,6 +3,9 @@ import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-MillerColumns",
diff --git a/components/miller/themes/express.css b/components/miller/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/miller/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/miller/themes/spectrum-two.css b/components/miller/themes/spectrum-two.css
new file mode 100644
index 00000000000..818d7638591
--- /dev/null
+++ b/components/miller/themes/spectrum-two.css
@@ -0,0 +1,21 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-MillerColumns {
+ --spectrum-millercolumns-inline-size: 272px;
+ --spectrum-millercolumns-padding: var(--spectrum-spacing-100);
+ --spectrum-millercolumns-margin-inline-start: var(--spectrum-spacing-100);
+ --spectrum-millercolumns-margin-inline-end: var(--spectrum-spacing-100);
+ }
+}
diff --git a/components/miller/themes/spectrum.css b/components/miller/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/miller/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/modal/CHANGELOG.md b/components/modal/CHANGELOG.md
index 3d57d8de3c2..cd3b3f786b6 100644
--- a/components/modal/CHANGELOG.md
+++ b/components/modal/CHANGELOG.md
@@ -1,5 +1,172 @@
# Change Log
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#3056](https://github.com/adobe/spectrum-css/pull/3056) [`5bbbc78`](https://github.com/adobe/spectrum-css/commit/5bbbc78a6ef9442dc51c5fcc14a82fbe9bc277bf) Thanks [@Rajdeepc](https://github.com/Rajdeepc)! - Updates the spectrum-modal-background-color in dark and light in spectrum-two theme
+
+### Patch Changes
+
+- Updated dependencies [[`db528ce`](https://github.com/adobe/spectrum-css/commit/db528ce0a6f7d817e6124604014faf9f4accfc1e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.20
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/modal/index.css b/components/modal/index.css
index 62af51de41e..29214c0ed68 100644
--- a/components/modal/index.css
+++ b/components/modal/index.css
@@ -12,23 +12,7 @@
*/
@import "@spectrum-css/commons/overlay.css";
-
-.spectrum-Modal {
- /* Bug: this must be 0ms, not 0 */
- --spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0);
-
- /* Distance between top and bottom of modal and edge of window for fullscreen modal */
- --spectrum-modal-fullscreen-margin: 32px;
- --spectrum-modal-max-height: 90vh;
- --spectrum-modal-max-width: 90%;
-
- --spectrum-modal-background-color: var(--spectrum-gray-100);
- --spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100);
- --spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500);
- --spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200);
- --spectrum-modal-transition-animation-duration: var(--spectrum-animation-duration-100);
-}
+@import "./themes/spectrum-two.css";
/* Used to position the modal */
.spectrum-Modal-wrapper {
@@ -73,6 +57,7 @@
.spectrum-Modal {
@extend %spectrum-overlay;
+
/* Start offset by the animation distance */
transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-modal-confirm-entry-animation-distance)));
diff --git a/components/modal/metadata/metadata.json b/components/modal/metadata/metadata.json
index 0fcba109eea..083d82af770 100644
--- a/components/modal/metadata/metadata.json
+++ b/components/modal/metadata/metadata.json
@@ -46,8 +46,8 @@
"--spectrum-animation-duration-500",
"--spectrum-animation-ease-in",
"--spectrum-animation-ease-out",
- "--spectrum-corner-radius-100",
- "--spectrum-gray-100"
+ "--spectrum-background-layer-2-color",
+ "--spectrum-corner-radius-100"
],
"system-theme": [],
"passthroughs": [],
diff --git a/components/modal/metadata/modal.yml b/components/modal/metadata/modal.yml
deleted file mode 100644
index f4addf1d0a0..00000000000
--- a/components/modal/metadata/modal.yml
+++ /dev/null
@@ -1,17 +0,0 @@
-name: Modal
-description: A modal component that is used primarily by Dialog.
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
-examples:
- - id: modal
- name: Modal
- demoClassName: spectrum-CSSExample-example--overlay
- description:
- This is a base component used by other components, and should not be used on its own like the following example. If you need a full-featured modal for
- displaying content, take a look at the Dialog component instead.
- markup: |
-
-
A basic example of the Modal markup.
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/modal/themes/spectrum-two.css b/components/modal/themes/spectrum-two.css
new file mode 100644
index 00000000000..60255f16bc4
--- /dev/null
+++ b/components/modal/themes/spectrum-two.css
@@ -0,0 +1,31 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Modal {
+ /* Bug: this must be 0ms, not 0 */
+ --spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0);
+
+ /* Distance between top and bottom of modal and edge of window for fullscreen modal */
+ --spectrum-modal-fullscreen-margin: 32px;
+ --spectrum-modal-max-height: 90vh;
+ --spectrum-modal-max-width: 90%;
+
+ --spectrum-modal-background-color: var(--spectrum-background-layer-2-color);
+ --spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100);
+ --spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500);
+ --spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200);
+ --spectrum-modal-transition-animation-duration: var(--spectrum-animation-duration-100);
+ }
+}
diff --git a/tokens/dist/css/components/spectrum/actiongroup.css b/components/modal/themes/spectrum.css
similarity index 76%
rename from tokens/dist/css/components/spectrum/actiongroup.css
rename to components/modal/themes/spectrum.css
index bd7f9acb1ca..ef15059420f 100644
--- a/tokens/dist/css/components/spectrum/actiongroup.css
+++ b/components/modal/themes/spectrum.css
@@ -11,8 +11,13 @@
* governing permissions and limitations under the License.
*/
-.spectrum {
- --system-spectrum-actiongroup-gap-size-compact: 0;
- --system-spectrum-actiongroup-horizontal-spacing-compact: -1px;
- --system-spectrum-actiongroup-vertical-spacing-compact: -1px;
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Modal {
+ --spectrum-modal-background-color: var(--spectrum-gray-100);
+ }
}
diff --git a/components/opacitycheckerboard/CHANGELOG.md b/components/opacitycheckerboard/CHANGELOG.md
index cb85b2032fa..c39ebdecaf3 100644
--- a/components/opacitycheckerboard/CHANGELOG.md
+++ b/components/opacitycheckerboard/CHANGELOG.md
@@ -1,5 +1,161 @@
# Change Log
+## 3.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 3.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 3.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 3.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 3.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 3.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 3.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 3.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 3.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 3.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 3.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 3.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 3.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 3.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 2.1.3
### Patch Changes
diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css
index 6a71d4f9835..32f824cf90a 100644
--- a/components/opacitycheckerboard/index.css
+++ b/components/opacitycheckerboard/index.css
@@ -1,18 +1,17 @@
-/*! Copyright 2024 Adobe. All rights reserved. This file is licensed to you
-under the Apache License, Version 2.0 (the "License"); you may not use this file
-except in compliance with the License. You may obtain a copy of the License at
-http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or
-agreed to in writing, software distributed under the License is distributed on
-an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either
-express or implied. See the License for the specific language governing
-permissions and limitations under the License. */
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
-.spectrum-OpacityCheckerboard {
- --spectrum-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark);
- --spectrum-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light);
- --spectrum-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size);
- --spectrum-opacity-checkerboard-position: left top;
-}
+@import "./themes/spectrum-two.css";
.spectrum-OpacityCheckerboard {
background: repeating-conic-gradient(var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-light)) 0% 25%, var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-dark)) 0% 50%) var(--mod-opacity-checkerboard-position, var(--spectrum-opacity-checkerboard-position)) / calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2) calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2);
diff --git a/components/opacitycheckerboard/metadata/opacitycheckerboard.yml b/components/opacitycheckerboard/metadata/opacitycheckerboard.yml
deleted file mode 100644
index ca741c75676..00000000000
--- a/components/opacitycheckerboard/metadata/opacitycheckerboard.yml
+++ /dev/null
@@ -1,17 +0,0 @@
-name: Opacity checkerboard
-description: Opacity checkerboard is a class used to highlight background color opacity.
-examples:
- - id: opacity-checkerboard
- name: Opacity checkerboard
- markup: |
-
- - id: opacity-checkerboard
- name: Opacity checkerboard with color overlay
- markup: |
-
diff --git a/components/opacitycheckerboard/package.json b/components/opacitycheckerboard/package.json
index 634f0c510d2..318855866f0 100644
--- a/components/opacitycheckerboard/package.json
+++ b/components/opacitycheckerboard/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/opacitycheckerboard",
- "version": "2.1.3",
+ "version": "3.0.0-s2-foundations.13",
"description": "The Spectrum CSS opacitycheckerboard component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/opacitycheckerboard/stories/template.js b/components/opacitycheckerboard/stories/template.js
index 5327a593cb8..4f55fe23408 100644
--- a/components/opacitycheckerboard/stories/template.js
+++ b/components/opacitycheckerboard/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-OpacityCheckerboard",
@@ -14,18 +17,21 @@ export const Template = ({
id = getRandomId("opacity-checkerboard"),
content = [],
role,
-}) => html`
- ({ ...a, [c]: true }), {}),
- })}
- style=${ifDefined(styleMap({
- "--mod-opacity-checkerboard-position": backgroundPosition,
- ...customStyles,
- }))}
- role=${ifDefined(role)}
- id=${ifDefined(id)}
- >
- ${renderContent(content)}
-
`;
+} = {}) => {
+ return html`
+ ({ ...a, [c]: true }), {}),
+ })}
+ style=${ifDefined(styleMap({
+ "--mod-opacity-checkerboard-position": backgroundPosition,
+ ...customStyles,
+ }))}
+ role=${ifDefined(role)}
+ id=${ifDefined(id)}
+ >
+ ${renderContent(content)}
+
+ `;
+};
diff --git a/components/opacitycheckerboard/themes/express.css b/components/opacitycheckerboard/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/opacitycheckerboard/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/opacitycheckerboard/themes/spectrum-two.css b/components/opacitycheckerboard/themes/spectrum-two.css
new file mode 100644
index 00000000000..23b4e5c4ee9
--- /dev/null
+++ b/components/opacitycheckerboard/themes/spectrum-two.css
@@ -0,0 +1,21 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-OpacityCheckerboard {
+ --spectrum-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark);
+ --spectrum-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light);
+ --spectrum-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size);
+ --spectrum-opacity-checkerboard-position: left top;
+ }
+}
diff --git a/components/opacitycheckerboard/themes/spectrum.css b/components/opacitycheckerboard/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/opacitycheckerboard/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/page/CHANGELOG.md b/components/page/CHANGELOG.md
deleted file mode 100644
index 9435fed6603..00000000000
--- a/components/page/CHANGELOG.md
+++ /dev/null
@@ -1,746 +0,0 @@
-# Change Log
-
-## 8.1.3
-
-### Patch Changes
-
-- [#3107](https://github.com/adobe/spectrum-css/pull/3107) [`83d5a17`](https://github.com/adobe/spectrum-css/commit/83d5a171bd850df693707611203ecce21f22e7d2) Thanks [@castastrophe](https://github.com/castastrophe)! - Incorporate glob export for the dist directory in all component packages as well as glob markdown exports (to include both CHANGELOG and READMEs).
-
- Sort keys in the package.json assets.
-
-## 8.1.2
-
-### Patch Changes
-
-- [#3045](https://github.com/adobe/spectrum-css/pull/3045) [`5d6e03f`](https://github.com/adobe/spectrum-css/commit/5d6e03f30891f9171f1a600b06d534ee85719277) Thanks [@castastrophe](https://github.com/castastrophe)! - Improve changeset suggestions by using exports instead of files in component packages
-
-## 8.1.1
-
-### Patch Changes
-
-- [#2677](https://github.com/adobe/spectrum-css/pull/2677) [`d83200c`](https://github.com/adobe/spectrum-css/commit/d83200ca70a959aa70329e71de0c4383de157855) Thanks [@castastrophe](https://github.com/castastrophe)! - Leveral local workspace versioning to prevent misalignment
-
-## 8.1.0
-
-### Minor Changes
-
-- [#2616](https://github.com/adobe/spectrum-css/pull/2616) [`7f45ea9`](https://github.com/adobe/spectrum-css/commit/7f45ea95d3d31addf29b0720de8623b0f3f0431d) Thanks [@castastrophe](https://github.com/castastrophe)!
-
-#### Build optmizations to support minification
-
-Output for all component CSS files is now being run through a lightweight optimizer (cssnano) which significantly reduces unnecessary whitespace. These changes reduce file size but should not have any impact on the rendering of the component. By removing unnecessary whitespace from var functions, we are making it easier to effectively minify our provided CSS assets.
-
-### Patch Changes
-
-- Updated peerDependencies [[`7f45ea9`](https://github.com/adobe/spectrum-css/commit/7f45ea95d3d31addf29b0720de8623b0f3f0431d)]:
- - @spectrum-css/tokens@>=14
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-
- Text here!
- Button
- Button
-
-
-
-
- - id: pagination-button
- name: Primary
- markup: |
-
-
-
-
- - id: pagination-button
- name: Secondary
- markup: |
-
-
-
-
diff --git a/components/pagination/metadata/pagination-explicit.yml b/components/pagination/metadata/pagination-explicit.yml
deleted file mode 100644
index 5172823a889..00000000000
--- a/components/pagination/metadata/pagination-explicit.yml
+++ /dev/null
@@ -1,27 +0,0 @@
-id: pagination-explicit
-name: Pagination - explicit
-sections:
- - name: Migration Guide
- description: |
- ### New Textfield markup
- Pagination(Explicit) now uses the new Textfield markup. See the [Textfield migration guide](textfield.html#migrationguide) for more information. You must add `.spectrum-Pagination-textfield` modifier to the outer element `div.spectrum-Textfield`.
-examples:
- - id: pagination-explicit
- name: Standard
- markup: |
-
diff --git a/components/pagination/metadata/pagination-listing.yml b/components/pagination/metadata/pagination-listing.yml
deleted file mode 100644
index 169cafa911a..00000000000
--- a/components/pagination/metadata/pagination-listing.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-name: Pagination - page
-status: Contribution
-examples:
- - id: pagination-listing
- name: Standard
- markup: |
-
diff --git a/components/pagination/package.json b/components/pagination/package.json
index fcdfc9130fd..68d9972eb97 100644
--- a/components/pagination/package.json
+++ b/components/pagination/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/pagination",
- "version": "8.1.3",
+ "version": "9.0.0-s2-foundations.13",
"description": "The Spectrum CSS Pagination component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -36,7 +36,6 @@
"@spectrum-css/actionbutton": ">=6",
"@spectrum-css/button": ">=13",
"@spectrum-css/icon": ">=7",
- "@spectrum-css/splitbutton": ">=8",
"@spectrum-css/textfield": ">=7",
"@spectrum-css/tokens": ">=14"
},
@@ -44,7 +43,6 @@
"@spectrum-css/actionbutton": "workspace:^",
"@spectrum-css/button": "workspace:^",
"@spectrum-css/icon": "workspace:^",
- "@spectrum-css/splitbutton": "^8.1.2",
"@spectrum-css/textfield": "workspace:^",
"@spectrum-css/tokens": "workspace:^"
},
diff --git a/components/pagination/stories/pagination.test.js b/components/pagination/stories/pagination.test.js
index 43cccd9e9e0..24f80f6fcc5 100644
--- a/components/pagination/stories/pagination.test.js
+++ b/components/pagination/stories/pagination.test.js
@@ -12,9 +12,5 @@ export const PaginationGroup = Variants({
testHeading: "Explicit",
variant: "explicit",
},
- {
- testHeading: "Button",
- variant: "button",
- },
]
});
diff --git a/components/pagination/stories/template.js b/components/pagination/stories/template.js
index efb50b44bbf..7a85122f7cf 100644
--- a/components/pagination/stories/template.js
+++ b/components/pagination/stories/template.js
@@ -1,12 +1,14 @@
import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
import { Template as Button } from "@spectrum-css/button/stories/template.js";
-import { Default as SplitButton } from "@spectrum-css/preview/deprecated/splitbutton/splitbutton.stories.js";
import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { repeat } from "lit/directives/repeat.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Pagination",
@@ -15,7 +17,6 @@ export const Template = ({
variant,
items
} = {}, context = {}) => {
-
const explicitVariant = html`
`;
- // @todo This variant should be deprecated, as it uses the deprecated SplitButton component.
- const buttonVariant = SplitButton({
- position: "left",
- variant: "accent",
- label: "Next",
- iconName: "ChevronLeft100",
- labelIconName: "ChevronRight100",
- customFirstButtonClasses: ["spectrum-Pagination-prevButton"],
- customLastButtonClasses: ["spectrum-Pagination-nextButton"]
- }, context);
-
const listingVariant = html`
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/pagination/themes/spectrum-two.css b/components/pagination/themes/spectrum-two.css
new file mode 100644
index 00000000000..01cdd4e9744
--- /dev/null
+++ b/components/pagination/themes/spectrum-two.css
@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Pagination {
+ --spectrum-pagination-counter-margin-inline-start: var(--spectrum-pagination-item-inline-spacing);
+ --spectrum-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing);
+ --spectrum-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-pagination-counter-font-size: var(--spectrum-font-size-100);
+ --spectrum-pagination-counter-line-height: var(--spectrum-line-height-100);
+ }
+}
diff --git a/components/pagination/themes/spectrum.css b/components/pagination/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/pagination/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/picker/CHANGELOG.md b/components/picker/CHANGELOG.md
index 52c9d82f9bd..ec13a79b3a4 100644
--- a/components/picker/CHANGELOG.md
+++ b/components/picker/CHANGELOG.md
@@ -1,5 +1,231 @@
# Change Log
+## 9.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.13
+ - @spectrum-css/helptext@6.0.0-s2-foundations.13
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/menu@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 9.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.12
+ - @spectrum-css/helptext@6.0.0-s2-foundations.12
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/menu@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 9.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.11
+ - @spectrum-css/helptext@6.0.0-s2-foundations.11
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/menu@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 9.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.10
+ - @spectrum-css/helptext@6.0.0-s2-foundations.10
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/menu@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 9.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.9
+ - @spectrum-css/helptext@6.0.0-s2-foundations.9
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/menu@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 9.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.8
+ - @spectrum-css/helptext@6.0.0-s2-foundations.8
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/menu@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 9.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.7
+ - @spectrum-css/helptext@6.0.0-s2-foundations.7
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/menu@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 9.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.6
+ - @spectrum-css/helptext@6.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+ - @spectrum-css/menu@8.0.0-s2-foundations.6
+
+## 9.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.5
+ - @spectrum-css/helptext@6.0.0-s2-foundations.5
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/menu@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 9.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.4
+ - @spectrum-css/helptext@6.0.0-s2-foundations.4
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/menu@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 9.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.3
+ - @spectrum-css/helptext@6.0.0-s2-foundations.3
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/menu@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 9.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.2
+ - @spectrum-css/helptext@6.0.0-s2-foundations.2
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/menu@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 9.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.1
+ - @spectrum-css/helptext@6.0.0-s2-foundations.1
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/menu@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 9.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/progresscircle@4.0.0-s2-foundations.0
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/menu@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/helptext@6.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 8.1.6
### Patch Changes
diff --git a/components/picker/index.css b/components/picker/index.css
index 9eae5fa7714..7de22b09506 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -11,140 +11,8 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
@import "@spectrum-css/commons/basebutton.css";
-
-.spectrum-Picker {
- /* font */
- --spectrum-picker-font-size: var(--spectrum-font-size-100);
- --spectrum-picker-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-picker-placeholder-font-style: var(--spectrum-default-font-style);
- --spectrum-picker-line-height: var(--spectrum-line-height-100);
-
- /* height */
- --spectrum-picker-block-size: var(--spectrum-component-height-100);
- --spectrum-picker-inline-size: var(--spectrum-field-width);
-
- /* border */
- --spectrum-picker-border-radius: var(--spectrum-corner-radius-100);
-
- /* spacing */
- --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
- --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100);
- --spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet);
- --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component);
-
- --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100);
- --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium);
- --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium);
- --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium);
- --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium);
- --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium);
- --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100);
- --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100);
- --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet);
-
- & + .spectrum-Popover--bottom.is-open {
- --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium);
- }
-
- /* animation */
- --spectrum-picker-animation-duration: var(--spectrum-animation-duration-100);
-
- /* color */
- --spectrum-picker-font-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus);
- --spectrum-picker-font-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-picker-font-color-hover-open: var(--spectrum-neutral-content-color-focus-hover);
- --spectrum-picker-font-color-active: var(--spectrum-neutral-content-color-down);
- --spectrum-picker-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-picker-icon-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-picker-icon-color-default-open: var(--spectrum-neutral-content-color-focus);
- --spectrum-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-picker-icon-color-hover-open: var(--spectrum-neutral-content-color-focus-hover);
- --spectrum-picker-icon-color-active: var(--spectrum-neutral-content-color-down);
- --spectrum-picker-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-picker-border-color-error-default: var(--spectrum-negative-border-color-default);
- --spectrum-picker-border-color-error-default-open: var(--spectrum-negative-border-color-focus);
- --spectrum-picker-border-color-error-hover: var(--spectrum-negative-border-color-hover);
- --spectrum-picker-border-color-error-hover-open: var(--spectrum-negative-border-color-focus-hover);
- --spectrum-picker-border-color-error-active: var(--spectrum-negative-border-color-down);
- --spectrum-picker-border-color-error-key-focus: var(--spectrum-negative-border-color-key-focus);
-
- --spectrum-picker-icon-color-error: var(--spectrum-negative-visual-color);
-
- --spectrum-picker-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-picker-font-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-picker-icon-color-disabled: var(--spectrum-disabled-content-color);
-
- /* special cases for focus indicator */
- --spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color);
-}
-
-.spectrum-Picker--sizeS {
- --spectrum-picker-font-size: var(--spectrum-font-size-75);
- --spectrum-picker-block-size: var(--spectrum-component-height-75);
- --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
- --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75);
- --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75);
- --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small);
- --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small);
- --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small);
- --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small);
- --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
- --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75);
- --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75);
-
- & + .spectrum-Popover--bottom.is-open {
- --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small);
- }
-}
-
-.spectrum-Picker--sizeL {
- --spectrum-picker-font-size: var(--spectrum-font-size-200);
- --spectrum-picker-block-size: var(--spectrum-component-height-200);
- --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
- --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
- --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200);
- --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200);
- --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large);
- --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large);
- --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large);
- --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large);
- --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large);
- --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200);
- --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200);
-
- & + .spectrum-Popover--bottom.is-open {
- --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large);
- }
-}
-
-.spectrum-Picker--sizeXL {
- --spectrum-picker-font-size: var(--spectrum-font-size-300);
- --spectrum-picker-block-size: var(--spectrum-component-height-300);
- --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
- --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
- --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300);
- --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300);
- --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large);
- --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large);
- --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large);
- --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large);
- --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
- --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300);
- --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300);
-
- & + .spectrum-Popover--bottom.is-open {
- --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large);
- }
-}
+@import "./themes/spectrum-two.css";
/* Windows high contrast mode */
@media (forced-colors: active) {
@@ -184,6 +52,7 @@
display: flex;
box-sizing: border-box;
+
/* Minimum width is 2 times the height */
max-inline-size: 100%;
min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size)));
@@ -199,10 +68,7 @@
border-style: solid;
border-radius: var(--mod-picker-border-radius, var(--spectrum-picker-border-radius));
- transition:
- background-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)),
- box-shadow var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)),
- border-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out;
+ transition: background-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), box-shadow var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), border-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out;
color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default)));
diff --git a/components/picker/metadata/metadata.json b/components/picker/metadata/metadata.json
index a87ea36a42b..021665c83e6 100644
--- a/components/picker/metadata/metadata.json
+++ b/components/picker/metadata/metadata.json
@@ -274,13 +274,12 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
+ "--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
+ "--spectrum-gray-50",
"--spectrum-gray-500",
"--spectrum-gray-600",
"--spectrum-gray-700",
- "--spectrum-gray-75",
"--spectrum-line-height-100",
"--spectrum-negative-border-color-default",
"--spectrum-negative-border-color-down",
@@ -302,21 +301,7 @@
"--spectrum-text-to-visual-300",
"--spectrum-text-to-visual-75"
],
- "system-theme": [
- "--system-spectrum-picker-background-color-active",
- "--system-spectrum-picker-background-color-default",
- "--system-spectrum-picker-background-color-default-open",
- "--system-spectrum-picker-background-color-hover",
- "--system-spectrum-picker-background-color-hover-open",
- "--system-spectrum-picker-background-color-key-focus",
- "--system-spectrum-picker-border-color-active",
- "--system-spectrum-picker-border-color-default",
- "--system-spectrum-picker-border-color-default-open",
- "--system-spectrum-picker-border-color-hover",
- "--system-spectrum-picker-border-color-hover-open",
- "--system-spectrum-picker-border-color-key-focus",
- "--system-spectrum-picker-border-width"
- ],
+ "system-theme": [],
"passthroughs": [
"--mod-button-animation-duration",
"--mod-button-font-family",
diff --git a/components/picker/metadata/picker.yml b/components/picker/metadata/picker.yml
deleted file mode 100644
index 5339feeca39..00000000000
--- a/components/picker/metadata/picker.yml
+++ /dev/null
@@ -1,539 +0,0 @@
-name: Picker
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/picker/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Component renamed
- Dropdown is now known as Picker. Replace all `.spectrum-Dropdown*` classnames with `.spectrum-Picker*`.
-
- ### Markup change
- The outer `` is now gone and `.spectrum-FieldButton` is no longer used. Instead, the outer tag is now `
` with the `.spectrum-Picker` classname.
-
- Additionally, `.spectrum-Picker` should not contain the `.spectrum-Popover` that it opens.
-
- In order to use a side label with a Picker, add the `spectrum-Picker--sideLabel` class to the Picker.
-
- ### Icon classname changes
-
- Each of the 3 possible icons now has its own specific classname:
-
- | Previous icon classname | Workflow icon classname |
- | --------------------------------- | --------------------------------- |
- | `.spectrum-Picker-icon` | `.spectrum-Picker-menuIcon` |
- | `.spectrum-Icon` (workflow) | `.spectrum-Picker-icon` |
- | `.spectrum-Icon` (validation) | `.spectrum-Picker-validationIcon` |
-
- ### `.is-selected` is now `.is-open`
- In order to more accurately reflect what's going on, you should add `.is-open` to `.spectrum-Picker` when the menu is shown.
-
- ### Change workflow icon size to medium
- If you use a `.spectrum-Picker-icon` in your markup, please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
-
- ### T-shirt sizing
- Picker now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-Picker--size*` class.
- Using the classes `.spectrum-Picker .spectrum-Picker--sizeM` will get result in the previous default picker size.
-
- Also, use the correct icon size for chevron icons:
-
- | T-shirt Size | Icon Size |
- |---------------------------|--------------------------------|
- | `spectrum-Picker--sizeS` | `spectrum-css-icon-Chevron75` |
- | `spectrum-Picker--sizeM` | `spectrum-css-icon-Chevron100` |
- | `spectrum-Picker--sizeL` | `spectrum-css-icon-Chevron200` |
- | `spectrum-Picker--sizeXL` | `spectrum-css-icon-Chevron300` |
-
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: picker-standard
- name: Standard
- markup: |
-
-
-
-
-
Closed
-
Country
-
- Select a Country with a very long label, too long in fact
-
-
-
-
-
-
-
Open
-
- Donaudampfschifffahrtsgesellschaftskapitän
-
-
-
-
-
-
-
-
-
-
-
-
Side Label
-
Country
-
- Select a Country with a very long label, too long in fact
-
-
-
-
-
-
-
-
Open with Thumbnails
-
Country
-
-
-
- Donaudampfschifffahrtsgesellschaftskapitän
-
-
-
-
-
-
-
-
-
-
-
-
Disabled
-
- Select a Country
-
-
-
-
-
-
-
Closed and Loading
-
- Loading...
-
-
-
-
-
-
-
-
-
Closed and Invalid
-
- Select a Country
-
-
-
-
-
-
-
-
-
Closed and Invalid with Help Text
-
- Preferred contact method
-
-
-
-
- Select a contact method
-
-
-
-
-
-
Select a contact method.
-
-
-
-
-
-
-
Open and Invalid
-
- Ballard
-
-
-
-
-
-
-
-
-
-
-
-
-
Closed and Disabled with Thumbnails
-
-
- Select a Country
-
-
-
-
-
-
-
S
-
- Select a Country
-
-
-
- M
-
- Select a Country
-
-
-
- L
-
- Select a Country
-
-
-
- XL
-
- Select a Country
-
-
- - id: picker-quiet
- name: Quiet
- status: Verified
- markup: |
- Closed
- Country
-
- Select a Country
-
-
-
- Open
-
- Ballard
-
-
-
-
-
-
-
-
- Open - With Thumbnails
-
-
-
- Ballard
-
-
-
-
-
-
-
-
- Side Label
- Country
-
- Ballard
-
-
-
- Disabled
-
- Select a Country
-
-
-
- Closed and Invalid
-
- Select a Country
-
-
-
-
-
- Open and Invalid
-
- Ballard
-
-
-
-
-
-
-
-
-
-
- Disabled and Invalid
-
- Select a Country
-
-
-
-
diff --git a/components/picker/package.json b/components/picker/package.json
index 38adef5cb20..94e5b5935c2 100644
--- a/components/picker/package.json
+++ b/components/picker/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/picker",
- "version": "8.1.6",
+ "version": "9.0.0-s2-foundations.13",
"description": "The Spectrum CSS picker component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
index 40b71ffb7b2..042cbe6fbba 100644
--- a/components/picker/stories/template.js
+++ b/components/picker/stories/template.js
@@ -11,6 +11,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Picker = ({
rootClass = "spectrum-Picker",
diff --git a/components/picker/themes/express.css b/components/picker/themes/express.css
index 05de433acae..e0faeee531c 100644
--- a/components/picker/themes/express.css
+++ b/components/picker/themes/express.css
@@ -11,9 +11,12 @@
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Picker {
--spectrum-picker-background-color-default: var(--spectrum-gray-200);
--spectrum-picker-background-color-default-open: var(--spectrum-gray-300);
diff --git a/components/picker/themes/spectrum-two.css b/components/picker/themes/spectrum-two.css
new file mode 100644
index 00000000000..e05a16e0cee
--- /dev/null
+++ b/components/picker/themes/spectrum-two.css
@@ -0,0 +1,162 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Picker {
+ --spectrum-picker-background-color-default: var(--spectrum-gray-50);
+ --spectrum-picker-background-color-default-open: var(--spectrum-gray-100);
+ --spectrum-picker-background-color-active: var(--spectrum-gray-200);
+ --spectrum-picker-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-picker-background-color-hover-open: var(--spectrum-gray-100);
+ --spectrum-picker-background-color-key-focus: var(--spectrum-gray-100);
+
+ --spectrum-picker-border-color-default: var(--spectrum-gray-500);
+ --spectrum-picker-border-color-default-open: var(--spectrum-gray-500);
+ --spectrum-picker-border-color-hover: var(--spectrum-gray-600);
+ --spectrum-picker-border-color-hover-open: var(--spectrum-gray-600);
+ --spectrum-picker-border-color-active: var(--spectrum-gray-700);
+ --spectrum-picker-border-color-key-focus: var(--spectrum-gray-600);
+
+ --spectrum-picker-border-width: var(--spectrum-border-width-100);
+
+ /* font */
+ --spectrum-picker-font-size: var(--spectrum-font-size-100);
+ --spectrum-picker-font-weight: var(--spectrum-regular-font-weight);
+ --spectrum-picker-placeholder-font-style: var(--spectrum-default-font-style);
+ --spectrum-picker-line-height: var(--spectrum-line-height-100);
+
+ /* height */
+ --spectrum-picker-block-size: var(--spectrum-component-height-100);
+ --spectrum-picker-inline-size: var(--spectrum-field-width);
+
+ /* border */
+ --spectrum-picker-border-radius: var(--spectrum-corner-radius-100);
+
+ /* spacing */
+ --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+ --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100);
+ --spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet);
+ --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component);
+
+ --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100);
+ --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium);
+ --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium);
+ --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium);
+ --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium);
+ --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium);
+ --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100);
+ --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100);
+ --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet);
+
+ & + .spectrum-Popover--bottom.is-open {
+ --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium);
+ }
+
+ /* animation */
+ --spectrum-picker-animation-duration: var(--spectrum-animation-duration-100);
+
+ /* color */
+ --spectrum-picker-font-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus);
+ --spectrum-picker-font-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-picker-font-color-hover-open: var(--spectrum-neutral-content-color-focus-hover);
+ --spectrum-picker-font-color-active: var(--spectrum-neutral-content-color-down);
+ --spectrum-picker-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-picker-icon-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-picker-icon-color-default-open: var(--spectrum-neutral-content-color-focus);
+ --spectrum-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-picker-icon-color-hover-open: var(--spectrum-neutral-content-color-focus-hover);
+ --spectrum-picker-icon-color-active: var(--spectrum-neutral-content-color-down);
+ --spectrum-picker-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-picker-border-color-error-default: var(--spectrum-negative-border-color-default);
+ --spectrum-picker-border-color-error-default-open: var(--spectrum-negative-border-color-focus);
+ --spectrum-picker-border-color-error-hover: var(--spectrum-negative-border-color-hover);
+ --spectrum-picker-border-color-error-hover-open: var(--spectrum-negative-border-color-focus-hover);
+ --spectrum-picker-border-color-error-active: var(--spectrum-negative-border-color-down);
+ --spectrum-picker-border-color-error-key-focus: var(--spectrum-negative-border-color-key-focus);
+
+ --spectrum-picker-icon-color-error: var(--spectrum-negative-visual-color);
+
+ --spectrum-picker-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-picker-font-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-picker-icon-color-disabled: var(--spectrum-disabled-content-color);
+
+ /* special cases for focus indicator */
+ --spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color);
+ }
+
+ .spectrum-Picker--sizeS {
+ --spectrum-picker-font-size: var(--spectrum-font-size-75);
+ --spectrum-picker-block-size: var(--spectrum-component-height-75);
+ --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+ --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75);
+ --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75);
+ --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small);
+ --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small);
+ --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small);
+ --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small);
+ --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
+ --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75);
+ --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75);
+
+ & + .spectrum-Popover--bottom.is-open {
+ --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small);
+ }
+ }
+
+ .spectrum-Picker--sizeL {
+ --spectrum-picker-font-size: var(--spectrum-font-size-200);
+ --spectrum-picker-block-size: var(--spectrum-component-height-200);
+ --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
+ --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+ --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200);
+ --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200);
+ --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large);
+ --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large);
+ --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large);
+ --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large);
+ --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large);
+ --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200);
+ --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200);
+
+ & + .spectrum-Popover--bottom.is-open {
+ --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large);
+ }
+ }
+
+ .spectrum-Picker--sizeXL {
+ --spectrum-picker-font-size: var(--spectrum-font-size-300);
+ --spectrum-picker-block-size: var(--spectrum-component-height-300);
+ --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
+ --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
+ --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300);
+ --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300);
+ --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large);
+ --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large);
+ --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large);
+ --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large);
+ --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
+ --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300);
+ --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300);
+
+ & + .spectrum-Popover--bottom.is-open {
+ --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large);
+ }
+ }
+}
diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css
index b98f70f57ea..185cf8a2d7c 100644
--- a/components/picker/themes/spectrum.css
+++ b/components/picker/themes/spectrum.css
@@ -11,7 +11,12 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-Picker {
--spectrum-picker-background-color-default: var(--spectrum-gray-75);
--spectrum-picker-background-color-default-open: var(--spectrum-gray-200);
@@ -19,14 +24,5 @@
--spectrum-picker-background-color-hover: var(--spectrum-gray-200);
--spectrum-picker-background-color-hover-open: var(--spectrum-gray-200);
--spectrum-picker-background-color-key-focus: var(--spectrum-gray-200);
-
- --spectrum-picker-border-color-default: var(--spectrum-gray-500);
- --spectrum-picker-border-color-default-open: var(--spectrum-gray-500);
- --spectrum-picker-border-color-hover: var(--spectrum-gray-600);
- --spectrum-picker-border-color-hover-open: var(--spectrum-gray-600);
- --spectrum-picker-border-color-active: var(--spectrum-gray-700);
- --spectrum-picker-border-color-key-focus: var(--spectrum-gray-600);
-
- --spectrum-picker-border-width: var(--spectrum-border-width-100);
}
}
diff --git a/components/pickerbutton/CHANGELOG.md b/components/pickerbutton/CHANGELOG.md
index 0d9084c1bbf..dd32ba0108e 100644
--- a/components/pickerbutton/CHANGELOG.md
+++ b/components/pickerbutton/CHANGELOG.md
@@ -1,5 +1,209 @@
# Change Log
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/menu@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#3023](https://github.com/adobe/spectrum-css/pull/3023) [`213efa8`](https://github.com/adobe/spectrum-css/commit/213efa8618cdccf75a274ee9c2dd0404864c1779) Thanks [@jawinn](https://github.com/jawinn)! - Relocates --mod custom properties from the themes CSS to the index.css.
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/menu@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/menu@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/menu@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/menu@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/menu@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/menu@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/popover@8.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+ - @spectrum-css/menu@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/menu@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/menu@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/menu@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/menu@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/menu@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/popover@8.0.0-s2-foundations.0
+ - @spectrum-css/menu@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css
index 14b89f9bbfd..467a3d9702f 100644
--- a/components/pickerbutton/index.css
+++ b/components/pickerbutton/index.css
@@ -11,84 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-PickerButton {
- --spectrum-picker-button-height: var(--spectrum-component-height-100);
- --spectrum-picker-button-width: var(--spectrum-component-height-100);
- --spectrum-picker-button-gap: var(--spectrum-text-to-visual-50);
-
- --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill);
- --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50);
- --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100);
-
- --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
-
- --spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default);
- --spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-picker-button-font-color: var(--spectrum-neutral-content-color-default);
- --spectrum-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-picker-button-font-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-picker-button-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-picker-button-font-style: var(--spectrum-default-font-style);
- --spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-picker-button-font-size: var(--spectrum-font-size-100);
-
- --spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100);
-
- &:disabled {
- --mod-picker-button-background-color: var(--mod-picker-button-background-color-disabled, var(--spectrum-disabled-background-color));
- --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
- --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
- --mod-picker-button-border-color: var(--mod-picker-button-border-color-disabled, var(--spectrum-disabled-background-color));
-
- --mod-picker-button-font-color: var(--mod-picker-button-font-color-disabled, var(--spectrum-disabled-content-color));
- --mod-picker-button-font-color-hover: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-disabled-content-color));
- --mod-picker-button-font-color-down: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-disabled-content-color));
-
- --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color));
- --mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
- --mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
- }
-
- &.spectrum-PickerButton--quiet {
- --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent);
- --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent);
- --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent);
- --mod-picker-button-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent);
-
- --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet, transparent);
- }
-
- &.spectrum-PickerButton--sizeS {
- --spectrum-picker-button-height: var(--spectrum-component-height-75);
- --spectrum-picker-button-width: var(--spectrum-component-height-75);
- --spectrum-picker-button-label-padding: var(--spectrum-spacing-75);
- --spectrum-picker-button-font-size: var(--spectrum-font-size-75);
- --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75);
- }
-
- &.spectrum-PickerButton--sizeL {
- --spectrum-picker-button-height: var(--spectrum-component-height-200);
- --spectrum-picker-button-width: var(--spectrum-component-height-200);
- --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200);
- --spectrum-picker-button-font-size: var(--spectrum-font-size-200);
- --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200);
- }
-
- &.spectrum-PickerButton--sizeXL {
- --spectrum-picker-button-height: var(--spectrum-component-height-300);
- --spectrum-picker-button-width: var(--spectrum-component-height-300);
- --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300);
- --spectrum-picker-button-font-size: var(--spectrum-font-size-300);
- --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300);
- }
-}
+@import "./themes/spectrum-two.css";
.spectrum-PickerButton {
border-style: none;
@@ -145,6 +68,35 @@
color: var(--mod-picker-button-icon-color-key-focus, var(--spectrum-picker-button-icon-color-key-focus));
}
}
+
+ &:disabled,
+ &.is-disabled {
+ --mod-picker-button-background-color: var(--mod-picker-button-background-color-disabled, var(--spectrum-picker-button-background-color-disabled));
+ --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-picker-button-background-color-hover-disabled));
+ --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-picker-button-background-color-down-disabled));
+ --mod-picker-button-border-color: var(--mod-picker-button-border-color-disabled, var(--spectrum-picker-button-border-color-disabled));
+
+ --mod-picker-button-font-color: var(--mod-picker-button-font-color-disabled, var(--spectrum-picker-button-font-color-disabled));
+ --mod-picker-button-font-color-hover: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-picker-button-font-color-hover-disabled));
+ --mod-picker-button-font-color-down: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-picker-button-font-color-down-disabled));
+
+ --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-disabled, var(--spectrum-picker-button-icon-color-disabled));
+ --mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-picker-button-icon-color-hover-disabled));
+ --mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-picker-button-icon-color-down-disabled));
+ }
+
+ &.spectrum-PickerButton--quiet {
+ --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent);
+ --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent);
+ --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent);
+ --mod-picker-button-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent);
+ --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet, transparent);
+
+ &:disabled,
+ &.is-disabled {
+ --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent);
+ }
+ }
}
.spectrum-PickerButton--right {
diff --git a/components/pickerbutton/metadata/metadata.json b/components/pickerbutton/metadata/metadata.json
index c605d88694b..919d263c50f 100644
--- a/components/pickerbutton/metadata/metadata.json
+++ b/components/pickerbutton/metadata/metadata.json
@@ -14,6 +14,7 @@
".spectrum-PickerButton-fill",
".spectrum-PickerButton-icon",
".spectrum-PickerButton-label",
+ ".spectrum-PickerButton.is-disabled",
".spectrum-PickerButton.is-focused .spectrum-PickerButton-fill",
".spectrum-PickerButton.is-focused .spectrum-PickerButton-icon",
".spectrum-PickerButton.is-focused .spectrum-PickerButton-label",
@@ -24,6 +25,8 @@
".spectrum-PickerButton.is-open .spectrum-PickerButton-icon",
".spectrum-PickerButton.is-open .spectrum-PickerButton-label",
".spectrum-PickerButton.spectrum-PickerButton--quiet",
+ ".spectrum-PickerButton.spectrum-PickerButton--quiet.is-disabled",
+ ".spectrum-PickerButton.spectrum-PickerButton--quiet:disabled",
".spectrum-PickerButton.spectrum-PickerButton--sizeL",
".spectrum-PickerButton.spectrum-PickerButton--sizeS",
".spectrum-PickerButton.spectrum-PickerButton--sizeXL",
@@ -90,10 +93,14 @@
"component": [
"--spectrum-picker-button-background-animation-duration",
"--spectrum-picker-button-background-color",
+ "--spectrum-picker-button-background-color-disabled",
"--spectrum-picker-button-background-color-down",
+ "--spectrum-picker-button-background-color-down-disabled",
"--spectrum-picker-button-background-color-hover",
+ "--spectrum-picker-button-background-color-hover-disabled",
"--spectrum-picker-button-background-color-key-focus",
"--spectrum-picker-button-border-color",
+ "--spectrum-picker-button-border-color-disabled",
"--spectrum-picker-button-border-radius",
"--spectrum-picker-button-border-radius-rounded",
"--spectrum-picker-button-border-radius-rounded-sided",
@@ -101,8 +108,11 @@
"--spectrum-picker-button-border-width",
"--spectrum-picker-button-fill-padding",
"--spectrum-picker-button-font-color",
+ "--spectrum-picker-button-font-color-disabled",
"--spectrum-picker-button-font-color-down",
+ "--spectrum-picker-button-font-color-down-disabled",
"--spectrum-picker-button-font-color-hover",
+ "--spectrum-picker-button-font-color-hover-disabled",
"--spectrum-picker-button-font-color-key-focus",
"--spectrum-picker-button-font-family",
"--spectrum-picker-button-font-size",
@@ -111,8 +121,11 @@
"--spectrum-picker-button-gap",
"--spectrum-picker-button-height",
"--spectrum-picker-button-icon-color",
+ "--spectrum-picker-button-icon-color-disabled",
"--spectrum-picker-button-icon-color-down",
+ "--spectrum-picker-button-icon-color-down-disabled",
"--spectrum-picker-button-icon-color-hover",
+ "--spectrum-picker-button-icon-color-hover-disabled",
"--spectrum-picker-button-icon-color-key-focus",
"--spectrum-picker-button-label-padding",
"--spectrum-picker-button-padding",
@@ -128,7 +141,6 @@
"--spectrum-component-height-75",
"--spectrum-corner-radius-100",
"--spectrum-corner-radius-200",
- "--spectrum-corner-radius-75",
"--spectrum-default-font-style",
"--spectrum-disabled-background-color",
"--spectrum-disabled-content-color",
@@ -140,10 +152,9 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
+ "--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
- "--spectrum-gray-75",
+ "--spectrum-gray-50",
"--spectrum-in-field-button-edge-to-fill",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
@@ -155,17 +166,7 @@
"--spectrum-text-to-visual-300",
"--spectrum-text-to-visual-50"
],
- "system-theme": [
- "--system-spectrum-pickerbutton-spectrum-picker-button-background-color",
- "--system-spectrum-pickerbutton-spectrum-picker-button-background-color-down",
- "--system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover",
- "--system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus",
- "--system-spectrum-pickerbutton-spectrum-picker-button-border-color",
- "--system-spectrum-pickerbutton-spectrum-picker-button-border-radius",
- "--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided",
- "--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided",
- "--system-spectrum-pickerbutton-spectrum-picker-button-border-width"
- ],
+ "system-theme": [],
"passthroughs": [],
"high-contrast": []
}
diff --git a/components/pickerbutton/metadata/pickerbutton.yml b/components/pickerbutton/metadata/pickerbutton.yml
deleted file mode 100644
index be4fbe0f6a6..00000000000
--- a/components/pickerbutton/metadata/pickerbutton.yml
+++ /dev/null
@@ -1,154 +0,0 @@
-name: Picker button
-status: Contribution
-SpectrumSiteSlug: https://spectrum.adobe.com/page/picker/
-sections:
- - name: Migration Guide
- description: |
- ### Picker button uses the [Quiet](pickerbutton.html#quiet) variant instead of loudness levels.
-
- The Loudness level classes, `.spectrum-PickerButton--low`, `.spectrum-PickerButton--medium`, and `.spectrum-PickerButton--high`, have been removed.
-
- - Use the base class, `.spectrum-PickerButton`, to apply the default button styles. The default styles correspond to what was previously the Loudness - High variant, which used the class `.spectrum-InfieldButton--high`.
- - Use the modifier class, `spectrum-PickerButton--quiet`, to apply the quiet variant styles. Quiet corresponds to what was previously the Loudness - Low variant, which used the class `.spectrum-InfieldButton--low` class.
-
- The Loudness - Medium variant has been removed, so there is no equivalent.
-
- ### .spectrum-PickerButton-UIIcon class removed
-
- The `.spectrum-PickerButton-UIIcon` class no longer matches our naming convention. Both types of icons now use the `spectrum-PickerButton-icon` class
-
-examples:
- - id: pickerbutton-sizing
- name: Sizing
- markup: |
-
-
-
S
-
-
- All
-
-
-
-
-
-
-
-
M
-
-
- All
-
-
-
-
-
-
-
-
L
-
-
- All
-
-
-
-
-
-
-
-
XL
-
-
- All
-
-
-
-
-
-
-
- All
-
-
-
-
-
- - id: pickerbutton-texticon
- name: Text icon
- markup: |
-
-
- All
-
-
-
-
-
- - id: pickerbutton-icononly
- name: UI icon only
- markup: |
-
-
-
-
-
-
-
- - id: pickerbutton-icononly-custom
- name: Custom icon only
- markup: |
-
-
-
-
-
-
-
- - id: pickerbutton-rounded
- name: Rounded
- markup: |
-
-
- All
-
-
-
-
-
- - id: pickerbutton-open
- name: Open
- markup: |
-
-
- All
-
-
-
-
-
- - id: pickerbutton-disabled
- name: Disabled
- markup: |
-
-
- All
-
-
-
-
diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json
index 7e9539acce3..2f1a627190a 100644
--- a/components/pickerbutton/package.json
+++ b/components/pickerbutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/pickerbutton",
- "version": "5.1.3",
+ "version": "6.0.0-s2-foundations.14",
"description": "The Spectrum CSS picker button component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
index b2365dff866..0d72a52ed53 100644
--- a/components/pickerbutton/stories/template.js
+++ b/components/pickerbutton/stories/template.js
@@ -8,6 +8,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-PickerButton",
diff --git a/components/pickerbutton/themes/express.css b/components/pickerbutton/themes/express.css
index f399ef81f83..1f3981fbcbc 100644
--- a/components/pickerbutton/themes/express.css
+++ b/components/pickerbutton/themes/express.css
@@ -11,9 +11,12 @@
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-PickerButton {
--spectrum-picker-button-background-color: var(--spectrum-gray-200);
--spectrum-picker-button-background-color-hover: var(--spectrum-gray-300);
diff --git a/components/pickerbutton/themes/spectrum-two.css b/components/pickerbutton/themes/spectrum-two.css
new file mode 100644
index 00000000000..10aa9c27769
--- /dev/null
+++ b/components/pickerbutton/themes/spectrum-two.css
@@ -0,0 +1,91 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-PickerButton {
+ --spectrum-picker-button-background-color: var(--spectrum-gray-50);
+ --spectrum-picker-button-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-picker-button-background-color-down: var(--spectrum-gray-200);
+ --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100);
+
+ --spectrum-picker-button-border-color: inherit;
+ --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-picker-button-border-radius-rounded-sided: 0;
+ --spectrum-picker-button-border-radius-sided: 0;
+ --spectrum-picker-button-border-width: var(--spectrum-border-width-100);
+
+ --spectrum-picker-button-height: var(--spectrum-component-height-100);
+ --spectrum-picker-button-width: var(--spectrum-component-height-100);
+ --spectrum-picker-button-gap: var(--spectrum-text-to-visual-50);
+
+ --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill);
+ --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50);
+ --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100);
+
+ --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200);
+
+ --spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-picker-button-font-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-picker-button-font-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-picker-button-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-picker-button-font-style: var(--spectrum-default-font-style);
+ --spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight);
+ --spectrum-picker-button-font-size: var(--spectrum-font-size-100);
+
+ --spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100);
+
+ --spectrum-picker-button-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-picker-button-background-color-hover-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-picker-button-background-color-down-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-picker-button-border-color-disabled: var(--spectrum-disabled-background-color);
+
+ --spectrum-picker-button-font-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-picker-button-font-color-hover-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-picker-button-font-color-down-disabled: var(--spectrum-disabled-content-color);
+
+ --spectrum-picker-button-icon-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-picker-button-icon-color-hover-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-picker-button-icon-color-down-disabled: var(--spectrum-disabled-content-color);
+
+ &.spectrum-PickerButton--sizeS {
+ --spectrum-picker-button-height: var(--spectrum-component-height-75);
+ --spectrum-picker-button-width: var(--spectrum-component-height-75);
+ --spectrum-picker-button-label-padding: var(--spectrum-spacing-75);
+ --spectrum-picker-button-font-size: var(--spectrum-font-size-75);
+ --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75);
+ }
+
+ &.spectrum-PickerButton--sizeL {
+ --spectrum-picker-button-height: var(--spectrum-component-height-200);
+ --spectrum-picker-button-width: var(--spectrum-component-height-200);
+ --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200);
+ --spectrum-picker-button-font-size: var(--spectrum-font-size-200);
+ --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200);
+ }
+
+ &.spectrum-PickerButton--sizeXL {
+ --spectrum-picker-button-height: var(--spectrum-component-height-300);
+ --spectrum-picker-button-width: var(--spectrum-component-height-300);
+ --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300);
+ --spectrum-picker-button-font-size: var(--spectrum-font-size-300);
+ --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300);
+ }
+ }
+}
diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css
index 1daf4d9af8e..3b74f86d055 100644
--- a/components/pickerbutton/themes/spectrum.css
+++ b/components/pickerbutton/themes/spectrum.css
@@ -11,17 +11,16 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-PickerButton {
--spectrum-picker-button-background-color: var(--spectrum-gray-75);
--spectrum-picker-button-background-color-hover: var(--spectrum-gray-200);
--spectrum-picker-button-background-color-down: var(--spectrum-gray-300);
--spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200);
-
- --spectrum-picker-button-border-color: inherit;
- --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-picker-button-border-radius-rounded-sided: 0;
- --spectrum-picker-button-border-radius-sided: 0;
- --spectrum-picker-button-border-width: var(--spectrum-border-width-100);
}
}
diff --git a/components/popover/CHANGELOG.md b/components/popover/CHANGELOG.md
index 553ff7c258e..62d8601d492 100644
--- a/components/popover/CHANGELOG.md
+++ b/components/popover/CHANGELOG.md
@@ -1,5 +1,223 @@
# Change Log
+## 8.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.13
+ - @spectrum-css/divider@4.0.0-s2-foundations.13
+ - @spectrum-css/dialog@11.0.0-s2-foundations.13
+ - @spectrum-css/menu@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.13
+
+### Patch Changes
+
+- [#2982](https://github.com/adobe/spectrum-css/pull/2982) [`dffdefa`](https://github.com/adobe/spectrum-css/commit/dffdefaa1ffc39fbf7706e218d261da3a02695b5) Thanks [@castastrophe](https://github.com/castastrophe)! - Remove internal-only --flow-direction variable
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.12
+ - @spectrum-css/divider@4.0.0-s2-foundations.12
+ - @spectrum-css/dialog@11.0.0-s2-foundations.12
+ - @spectrum-css/menu@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.11
+ - @spectrum-css/divider@4.0.0-s2-foundations.11
+ - @spectrum-css/dialog@11.0.0-s2-foundations.11
+ - @spectrum-css/menu@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.10
+ - @spectrum-css/divider@4.0.0-s2-foundations.10
+ - @spectrum-css/dialog@11.0.0-s2-foundations.10
+ - @spectrum-css/menu@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.9
+ - @spectrum-css/divider@4.0.0-s2-foundations.9
+ - @spectrum-css/dialog@11.0.0-s2-foundations.9
+ - @spectrum-css/menu@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.8
+ - @spectrum-css/divider@4.0.0-s2-foundations.8
+ - @spectrum-css/dialog@11.0.0-s2-foundations.8
+ - @spectrum-css/menu@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.7
+ - @spectrum-css/divider@4.0.0-s2-foundations.7
+ - @spectrum-css/dialog@11.0.0-s2-foundations.7
+ - @spectrum-css/menu@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.6
+ - @spectrum-css/divider@4.0.0-s2-foundations.6
+ - @spectrum-css/dialog@11.0.0-s2-foundations.6
+ - @spectrum-css/menu@8.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.5
+ - @spectrum-css/divider@4.0.0-s2-foundations.5
+ - @spectrum-css/dialog@11.0.0-s2-foundations.5
+ - @spectrum-css/menu@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.4
+ - @spectrum-css/divider@4.0.0-s2-foundations.4
+ - @spectrum-css/dialog@11.0.0-s2-foundations.4
+ - @spectrum-css/menu@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.3
+ - @spectrum-css/divider@4.0.0-s2-foundations.3
+ - @spectrum-css/dialog@11.0.0-s2-foundations.3
+ - @spectrum-css/menu@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.2
+ - @spectrum-css/divider@4.0.0-s2-foundations.2
+ - @spectrum-css/dialog@11.0.0-s2-foundations.2
+ - @spectrum-css/menu@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.1
+ - @spectrum-css/divider@4.0.0-s2-foundations.1
+ - @spectrum-css/dialog@11.0.0-s2-foundations.1
+ - @spectrum-css/menu@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/divider@4.0.0-s2-foundations.0
+ - @spectrum-css/menu@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/alertdialog@3.0.0-s2-foundations.0
+ - @spectrum-css/dialog@11.0.0-s2-foundations.0
+
## 7.1.6
### Patch Changes
diff --git a/components/popover/index.css b/components/popover/index.css
index 5c94377b78c..4978d4e7cf7 100644
--- a/components/popover/index.css
+++ b/components/popover/index.css
@@ -11,38 +11,8 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
@import "@spectrum-css/commons/overlay.css";
-
-.spectrum-Popover {
- /* animation distance is equal to and responsible for popover offset */
- --spectrum-popover-animation-distance: var(--spectrum-spacing-100);
-
- --spectrum-popover-background-color: var(--spectrum-background-layer-2-color);
- --spectrum-popover-border-color: var(--spectrum-gray-400);
-
- /* popover inner padding */
- --spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area);
-
- /* popover drop shadow */
- --spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x);
- --spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y);
- --spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur);
- --spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color);
-
- /* popover corner radius */
- --spectrum-popover-corner-radius: var(--spectrum-corner-radius-100);
-
- /* pointer tip dimensions */
- --spectrum-popover-pointer-width: var(--spectrum-popover-tip-width);
- --spectrum-popover-pointer-height: var(--spectrum-popover-tip-height);
-
- /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */
- --spectrum-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + (var(--spectrum-popover-tip-width) / 2));
-
- /* pointer tip - spacing to edge will center pointer to source - apply in markup by setting '--spectrum-popover-pointer-edge-offset' value == half of source */
- --spectrum-popover-pointer-edge-spacing: calc(var(--spectrum-popover-pointer-edge-offset) - (var(--spectrum-popover-tip-width) / 2));
-}
+@import "./themes/spectrum-two.css";
/* windows high contrast mode */
@media (forced-colors: active) {
@@ -52,9 +22,10 @@
}
.spectrum-Popover {
- --spectrum-popover-filter: drop-shadow(var(--mod-popover-shadow-horizontal, var(--spectrum-popover-shadow-horizontal)) var(--mod-popover-shadow-vertical, var(--spectrum-popover-shadow-vertical)) var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur)) var(--mod-popover-shadow-color, var(--spectrum-popover-shadow-color)));
@extend %spectrum-overlay;
+ --spectrum-popover-filter: drop-shadow(var(--mod-popover-shadow-horizontal, var(--spectrum-popover-shadow-horizontal)) var(--mod-popover-shadow-vertical, var(--spectrum-popover-shadow-vertical)) var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur)) var(--mod-popover-shadow-color, var(--spectrum-popover-shadow-color)));
+
box-sizing: border-box;
position: absolute;
diff --git a/components/popover/metadata/metadata.json b/components/popover/metadata/metadata.json
index c0ec791c2b5..8f8a0a0934f 100644
--- a/components/popover/metadata/metadata.json
+++ b/components/popover/metadata/metadata.json
@@ -148,7 +148,7 @@
"--spectrum-gray-400",
"--spectrum-spacing-100"
],
- "system-theme": ["--system-spectrum-popover-border-width"],
+ "system-theme": [],
"passthroughs": [],
"high-contrast": [
"--highcontrast-popover-background-color",
diff --git a/components/popover/metadata/popover.yml b/components/popover/metadata/popover.yml
deleted file mode 100644
index 6bcff1652b6..00000000000
--- a/components/popover/metadata/popover.yml
+++ /dev/null
@@ -1,666 +0,0 @@
-name: Popover
-SpectrumSiteSlug: https://spectrum.adobe.com/page/popover/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### New Popover Positions
- - Popover has 22 available positions. 10 positions use logical properties.
- - Popover position and distance to source should be handled by implementation.
- - In this document, Popover positions will appear to only impact default tip positioning because popovers in this document are already open by default.
- - Animation direction, speed, and distance are handled by overlay.
-
- #### Position Class Naming
- - First position term is popover position, second term is source position.
- - Example: --top-left = popover is to top and source is to left.
- - Popover has 8px spacing from the source by default.
-
- #### Position of Tip
- - Default tip position is centered on the edge for top/bottom/left/right/start/end positions.
- - Default tip position distance from edge is equal to popover corner radius for all other positions.
- - Popover tip position can be overridden in implementation to center with the source by setting '--spectrum-popover-pointer-edge-offset' equal to half the width of the source (for top and bottom popovers) or half the height of the source (for side popovers).
-
- #### Tip SVG
- - Tip SVG should be updated in the markup
- - Popover tip SVG polygon can retain the same markup and points for top and bottom (it is flipped in the CSS)
- - Popover tip SVG polygon can retain the same markup and points for left/right/start/end (it is flipped in the CSS)
-
-examples:
- - id: popover
- name: Standard
- markup: |
-
-
-
Default
-
-
-
-
-
-
- Source 50x100
-
-
-
-
-
With Tip
-
-
-
-
- Source 50x100
-
-
-
-
-
Top with Tip
-
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
- Source 50x100
-
-
-
-
-
-
Bottom with Tip
-
-
- Source 50x100
-
-
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Cross Offset of Tip = 50px
-
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
- Source 50x100
-
-
-
-
-
-
Cross Offset of Tip = 50px
-
-
- Source 50x100
-
-
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Dialog
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Alert Dialog - Error
-
-
-
-
-
-
An error occured while sharing your project. Please verify the email address and try again.
-
-
- Continue
-
-
-
-
-
-
-
-
-
-
-
-
Top
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Top Start
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Top End
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Top Left
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Top Right
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Bottom
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
-
Bottom Start
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
-
Bottom End
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
-
Bottom Left
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
-
Bottom Right
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Left
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Left Top
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Left Bottom
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Right
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
-
Right Top
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Right Bottom
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Start
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Start Top
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
Start Bottom
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
End
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
End Top
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
-
-
End Bottom
-
-
-
-
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.
-
-
-
-
-
-
-
-
-
${ActionButton({
label: "Source",
@@ -283,12 +286,12 @@ export const FixedWidthSourceTemplate = (args) => html`
width: "100px",
display: "block",
},
- })}
+ }, context)}
${Template({
...args,
position: "bottom-start",
isOpen: true,
trigger: () => null,
- })}
+ }, context)}
`;
diff --git a/components/popover/themes/express.css b/components/popover/themes/express.css
index 4748454f03d..d034e34fb0b 100644
--- a/components/popover/themes/express.css
+++ b/components/popover/themes/express.css
@@ -11,9 +11,12 @@
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Popover {
--spectrum-popover-border-width: 0;
}
diff --git a/components/popover/themes/spectrum-two.css b/components/popover/themes/spectrum-two.css
new file mode 100644
index 00000000000..5a227df273b
--- /dev/null
+++ b/components/popover/themes/spectrum-two.css
@@ -0,0 +1,46 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Popover {
+ --spectrum-popover-border-width: var(--spectrum-border-width-100);
+
+ /* animation distance is equal to and responsible for popover offset */
+ --spectrum-popover-animation-distance: var(--spectrum-spacing-100);
+
+ --spectrum-popover-background-color: var(--spectrum-background-layer-2-color);
+ --spectrum-popover-border-color: var(--spectrum-gray-400);
+
+ /* popover inner padding */
+ --spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area);
+
+ /* popover drop shadow */
+ --spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x);
+ --spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y);
+ --spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur);
+ --spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color);
+
+ /* popover corner radius */
+ --spectrum-popover-corner-radius: var(--spectrum-corner-radius-100);
+
+ /* pointer tip dimensions */
+ --spectrum-popover-pointer-width: var(--spectrum-popover-tip-width);
+ --spectrum-popover-pointer-height: var(--spectrum-popover-tip-height);
+
+ /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */
+ --spectrum-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + (var(--spectrum-popover-tip-width) / 2));
+
+ /* pointer tip - spacing to edge will center pointer to source - apply in markup by setting '--spectrum-popover-pointer-edge-offset' value == half of source */
+ --spectrum-popover-pointer-edge-spacing: calc(var(--spectrum-popover-pointer-edge-offset) - (var(--spectrum-popover-tip-width) / 2));
+ }
+}
diff --git a/components/popover/themes/spectrum.css b/components/popover/themes/spectrum.css
index 2f0c2993266..5a930981122 100644
--- a/components/popover/themes/spectrum.css
+++ b/components/popover/themes/spectrum.css
@@ -11,8 +11,7 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Popover {
- --spectrum-popover-border-width: var(--spectrum-border-width-100);
- }
-}
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/progressbar/CHANGELOG.md b/components/progressbar/CHANGELOG.md
index 6b8e98e98ea..b7146728fe0 100644
--- a/components/progressbar/CHANGELOG.md
+++ b/components/progressbar/CHANGELOG.md
@@ -1,5 +1,192 @@
# Change Log
+## 5.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 5.0.0-s2-foundations.14
+
+### Patch Changes
+
+- [#3023](https://github.com/adobe/spectrum-css/pull/3023) [`213efa8`](https://github.com/adobe/spectrum-css/commit/213efa8618cdccf75a274ee9c2dd0404864c1779) Thanks [@jawinn](https://github.com/jawinn)! - Relocates --mod custom properties from the themes CSS to the index.css.
+
+## 5.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-235] meter properties moved out of theme and into index.css
+
+### Patch Changes
+
+- Updated dependencies [[`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f), [`975b4fb`](https://github.com/adobe/spectrum-css/commit/975b4fb631d7203e772c2e879fbec610f933286f)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.14
+
+## 5.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 5.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 5.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 5.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 5.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 5.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 5.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.6
+
+## 5.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 5.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 5.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 5.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 5.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 5.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/fieldlabel@9.0.0-s2-foundations.0
+
## 4.1.7
### Patch Changes
diff --git a/components/progressbar/index.css b/components/progressbar/index.css
index d7eb060eb8c..c9b8f8f80d1 100644
--- a/components/progressbar/index.css
+++ b/components/progressbar/index.css
@@ -11,121 +11,23 @@
* governing permissions and limitations under the License.
*/
-.spectrum-ProgressBar {
- /* Static tokens */
- --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out);
- --spectrum-progressbar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000);
- --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100);
-
- --spectrum-progressbar-fill-size-indeterminate: 70%;
-
- /* --spectrum-global-dimension-static-size-2400 */
- --spectrum-progressbar-size-2400: 192px;
-
- /* --spectrum-global-dimension-static-size-2500 */
- --spectrum-progressbar-size-2500: 200px;
-
- /* --spectrum-global-dimension-static-size-2800 */
- --spectrum-progressbar-size-2800: 224px;
-
- /* Size */
- --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
- --spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100);
-
- --spectrum-progressbar-min-size: var(--spectrum-progress-bar-minimum-width);
- --spectrum-progressbar-max-size: var(--spectrum-progress-bar-maximum-width);
-
- --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-medium);
- --spectrum-progressbar-line-height: var(--spectrum-line-height-100);
-
- /* Spacing */
- --spectrum-progressbar-spacing-label-to-progressbar: var(--spectrum-spacing-75);
- --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-progressbar-spacing-label-to-text: var(--spectrum-spacing-200);
-
- /* Color */
- --spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default);
- --spectrum-progressbar-track-color: var(--spectrum-gray-300);
- --spectrum-progressbar-fill-color: var(--spectrum-accent-color-900);
- --spectrum-progressbar-fill-color-positive: var(--spectrum-positive-visual-color);
- --spectrum-progressbar-fill-color-notice: var(--spectrum-notice-visual-color);
- --spectrum-progressbar-fill-color-negative: var(--spectrum-negative-visual-color);
- --spectrum-progressbar-label-and-value-white: var(--spectrum-white);
- --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300);
- --spectrum-progressbar-fill-color-white: var(--spectrum-white);
-
- /* Meter */
- --spectrum-meter-min-width: var(--spectrum-meter-minimum-width);
- --spectrum-meter-max-width: var(--spectrum-meter-maximum-width);
- --spectrum-meter-inline-size: var(--spectrum-meter-default-width);
- --spectrum-meter-thickness-s: var(--spectrum-meter-thickness-small);
- --spectrum-meter-thickness-l: var(--spectrum-meter-thickness-large);
- --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text);
-}
-
-.spectrum-ProgressBar--sizeS,
-.spectrum-Meter--sizeS {
- --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
-
- --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
- --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small);
-
- --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-}
-
-.spectrum-ProgressBar--sizeM {
- --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
-
- --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
- --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
-
- --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-}
-
-.spectrum-ProgressBar--sizeL,
-.spectrum-Meter--sizeL {
- --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500);
-
- --spectrum-progressbar-font-size: var(--spectrum-font-size-100);
- --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
-
- --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
-}
-
-.spectrum-ProgressBar--sizeXL {
- --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800);
-
- --spectrum-progressbar-font-size: var(--spectrum-font-size-200);
- --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large);
-
- --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
-}
+@import "./themes/spectrum-two.css";
.spectrum-Meter {
--spectrum-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-inline-size));
--spectrum-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-max-width));
--spectrum-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-min-width));
- /* Meter only supports size S and L */
- &.spectrum-Meter--sizeS {
- --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-s);
- }
-
- &.spectrum-Meter--sizeL {
- --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-l);
- --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
- }
-
&.is-positive .spectrum-ProgressBar-fill {
- background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive)));
+ background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive)));
}
&.is-notice .spectrum-ProgressBar-fill {
- background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice)));
+ background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice)));
}
&.is-negative .spectrum-ProgressBar-fill {
- background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative)));
+ background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative)));
}
}
@@ -151,13 +53,13 @@
line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height));
+ color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color));
+
&:lang(ja),
&:lang(zh),
&:lang(ko) {
line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk));
}
-
- color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color));
}
/* Label */
@@ -270,9 +172,10 @@
@media (forced-colors: active) {
.spectrum-ProgressBar-track {
- forced-color-adjust: none;
--highcontrast-progressbar-fill-color: ButtonText;
--highcontrast-progressbar-track-color: ButtonFace;
+
+ forced-color-adjust: none;
border: 1px solid ButtonText;
}
}
diff --git a/components/progressbar/metadata/metadata.json b/components/progressbar/metadata/metadata.json
index 54140bf3880..9041d6f97f2 100644
--- a/components/progressbar/metadata/metadata.json
+++ b/components/progressbar/metadata/metadata.json
@@ -2,8 +2,6 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-Meter",
- ".spectrum-Meter--sizeL",
- ".spectrum-Meter--sizeS",
".spectrum-Meter.is-negative .spectrum-ProgressBar-fill",
".spectrum-Meter.is-notice .spectrum-ProgressBar-fill",
".spectrum-Meter.is-positive .spectrum-ProgressBar-fill",
@@ -114,26 +112,24 @@
"--spectrum-font-size-100",
"--spectrum-font-size-200",
"--spectrum-font-size-75",
- "--spectrum-gray-300",
+ "--spectrum-gray-200",
"--spectrum-line-height-100",
- "--spectrum-meter-default-width",
"--spectrum-meter-inline-size",
"--spectrum-meter-max-width",
"--spectrum-meter-maximum-width",
"--spectrum-meter-min-width",
"--spectrum-meter-minimum-width",
- "--spectrum-meter-thickness-l",
"--spectrum-meter-thickness-large",
- "--spectrum-meter-thickness-s",
"--spectrum-meter-thickness-small",
"--spectrum-meter-top-to-text",
+ "--spectrum-meter-width",
"--spectrum-negative-visual-color",
"--spectrum-neutral-content-color-default",
"--spectrum-notice-visual-color",
"--spectrum-positive-visual-color",
"--spectrum-spacing-200",
"--spectrum-spacing-75",
- "--spectrum-transparent-white-300",
+ "--spectrum-transparent-white-400",
"--spectrum-white"
],
"system-theme": [],
diff --git a/components/progressbar/metadata/meter.yml b/components/progressbar/metadata/meter.yml
deleted file mode 100644
index c04b96c7955..00000000000
--- a/components/progressbar/metadata/meter.yml
+++ /dev/null
@@ -1,114 +0,0 @@
-name: Meter
-description: |
- Meter is implemented using the [Progress bar](progressbar.html) component. Refer to the [Progress bar API docs](progressbar.html) for API details.
- Meter should be only used with `S` or `L` t-shirt sizes. [The Meter table of options](https://spectrum.adobe.com/page/meter/#Table-of-options) provides further details on which variants are available.
-
- | Previous size classname | New size classname |
- | ------------------------------- | --------------------------------- |
- | `.spectrum-ProgressBar--sizeS` | `.spectrum-Meter--sizeS` |
- | `.spectrum-ProgressBar--sizeL` | `.spectrum-Meter--sizeL` |
-SpectrumSiteSlug: https://spectrum.adobe.com/page/meter/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### spectrum-Meter class
- Meter now uses the class `spectrum-Meter` on the parent `div`
-examples:
- - id: meter-sizes
- name: Sizing
- markup: |
-
-
-
-
Storage Space
-
50%
-
-
-
-
-
-
-
Storage Space
-
80%
-
-
- - id: meter-colors
- name: Colors
- markup: |
-
-
-
Storage Space
-
50%
-
-
-
-
-
-
Storage Space
-
80%
-
-
-
-
-
-
Storage Space
-
90%
-
-
-
-
-
Storage Space
-
40%
-
-
-
- - id: meter-neutral
- name: Neutral
- markup: |
-
-
-
Storage Space
-
50%
-
-
-
- - id: meter-notice
- name: Notice
- markup: |
-
-
-
Storage Space
-
80%
-
-
-
- - id: meter-negative
- name: Negative
- markup: |
-
-
-
Storage Space
-
90%
-
-
diff --git a/components/progressbar/metadata/progressbar.yml b/components/progressbar/metadata/progressbar.yml
deleted file mode 100644
index 0d1cb0b47a9..00000000000
--- a/components/progressbar/metadata/progressbar.yml
+++ /dev/null
@@ -1,151 +0,0 @@
-name: Progress bar
-SpectrumSiteSlug: https://spectrum.adobe.com/page/progress-bar/
-status: Verified
-id: progressbar-m
-sections:
- - name: Migration Guide
- description: |
- ### Component renamed
- Bar loader is now known as Progress bar. Replace all `.spectrum-BarLoader*` classnames with `.spectrum-ProgressBar*`.
-
- ### T-shirt sizing
- Progress bar now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-ProgressBar--size*` class.
-
- ### Size classnames changed
- Previous size classnames map as follows:
-
- | Previous size classname | New size classname |
- | ------------------------------- | --------------------------------- |
- | `.spectrum-ProgressBar--small` | `.spectrum-ProgressBar--sizeS` |
- | `.spectrum-ProgressBar--large` | `.spectrum-ProgressBar--sizeM` |
-
- ### Label and percentage now use Field Label
- Progress bar now uses [Field label](fieldlabel.html) for its label and percentage. Add the appropriately sized Field label to match the t-shirt size of the Progress bar.
-examples:
- - id: progressbar-m
- name: Sizing
- markup: |
-
- - id: progressbar-m
- name: Top label (default)
- markup: |
-
- - id: progressbar-m
- name: Side label
- markup: |
-
- - id: progressbar-static-white
- name: Static White
- markup: |
-
- - id: progressbar-indeterminate-m
- name: Indeterminate
- markup: |
-
- - id: progressbar-indeterminate-m
- name: Indeterminate (with label)
- markup: |
-
- - id: progressbar-m
- name: Custom width
- markup: |
-
- - id: progressbar-m
- name: Custom width (side label)
- markup: |
-
diff --git a/components/progressbar/package.json b/components/progressbar/package.json
index 20e0b5f05c1..810ed747988 100644
--- a/components/progressbar/package.json
+++ b/components/progressbar/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/progressbar",
- "version": "4.1.7",
+ "version": "5.0.0-s2-foundations.15",
"description": "The Spectrum CSS progress bar component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/progressbar/stories/meter.stories.js b/components/progressbar/stories/meter.stories.js
index 69928bed336..da9e04072d6 100644
--- a/components/progressbar/stories/meter.stories.js
+++ b/components/progressbar/stories/meter.stories.js
@@ -1,4 +1,5 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import { size } from "@spectrum-css/preview/types";
import pkgJson from "../package.json";
import { MeterGroup } from "./meter.test.js";
import { default as ProgressBar } from "./progressbar.stories";
@@ -11,6 +12,7 @@ export default {
component: "ProgressBar",
argTypes: {
...ProgressBar.argTypes,
+ size: size(["s", "l"]),
fill: {
name: "Fill color",
type: { name: "string" },
@@ -22,7 +24,10 @@ export default {
control: "select",
},
},
- args: ProgressBar.args,
+ args: {
+ ...ProgressBar.args,
+ size: "s",
+ },
parameters: {
packageJson: pkgJson,
},
@@ -44,16 +49,3 @@ WithForcedColors.parameters = {
modes: disableDefaultModes
},
};
-
-export const StaticWhite = Default.bind({});
-StaticWhite.tags = ["!autodocs", "!dev"];
-StaticWhite.args = {
- staticColor: "white",
- label: "Loading your fonts, images, and icons",
- value: 50,
-};
-StaticWhite.parameters = {
- chromatic: {
- modes: disableDefaultModes
- },
-};
diff --git a/components/progressbar/stories/meter.template.js b/components/progressbar/stories/meter.template.js
index b79fc5cc255..a6894a04c2f 100644
--- a/components/progressbar/stories/meter.template.js
+++ b/components/progressbar/stories/meter.template.js
@@ -1,19 +1,24 @@
import { Template as ProgressBar } from "./template.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
customClasses = [],
fill,
size = "s",
...item
-} = {}, context = {}) => ProgressBar({
- customClasses: [
- ...customClasses,
- "spectrum-Meter",
- typeof size !== "undefined" ? `spectrum-Meter--size${size.toUpperCase()}` : null,
- typeof fill !== "undefined" ? `is-${fill}` : null,
- ].filter(Boolean),
- size,
- ...item,
-}, context);
+} = {}, context = {}) => {
+ return ProgressBar({
+ customClasses: [
+ ...customClasses,
+ "spectrum-Meter",
+ typeof size !== "undefined" ? `spectrum-Meter--size${size.toUpperCase()}` : null,
+ typeof fill !== "undefined" ? `is-${fill}` : null,
+ ].filter(Boolean),
+ size,
+ ...item,
+ }, context);
+};
diff --git a/components/progressbar/stories/meter.test.js b/components/progressbar/stories/meter.test.js
index 32808ae31fd..8da83a03af7 100644
--- a/components/progressbar/stories/meter.test.js
+++ b/components/progressbar/stories/meter.test.js
@@ -20,13 +20,17 @@ export const MeterGroup = Variants({
testHeading: "Text overflow",
label: "Storage space remaining for XYZ user"
},
- /* The gradient story below supports linear-gradients used by Express. For use cases that require a custom
+ /* The gradient story below supports linear-gradients used by Express. For use cases that require a custom
linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS.
*/
{
- testHeading: "Gradient support",
+ testHeading: "Gradient support",
trackFill: "linear-gradient(to right, hotpink, orange)",
progressBarFill: "linear-gradient(to left, teal, purple)",
- }
+ },
+ {
+ testHeading: "Static white",
+ staticColor: "white",
+ },
],
});
diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js
index 612f485de1a..bd6acfb7805 100644
--- a/components/progressbar/stories/progressbar.stories.js
+++ b/components/progressbar/stories/progressbar.stories.js
@@ -73,16 +73,3 @@ WithForcedColors.parameters = {
modes: disableDefaultModes
},
};
-
-export const StaticWhite = ProgressBarGroup.bind({});
-StaticWhite.tags = ["!autodocs", "!dev"];
-StaticWhite.args = {
- staticColor: "white",
- label: "Loading your fonts, images, and icons",
- value: 50,
-};
-StaticWhite.parameters = {
- chromatic: {
- modes: disableDefaultModes
- },
-};
diff --git a/components/progressbar/stories/progressbar.test.js b/components/progressbar/stories/progressbar.test.js
index aad8b120026..b931385eef4 100644
--- a/components/progressbar/stories/progressbar.test.js
+++ b/components/progressbar/stories/progressbar.test.js
@@ -15,7 +15,7 @@ export const ProgressBarGroup = Variants({
testHeading: "Text overflow",
label: "Storage space remaining for XYZ user"
},
- /* The gradient story below supports linear-gradients used by Express. For use cases that require a custom
+ /* The gradient story below supports linear-gradients used by Express. For use cases that require a custom
linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS.
*/
{
@@ -23,6 +23,10 @@ export const ProgressBarGroup = Variants({
trackFill: "linear-gradient(to right, hotpink, orange)",
progressBarFill: "linear-gradient(to left, teal, purple)",
},
+ {
+ testHeading: "Static white",
+ staticColor: "white",
+ },
],
stateData: [
{
diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js
index 4fdd746492e..9a5da141e72 100644
--- a/components/progressbar/stories/template.js
+++ b/components/progressbar/stories/template.js
@@ -6,6 +6,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { capitalize } from "lodash-es";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-ProgressBar",
@@ -20,7 +23,8 @@ export const Template = ({
progressBarFill,
customStyles = {},
size = "m",
-} = {}, context = {}) => html`
+} = {}, context = {}) => {
+ return html`
-`;
+ `;
+};
diff --git a/components/progressbar/themes/express.css b/components/progressbar/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/progressbar/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/progressbar/themes/spectrum-two.css b/components/progressbar/themes/spectrum-two.css
new file mode 100644
index 00000000000..be63cf8e57b
--- /dev/null
+++ b/components/progressbar/themes/spectrum-two.css
@@ -0,0 +1,117 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-ProgressBar {
+ /* Static tokens */
+ --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out);
+ --spectrum-progressbar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000);
+ --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100);
+
+ --spectrum-progressbar-fill-size-indeterminate: 70%;
+
+ /* --spectrum-global-dimension-static-size-2400 */
+ --spectrum-progressbar-size-2400: 192px;
+
+ /* --spectrum-global-dimension-static-size-2500 */
+ --spectrum-progressbar-size-2500: 200px;
+
+ /* --spectrum-global-dimension-static-size-2800 */
+ --spectrum-progressbar-size-2800: 224px;
+
+ /* Size */
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
+ --spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+ --spectrum-progressbar-min-size: var(--spectrum-progress-bar-minimum-width);
+ --spectrum-progressbar-max-size: var(--spectrum-progress-bar-maximum-width);
+
+ --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-medium);
+ --spectrum-progressbar-line-height: var(--spectrum-line-height-100);
+
+ /* Spacing */
+ --spectrum-progressbar-spacing-label-to-progressbar: var(--spectrum-spacing-75);
+ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-progressbar-spacing-label-to-text: var(--spectrum-spacing-200);
+
+ /* Color */
+ --spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-progressbar-track-color: var(--spectrum-gray-200);
+ --spectrum-progressbar-fill-color: var(--spectrum-accent-color-900);
+ --spectrum-progressbar-fill-color-positive: var(--spectrum-positive-visual-color);
+ --spectrum-progressbar-fill-color-notice: var(--spectrum-notice-visual-color);
+ --spectrum-progressbar-fill-color-negative: var(--spectrum-negative-visual-color);
+ --spectrum-progressbar-label-and-value-white: var(--spectrum-white);
+ --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400);
+ --spectrum-progressbar-fill-color-white: var(--spectrum-white);
+ }
+
+ .spectrum-ProgressBar--sizeS {
+ --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
+
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
+ --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small);
+
+ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
+ }
+
+ .spectrum-ProgressBar--sizeM {
+ --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
+
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
+ --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
+
+ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
+ }
+
+ .spectrum-ProgressBar--sizeL {
+ --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500);
+
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-100);
+ --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
+
+ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
+ }
+
+ .spectrum-ProgressBar--sizeXL {
+ --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800);
+
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-200);
+ --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large);
+
+ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
+ }
+
+ .spectrum-Meter {
+ /* Meter */
+ --spectrum-meter-min-width: var(--spectrum-meter-minimum-width);
+ --spectrum-meter-max-width: var(--spectrum-meter-maximum-width);
+ --spectrum-meter-inline-size: var(--spectrum-meter-width);
+ --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text);
+
+ /* Meter only supports size S and L */
+ &.spectrum-Meter--sizeS {
+ --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-small);
+ --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
+ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
+ }
+
+ &.spectrum-Meter--sizeL {
+ --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-large);
+ --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500);
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-100);
+ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
+ }
+ }
+}
diff --git a/components/progressbar/themes/spectrum.css b/components/progressbar/themes/spectrum.css
new file mode 100644
index 00000000000..83f143f6141
--- /dev/null
+++ b/components/progressbar/themes/spectrum.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-ProgressBar {
+ --spectrum-progressbar-track-color: var(--spectrum-gray-300);
+ --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300);
+ }
+}
diff --git a/components/progresscircle/CHANGELOG.md b/components/progresscircle/CHANGELOG.md
index 99b4d14ab8b..51cd7a85fad 100644
--- a/components/progresscircle/CHANGELOG.md
+++ b/components/progresscircle/CHANGELOG.md
@@ -1,5 +1,161 @@
# Change Log
+## 4.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 3.1.4
### Patch Changes
diff --git a/components/progresscircle/animation.css b/components/progresscircle/animation.css
deleted file mode 100644
index 176d4da4c17..00000000000
--- a/components/progresscircle/animation.css
+++ /dev/null
@@ -1,510 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum-ProgressCircle--indeterminate-fill-submask-2 {
- animation: 1s infinite linear spectrum-fill-mask-2;
-}
-
-@keyframes spectrum-fill-mask-1 {
- 0% {
- transform: rotate(90deg);
- }
-
- 1.69% {
- transform: rotate(72.3deg);
- }
-
- 3.39% {
- transform: rotate(55.5deg);
- }
-
- 5.08% {
- transform: rotate(40.3deg);
- }
-
- 6.78% {
- transform: rotate(25deg);
- }
-
- 8.47% {
- transform: rotate(10.6deg);
- }
-
- 10.17% {
- transform: rotate(0deg);
- }
-
- 11.86% {
- transform: rotate(0deg);
- }
-
- 13.56% {
- transform: rotate(0deg);
- }
-
- 15.25% {
- transform: rotate(0deg);
- }
-
- 16.95% {
- transform: rotate(0deg);
- }
-
- 18.64% {
- transform: rotate(0deg);
- }
-
- 20.34% {
- transform: rotate(0deg);
- }
-
- 22.03% {
- transform: rotate(0deg);
- }
-
- 23.73% {
- transform: rotate(0deg);
- }
-
- 25.42% {
- transform: rotate(0deg);
- }
-
- 27.12% {
- transform: rotate(0deg);
- }
-
- 28.81% {
- transform: rotate(0deg);
- }
-
- 30.51% {
- transform: rotate(0deg);
- }
-
- 32.2% {
- transform: rotate(0deg);
- }
-
- 33.9% {
- transform: rotate(0deg);
- }
-
- 35.59% {
- transform: rotate(0deg);
- }
-
- 37.29% {
- transform: rotate(0deg);
- }
-
- 38.98% {
- transform: rotate(0deg);
- }
-
- 40.68% {
- transform: rotate(0deg);
- }
-
- 42.37% {
- transform: rotate(5.3deg);
- }
-
- 44.07% {
- transform: rotate(13.4deg);
- }
-
- 45.76% {
- transform: rotate(20.6deg);
- }
-
- 47.46% {
- transform: rotate(29deg);
- }
-
- 49.15% {
- transform: rotate(36.5deg);
- }
-
- 50.85% {
- transform: rotate(42.6deg);
- }
-
- 52.54% {
- transform: rotate(48.8deg);
- }
-
- 54.24% {
- transform: rotate(54.2deg);
- }
-
- 55.93% {
- transform: rotate(59.4deg);
- }
-
- 57.63% {
- transform: rotate(63.2deg);
- }
-
- 59.32% {
- transform: rotate(67.2deg);
- }
-
- 61.02% {
- transform: rotate(70.8deg);
- }
-
- 62.71% {
- transform: rotate(73.8deg);
- }
-
- 64.41% {
- transform: rotate(76.2deg);
- }
-
- 66.1% {
- transform: rotate(78.7deg);
- }
-
- 67.8% {
- transform: rotate(80.6deg);
- }
-
- 69.49% {
- transform: rotate(82.6deg);
- }
-
- 71.19% {
- transform: rotate(83.7deg);
- }
-
- 72.88% {
- transform: rotate(85deg);
- }
-
- 74.58% {
- transform: rotate(86.3deg);
- }
-
- 76.27% {
- transform: rotate(87deg);
- }
-
- 77.97% {
- transform: rotate(87.7deg);
- }
-
- 79.66% {
- transform: rotate(88.3deg);
- }
-
- 81.36% {
- transform: rotate(88.6deg);
- }
-
- 83.05% {
- transform: rotate(89.2deg);
- }
-
- 84.75% {
- transform: rotate(89.2deg);
- }
-
- 86.44% {
- transform: rotate(89.5deg);
- }
-
- 88.14% {
- transform: rotate(89.9deg);
- }
-
- 89.83% {
- transform: rotate(89.7deg);
- }
-
- 91.53% {
- transform: rotate(90.1deg);
- }
-
- 93.22% {
- transform: rotate(90.2deg);
- }
-
- 94.92% {
- transform: rotate(90.1deg);
- }
-
- 96.61% {
- transform: rotate(90deg);
- }
-
- 98.31% {
- transform: rotate(89.8deg);
- }
-
- 100% {
- transform: rotate(90deg);
- }
-}
-
-@keyframes spectrum-fill-mask-2 {
- 0% {
- transform: rotate(180deg);
- }
-
- 1.69% {
- transform: rotate(180deg);
- }
-
- 3.39% {
- transform: rotate(180deg);
- }
-
- 5.08% {
- transform: rotate(180deg);
- }
-
- 6.78% {
- transform: rotate(180deg);
- }
-
- 8.47% {
- transform: rotate(180deg);
- }
-
- 10.17% {
- transform: rotate(179.2deg);
- }
-
- 11.86% {
- transform: rotate(164deg);
- }
-
- 13.56% {
- transform: rotate(151.8deg);
- }
-
- 15.25% {
- transform: rotate(140.8deg);
- }
-
- 16.95% {
- transform: rotate(130.3deg);
- }
-
- 18.64% {
- transform: rotate(120.4deg);
- }
-
- 20.34% {
- transform: rotate(110.8deg);
- }
-
- 22.03% {
- transform: rotate(101.6deg);
- }
-
- 23.73% {
- transform: rotate(93.5deg);
- }
-
- 25.42% {
- transform: rotate(85.4deg);
- }
-
- 27.12% {
- transform: rotate(78.1deg);
- }
-
- 28.81% {
- transform: rotate(71.2deg);
- }
-
- 30.51% {
- transform: rotate(89.1deg);
- }
-
- 32.2% {
- transform: rotate(105.5deg);
- }
-
- 33.9% {
- transform: rotate(121.3deg);
- }
-
- 35.59% {
- transform: rotate(135.5deg);
- }
-
- 37.29% {
- transform: rotate(148.4deg);
- }
-
- 38.98% {
- transform: rotate(161deg);
- }
-
- 40.68% {
- transform: rotate(173.5deg);
- }
-
- 42.37% {
- transform: rotate(180deg);
- }
-
- 44.07% {
- transform: rotate(180deg);
- }
-
- 45.76% {
- transform: rotate(180deg);
- }
-
- 47.46% {
- transform: rotate(180deg);
- }
-
- 49.15% {
- transform: rotate(180deg);
- }
-
- 50.85% {
- transform: rotate(180deg);
- }
-
- 52.54% {
- transform: rotate(180deg);
- }
-
- 54.24% {
- transform: rotate(180deg);
- }
-
- 55.93% {
- transform: rotate(180deg);
- }
-
- 57.63% {
- transform: rotate(180deg);
- }
-
- 59.32% {
- transform: rotate(180deg);
- }
-
- 61.02% {
- transform: rotate(180deg);
- }
-
- 62.71% {
- transform: rotate(180deg);
- }
-
- 64.41% {
- transform: rotate(180deg);
- }
-
- 66.1% {
- transform: rotate(180deg);
- }
-
- 67.8% {
- transform: rotate(180deg);
- }
-
- 69.49% {
- transform: rotate(180deg);
- }
-
- 71.19% {
- transform: rotate(180deg);
- }
-
- 72.88% {
- transform: rotate(180deg);
- }
-
- 74.58% {
- transform: rotate(180deg);
- }
-
- 76.27% {
- transform: rotate(180deg);
- }
-
- 77.97% {
- transform: rotate(180deg);
- }
-
- 79.66% {
- transform: rotate(180deg);
- }
-
- 81.36% {
- transform: rotate(180deg);
- }
-
- 83.05% {
- transform: rotate(180deg);
- }
-
- 84.75% {
- transform: rotate(180deg);
- }
-
- 86.44% {
- transform: rotate(180deg);
- }
-
- 88.14% {
- transform: rotate(180deg);
- }
-
- 89.83% {
- transform: rotate(180deg);
- }
-
- 91.53% {
- transform: rotate(180deg);
- }
-
- 93.22% {
- transform: rotate(180deg);
- }
-
- 94.92% {
- transform: rotate(180deg);
- }
-
- 96.61% {
- transform: rotate(180deg);
- }
-
- 98.31% {
- transform: rotate(180deg);
- }
-
- 100% {
- transform: rotate(180deg);
- }
-}
-
-@keyframes spectrum-fills-rotate {
- 0% {
- transform: rotate(-90deg);
- }
-
- 100% {
- transform: rotate(270deg);
- }
-}
diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css
index 4e48312a866..0ca643da6ca 100644
--- a/components/progresscircle/index.css
+++ b/components/progresscircle/index.css
@@ -11,43 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "animation.css";
-
-.spectrum-ProgressCircle {
- /* circle unfilled border color */
- --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300);
-
- /* circle progress fill border color */
- --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default);
-
- /* over background unfilled border color */
- --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300);
-
- /* over background progress fill border color */
- --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900);
-
- /* default size and thickness */
- --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
- --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
-
- /* track border style */
- --spectrum-progress-circle-track-border-style: solid;
-}
-
-.spectrum-ProgressCircle--small {
- --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
- --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small);
-}
-
-.spectrum-ProgressCircle--medium {
- --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
- --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
-}
-
-.spectrum-ProgressCircle--large {
- --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
- --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large);
-}
+@import "./themes/spectrum-two.css";
/* windows high contrast mode */
@media (forced-colors: active) {
@@ -165,3 +129,501 @@
animation: 1s infinite linear spectrum-fill-mask-2;
}
}
+
+.spectrum-ProgressCircle--indeterminate-fill-submask-2 {
+ animation: 1s infinite linear spectrum-fill-mask-2;
+}
+
+@keyframes spectrum-fill-mask-1 {
+ 0% {
+ transform: rotate(90deg);
+ }
+
+ 1.69% {
+ transform: rotate(72.3deg);
+ }
+
+ 3.39% {
+ transform: rotate(55.5deg);
+ }
+
+ 5.08% {
+ transform: rotate(40.3deg);
+ }
+
+ 6.78% {
+ transform: rotate(25deg);
+ }
+
+ 8.47% {
+ transform: rotate(10.6deg);
+ }
+
+ 10.17% {
+ transform: rotate(0deg);
+ }
+
+ 11.86% {
+ transform: rotate(0deg);
+ }
+
+ 13.56% {
+ transform: rotate(0deg);
+ }
+
+ 15.25% {
+ transform: rotate(0deg);
+ }
+
+ 16.95% {
+ transform: rotate(0deg);
+ }
+
+ 18.64% {
+ transform: rotate(0deg);
+ }
+
+ 20.34% {
+ transform: rotate(0deg);
+ }
+
+ 22.03% {
+ transform: rotate(0deg);
+ }
+
+ 23.73% {
+ transform: rotate(0deg);
+ }
+
+ 25.42% {
+ transform: rotate(0deg);
+ }
+
+ 27.12% {
+ transform: rotate(0deg);
+ }
+
+ 28.81% {
+ transform: rotate(0deg);
+ }
+
+ 30.51% {
+ transform: rotate(0deg);
+ }
+
+ 32.2% {
+ transform: rotate(0deg);
+ }
+
+ 33.9% {
+ transform: rotate(0deg);
+ }
+
+ 35.59% {
+ transform: rotate(0deg);
+ }
+
+ 37.29% {
+ transform: rotate(0deg);
+ }
+
+ 38.98% {
+ transform: rotate(0deg);
+ }
+
+ 40.68% {
+ transform: rotate(0deg);
+ }
+
+ 42.37% {
+ transform: rotate(5.3deg);
+ }
+
+ 44.07% {
+ transform: rotate(13.4deg);
+ }
+
+ 45.76% {
+ transform: rotate(20.6deg);
+ }
+
+ 47.46% {
+ transform: rotate(29deg);
+ }
+
+ 49.15% {
+ transform: rotate(36.5deg);
+ }
+
+ 50.85% {
+ transform: rotate(42.6deg);
+ }
+
+ 52.54% {
+ transform: rotate(48.8deg);
+ }
+
+ 54.24% {
+ transform: rotate(54.2deg);
+ }
+
+ 55.93% {
+ transform: rotate(59.4deg);
+ }
+
+ 57.63% {
+ transform: rotate(63.2deg);
+ }
+
+ 59.32% {
+ transform: rotate(67.2deg);
+ }
+
+ 61.02% {
+ transform: rotate(70.8deg);
+ }
+
+ 62.71% {
+ transform: rotate(73.8deg);
+ }
+
+ 64.41% {
+ transform: rotate(76.2deg);
+ }
+
+ 66.1% {
+ transform: rotate(78.7deg);
+ }
+
+ 67.8% {
+ transform: rotate(80.6deg);
+ }
+
+ 69.49% {
+ transform: rotate(82.6deg);
+ }
+
+ 71.19% {
+ transform: rotate(83.7deg);
+ }
+
+ 72.88% {
+ transform: rotate(85deg);
+ }
+
+ 74.58% {
+ transform: rotate(86.3deg);
+ }
+
+ 76.27% {
+ transform: rotate(87deg);
+ }
+
+ 77.97% {
+ transform: rotate(87.7deg);
+ }
+
+ 79.66% {
+ transform: rotate(88.3deg);
+ }
+
+ 81.36% {
+ transform: rotate(88.6deg);
+ }
+
+ 83.05% {
+ transform: rotate(89.2deg);
+ }
+
+ 84.75% {
+ transform: rotate(89.2deg);
+ }
+
+ 86.44% {
+ transform: rotate(89.5deg);
+ }
+
+ 88.14% {
+ transform: rotate(89.9deg);
+ }
+
+ 89.83% {
+ transform: rotate(89.7deg);
+ }
+
+ 91.53% {
+ transform: rotate(90.1deg);
+ }
+
+ 93.22% {
+ transform: rotate(90.2deg);
+ }
+
+ 94.92% {
+ transform: rotate(90.1deg);
+ }
+
+ 96.61% {
+ transform: rotate(90deg);
+ }
+
+ 98.31% {
+ transform: rotate(89.8deg);
+ }
+
+ 100% {
+ transform: rotate(90deg);
+ }
+}
+
+@keyframes spectrum-fill-mask-2 {
+ 0% {
+ transform: rotate(180deg);
+ }
+
+ 1.69% {
+ transform: rotate(180deg);
+ }
+
+ 3.39% {
+ transform: rotate(180deg);
+ }
+
+ 5.08% {
+ transform: rotate(180deg);
+ }
+
+ 6.78% {
+ transform: rotate(180deg);
+ }
+
+ 8.47% {
+ transform: rotate(180deg);
+ }
+
+ 10.17% {
+ transform: rotate(179.2deg);
+ }
+
+ 11.86% {
+ transform: rotate(164deg);
+ }
+
+ 13.56% {
+ transform: rotate(151.8deg);
+ }
+
+ 15.25% {
+ transform: rotate(140.8deg);
+ }
+
+ 16.95% {
+ transform: rotate(130.3deg);
+ }
+
+ 18.64% {
+ transform: rotate(120.4deg);
+ }
+
+ 20.34% {
+ transform: rotate(110.8deg);
+ }
+
+ 22.03% {
+ transform: rotate(101.6deg);
+ }
+
+ 23.73% {
+ transform: rotate(93.5deg);
+ }
+
+ 25.42% {
+ transform: rotate(85.4deg);
+ }
+
+ 27.12% {
+ transform: rotate(78.1deg);
+ }
+
+ 28.81% {
+ transform: rotate(71.2deg);
+ }
+
+ 30.51% {
+ transform: rotate(89.1deg);
+ }
+
+ 32.2% {
+ transform: rotate(105.5deg);
+ }
+
+ 33.9% {
+ transform: rotate(121.3deg);
+ }
+
+ 35.59% {
+ transform: rotate(135.5deg);
+ }
+
+ 37.29% {
+ transform: rotate(148.4deg);
+ }
+
+ 38.98% {
+ transform: rotate(161deg);
+ }
+
+ 40.68% {
+ transform: rotate(173.5deg);
+ }
+
+ 42.37% {
+ transform: rotate(180deg);
+ }
+
+ 44.07% {
+ transform: rotate(180deg);
+ }
+
+ 45.76% {
+ transform: rotate(180deg);
+ }
+
+ 47.46% {
+ transform: rotate(180deg);
+ }
+
+ 49.15% {
+ transform: rotate(180deg);
+ }
+
+ 50.85% {
+ transform: rotate(180deg);
+ }
+
+ 52.54% {
+ transform: rotate(180deg);
+ }
+
+ 54.24% {
+ transform: rotate(180deg);
+ }
+
+ 55.93% {
+ transform: rotate(180deg);
+ }
+
+ 57.63% {
+ transform: rotate(180deg);
+ }
+
+ 59.32% {
+ transform: rotate(180deg);
+ }
+
+ 61.02% {
+ transform: rotate(180deg);
+ }
+
+ 62.71% {
+ transform: rotate(180deg);
+ }
+
+ 64.41% {
+ transform: rotate(180deg);
+ }
+
+ 66.1% {
+ transform: rotate(180deg);
+ }
+
+ 67.8% {
+ transform: rotate(180deg);
+ }
+
+ 69.49% {
+ transform: rotate(180deg);
+ }
+
+ 71.19% {
+ transform: rotate(180deg);
+ }
+
+ 72.88% {
+ transform: rotate(180deg);
+ }
+
+ 74.58% {
+ transform: rotate(180deg);
+ }
+
+ 76.27% {
+ transform: rotate(180deg);
+ }
+
+ 77.97% {
+ transform: rotate(180deg);
+ }
+
+ 79.66% {
+ transform: rotate(180deg);
+ }
+
+ 81.36% {
+ transform: rotate(180deg);
+ }
+
+ 83.05% {
+ transform: rotate(180deg);
+ }
+
+ 84.75% {
+ transform: rotate(180deg);
+ }
+
+ 86.44% {
+ transform: rotate(180deg);
+ }
+
+ 88.14% {
+ transform: rotate(180deg);
+ }
+
+ 89.83% {
+ transform: rotate(180deg);
+ }
+
+ 91.53% {
+ transform: rotate(180deg);
+ }
+
+ 93.22% {
+ transform: rotate(180deg);
+ }
+
+ 94.92% {
+ transform: rotate(180deg);
+ }
+
+ 96.61% {
+ transform: rotate(180deg);
+ }
+
+ 98.31% {
+ transform: rotate(180deg);
+ }
+
+ 100% {
+ transform: rotate(180deg);
+ }
+}
+
+@keyframes spectrum-fills-rotate {
+ 0% {
+ transform: rotate(-90deg);
+ }
+
+ 100% {
+ transform: rotate(270deg);
+ }
+}
diff --git a/components/progresscircle/metadata/metadata.json b/components/progresscircle/metadata/metadata.json
index cc43dfd0c63..1d3fe3b9642 100644
--- a/components/progresscircle/metadata/metadata.json
+++ b/components/progresscircle/metadata/metadata.json
@@ -106,9 +106,9 @@
],
"global": [
"--spectrum-accent-content-color-default",
- "--spectrum-gray-300",
- "--spectrum-transparent-white-300",
- "--spectrum-transparent-white-900"
+ "--spectrum-gray-200",
+ "--spectrum-transparent-white-1000",
+ "--spectrum-transparent-white-400"
],
"system-theme": [],
"passthroughs": [],
diff --git a/components/progresscircle/metadata/progresscircle.yml b/components/progresscircle/metadata/progresscircle.yml
deleted file mode 100644
index 3a421c35475..00000000000
--- a/components/progresscircle/metadata/progresscircle.yml
+++ /dev/null
@@ -1,236 +0,0 @@
-name: Progress circle
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/progress-circle/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Component renamed
- Circle loader is now known as Progress circle. Replace all `.spectrum-CircleLoader*` classnames with `.spectrum-ProgressCircle*`.
-examples:
- - id: progresscircle-sizes
- name: Standard
- markup: |
-
-
-
- - id: progresscircle-indeterminate
- name: Indeterminate
- markup: |
-
-
- - id: progresscircle-static-white
- name: Static White
- markup: |
-
diff --git a/components/progresscircle/package.json b/components/progresscircle/package.json
index 6e579a85ee8..ce4a39c5003 100644
--- a/components/progresscircle/package.json
+++ b/components/progresscircle/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/progresscircle",
- "version": "3.1.4",
+ "version": "4.0.0-s2-foundations.13",
"description": "The Spectrum CSS progress circle component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js
index 65b5464342b..049991c8e5a 100644
--- a/components/progresscircle/stories/progresscircle.stories.js
+++ b/components/progresscircle/stories/progresscircle.stories.js
@@ -44,18 +44,6 @@ WithForcedColors.parameters = {
},
};
-export const StaticWhite = ProgressCircleGroup.bind({});
-StaticWhite.tags = ["!autodocs", "!dev"];
-StaticWhite.storyName = "Static white";
-StaticWhite.args = {
- staticColor: "white",
-};
-StaticWhite.parameters = {
- chromatic: {
- modes: disableDefaultModes,
- },
-};
-
// ********* DOCS ONLY ********* //
export const Sizing = (args, context) => Sizes({
@@ -107,4 +95,4 @@ StaticWhiteIndeterminate.args = {
};
StaticWhiteIndeterminate.parameters = {
chromatic: { disableSnapshot: true },
-};
\ No newline at end of file
+};
diff --git a/components/progresscircle/stories/progresscircle.test.js b/components/progresscircle/stories/progresscircle.test.js
index 7a3ed9c665b..26c9d8e078c 100644
--- a/components/progresscircle/stories/progresscircle.test.js
+++ b/components/progresscircle/stories/progresscircle.test.js
@@ -7,6 +7,10 @@ export const ProgressCircleGroup = Variants({
{
testHeading: "Default",
},
+ {
+ testHeading: "Static white",
+ staticColor: "white",
+ },
],
stateData: [
{
diff --git a/components/progresscircle/stories/template.js b/components/progresscircle/stories/template.js
index a0fa4486e8b..2e27221f91a 100644
--- a/components/progresscircle/stories/template.js
+++ b/components/progresscircle/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
id = getRandomId("progress-circle"),
@@ -15,7 +18,7 @@ export const Template = ({
size = "m",
staticColor,
isIndeterminate = false,
-}) => {
+} = {}) => {
let sizeClassName = "medium";
switch (size) {
case "s":
diff --git a/components/progresscircle/themes/express.css b/components/progresscircle/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/progresscircle/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/progresscircle/themes/spectrum-two.css b/components/progresscircle/themes/spectrum-two.css
new file mode 100644
index 00000000000..ca22544163d
--- /dev/null
+++ b/components/progresscircle/themes/spectrum-two.css
@@ -0,0 +1,50 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-ProgressCircle {
+ /* circle unfilled border color */
+ --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200);
+
+ /* circle progress fill border color */
+ --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default);
+
+ /* over background unfilled border color */
+ --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400);
+
+ /* over background progress fill border color */
+ --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000);
+
+ /* default size and thickness */
+ --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
+ --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
+
+ /* track border style */
+ --spectrum-progress-circle-track-border-style: solid;
+ }
+
+ .spectrum-ProgressCircle--small {
+ --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
+ --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small);
+ }
+
+ .spectrum-ProgressCircle--medium {
+ --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
+ --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
+ }
+
+ .spectrum-ProgressCircle--large {
+ --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
+ --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large);
+ }
+}
diff --git a/components/progresscircle/themes/spectrum.css b/components/progresscircle/themes/spectrum.css
new file mode 100644
index 00000000000..0a4fd6ef490
--- /dev/null
+++ b/components/progresscircle/themes/spectrum.css
@@ -0,0 +1,27 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-ProgressCircle {
+ /* circle unfilled border color */
+ --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300);
+
+ --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300);
+ --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900);
+ }
+}
diff --git a/components/radio/CHANGELOG.md b/components/radio/CHANGELOG.md
index 268f7690dc1..3892e5d1b5a 100644
--- a/components/radio/CHANGELOG.md
+++ b/components/radio/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 10.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 10.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 10.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 10.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 10.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 10.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 10.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 10.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 10.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 10.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 10.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 10.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 10.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 10.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 9.2.4
### Patch Changes
diff --git a/components/radio/index.css b/components/radio/index.css
index 79bb71d94c6..4ad83e08ae9 100644
--- a/components/radio/index.css
+++ b/components/radio/index.css
@@ -11,7 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
/*
* Radio:
@@ -19,113 +19,6 @@
* ::after is to style the focus ring
*/
-.spectrum-Radio {
- /* state colors for all themes */
- --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default);
- --spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- /* focus ring all themes */
- --spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- /* disabled all themes */
- --spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color);
- --spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color);
-
- /* emphasized state colors selection indicator all themes */
- --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
- --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
- --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
- --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
-
- /* selection indicator all themes */
- --spectrum-radio-border-width: var(--spectrum-border-width-200);
- --spectrum-radio-button-background-color: var(--spectrum-gray-75);
-
- /* checked selection indicator */
- --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
- --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
- --spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
- --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
-
- /* spacing all themes */
- --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
- --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-
- /* text styles all themes */
- --spectrum-radio-font-size: var(--spectrum-font-size-100);
- --spectrum-radio-line-height: var(--spectrum-line-height-100);
-
- /* animation all themes */
- --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100);
-
- /* CJK language support all themes */
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
- }
-
- /* default radio size for no t-shirt size */
- --spectrum-radio-height: var(--spectrum-component-height-100);
- --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
-
- /* default radio spacing for no t-shirt size */
- --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
-}
-
-.spectrum-Radio--sizeS {
- --spectrum-radio-height: var(--spectrum-component-height-75);
- --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small);
-
- --spectrum-radio-text-to-control: var(--spectrum-text-to-control-75);
- --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
- --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-small);
-
- --spectrum-radio-font-size: var(--spectrum-font-size-75);
-}
-
-.spectrum-Radio--sizeM {
- --spectrum-radio-height: var(--spectrum-component-height-100);
- --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
-
- --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
- --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
- --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
-
- --spectrum-radio-font-size: var(--spectrum-font-size-100);
-}
-
-.spectrum-Radio--sizeL {
- --spectrum-radio-height: var(--spectrum-component-height-200);
- --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large);
-
- --spectrum-radio-text-to-control: var(--spectrum-text-to-control-200);
- --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-200);
- --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
- --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-large);
-
- --spectrum-radio-font-size: var(--spectrum-font-size-200);
-}
-
-.spectrum-Radio--sizeXL {
- --spectrum-radio-height: var(--spectrum-component-height-300);
- --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-extra-large);
-
- --spectrum-radio-text-to-control: var(--spectrum-text-to-control-300);
- --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-300);
- --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
- --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large);
-
- --spectrum-radio-font-size: var(--spectrum-font-size-300);
-}
-
/* windows high contrast mode */
@media (forced-colors: active) {
.spectrum-Radio {
@@ -253,9 +146,9 @@
}
.spectrum-Radio-label,
- /* ensure disabled readonly has normal text color */
- & .spectrum-Radio-input:disabled ~ .spectrum-Radio-label,
- & .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label {
+ /* ensure disabled readonly has normal text color */
+ & .spectrum-Radio-input:disabled ~ .spectrum-Radio-label,
+ & .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label {
margin-inline-start: auto;
color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
}
@@ -376,6 +269,7 @@
.spectrum-Radio-button {
position: relative;
+
box-sizing: border-box;
inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
diff --git a/components/radio/metadata/metadata.json b/components/radio/metadata/metadata.json
index 31fd8171138..2f1cf303e13 100644
--- a/components/radio/metadata/metadata.json
+++ b/components/radio/metadata/metadata.json
@@ -151,11 +151,10 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
+ "--spectrum-gray-50",
"--spectrum-gray-600",
"--spectrum-gray-700",
- "--spectrum-gray-75",
"--spectrum-gray-800",
- "--spectrum-gray-900",
"--spectrum-line-height-100",
"--spectrum-neutral-background-color-selected-default",
"--spectrum-neutral-background-color-selected-down",
@@ -170,16 +169,7 @@
"--spectrum-text-to-control-300",
"--spectrum-text-to-control-75"
],
- "system-theme": [
- "--system-spectrum-radio-button-border-color-default",
- "--system-spectrum-radio-button-border-color-down",
- "--system-spectrum-radio-button-border-color-focus",
- "--system-spectrum-radio-button-border-color-hover",
- "--system-spectrum-radio-emphasized-button-checked-border-color-default",
- "--system-spectrum-radio-emphasized-button-checked-border-color-down",
- "--system-spectrum-radio-emphasized-button-checked-border-color-focus",
- "--system-spectrum-radio-emphasized-button-checked-border-color-hover"
- ],
+ "system-theme": [],
"passthroughs": [],
"high-contrast": [
"--highcontrast-radio-button-background-color",
diff --git a/components/radio/metadata/radio.yml b/components/radio/metadata/radio.yml
deleted file mode 100644
index 3de30ce5942..00000000000
--- a/components/radio/metadata/radio.yml
+++ /dev/null
@@ -1,242 +0,0 @@
-name: Radio
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/radio-button/
-description: |
- - Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.
- - Radio buttons should not be used on their own, they should always be used within a [FieldGroup](fieldgroup.html).
- - Invalid radio buttons are signified by including [HelpText](helptext.html) in a [FieldGroup](fieldgroup.html). Sample usage for an invalid radio state is included in the [FieldGroup](fieldgroup.html#invalid) documentation.
-
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### T-shirt sizing
- Radio Button now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-RadioButton--size*` class. Default styling is medium.
-
- ### Read-only
- Radio Button now includes a read-only state in addition to the disabled state.
- - Read-only radio buttons are disabled, but not all disabled radio buttons are read-only.
- - Read-only radio buttons do not have a focus ring, but the button should be focusable.]
-
- ### Invalid/Error State
- - Invalid radio buttons are signified by including [Help text](helptext.html) in a [Field group](fieldgroup.html). The `.is-invalid` class has been removed. See Field group for an example with an invalid radio group.
-
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: radio
- name: Sizing
- markup: |
-
-
- - id: radio
- name: Standard
- markup: |
-
-
- - id: radio-emphasized
- name: Emphasized
- markup: |
-
-
- - id: radio-wrapping
- name: Wrapping behavior
- markup: |
-
- Radio with an extraordinarily long label please don't do this but if you did it should wrap text when it gets longer than the container which contains the radio which has an unacceptably long label
-
diff --git a/components/radio/package.json b/components/radio/package.json
index a67761c2c6c..d2a0fd4c6ff 100644
--- a/components/radio/package.json
+++ b/components/radio/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/radio",
- "version": "9.2.4",
+ "version": "10.0.0-s2-foundations.13",
"description": "The Spectrum CSS radio component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/radio/stories/template.js b/components/radio/stories/template.js
index 459f2cb9f6a..261ed72d4eb 100644
--- a/components/radio/stories/template.js
+++ b/components/radio/stories/template.js
@@ -5,6 +5,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Radio",
@@ -88,4 +91,4 @@ export const BasicGroupTemplate = (args, context) => Container({
name: "radio-example-" + (args?.name ?? "default"),
}, context)}
`,
-});
\ No newline at end of file
+});
diff --git a/components/radio/themes/express.css b/components/radio/themes/express.css
index 65e3ec36e9b..2f7a5d93e59 100644
--- a/components/radio/themes/express.css
+++ b/components/radio/themes/express.css
@@ -11,9 +11,12 @@
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Radio {
/* selection indicator */
--spectrum-radio-button-border-color-default: var(--spectrum-gray-800);
diff --git a/components/radio/themes/spectrum-two.css b/components/radio/themes/spectrum-two.css
new file mode 100644
index 00000000000..be53f5a6ca0
--- /dev/null
+++ b/components/radio/themes/spectrum-two.css
@@ -0,0 +1,134 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Radio {
+ /* selection indicator */
+ --spectrum-radio-button-border-color-default: var(--spectrum-gray-600);
+ --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700);
+ --spectrum-radio-button-border-color-down: var(--spectrum-gray-800);
+ --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700);
+
+ /* state colors for all themes */
+ --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ /* focus ring all themes */
+ --spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ /* disabled all themes */
+ --spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color);
+ --spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color);
+
+ /* emphasized state colors selection indicator all themes */
+ --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
+ --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
+ --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
+ --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
+
+ /* selection indicator all themes */
+ --spectrum-radio-border-width: var(--spectrum-border-width-200);
+ --spectrum-radio-button-background-color: var(--spectrum-gray-50);
+
+ /* checked selection indicator */
+ --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
+ --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
+ --spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
+ --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
+
+ /* spacing all themes */
+ --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
+ --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+
+ /* text styles all themes */
+ --spectrum-radio-font-size: var(--spectrum-font-size-100);
+ --spectrum-radio-line-height: var(--spectrum-line-height-100);
+
+ /* animation all themes */
+ --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100);
+
+ /* CJK language support all themes */
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
+ }
+
+ /* default radio size for no t-shirt size */
+ --spectrum-radio-height: var(--spectrum-component-height-100);
+ --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
+
+ /* default radio spacing for no t-shirt size */
+ --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
+ }
+
+ .spectrum-Radio--sizeS {
+ --spectrum-radio-height: var(--spectrum-component-height-75);
+ --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small);
+
+ --spectrum-radio-text-to-control: var(--spectrum-text-to-control-75);
+ --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+ --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-small);
+
+ --spectrum-radio-font-size: var(--spectrum-font-size-75);
+ }
+
+ .spectrum-Radio--sizeM {
+ --spectrum-radio-height: var(--spectrum-component-height-100);
+ --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
+
+ --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
+ --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+ --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
+
+ --spectrum-radio-font-size: var(--spectrum-font-size-100);
+ }
+
+ .spectrum-Radio--sizeL {
+ --spectrum-radio-height: var(--spectrum-component-height-200);
+ --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large);
+
+ --spectrum-radio-text-to-control: var(--spectrum-text-to-control-200);
+ --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-200);
+ --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+ --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-large);
+
+ --spectrum-radio-font-size: var(--spectrum-font-size-200);
+ }
+
+ .spectrum-Radio--sizeXL {
+ --spectrum-radio-height: var(--spectrum-component-height-300);
+ --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-extra-large);
+
+ --spectrum-radio-text-to-control: var(--spectrum-text-to-control-300);
+ --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-300);
+ --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
+ --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large);
+
+ --spectrum-radio-font-size: var(--spectrum-font-size-300);
+ }
+
+ .spectrum-Radio--emphasized {
+ --spectrum-radio-button-checked-border-color-default: var(--spectrum-accent-color-900);
+ --spectrum-radio-button-checked-border-color-hover: var(--spectrum-accent-color-1000);
+ --spectrum-radio-button-checked-border-color-down: var(--spectrum-accent-color-1100);
+ --spectrum-radio-button-checked-border-color-focus: var(--spectrum-accent-color-1000);
+ }
+}
diff --git a/components/radio/themes/spectrum.css b/components/radio/themes/spectrum.css
index 467a880aa56..5a930981122 100644
--- a/components/radio/themes/spectrum.css
+++ b/components/radio/themes/spectrum.css
@@ -11,19 +11,7 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Radio {
- /* selection indicator */
- --spectrum-radio-button-border-color-default: var(--spectrum-gray-600);
- --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700);
- --spectrum-radio-button-border-color-down: var(--spectrum-gray-800);
- --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700);
- }
- .spectrum-Radio--emphasized {
- --spectrum-radio-button-checked-border-color-default: var(--spectrum-accent-color-900);
- --spectrum-radio-button-checked-border-color-hover: var(--spectrum-accent-color-1000);
- --spectrum-radio-button-checked-border-color-down: var(--spectrum-accent-color-1100);
- --spectrum-radio-button-checked-border-color-focus: var(--spectrum-accent-color-1000);
- }
-}
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/rating/CHANGELOG.md b/components/rating/CHANGELOG.md
index c75a9d6b23f..83a99cac533 100644
--- a/components/rating/CHANGELOG.md
+++ b/components/rating/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/rating/index.css b/components/rating/index.css
index 9d523f0ecdd..b7fba3b4153 100644
--- a/components/rating/index.css
+++ b/components/rating/index.css
@@ -11,37 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-Rating {
- /* Icon */
- --spectrum-rating-icon-height: var(--spectrum-workflow-icon-size-100);
- --spectrum-rating-icon-width: var(--spectrum-workflow-icon-size-100);
-
- /* Focus ring */
- --spectrum-rating-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-rating-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-rating-focus-indicator-color: var(--spectrum-focus-indicator-color);
- --spectrum-rating-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-
- /* Spacing (top/bottom edge to icon) */
- --spectrum-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100);
- --spectrum-rating-indicator-border-radius: var(--spectrum-corner-radius-75);
-
- /* Indicator height */
- --spectrum-rating-indicator-height: var(--spectrum-border-width-200);
-
- /* Colors */
- /* selected + emphasized */
- --spectrum-rating-emphasized-icon-color-default: var(--spectrum-accent-content-color-default);
- --spectrum-rating-emphasized-icon-color-hover: var(--spectrum-accent-content-color-hover);
- --spectrum-rating-emphasized-icon-color-down: var(--spectrum-accent-content-color-down);
- --spectrum-rating-emphasized-icon-color-key-focus: var(--spectrum-accent-content-color-key-focus);
-
- /* Disabled */
- --spectrum-rating-icon-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-rating-icon-count: var(--spectrum-rating-icon-count);
-}
+@import "./themes/spectrum-two.css";
.spectrum-Rating {
&.is-focused {
@@ -183,8 +153,8 @@
}
&:hover {
- /* All stars following the hovered star */
& ~ .spectrum-Rating-icon {
+ /* All stars following the hovered star */
color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default)));
}
}
diff --git a/components/rating/metadata/metadata.json b/components/rating/metadata/metadata.json
index 17101d97e29..527410c5a43 100644
--- a/components/rating/metadata/metadata.json
+++ b/components/rating/metadata/metadata.json
@@ -96,22 +96,13 @@
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
"--spectrum-neutral-subdued-content-color-default",
"--spectrum-neutral-subdued-content-color-down",
"--spectrum-neutral-subdued-content-color-hover",
"--spectrum-neutral-subdued-content-color-key-focus",
"--spectrum-workflow-icon-size-100"
],
- "system-theme": [
- "--system-spectrum-rating-icon-color-default",
- "--system-spectrum-rating-icon-color-down",
- "--system-spectrum-rating-icon-color-hover",
- "--system-spectrum-rating-icon-color-key-focus"
- ],
+ "system-theme": [],
"passthroughs": [],
"high-contrast": [
"--highcontrast-rating-emphasized-icon-color-default",
diff --git a/components/rating/metadata/rating.yml b/components/rating/metadata/rating.yml
deleted file mode 100644
index 576a4c2e438..00000000000
--- a/components/rating/metadata/rating.yml
+++ /dev/null
@@ -1,366 +0,0 @@
-name: Rating
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/rating/
-sections:
- - name: A note on emphasized and quiet
- description: |
- Spectrum has chosen the variant previously known as `quiet` to be the default and has added an `emphasized` variant with the same styles as the previous default.
-examples:
- - id: rating
- name: Standard
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: rating
- name: Selected
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: rating
- name: Read-only
- description: A non-interactive rating.
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: rating-emphasized
- name: Emphasized
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: rating-emphasized
- name: Emphasized (selected)
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: rating-emphasized
- name: Emphasized (read-only)
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: rating
- name: Disabled
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/components/rating/package.json b/components/rating/package.json
index b33da076741..4d23a894f39 100644
--- a/components/rating/package.json
+++ b/components/rating/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/rating",
- "version": "5.1.3",
+ "version": "6.0.0-s2-foundations.13",
"description": "The Spectrum CSS rating component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/rating/stories/template.js b/components/rating/stories/template.js
index c1c4c88315a..39111424552 100644
--- a/components/rating/stories/template.js
+++ b/components/rating/stories/template.js
@@ -6,6 +6,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { repeat } from "lit/directives/repeat.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Rating",
diff --git a/components/rating/themes/express.css b/components/rating/themes/express.css
index 20e16cab063..1d9656d62b4 100644
--- a/components/rating/themes/express.css
+++ b/components/rating/themes/express.css
@@ -11,9 +11,12 @@
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Rating {
--spectrum-rating-icon-color-default: var(--spectrum-neutral-content-color-default);
--spectrum-rating-icon-color-hover: var(--spectrum-neutral-content-color-hover);
diff --git a/components/rating/themes/spectrum-two.css b/components/rating/themes/spectrum-two.css
new file mode 100644
index 00000000000..80ff717f3ab
--- /dev/null
+++ b/components/rating/themes/spectrum-two.css
@@ -0,0 +1,49 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Rating {
+ --spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+ --spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
+ --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+
+ /* Icon */
+ --spectrum-rating-icon-height: var(--spectrum-workflow-icon-size-100);
+ --spectrum-rating-icon-width: var(--spectrum-workflow-icon-size-100);
+
+ /* Focus ring */
+ --spectrum-rating-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-rating-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-rating-focus-indicator-color: var(--spectrum-focus-indicator-color);
+ --spectrum-rating-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+
+ /* Spacing (top/bottom edge to icon) */
+ --spectrum-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100);
+ --spectrum-rating-indicator-border-radius: var(--spectrum-corner-radius-75);
+
+ /* Indicator height */
+ --spectrum-rating-indicator-height: var(--spectrum-border-width-200);
+
+ /* Colors */
+ /* selected + emphasized */
+ --spectrum-rating-emphasized-icon-color-default: var(--spectrum-accent-content-color-default);
+ --spectrum-rating-emphasized-icon-color-hover: var(--spectrum-accent-content-color-hover);
+ --spectrum-rating-emphasized-icon-color-down: var(--spectrum-accent-content-color-down);
+ --spectrum-rating-emphasized-icon-color-key-focus: var(--spectrum-accent-content-color-key-focus);
+
+ /* Disabled */
+ --spectrum-rating-icon-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-rating-icon-count: var(--spectrum-rating-icon-count);
+ }
+}
diff --git a/components/rating/themes/spectrum.css b/components/rating/themes/spectrum.css
index 87a6e2ee611..5a930981122 100644
--- a/components/rating/themes/spectrum.css
+++ b/components/rating/themes/spectrum.css
@@ -11,11 +11,7 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Rating {
- --spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
- --spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
- --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
- }
-}
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/search/CHANGELOG.md b/components/search/CHANGELOG.md
index 0d5fc076fa8..01b5d423a61 100644
--- a/components/search/CHANGELOG.md
+++ b/components/search/CHANGELOG.md
@@ -1,5 +1,220 @@
# Change Log
+## 8.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.14
+ - @spectrum-css/textfield@8.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.14
+
+### Patch Changes
+
+- [#3023](https://github.com/adobe/spectrum-css/pull/3023) [`213efa8`](https://github.com/adobe/spectrum-css/commit/213efa8618cdccf75a274ee9c2dd0404864c1779) Thanks [@jawinn](https://github.com/jawinn)! - Relocates --mod custom properties from the themes CSS to the index.css.
+
+## 8.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`d06b762`](https://github.com/adobe/spectrum-css/commit/d06b762232592342dcea35c8ff4d309edb00d588) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-236] Search: internal property references including calc moved out of theme files; express theme updated to match format of spectrum-two theme selectors; spectrum-two theme adds new --spectrum-search-min-inline-multiplier abstraction for internal calc, removes passthroughs, adds in a sizeM theme instead of relying on defaults
+
+### Patch Changes
+
+- Updated dependencies [[`58a89ea`](https://github.com/adobe/spectrum-css/commit/58a89ea464c387111511271a5f5afce044f11042)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.15
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/textfield@8.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.11
+ - @spectrum-css/textfield@8.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/textfield@8.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`da47fa2`](https://github.com/adobe/spectrum-css/commit/da47fa2cb18373e74a6718775f2db90bb25868d4), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/textfield@8.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/textfield@8.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/textfield@8.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/textfield@8.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/textfield@8.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/textfield@8.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/textfield@8.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/textfield@8.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/textfield@8.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/textfield@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 7.1.4
### Patch Changes
diff --git a/components/search/index.css b/components/search/index.css
index 68c5dc4ac16..66f44ebafed 100644
--- a/components/search/index.css
+++ b/components/search/index.css
@@ -11,46 +11,31 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
+@media (forced-colors: active) {
+ .spectrum-Search .spectrum-Search-textfield,
+ .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input {
+ --highcontrast-search-color-default: CanvasText;
+ --highcontrast-search-color-hover: CanvasText;
+ --highcontrast-search-color-focus: CanvasText;
+ --highcontrast-search-color-disabled: GrayText;
+ }
+
+ .spectrum-Search .spectrum-Search-clearButton {
+ .spectrum-ClearButton-fill {
+ /* Avoid button background color overlapping on border. */
+ forced-color-adjust: none;
+ background-color: transparent;
+ }
+ }
+}
+
+/* Standard / Default */
.spectrum-Search {
- /* Size / Spacing */
- --spectrum-search-inline-size: var(--spectrum-field-width);
- --spectrum-search-block-size: var(--spectrum-component-height-100);
+ /* Using a component-level token for this internal variable */
--spectrum-search-button-inline-size: var(--spectrum-search-block-size);
- --spectrum-search-min-inline-size: calc(var(--spectrum-search-field-minimum-width-multiplier) * var(--spectrum-search-block-size));
- --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-100);
-
- --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-100);
- --spectrum-search-to-help-text: var(--spectrum-help-text-to-component);
- --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-
- /* Focus Indicator */
- --spectrum-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-search-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- /* Font / Color */
- --spectrum-search-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-search-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-search-font-style: var(--spectrum-default-font-style);
- --spectrum-search-line-height: var(--spectrum-line-height-100);
-
- --spectrum-search-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-search-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-search-color-focus: var(--spectrum-neutral-content-color-focus);
- --spectrum-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover);
- --spectrum-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-
- /* Background and Border */
- --spectrum-search-border-width: var(--spectrum-border-width-100);
- --spectrum-search-background-color: var(--spectrum-gray-50);
-
- /* Disabled */
- --spectrum-search-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-search-min-inline-size: calc(var(--spectrum-search-min-inline-multiplier) * var(--spectrum-search-block-size));
/* Settings for nested Textfield component. */
--mod-textfield-font-family: var(--mod-search-font-family, var(--spectrum-search-font-family));
@@ -79,59 +64,7 @@
--mod-textfield-background-color: var(--mod-search-background-color, var(--spectrum-search-background-color));
--mod-textfield-background-color-disabled: var(--mod-search-background-color-disabled, var(--spectrum-search-background-color-disabled));
-}
-
-.spectrum-Search--sizeS {
- --spectrum-search-block-size: var(--spectrum-component-height-75);
- --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75);
- --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75);
-}
-
-.spectrum-Search--sizeL {
- --spectrum-search-block-size: var(--spectrum-component-height-200);
- --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200);
- --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200);
-}
-
-.spectrum-Search--sizeXL {
- --spectrum-search-block-size: var(--spectrum-component-height-300);
- --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300);
- --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300);
-}
-
-.spectrum-Search--quiet {
- --spectrum-search-quiet-button-offset: calc((var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2) - (var(--mod-workflow-icon-size-100, var(--spectrum-workflow-icon-size-100)) / 2));
- --spectrum-search-background-color: transparent;
- --spectrum-search-background-color-disabled: transparent;
- --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color);
-
- /* Added specificity, otherwise they are overridden by system specific themes. */
- &.spectrum-Search {
- --spectrum-search-border-radius: 0;
- --spectrum-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet);
- }
-}
-
-@media (forced-colors: active) {
- .spectrum-Search .spectrum-Search-textfield,
- .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input {
- --highcontrast-search-color-default: CanvasText;
- --highcontrast-search-color-hover: CanvasText;
- --highcontrast-search-color-focus: CanvasText;
- --highcontrast-search-color-disabled: GrayText;
- }
- .spectrum-Search .spectrum-Search-clearButton {
- .spectrum-ClearButton-fill {
- /* Avoid button background color overlapping on border. */
- forced-color-adjust: none;
- background-color: transparent;
- }
- }
-}
-
-/* Standard / Default */
-.spectrum-Search {
display: inline-block;
position: relative;
inline-size: var(--mod-search-inline-size, var(--spectrum-search-inline-size));
@@ -162,12 +95,13 @@
}
.spectrum-Search-icon {
+ --spectrum-search-color: var(--highcontrast-search-color-default, var(--mod-search-color-default, var(--spectrum-search-color-default)));
+
display: block;
position: absolute;
inset-block: 0;
margin-block: auto;
- --spectrum-search-color: var(--highcontrast-search-color-default, var(--mod-search-color-default, var(--spectrum-search-color-default)));
color: var(--spectrum-search-color);
.spectrum-Search-textfield:hover & {
@@ -197,18 +131,18 @@
/* Without this, it gets overridden by .spectrum-Textfield */
appearance: none;
- /* Remove the inner padding and cancel buttons for input[type="search"] in Chrome and Safari on macOS. */
- &::-webkit-search-cancel-button,
- &::-webkit-search-decoration {
- appearance: none;
- }
-
block-size: var(--mod-search-block-size, var(--spectrum-search-block-size));
padding-block-start: calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));
padding-block-end: calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));
font-style: var(--mod-search-font-style, var(--spectrum-search-font-style));
line-height: var(--mod-search-line-height, var(--spectrum-search-line-height));
+
+ /* Remove the inner padding and cancel buttons for input[type="search"] in Chrome and Safari on macOS. */
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-decoration {
+ appearance: none;
+ }
}
/* Standard / Default Only */
@@ -225,6 +159,8 @@
/* Quiet Variant */
.spectrum-Search--quiet {
+ --spectrum-search-quiet-button-offset: calc((var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2) - (var(--mod-search-icon-size, var(--spectrum-search-icon-size)) / 2));
+
.spectrum-Search-clearButton {
transform: translateX(var(--mod-search-quiet-button-offset, var(--spectrum-search-quiet-button-offset)));
}
diff --git a/components/search/metadata/metadata.json b/components/search/metadata/metadata.json
index 99c9b8d2b80..7569a051165 100644
--- a/components/search/metadata/metadata.json
+++ b/components/search/metadata/metadata.json
@@ -8,12 +8,7 @@
".spectrum-Search .spectrum-Search-textfield .spectrum-Search-input",
".spectrum-Search--quiet",
".spectrum-Search--quiet .spectrum-Search-clearButton",
- ".spectrum-Search--quiet.spectrum-Search",
".spectrum-Search--quiet.spectrum-Search .spectrum-Search-input",
- ".spectrum-Search--sizeL",
- ".spectrum-Search--sizeM",
- ".spectrum-Search--sizeS",
- ".spectrum-Search--sizeXL",
".spectrum-Search-clearButton",
".spectrum-Search-clearButton .spectrum-ClearButton-fill",
".spectrum-Search-icon",
@@ -28,6 +23,10 @@
".spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon",
".spectrum-Search-textfield:hover .spectrum-Search-icon",
".spectrum-Search.is-disabled .spectrum-Search-clearButton",
+ ".spectrum-Search.spectrum-Search--sizeL",
+ ".spectrum-Search.spectrum-Search--sizeM",
+ ".spectrum-Search.spectrum-Search--sizeS",
+ ".spectrum-Search.spectrum-Search--sizeXL",
".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon",
".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input"
],
@@ -65,8 +64,7 @@
"--mod-search-quiet-button-offset",
"--mod-search-text-to-icon",
"--mod-search-to-help-text",
- "--mod-search-top-to-text",
- "--mod-workflow-icon-size-100"
+ "--mod-search-top-to-text"
],
"component": [
"--spectrum-search-background-color",
@@ -100,6 +98,7 @@
"--spectrum-search-icon-size",
"--spectrum-search-inline-size",
"--spectrum-search-line-height",
+ "--spectrum-search-min-inline-multiplier",
"--spectrum-search-min-inline-size",
"--spectrum-search-quiet-button-offset",
"--spectrum-search-text-to-icon",
@@ -117,10 +116,6 @@
"--spectrum-component-height-200",
"--spectrum-component-height-300",
"--spectrum-component-height-75",
- "--spectrum-component-pill-edge-to-visual-100",
- "--spectrum-component-pill-edge-to-visual-200",
- "--spectrum-component-pill-edge-to-visual-300",
- "--spectrum-component-pill-edge-to-visual-75",
"--spectrum-component-top-to-text-100",
"--spectrum-corner-radius-100",
"--spectrum-default-font-style",
@@ -132,8 +127,7 @@
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
- "--spectrum-gray-400",
- "--spectrum-gray-50",
+ "--spectrum-gray-25",
"--spectrum-gray-500",
"--spectrum-gray-600",
"--spectrum-gray-800",
@@ -156,23 +150,7 @@
"--spectrum-workflow-icon-size-300",
"--spectrum-workflow-icon-size-75"
],
- "system-theme": [
- "--system-spectrum-search-border-color-default",
- "--system-spectrum-search-border-color-focus",
- "--system-spectrum-search-border-color-focus-hover",
- "--system-spectrum-search-border-color-hover",
- "--system-spectrum-search-border-color-key-focus",
- "--system-spectrum-search-border-radius",
- "--system-spectrum-search-edge-to-visual",
- "--system-spectrum-search-sizel-border-radius",
- "--system-spectrum-search-sizel-edge-to-visual",
- "--system-spectrum-search-sizem-border-radius",
- "--system-spectrum-search-sizem-edge-to-visual",
- "--system-spectrum-search-sizes-border-radius",
- "--system-spectrum-search-sizes-edge-to-visual",
- "--system-spectrum-search-sizexl-border-radius",
- "--system-spectrum-search-sizexl-edge-to-visual"
- ],
+ "system-theme": [],
"passthroughs": [
"--mod-textfield-background-color",
"--mod-textfield-background-color-disabled",
diff --git a/components/search/metadata/mods.md b/components/search/metadata/mods.md
index e2df72307ce..3afc1b436f9 100644
--- a/components/search/metadata/mods.md
+++ b/components/search/metadata/mods.md
@@ -34,4 +34,3 @@
| `--mod-search-text-to-icon` |
| `--mod-search-to-help-text` |
| `--mod-search-top-to-text` |
-| `--mod-workflow-icon-size-100` |
diff --git a/components/search/metadata/search.yml b/components/search/metadata/search.yml
deleted file mode 100644
index db7ce1ebc4c..00000000000
--- a/components/search/metadata/search.yml
+++ /dev/null
@@ -1,256 +0,0 @@
-name: Search
-SpectrumSiteSlug: https://spectrum.adobe.com/page/search-field/
-description: 'This component contains a single input field with both a magnifying glass icon and a clear ("reset") button displayed within it. When making use of this component, the clear button should only be displayed when the input has a value.'
-sections:
- - name: Migration Guide
- description: |
- ### New Textfield markup
- Search now uses the new Textfield markup. See the [Textfield migration guide](textfield.html#migrationguide) for more information.
-
- ### Quiet Search requires `.spectrum-Search--quiet`
- You now must add `.spectrum-Search--quiet` for Quiet Search.
-
- ### `.spectrum-Search-icon` is required again
- You need to add the `.spectrum-Search-icon` class for Express support. This was previously not required, but has been added back to support the Express design.
-
- ### New ClearButton markup
- See the [ClearButton migration guide](clearbutton.html#migrationguide) for more information.
-
- ### `.spectrum-Search-clearButton` must be added to `.spectrum-ClearButton`
- The `.spectrum-Search-clearButton` class is now required on the `.spectrum-ClearButton`.
-
- ### `.spectrum-Search-textfield` must be added to `.spectrum-Textfield`
- The `.spectrum-Search-textfield` class is now required on the `.spectrum-Textfield`.
-
-examples:
- - id: search
- name: Standard
- markup: |
-
-
- - id: search-quiet
- name: Quiet
- markup: |
-
-
- - id: search-with-help-text
- name: With Help Text
- markup: |
-
-
- - id: search-standard-sizes
- name: Standard Sizes
- markup: |
-
diff --git a/components/search/package.json b/components/search/package.json
index 33a87257ab0..cd82cf656fa 100644
--- a/components/search/package.json
+++ b/components/search/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/search",
- "version": "7.1.4",
+ "version": "8.0.0-s2-foundations.15",
"description": "The Spectrum CSS search component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/search/stories/template.js b/components/search/stories/template.js
index bdf59a8779f..b0c3a02e817 100644
--- a/components/search/stories/template.js
+++ b/components/search/stories/template.js
@@ -4,6 +4,9 @@ import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Search",
diff --git a/components/search/themes/express.css b/components/search/themes/express.css
index 7dfe45ef663..1fc4aeafe63 100644
--- a/components/search/themes/express.css
+++ b/components/search/themes/express.css
@@ -11,37 +11,38 @@
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Search {
- --spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2);
- --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100);
-
--spectrum-search-border-color-default: var(--spectrum-gray-400);
--spectrum-search-border-color-hover: var(--spectrum-gray-500);
--spectrum-search-border-color-focus: var(--spectrum-gray-800);
--spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
--spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
- }
- .spectrum-Search--sizeS {
- --spectrum-search-border-radius: calc(var(--spectrum-component-height-75) / 2);
- --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75);
- }
+ &.spectrum-Search--sizeS {
+ --spectrum-search-border-radius: calc(var(--spectrum-component-height-75) / 2);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75);
+ }
- .spectrum-Search--sizeM {
- --spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2);
- --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100);
- }
+ &,
+ &.spectrum-Search--sizeM {
+ --spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100);
+ }
- .spectrum-Search--sizeL {
- --spectrum-search-border-radius: calc(var(--spectrum-component-height-200) / 2);
- --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200);
- }
+ &.spectrum-Search--sizeL {
+ --spectrum-search-border-radius: calc(var(--spectrum-component-height-200) / 2);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200);
+ }
- .spectrum-Search--sizeXL {
- --spectrum-search-border-radius: calc(var(--spectrum-component-height-300) / 2);
- --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300);
+ &.spectrum-Search--sizeXL {
+ --spectrum-search-border-radius: calc(var(--spectrum-component-height-300) / 2);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300);
+ }
}
}
diff --git a/components/search/themes/spectrum-two.css b/components/search/themes/spectrum-two.css
new file mode 100644
index 00000000000..1421370ff6a
--- /dev/null
+++ b/components/search/themes/spectrum-two.css
@@ -0,0 +1,98 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Search {
+ --spectrum-search-border-color-default: var(--spectrum-gray-500);
+ --spectrum-search-border-color-hover: var(--spectrum-gray-600);
+ --spectrum-search-border-color-focus: var(--spectrum-gray-800);
+ --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
+ --spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
+
+ /* Size / Spacing */
+ --spectrum-search-inline-size: var(--spectrum-field-width);
+ --spectrum-search-min-inline-multiplier: var(--spectrum-search-field-minimum-width-multiplier);
+
+ --spectrum-search-to-help-text: var(--spectrum-help-text-to-component);
+ --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+
+ /* Focus Indicator */
+ --spectrum-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-search-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ /* Font / Color */
+ --spectrum-search-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-search-font-weight: var(--spectrum-regular-font-weight);
+ --spectrum-search-font-style: var(--spectrum-default-font-style);
+ --spectrum-search-line-height: var(--spectrum-line-height-100);
+
+ --spectrum-search-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-search-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-search-color-focus: var(--spectrum-neutral-content-color-focus);
+ --spectrum-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover);
+ --spectrum-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ /* Background and Border */
+ --spectrum-search-border-width: var(--spectrum-border-width-100);
+ --spectrum-search-background-color: var(--spectrum-gray-25);
+
+ /* Disabled */
+ --spectrum-search-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color);
+
+ &.spectrum-Search--sizeS {
+ --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
+ --spectrum-search-block-size: var(--spectrum-component-height-75);
+ --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75);
+ --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75);
+ }
+
+ &,
+ &.spectrum-Search--sizeM {
+ --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
+ --spectrum-search-block-size: var(--spectrum-component-height-100);
+ --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-100);
+ --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-100);
+ }
+
+ &.spectrum-Search--sizeL {
+ --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
+ --spectrum-search-block-size: var(--spectrum-component-height-200);
+ --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200);
+ --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200);
+ }
+
+ &.spectrum-Search--sizeXL {
+ --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
+ --spectrum-search-block-size: var(--spectrum-component-height-300);
+ --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300);
+ --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300);
+ }
+ }
+
+ .spectrum-Search--quiet {
+ --spectrum-search-background-color: transparent;
+ --spectrum-search-background-color-disabled: transparent;
+ --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color);
+
+ --spectrum-search-border-radius: 0;
+ --spectrum-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet);
+ }
+}
diff --git a/components/search/themes/spectrum.css b/components/search/themes/spectrum.css
index e4246f817a2..6789d38149d 100644
--- a/components/search/themes/spectrum.css
+++ b/components/search/themes/spectrum.css
@@ -11,35 +11,13 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Search {
- --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
-
- --spectrum-search-border-color-default: var(--spectrum-gray-500);
- --spectrum-search-border-color-hover: var(--spectrum-gray-600);
- --spectrum-search-border-color-focus: var(--spectrum-gray-800);
- --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
- --spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
- }
-
- .spectrum-Search--sizeS {
- --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
- }
- .spectrum-Search--sizeM {
- --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
- }
+/* @combine .spectrum.spectrum--legacy */
- .spectrum-Search--sizeL {
- --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
- }
+@import "./spectrum-two.css";
- .spectrum-Search--sizeXL {
- --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
+@container style(--system: legacy) {
+ .spectrum-Search {
+ --spectrum-search-background-color: var(--spectrum-gray-50);
}
}
diff --git a/components/sidenav/CHANGELOG.md b/components/sidenav/CHANGELOG.md
index a904df8838b..4bfe2c1a906 100644
--- a/components/sidenav/CHANGELOG.md
+++ b/components/sidenav/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/sidenav/index.css b/components/sidenav/index.css
index 8950a5408b4..03fa0b7deb9 100644
--- a/components/sidenav/index.css
+++ b/components/sidenav/index.css
@@ -11,97 +11,38 @@
* governing permissions and limitations under the License.
*/
-.spectrum-SideNav {
- /* focus indicator */
- --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness);
- --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color);
-
- /* layout */
- --spectrum-sidenav-min-height: var(--spectrum-component-height-100);
- --spectrum-sidenav-width: 100%;
- --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width);
- --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width);
- --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100);
- --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100);
- --spectrum-sidenav-inline-padding: var(--spectrum-component-edge-to-text-100);
- --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item);
- --spectrum-sidenav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
- --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100);
- --spectrum-sidenav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text);
-
- --spectrum-sidenav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text);
- --spectrum-sidenav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text);
-
- --spectrum-sidenav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text);
- --spectrum-sidenav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text);
-
- --spectrum-sidenav-heading-top-margin: var(--spectrum-side-navigation-item-to-header);
- --spectrum-sidenav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item);
-
- /* color - background */
- --spectrum-sidenav-background-disabled: transparent;
- --spectrum-sidenav-background-default: transparent;
- --spectrum-sidenav-background-hover: var(--spectrum-gray-200);
- --spectrum-sidenav-item-background-down: var(--spectrum-gray-300);
- --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200);
-
- --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-200);
- --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300);
- --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300);
- --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200);
-
- /* color font */
- --spectrum-sidenav-header-color: var(--spectrum-gray-600);
-
- --spectrum-sidenav-content-disabled-color: var(--spectrum-disabled-content-color);
-
- --spectrum-sidenav-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-sidenav-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-sidenav-content-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-sidenav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-
- --spectrum-sidenav-content-color-default-selected: var(--spectrum-neutral-content-color-default);
- --spectrum-sidenav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover);
- --spectrum-sidenav-content-color-down-selected: var(--spectrum-neutral-content-color-down);
- --spectrum-sidenav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus);
-
- /* typography */
- --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style);
- --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100);
- --spectrum-sidenav-text-line-height: var(--spectrum-line-height-100);
-
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100);
+ @import "./themes/spectrum-two.css";
+
+ @media (forced-colors: active) {
+ /* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */
+ .spectrum-SideNav {
+ .spectrum-Icon {
+ forced-color-adjust: preserve-parent-color; /* stylelint-disable-line declaration-property-value-no-unknown */
+ }
}
- --spectrum-sidenav-top-level-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style);
- --spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100);
- --spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100);
+ .spectrum-SideNav-item {
+ --highcontrast-sidenav-content-disabled-color: GrayText;
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-sidenav-top-level-line-height: var(--spectrum-cjk-line-height-100);
- }
+ --highcontrast-sidenav-focus-ring-color: Highlight;
+
+ --highcontrast-sidenav-content-color-default-selected: SelectedItemText;
+ --highcontrast-sidenav-item-background-default-selected: SelectedItem;
- --spectrum-sidenav-header-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight);
- --spectrum-sidenav-header-font-style: var(--spectrum-default-font-style);
- --spectrum-sidenav-header-font-size: var(--spectrum-font-size-75);
- --spectrum-sidenav-header-line-height: var(--spectrum-line-height-100);
+ --highcontrast-sidenav-background-key-focus-selected: Highlight;
+ --highcontrast-sidenav-background-hover-selected: Highlight;
+ --highcontrast-sidenav-item-background-down-selected: Highlight;
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100);
+ --highcontrast-sidenav-item-background-down: Highlight;
+ --highcontrast-sidenav-background-hover: Highlight;
+ --highcontrast-sidenav-content-color-hover: HighlightText;
+ --highcontrast-sidenav-background-key-focus: Highlight;
+
+ --highcontrast-sidenav-top-level-font-color: ButtonText;
+ --highcontrast-sidenav-content-color-default: ButtonText;
+ --highcontrast-sidenav-content-color-down: HighlightText;
+
+ forced-color-adjust: none;
}
}
@@ -128,27 +69,27 @@
pointer-events: none;
}
}
-}
-
-.spectrum-SideNav-item.is-selected {
- .spectrum-SideNav-itemLink {
- background-color: var(--highcontrast-sidenav-item-background-default-selected, var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected)));
- color: var(--highcontrast-sidenav-content-color-default-selected, var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected)));
-
- &:hover {
- background-color: var(--highcontrast-sidenav-background-hover-selected, var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected)));
- color: var(--mod-sidenav-content-color-hover-selected, var(--spectrum-sidenav-content-color-hover-selected));
- }
-
- &:active {
- background-color: var(--highcontrast-sidenav-item-background-down-selected, var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected)));
- color: var(--mod-sidenav-content-color-down-selected, var(--spectrum-sidenav-content-color-down-selected));
- }
- &.is-keyboardFocused,
- &:focus-visible {
- background-color: var(--highcontrast-sidenav-background-key-focus-selected, var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected)));
- color: var(--mod-sidenav-content-color-key-focus-selected, var(--spectrum-sidenav-content-color-key-focus-selected));
+ &.is-selected {
+ .spectrum-SideNav-itemLink {
+ background-color: var(--highcontrast-sidenav-item-background-default-selected, var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected)));
+ color: var(--highcontrast-sidenav-content-color-default-selected, var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected)));
+
+ &:hover {
+ background-color: var(--highcontrast-sidenav-background-hover-selected, var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected)));
+ color: var(--mod-sidenav-content-color-hover-selected, var(--spectrum-sidenav-content-color-hover-selected));
+ }
+
+ &:active {
+ background-color: var(--highcontrast-sidenav-item-background-down-selected, var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected)));
+ color: var(--mod-sidenav-content-color-down-selected, var(--spectrum-sidenav-content-color-down-selected));
+ }
+
+ &.is-keyboardFocused,
+ &:focus-visible {
+ background-color: var(--highcontrast-sidenav-background-key-focus-selected, var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected)));
+ color: var(--mod-sidenav-content-color-key-focus-selected, var(--spectrum-sidenav-content-color-key-focus-selected));
+ }
}
}
}
@@ -259,35 +200,3 @@
}
}
}
-
-@media (forced-colors: active) {
- /* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */
- .spectrum-SideNav {
- .spectrum-Icon {
- forced-color-adjust: preserve-parent-color; /* stylelint-disable-line declaration-property-value-no-unknown */
- }
- }
-
- .spectrum-SideNav-item {
- forced-color-adjust: none;
- --highcontrast-sidenav-content-disabled-color: GrayText;
-
- --highcontrast-sidenav-focus-ring-color: Highlight;
-
- --highcontrast-sidenav-content-color-default-selected: SelectedItemText;
- --highcontrast-sidenav-item-background-default-selected: SelectedItem;
-
- --highcontrast-sidenav-background-key-focus-selected: Highlight;
- --highcontrast-sidenav-background-hover-selected: Highlight;
- --highcontrast-sidenav-item-background-down-selected: Highlight;
-
- --highcontrast-sidenav-item-background-down: Highlight;
- --highcontrast-sidenav-background-hover: Highlight;
- --highcontrast-sidenav-content-color-hover: HighlightText;
- --highcontrast-sidenav-background-key-focus: Highlight;
-
- --highcontrast-sidenav-top-level-font-color: ButtonText;
- --highcontrast-sidenav-content-color-default: ButtonText;
- --highcontrast-sidenav-content-color-down: HighlightText;
- }
-}
diff --git a/components/sidenav/metadata/metadata.json b/components/sidenav/metadata/metadata.json
index 08e0dcc839d..9d939e9b9e7 100644
--- a/components/sidenav/metadata/metadata.json
+++ b/components/sidenav/metadata/metadata.json
@@ -166,8 +166,8 @@
"--spectrum-focus-indicator-thickness",
"--spectrum-font-size-100",
"--spectrum-font-size-75",
+ "--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
"--spectrum-gray-600",
"--spectrum-line-height-100",
"--spectrum-medium-font-weight",
diff --git a/components/sidenav/metadata/sidenav.yml b/components/sidenav/metadata/sidenav.yml
deleted file mode 100644
index 60f24ef0c93..00000000000
--- a/components/sidenav/metadata/sidenav.yml
+++ /dev/null
@@ -1,220 +0,0 @@
-name: Side navigation
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/side-navigation/
-description: |
- Side navigation lets users navigate the entire content of a product or a section. Make sure to use the appropriate variant for the context and user needs. Don’t mix behavior, styles, or variations together in a single navigation menu.
-sections:
- - name: Migration Guide
- description: |
- Core token migration work and design updates added a span tag wrapping the link text.
-
-examples:
- - id: sidenav
- name: Standard
- description: When navigation is simple use the standard or single level navigation.
- markup: |
-
-
-
- - id: sidenav
- name: Multilevel
- description: Use a multi-level side navigation when there are multiple layers of hierarchical navigation.
- markup: |
-
-
-
-
- - id: sidenav
- name: Heading
- description: When navigation is simple but categorical, use the single level side navigation with headings.
- markup: |
-
-
-
- - id: sidenav
- name: Icon
- description: Icons can be displayed in first-level items of any type of side navigation (single level or multi-level).
- markup: |
-
-
-
diff --git a/components/sidenav/package.json b/components/sidenav/package.json
index 4a096409599..f1d0c5480fb 100644
--- a/components/sidenav/package.json
+++ b/components/sidenav/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/sidenav",
- "version": "5.1.3",
+ "version": "6.0.0-s2-foundations.13",
"description": "The Spectrum CSS sidenav component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/sidenav/stories/template.js b/components/sidenav/stories/template.js
index feea111d89b..d65e3aceac7 100644
--- a/components/sidenav/stories/template.js
+++ b/components/sidenav/stories/template.js
@@ -7,6 +7,9 @@ import { repeat } from "lit/directives/repeat.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-SideNav",
@@ -15,67 +18,66 @@ export const Template = ({
hasIcon,
iconName,
items = [],
-} = {}, context = {}) => html`
-
- ({ ...a, [c]: true }), {}),
- })}>
- ${repeat(items, (item) => item.id, (item) => {
- // First level nav item with second tier of nav items beneath.
- if (typeof item.levelTwoItems !== "undefined") {
- return html`
-
- ${item.heading
- ? html`${item.heading} `
- : html`
-
- ${when(hasIcon && iconName, () => Icon({ iconName }, context))}
- ${item.title}
-
- `
- }
- ({ ...a, [c]: true }), {}),
- })}
- aria-labelledby=${ifDefined(item.heading) ? `${item.id}-heading` : ""}>
- ${repeat(item.levelTwoItems, (item) => item.id, (item) => {
- // Display nav items in second tier, and possibly a third tier.
- return SideNavItem({
- currentTier: 2,
- hasIcon,
- iconName,
- ...item
- }, context);
- })}
-
-
- `;
- }
- else {
- // First level nav item only.
- return SideNavItem({
- currentTier: 1,
- hasIcon,
- iconName,
- ...item
- }, context);
- }
- })}
-
-
-`;
+} = {}, context = {}) => {
+ return html`
+
+ ({ ...a, [c]: true }), {}),
+ })}>
+ ${repeat(items, (item) => item.id, (item) => {
+ if (typeof item.levelTwoItems !== "undefined") {
+ return html`
+
+ ${item.heading ?
+ html`${item.heading} `
+ :
+ html`
+
+ ${when(hasIcon && iconName, () => Icon({ iconName }, context))}
+ ${item.title}
+
+ `
+ }
+ ({ ...a, [c]: true }), {}),
+ })}
+ aria-labelledby=${ifDefined(item.heading) ? `${item.id}-heading` : ""}>
+ ${repeat(item.levelTwoItems, (item) => item.id, (item) => {
+ return SideNavItem({
+ currentTier: 2,
+ variant,
+ hasIcon,
+ iconName,
+ ...item
+ }, context);
+ })}
+
+
+ `;
+ }
+ else {
+ // First level nav item only
+ return SideNavItem({
+ currentTier: 1,
+ hasIcon,
+ iconName,
+ ...item
+ }, context);
+ }
+ })}
+
+
+ `;
+};
/**
* Renders a single navigation item, and an optional third tier of items.
diff --git a/components/sidenav/themes/express.css b/components/sidenav/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/sidenav/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/sidenav/themes/spectrum-two.css b/components/sidenav/themes/spectrum-two.css
new file mode 100644
index 00000000000..4e4594ab117
--- /dev/null
+++ b/components/sidenav/themes/spectrum-two.css
@@ -0,0 +1,98 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-SideNav {
+ /* focus indicator */
+ --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness);
+ --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color);
+
+ /* layout */
+ --spectrum-sidenav-min-height: var(--spectrum-component-height-100);
+ --spectrum-sidenav-width: 100%;
+ --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width);
+ --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width);
+ --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100);
+ --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100);
+ --spectrum-sidenav-inline-padding: var(--spectrum-component-edge-to-text-100);
+ --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item);
+ --spectrum-sidenav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
+ --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100);
+ --spectrum-sidenav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text);
+
+ --spectrum-sidenav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text);
+ --spectrum-sidenav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text);
+
+ --spectrum-sidenav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text);
+ --spectrum-sidenav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text);
+
+ --spectrum-sidenav-heading-top-margin: var(--spectrum-side-navigation-item-to-header);
+ --spectrum-sidenav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item);
+
+ /* color - background */
+ --spectrum-sidenav-background-disabled: transparent;
+ --spectrum-sidenav-background-default: transparent;
+ --spectrum-sidenav-background-hover: var(--spectrum-gray-100);
+ --spectrum-sidenav-item-background-down: var(--spectrum-gray-200);
+ --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100);
+
+ --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100);
+ --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200);
+ --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200);
+ --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100);
+
+ /* color font */
+ --spectrum-sidenav-header-color: var(--spectrum-gray-600);
+
+ --spectrum-sidenav-content-disabled-color: var(--spectrum-disabled-content-color);
+
+ --spectrum-sidenav-content-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-sidenav-content-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-sidenav-content-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-sidenav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-sidenav-content-color-default-selected: var(--spectrum-neutral-content-color-default);
+ --spectrum-sidenav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover);
+ --spectrum-sidenav-content-color-down-selected: var(--spectrum-neutral-content-color-down);
+ --spectrum-sidenav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus);
+
+ /* typography */
+ --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight);
+ --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style);
+ --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100);
+ --spectrum-sidenav-text-line-height: var(--spectrum-line-height-100);
+
+ --spectrum-sidenav-top-level-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight);
+ --spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style);
+ --spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100);
+ --spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100);
+
+ --spectrum-sidenav-header-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight);
+ --spectrum-sidenav-header-font-style: var(--spectrum-default-font-style);
+ --spectrum-sidenav-header-font-size: var(--spectrum-font-size-75);
+ --spectrum-sidenav-header-line-height: var(--spectrum-line-height-100);
+
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100);
+ --spectrum-sidenav-top-level-line-height: var(--spectrum-cjk-line-height-100);
+ --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100);
+ }
+ }
+}
diff --git a/components/sidenav/themes/spectrum.css b/components/sidenav/themes/spectrum.css
new file mode 100644
index 00000000000..f6fdc4259ab
--- /dev/null
+++ b/components/sidenav/themes/spectrum.css
@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-SideNav {
+ --spectrum-sidenav-background-hover: var(--spectrum-gray-200);
+ --spectrum-sidenav-item-background-down: var(--spectrum-gray-300);
+ --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200);
+
+ --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-200);
+ --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300);
+ --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300);
+ --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200);
+ }
+}
diff --git a/components/site/CHANGELOG.md b/components/site/CHANGELOG.md
deleted file mode 100644
index d7bb8c5b5ec..00000000000
--- a/components/site/CHANGELOG.md
+++ /dev/null
@@ -1,739 +0,0 @@
-# Change Log
-
-## 5.1.3
-
-### Patch Changes
-
-- [#3107](https://github.com/adobe/spectrum-css/pull/3107) [`83d5a17`](https://github.com/adobe/spectrum-css/commit/83d5a171bd850df693707611203ecce21f22e7d2) Thanks [@castastrophe](https://github.com/castastrophe)! - Incorporate glob export for the dist directory in all component packages as well as glob markdown exports (to include both CHANGELOG and READMEs).
-
- Sort keys in the package.json assets.
-
-## 5.1.2
-
-### Patch Changes
-
-- [#3045](https://github.com/adobe/spectrum-css/pull/3045) [`5d6e03f`](https://github.com/adobe/spectrum-css/commit/5d6e03f30891f9171f1a600b06d534ee85719277) Thanks [@castastrophe](https://github.com/castastrophe)! - Improve changeset suggestions by using exports instead of files in component packages
-
-## 5.1.1
-
-### Patch Changes
-
-- [#2677](https://github.com/adobe/spectrum-css/pull/2677) [`d83200c`](https://github.com/adobe/spectrum-css/commit/d83200ca70a959aa70329e71de0c4383de157855) Thanks [@castastrophe](https://github.com/castastrophe)! - Leveral local workspace versioning to prevent misalignment
-
-## 5.1.0
-
-### Minor Changes
-
-- [#2616](https://github.com/adobe/spectrum-css/pull/2616) [`7f45ea9`](https://github.com/adobe/spectrum-css/commit/7f45ea95d3d31addf29b0720de8623b0f3f0431d) Thanks [@castastrophe](https://github.com/castastrophe)!
-
-#### Build optmizations to support minification
-
-Output for all component CSS files is now being run through a lightweight optimizer (cssnano) which significantly reduces unnecessary whitespace. These changes reduce file size but should not have any impact on the rendering of the component. By removing unnecessary whitespace from var functions, we are making it easier to effectively minify our provided CSS assets.
-
-### Patch Changes
-
-- Updated peerDependencies [[`7f45ea9`](https://github.com/adobe/spectrum-css/commit/7f45ea95d3d31addf29b0720de8623b0f3f0431d)]:
- - @spectrum-css/tokens@>=14
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/* CSS Component */
-.spectrum-CSSComponent {
- box-sizing: border-box;
- inline-size: min(1080px, 100%);
- margin: var(--spectrum-spacing-600) auto;
- padding: 0 56px;
-}
-
-.spectrum-CSSComponent-heading {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
-
- margin-block-end: var(--spectrum-spacing-600);
-}
-
-.spectrum-CSSComponent-link {
- display: flex;
- align-items: center;
-
- color: inherit;
- text-decoration: none;
-
- outline: none;
-
- &:focus-visible,
- &:hover {
- text-decoration: underline;
- }
-}
-
-.spectrum-CSSComponent-statusContainer {
- display: flex;
- flex-flow: row nowrap;
- flex-grow: 1;
- gap: 80px;
- align-self: center;
-
- > * {
- flex-basis: min(370px, 50%);
- }
-}
-
-.spectrum-CSSComponent-detailsTable {
- --mod-table-cursor-row-default: default;
- --mod-table-row-background-color-hover: transparent;
- --mod-table-divider-color: transparent;
- --mod-table-border-color: transparent;
- --mod-table-row-line-height: 1.6;
-
- border-spacing: 0;
- margin-block-start: var(--spectrum-spacing-600);
- margin-block-end: 36px;
-
- & th {
- block-size: var(--spectrum-spacing-300);
- padding-inline-end: var(--spectrum-spacing-400);
- font-weight: var(--spectrum-regular-font-weight);
- text-align: start;
- }
-}
-
-.spectrum-CSSComponent-sectionHeading {
- margin-block-start: var(--spectrum-spacing-700);
- margin-block-end: var(--spectrum-spacing-500);
-}
-
-.spectrum-CSSExample-status,
-.spectrum-CSSComponent-status {
- min-block-size: 0 !important;
- padding: 0 !important;
-}
-
-.spectrum-CSSComponent-status::before {
- margin-inline-start: 0 !important;
-}
-
-.spectrum-CSSExample-status {
- margin-inline-start: var(--spectrum-spacing-200);
-}
-
-.spectrum-CSSComponent-version {
- flex-grow: 1;
- text-align: end;
-}
-
-.spectrum-CSSComponent-description {
- margin-block-start: var(--spectrum-spacing-400);
- margin-block-end: var(--spectrum-spacing-700);
-}
-
-/* cards */
-.spectrum-CSSComponent-resources {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- margin-block-end: var(--spectrum-spacing-500);
-
- & .spectrum-Card {
- margin-block-end: var(--spectrum-spacing-300);
- margin-inline-end: var(--spectrum-spacing-300);
- }
-}
-
-.spectrum-CSSComponent-resource--adobe,
-.spectrum-CSSComponent-resources a[href*="spectrum.adobe.com"] .spectrum-Card-preview {
- color: rgb(250, 15, 0);
- background-color: var(--spectrum-gray-100);
-}
-
-.spectrum-CSSComponent-resource--github,
-.spectrum-CSSComponent-resources a[href*="github.com"] .spectrum-Card-preview {
- color: var(--spectrum-black);
- background-color: var(--spectrum-transparent-black-200);
-}
-
-.spectrum-CSSComponent-resource--npm,
-.spectrum-CSSComponent-resources a[href*="npmjs.com"] .spectrum-Card-preview {
- background-color: rgba(203, 56, 55, 10%);
-}
-
-.spectrum-CSSComponent-cardImage {
- text-decoration: none;
-}
-
-.spectrum-CSSComponent-switcher {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- gap: var(--spectrum-spacing-500);
- justify-content: flex-end;
-}
-
-.spectrum-CSS-switcherContainer {
- margin-inline-start: var(--spectrum-spacing-300);
- white-space: nowrap;
-}
-
-/* CSS Example */
-.spectrum-CSSExample {
- margin-block-end: 64px;
-}
-
-.spectrum-CSSExample-container {
- position: relative;
- display: flex;
- flex-direction: column;
- border-radius: var(--spectrum-corner-radius-100);
-}
-
-.spectrum-CSSExample-heading {
- display: flex;
- flex-direction: row;
- align-items: center;
- margin-block-end: var(--spectrum-spacing-100) !important;
-}
-
-.spectrum-CSSExample-example,
-.spectrum-CSSExample-markup {
- box-sizing: border-box;
-}
-
-:root {
- --spectrum-docs-static-white-background-color: var(--spectrum-seafoam-900);
- --spectrum-docs-static-black-background-color: var(--spectrum-seafoam-100);
-}
-
-.spectrum-CSSExample-example {
- flex: 1 0 auto;
- min-block-size: 0;
- padding: var(--spectrum-spacing-500) var(--spectrum-spacing-600);
- border-radius: var(--spectrum-corner-radius-100) var(--spectrum-corner-radius-100) 0 0;
-
- &:has(> .spectrum-CSSExample-example-staticWhite) {
- background-color: var(--spectrum-docs-static-white-background-color);
- border-color: var(--spectrum-docs-static-white-background-color);
- }
-
- &:has(> .spectrum-CSSExample-example-staticBlack) {
- background-color: var(--spectrum-docs-static-black-background-color);
- border-color: var(--spectrum-docs-static-black-background-color);
- }
-}
-
-.spectrum-CSSExample-markup {
- position: relative;
-
- overflow: hidden;
-
- max-inline-size: 100%;
- max-block-size: 192px;
- padding: 10px 18px;
-
- border-radius: 0 0 var(--spectrum-corner-radius-100) var(--spectrum-corner-radius-100);
-
- &.is-open {
- max-block-size: 100%;
- padding-block-end: var(--spectrum-spacing-700);
-
- & .spectrum-CSSExample-markupToggle::before {
- display: none;
- }
- }
-}
-
-.spectrum-CSSExample-markupToggle + pre {
- padding-block-end: var(--spectrum-spacing-100);
-}
-
-.spectrum-CSSExample-example--spacious {
- position: relative;
- block-size: 150px;
-}
-
-.spectrum-CSSExample-example--overlay {
- position: relative;
- min-block-size: var(--spectrum-spacing-800);
-}
-
-.spectrum-CSSExample-dialog {
- position: relative !important;
- z-index: 1 !important;
- inset-block-start: 0;
- inset-inline-start: 0;
- transform: none !important;
-
- inline-size: auto !important;
- block-size: auto !important;
- margin-inline-start: auto;
- margin-inline-end: auto;
-
- transition: none;
-}
-
-/* Mimics the .spectrum-Modal-wrapper so the modals & dialogs are above the underlay */
-.spectrum-CSSExample-modal {
- z-index: 2 !important;
-}
-
-.spectrum-Examples,
-.spectrum-Examples-itemGroup {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- gap: var(--spectrum-spacing-100);
- justify-content: space-between;
-}
-
-.spectrum-Examples--vertical {
- flex-direction: column;
-}
-
-.spectrum-Examples-item .spectrum-Examples-itemHeading {
- margin-block-end: var(--spectrum-spacing-100);
-}
-
-.spectrum-Button.spectrum-CSSExample-overlayShowButton {
- position: absolute;
- inset-block-start: 50%;
- inset-inline-start: 50%;
- transform: translate(-50%, -50%);
-}
-
-.spectrum-CSSExample-markup pre code {
- white-space: pre-wrap;
-}
-
-.spectrum-CSSExample-markupToggle {
- position: absolute;
- z-index: 0;
- inset-block-end: 0;
- inset-inline-start: 0;
- inset-inline-end: 0;
-
- box-sizing: border-box;
- padding: var(--spectrum-spacing-400);
-
- font-size: var(--spectrum-font-size-50);
- text-align: start;
-}
-
-.spectrum-CenteredImage {
- display: block;
- inline-size: max(720px, 100%);
- margin: auto;
-}
-
-.spectrum-CodeBlock {
- margin: var(--spectrum-spacing-200) 0;
- padding: var(--spectrum-spacing-100) var(--spectrum-spacing-200);
-
- border-style: solid;
- border-width: var(--spectrum-border-width-100);
- border-radius: var(--spectrum-spacing-50);
-}
-
-/* CSS Example */
-.spectrum-CSSExample-example {
- background-color: var(--spectrum-background-layer-1-color, var(--spectrum-gray-100));
-}
-
-.spectrum-CSSExample-markup {
- background-color: var(--spectrum-gray-75);
- border-block-start: 1px solid var(--spectrum-gray-100);
-}
-
-.spectrum-CSSExample-markupToggle {
- z-index: 1;
- background-color: var(--spectrum-gray-75);
-}
-
-.spectrum-CSSExample-markup.is-open .spectrum-CSSExample-markupToggle {
- background-color: transparent;
-}
-
-.spectrum-CSSExample-example--overlay {
- color: var(--spectrum-transparent-black-400);
- background-color: var(--spectrum-transparent-black-400);
-}
-
-.spectrum-CSSExample-oldAPI {
- color: var(--spectrum-negative-color-800);
-}
-
-.spectrum-CodeBlock {
- background-color: var(--spectrum-gray-75);
- border-color: var(--spectrum-gray-400);
-}
-
-@media screen and (width <= 960px) {
- .spectrum-CSSComponent {
- margin-block: var(--spectrum-spacing-100);
- margin-inline: auto;
- padding-inline: 0 var(--spectrum-spacing-600);
- }
-
- .spectrum-CSSComponent-description {
- margin-block-end: var(--spectrum-spacing-200);
- }
-
- .spectrum-CSSExample {
- margin-block-end: var(--spectrum-spacing-200);
- }
-
- .spectrum-CSSExample-example {
- padding: var(--spectrum-spacing-200);
- }
-
- .spectrum-CSSComponent-header {
- margin-block-end: var(--spectrum-spacing-200);
- }
-
- .spectrum-CSSComponent-statusContainer,
- .spectrum-CSSComponent-version {
- display: none;
- }
-
- .spectrum-CSSComponent-title {
- font-size: var(--spectrum-font-size-500);
- }
-}
diff --git a/components/site/index.css b/components/site/index.css
deleted file mode 100644
index de10099eb5e..00000000000
--- a/components/site/index.css
+++ /dev/null
@@ -1,48 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-@import "./site.css";
-@import "./component.css";
-
-/* Scrollable */
-.u-scrollable,
-.is-scrollable {
- overflow-x: hidden;
- overflow-y: auto;
-
- -webkit-overflow-scrolling: touch;
-
- &::-webkit-scrollbar {
- inline-size: 10px;
- block-size: 10px;
- }
-
- &::-webkit-scrollbar-thumb {
- inline-size: 8px;
- block-size: 8px;
-
- background-color: var(--spectrum-gray-75);
- background-clip: padding-box;
- border-block: 2px solid rgba(0, 0, 0, 0%);
- border-radius: 8px;
- }
-
- &::-webkit-scrollbar-track,
- &::-webkit-scrollbar-track-piece {
- background-color: var(--spectrum-gray-75);
- }
-
- &:hover::-webkit-scrollbar-thumb {
- background-color: var(--spectrum-gray-400);
- }
-}
diff --git a/components/site/metadata/metadata.json b/components/site/metadata/metadata.json
deleted file mode 100644
index f0e550a65d4..00000000000
--- a/components/site/metadata/metadata.json
+++ /dev/null
@@ -1,155 +0,0 @@
-{
- "sourceFile": "index.css",
- "selectors": [
- ".is-scrollable",
- ".is-scrollable::-webkit-scrollbar",
- ".is-scrollable::-webkit-scrollbar-thumb",
- ".is-scrollable::-webkit-scrollbar-track",
- ".is-scrollable::-webkit-scrollbar-track-piece",
- ".is-scrollable:hover::-webkit-scrollbar-thumb",
- ".spectrum--large .spectrum-Site-logo",
- ".spectrum-Button.spectrum-CSSExample-overlayShowButton",
- ".spectrum-CSS-switcherContainer",
- ".spectrum-CSSComponent",
- ".spectrum-CSSComponent-cardImage",
- ".spectrum-CSSComponent-description",
- ".spectrum-CSSComponent-detailsTable",
- ".spectrum-CSSComponent-detailsTable th",
- ".spectrum-CSSComponent-header",
- ".spectrum-CSSComponent-heading",
- ".spectrum-CSSComponent-link",
- ".spectrum-CSSComponent-link:focus-visible",
- ".spectrum-CSSComponent-link:hover",
- ".spectrum-CSSComponent-resource--adobe",
- ".spectrum-CSSComponent-resource--github",
- ".spectrum-CSSComponent-resource--npm",
- ".spectrum-CSSComponent-resources",
- ".spectrum-CSSComponent-resources .spectrum-Card",
- ".spectrum-CSSComponent-resources a[href*=\"github.com\"] .spectrum-Card-preview",
- ".spectrum-CSSComponent-resources a[href*=\"npmjs.com\"] .spectrum-Card-preview",
- ".spectrum-CSSComponent-resources a[href*=\"spectrum.adobe.com\"] .spectrum-Card-preview",
- ".spectrum-CSSComponent-sectionHeading",
- ".spectrum-CSSComponent-status",
- ".spectrum-CSSComponent-status:before",
- ".spectrum-CSSComponent-statusContainer",
- ".spectrum-CSSComponent-statusContainer > *",
- ".spectrum-CSSComponent-switcher",
- ".spectrum-CSSComponent-title",
- ".spectrum-CSSComponent-version",
- ".spectrum-CSSExample",
- ".spectrum-CSSExample-container",
- ".spectrum-CSSExample-dialog",
- ".spectrum-CSSExample-example",
- ".spectrum-CSSExample-example--overlay",
- ".spectrum-CSSExample-example--spacious",
- ".spectrum-CSSExample-example:has(> .spectrum-CSSExample-example-staticBlack)",
- ".spectrum-CSSExample-example:has(> .spectrum-CSSExample-example-staticWhite)",
- ".spectrum-CSSExample-heading",
- ".spectrum-CSSExample-markup",
- ".spectrum-CSSExample-markup pre code",
- ".spectrum-CSSExample-markup.is-open",
- ".spectrum-CSSExample-markup.is-open .spectrum-CSSExample-markupToggle",
- ".spectrum-CSSExample-markup.is-open .spectrum-CSSExample-markupToggle:before",
- ".spectrum-CSSExample-markupToggle",
- ".spectrum-CSSExample-markupToggle + pre",
- ".spectrum-CSSExample-modal",
- ".spectrum-CSSExample-oldAPI",
- ".spectrum-CSSExample-status",
- ".spectrum-CenteredImage",
- ".spectrum-CodeBlock",
- ".spectrum-Examples",
- ".spectrum-Examples--vertical",
- ".spectrum-Examples-item .spectrum-Examples-itemHeading",
- ".spectrum-Examples-itemGroup",
- ".spectrum-HomeCard",
- ".spectrum-HomeCard-content",
- ".spectrum-HomeCard-image",
- ".spectrum-HomeCard-image .spectrum-Icon",
- ".spectrum-HomeCards",
- ".spectrum-Site",
- ".spectrum-Site-bottomNav",
- ".spectrum-Site-content",
- ".spectrum-Site-footerContainer",
- ".spectrum-Site-header",
- ".spectrum-Site-header .spectrum-Site-sideBarHeader",
- ".spectrum-Site-hero",
- ".spectrum-Site-heroHeading",
- ".spectrum-Site-heroHeading .spectrum-Heading",
- ".spectrum-Site-heroHeading h1.spectrum-Heading1--display",
- ".spectrum-Site-heroImage",
- ".spectrum-Site-logo",
- ".spectrum-Site-mainContainer",
- ".spectrum-Site-mainContent",
- ".spectrum-Site-nav",
- ".spectrum-Site-noSearchResults",
- ".spectrum-Site-overlay",
- ".spectrum-Site-overlay.is-open",
- ".spectrum-Site-page",
- ".spectrum-Site-search",
- ".spectrum-Site-searchResults",
- ".spectrum-Site-sideBar",
- ".spectrum-Site-sideBar.is-open",
- ".spectrum-Site-sideBarHeader",
- ".spectrum-Site-sideBarHeader:focus",
- ".spectrum-Site-sideBarHeader:focus h2",
- ".u-scrollable",
- ".u-scrollable::-webkit-scrollbar",
- ".u-scrollable::-webkit-scrollbar-thumb",
- ".u-scrollable::-webkit-scrollbar-track",
- ".u-scrollable::-webkit-scrollbar-track-piece",
- ".u-scrollable:hover::-webkit-scrollbar-thumb",
- ":root"
- ],
- "modifiers": [],
- "component": [],
- "global": [
- "--spectrum-animation-duration-200",
- "--spectrum-background-layer-1-color",
- "--spectrum-black",
- "--spectrum-body-color",
- "--spectrum-border-width-100",
- "--spectrum-component-height-300",
- "--spectrum-component-to-menu-extra-large",
- "--spectrum-corner-radius-100",
- "--spectrum-divider-thickness-small",
- "--spectrum-docs-static-black-background-color",
- "--spectrum-docs-static-white-background-color",
- "--spectrum-font-size-50",
- "--spectrum-font-size-500",
- "--spectrum-font-size-800",
- "--spectrum-gray-100",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
- "--spectrum-gray-50",
- "--spectrum-gray-75",
- "--spectrum-icon-size",
- "--spectrum-negative-color-800",
- "--spectrum-regular-font-weight",
- "--spectrum-seafoam-100",
- "--spectrum-seafoam-900",
- "--spectrum-spacing-100",
- "--spectrum-spacing-1000",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300",
- "--spectrum-spacing-400",
- "--spectrum-spacing-50",
- "--spectrum-spacing-500",
- "--spectrum-spacing-600",
- "--spectrum-spacing-700",
- "--spectrum-spacing-800",
- "--spectrum-spacing-900",
- "--spectrum-transparent-black-200",
- "--spectrum-transparent-black-300",
- "--spectrum-transparent-black-400"
- ],
- "system-theme": [],
- "passthroughs": [
- "--mod-icon-color",
- "--mod-table-border-color",
- "--mod-table-cursor-row-default",
- "--mod-table-divider-color",
- "--mod-table-row-background-color-hover",
- "--mod-table-row-line-height"
- ],
- "high-contrast": []
-}
diff --git a/components/site/metadata/mods.md b/components/site/metadata/mods.md
deleted file mode 100644
index a98209f6e87..00000000000
--- a/components/site/metadata/mods.md
+++ /dev/null
@@ -1,2 +0,0 @@
-| Modifiable custom properties |
-| ---------------------------- |
diff --git a/components/site/package.json b/components/site/package.json
deleted file mode 100644
index 50c1c815ed0..00000000000
--- a/components/site/package.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
- "name": "@spectrum-css/site",
- "version": "5.1.3",
- "description": "The Spectrum CSS Site component",
- "license": "Apache-2.0",
- "author": "Adobe",
- "homepage": "https://opensource.adobe.com/spectrum-css/",
- "repository": {
- "type": "git",
- "url": "https://github.com/adobe/spectrum-css.git",
- "directory": "components/site"
- },
- "bugs": {
- "url": "https://github.com/adobe/spectrum-css/issues"
- },
- "exports": {
- ".": "./dist/index.css",
- "./*.md": "./*.md",
- "./dist/*": "./dist/*",
- "./index-*.css": "./dist/index-*.css",
- "./index.css": "./dist/index.css",
- "./metadata.json": "./metadata/metadata.json",
- "./metadata/*": "./metadata/*",
- "./package.json": "./package.json",
- "./stories/*": "./stories/*"
- },
- "main": "dist/index.css",
- "files": [
- "dist/*",
- "*.md",
- "package.json",
- "stories/*",
- "metadata/*"
- ],
- "peerDependencies": {
- "@spectrum-css/tokens": ">=14"
- },
- "devDependencies": {
- "@spectrum-css/tokens": "workspace:^"
- },
- "keywords": [
- "spectrum",
- "css",
- "design system",
- "adobe"
- ],
- "publishConfig": {
- "access": "public"
- }
-}
diff --git a/components/site/project.json b/components/site/project.json
deleted file mode 100644
index de6cc3d7cba..00000000000
--- a/components/site/project.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "$schema": "../../node_modules/nx/schemas/project-schema.json",
- "name": "site",
- "tags": ["component", "legacy"],
- "targets": {
- "build": {},
- "clean": {},
- "compare": {},
- "format": {},
- "lint": {},
- "report": {},
- "test": {
- "defaultConfiguration": "scope"
- },
- "validate": {}
- }
-}
diff --git a/components/site/site.css b/components/site/site.css
deleted file mode 100644
index d5b24002df5..00000000000
--- a/components/site/site.css
+++ /dev/null
@@ -1,277 +0,0 @@
-/*!
- * Copyright 2024 Adobe. All rights reserved.
- *
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-.spectrum-Site {
- display: flex;
- flex-direction: column;
-
- block-size: 100%;
-
- color: var(--spectrum-body-color);
-
- background-color: var(--spectrum-gray-50);
-}
-
-.spectrum-Site-content {
- display: flex;
- flex-direction: row;
- inline-size: 100vw;
- block-size: 100vh;
-}
-
-.spectrum-Site-header {
- display: none;
-
- box-sizing: border-box;
- block-size: var(--spectrum-component-height-300);
- padding: var(--spectrum-component-to-menu-extra-large);
-
- border-block-end-color: var(--spectrum-gray-300);
- border-block-end-style: solid;
- border-block-end-width: var(--spectrum-divider-thickness-small);
-
- & .spectrum-Site-sideBarHeader {
- padding-block: 0;
- }
-}
-
-.spectrum-Site-header,
-.spectrum-Site-sideBar,
-.spectrum-Site-mainContent {
- color: var(--spectrum-body-color);
- background-color: var(--spectrum-gray-75);
-}
-
-.spectrum-Site-sideBar {
- display: flex;
- flex-direction: column;
- flex-grow: 0;
-
- max-inline-size: 100%;
-
- transition: none;
-}
-
-.spectrum-Site-sideBarHeader {
- display: flex;
- flex-direction: row;
- flex-grow: 0;
- flex-shrink: 0;
- align-items: center;
-
- padding: var(--spectrum-spacing-400);
-
- text-decoration: none;
-
- &:focus {
- outline: none;
-
- & h2 {
- text-decoration: underline;
- }
- }
-}
-
-.spectrum-Site-search {
- padding: var(--spectrum-spacing-300);
- padding-block-start: 0;
-}
-
-.spectrum-Site-searchResults {
- position: absolute;
- z-index: 101;
- inset-block-start: -100%;
- inset-inline-start: -100%;
-
- overflow-y: auto;
-
- max-block-size: calc(90vh - 120px);
-}
-
-.spectrum-Site-noSearchResults {
- padding: var(--spectrum-spacing-400);
-}
-
-.spectrum-Site-logo {
- /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- passthrough icon sizing */
- --spectrum-icon-size: 32px;
- --mod-icon-color: #fa0f00;
- margin-inline-end: var(--spectrum-spacing-200);
-
- .spectrum--large & {
- /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- passthrough icon sizing */
- --spectrum-icon-size: 40px;
- }
-}
-
-.spectrum-Site-nav {
- flex-grow: 1;
- padding: 0 var(--spectrum-spacing-400) var(--spectrum-spacing-600);
-}
-
-.spectrum-Site-bottomNav {
- margin-block-start: var(--spectrum-spacing-900);
-}
-
-.spectrum-Site-page {
- box-sizing: border-box;
- padding: var(--spectrum-spacing-600) 52px var(--spectrum-spacing-400);
-}
-
-.spectrum-Site-page,
-.spectrum-Site-hero {
- inline-size: min(1080px, 100%);
- margin: auto;
-}
-
-.spectrum-Site-heroHeading {
- margin-block-end: var(--spectrum-spacing-300);
-
- & .spectrum-Heading {
- margin-block-start: 0 !important;
- }
-}
-
-.spectrum-Site-heroImage {
- display: block;
-
- max-inline-size: 100%;
- margin-block-start: var(--spectrum-spacing-700);
- margin-block-end: var(--spectrum-spacing-700);
- margin-inline-start: auto;
- margin-inline-end: auto;
-
- border-radius: 4px;
-}
-
-.spectrum-Site-mainContent {
- overflow-y: auto;
- flex-grow: 1;
- border-block: none;
-}
-
-.spectrum-Site-footerContainer {
- inline-size: min(1080px, 100%);
- margin: var(--spectrum-spacing-400) auto;
- padding: 0 var(--spectrum-spacing-600);
-}
-
-/* Kill the overlay without animating when the page is resized */
-.spectrum-Site-overlay {
- pointer-events: none;
-
- position: fixed;
-
- /* Float above things by default */
- z-index: 99;
- inset-block-start: 0;
- inset-block-end: 0;
- inset-inline-start: 0;
- inset-inline-end: 0;
-
- overflow: hidden;
- display: none;
-
- opacity: 0;
- background-color: var(--spectrum-transparent-black-300);
-}
-
-.spectrum-HomeCards {
- display: grid;
- grid-gap: 1rem;
- grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
- margin: var(--spectrum-spacing-700) 0;
-}
-
-.spectrum-HomeCard {
- display: flex;
- align-items: flex-start;
- margin-block-end: var(--spectrum-spacing-300);
- padding: 0 var(--spectrum-spacing-200);
-}
-
-.spectrum-HomeCard-image {
- flex: 0 0 auto;
- inline-size: var(--spectrum-spacing-1000);
- margin-inline-end: 20px;
-
- & .spectrum-Icon {
- /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- passthrough icon sizing */
- --spectrum-icon-size: 200px;
- }
-}
-
-.spectrum-HomeCard-content {
- flex: 1 1 auto;
-}
-
-@media screen and (width <= 960px) {
- .spectrum-Site-content {
- /* fix: header scrolls off */
- max-block-size: calc(100% - var(--spectrum-spacing-700));
- }
-
- .spectrum-Site-overlay {
- opacity: 0;
-
- /* Exit animations */
- transition: opacity var(--spectrum-animation-duration-200) ease-out 0ms;
-
- &.is-open {
- pointer-events: auto;
- display: block;
- opacity: 1;
-
- /* Entry animations */
- transition: opacity var(--spectrum-animation-duration-200) ease-in 0ms;
- }
- }
-
- .spectrum-Site-sideBar {
- position: fixed;
- z-index: 100;
- inset-block-start: 0;
- inset-block-end: 0;
- inset-inline-end: 100%;
- transform: translateX(0);
-
- block-size: 100vh;
-
- transition: transform var(--spectrum-animation-duration-200) ease-in-out;
-
- &.is-open {
- transform: translateX(100%);
- }
- }
-
- .spectrum-Site-header {
- display: block;
- }
-
- .spectrum-Site-page {
- padding-inline-start: var(--spectrum-spacing-300);
- padding-inline-end: var(--spectrum-spacing-300);
- }
-
- .spectrum-Site-hero {
- max-inline-size: 100%;
- }
-
- .spectrum-Site-heroHeading h1.spectrum-Heading1--display {
- font-size: var(--spectrum-font-size-800);
- }
-
- .spectrum-Site-mainContainer {
- padding-inline: var(--spectrum-spacing-400);
- }
-}
diff --git a/components/slider/CHANGELOG.md b/components/slider/CHANGELOG.md
index debac98526c..037132e1386 100644
--- a/components/slider/CHANGELOG.md
+++ b/components/slider/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/stepper@7.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/stepper@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.3.0
### Minor Changes
diff --git a/components/slider/index.css b/components/slider/index.css
index 67f78404856..fbdb520d736 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -11,101 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-Slider {
- /* default sizing, matches t-shirt size M */
- --spectrum-slider-font-size: var(--spectrum-font-size-75);
- --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
- --spectrum-slider-control-height: var(--spectrum-component-height-100);
- --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
- --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
- --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium);
- --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
-
- /* TODO: placeholder value for sideLabel variant value width */
- --spectrum-slider-value-inline-size: 18px;
-
- &:dir(rtl),
- &:dir(rtl) {
- --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
- }
-}
-
-.spectrum-Slider--sizeS {
- --spectrum-slider-font-size: var(--spectrum-font-size-75);
- --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
- --spectrum-slider-control-height: var(--spectrum-component-height-75);
- --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
- --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
- --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
- --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small);
- --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100);
-}
-
-.spectrum-Slider--sizeL {
- --spectrum-slider-font-size: var(--spectrum-font-size-100);
- --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
- --spectrum-slider-control-height: var(--spectrum-component-height-200);
- --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
- --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
- --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
- --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large);
- --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
-
- /* TODO: placeholder value for sideLabel variant value width */
- --spectrum-slider-value-inline-size: 18px;
-}
-
-.spectrum-Slider--sizeXL {
- --spectrum-slider-font-size: var(--spectrum-font-size-200);
- --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large);
- --spectrum-slider-control-height: var(--spectrum-component-height-300);
- --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
- --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
- --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200);
- --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large);
- --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
-
- /* TODO: placeholder value for sideLabel variant value width */
- --spectrum-slider-value-inline-size: 22px;
-}
-
-.spectrum-Slider {
- --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100);
-
- --spectrum-slider-min-size: var(--spectrum-spacing-900);
-
- --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75);
- --spectrum-slider-label-margin-start: var(--spectrum-spacing-300);
- --spectrum-slider-handle-border-width: var(--spectrum-border-width-200);
- --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2);
- --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2);
- --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1);
- --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2));
- --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4);
- --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness);
- --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200);
- --spectrum-slider-tick-mark-border-radius: 2px;
- --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100);
-
- /* colors */
- --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default);
- --spectrum-slider-tick-label-color: var(--spectrum-neutral-content-color-default);
- --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color);
- --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100);
-
- /* values */
- --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4);
- --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap);
-
- --spectrum-slider-range-track-reset: 0;
-}
+ @import "./themes/spectrum-two.css";
.spectrum-Slider {
position: relative;
@@ -116,6 +22,10 @@
min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size));
user-select: none;
+
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
}
.spectrum-Slider--sideLabel {
@@ -296,7 +206,7 @@
block-size: 100%;
/* Flip the ramp automatically for RTL */
- transform: var(--spectrum-logical-rotation);
+ transform: var(--spectrum-logical-rotation,);
}
}
@@ -307,6 +217,7 @@
display: inline-block;
box-sizing: border-box;
+
inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
@@ -322,6 +233,7 @@
outline: none;
+
&:active,
&.is-dragged {
border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
@@ -337,21 +249,21 @@
/* Focus indicator. */
&::before {
content: "";
- display: block;
position: absolute;
- inset-inline-start: 50%;
inset-block-start: 50%;
+ inset-inline-start: 50%;
- transition:
- box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
- inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
- block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
+ transform: translate(-50%, -50%);
+ display: block;
inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
border-radius: 100%;
- transform: translate(-50%, -50%);
+ transition:
+ box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
+ inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
+ block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
.spectrum-Slider:dir(rtl) & {
transform: translate(50%, -50%);
@@ -372,23 +284,23 @@
* It is still sized and positioned where it would naturally be present so that touch users can find it with haptics.
*/
.spectrum-Slider-input {
- /* Remove the margin for input in Firefox and Safari. */
- margin: 0;
-
- inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
- block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
- padding: 0;
+ pointer-events: none;
+ cursor: default;
position: absolute;
inset-block-start: var(--mod-slider-input-top-size, var(--spectrum-slider-input-top-size));
inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left));
overflow: hidden;
- /* @todo Look into replacing with opacity 0. The tiny opacity value appears to be a workaround for a ChromeVox legacy bug (circa 2018). */
- opacity: 0.000001; /* stylelint-disable-line number-max-precision */
- cursor: default;
+
+ inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+ block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+
+ /* Remove the margin for input in Firefox and Safari. */
+ margin: 0;
+ padding: 0;
appearance: none;
+ opacity: 0.000001; /* stylelint-disable-line number-max-precision */
border: 0;
- pointer-events: none;
&:focus {
outline: none;
@@ -396,16 +308,16 @@
}
.spectrum-Slider-labelContainer {
+ position: relative;
display: flex;
align-items: center;
- position: relative;
inline-size: auto;
+ margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text));
+
font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
- margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text));
-
/* international support */
&:lang(ja),
&:lang(zh),
@@ -415,15 +327,15 @@
}
.spectrum-Slider-label {
- padding-inline-start: 0;
flex-grow: 1;
+ padding-inline-start: 0;
font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
}
.spectrum-Slider-value {
+ cursor: default;
flex-grow: 0;
padding-inline-end: 0;
- cursor: default;
font-feature-settings: "tnum";
text-align: end;
}
@@ -449,9 +361,9 @@
/* TODO: missing core-tokens for tick variant */
.spectrum-Slider-ticks {
+ z-index: 0;
display: flex;
justify-content: space-between;
- z-index: 0;
margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
/* TODO: missing core-token for handle fill-color */
@@ -464,17 +376,17 @@
.spectrum-Slider-tick {
position: relative;
- inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
/* tick marks are centered half based on slider control height and tick height */
inset-block-start: calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2);
+ inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
&::after {
- display: block;
+ content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: calc(50% - calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2));
- content: "";
+ display: block;
inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
block-size: var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height));
border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius));
@@ -492,8 +404,8 @@
&:first-of-type,
&:last-of-type {
.spectrum-Slider-tickLabel {
- display: block;
position: absolute;
+ display: block;
margin-inline: 0;
}
}
@@ -520,17 +432,16 @@
/* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */
.spectrum-Slider-handleContainer,
.spectrum-Slider-trackContainer {
- inline-size: calc(100% + var(--spectrum-slider-handle-size));
position: absolute;
inset-block-start: 0;
+ inline-size: calc(100% + var(--spectrum-slider-handle-size));
margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1);
}
.spectrum-Slider-trackContainer {
- block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
-
/* stop edges from peeking out */
overflow: hidden;
+ block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
}
/* Applies to the filled-offset variant to keep track the same color for highcontrast mode */
@@ -572,8 +483,8 @@
}
.spectrum-Slider-handle {
- border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color)));
background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
+ border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color)));
&:hover {
border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover)));
@@ -596,8 +507,8 @@
.spectrum-Slider--ramp {
.spectrum-Slider-handle {
- box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
background: var(--mod-slider-ramp-handle-background-color, var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color)));
+ box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
}
}
@@ -613,8 +524,8 @@
.spectrum-Slider-handle {
&.is-dragged {
- border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
+ border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
}
}
@@ -642,15 +553,15 @@
}
.spectrum-Slider-handle {
- border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)));
- background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color)));
- cursor: default;
pointer-events: none;
+ cursor: default;
+ background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color)));
+ border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)));
&:hover,
&:active {
- border-color: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)));
background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled)));
+ border-color: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)));
}
}
@@ -748,8 +659,8 @@
/* Slider handle turns transparent in high contrast mode for ramp */
&.is-disabled {
.spectrum-Slider-ramp + .spectrum-Slider-handle {
- fill: ButtonFace;
background-color: ButtonFace;
+ fill: ButtonFace;
}
}
}
diff --git a/components/slider/metadata/metadata.json b/components/slider/metadata/metadata.json
index 9e607276bd9..4f616d11f39 100644
--- a/components/slider/metadata/metadata.json
+++ b/components/slider/metadata/metadata.json
@@ -19,9 +19,6 @@
".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer + .spectrum-Slider-controls",
".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label",
".spectrum-Slider--sideLabel .spectrum-Slider-value",
- ".spectrum-Slider--sizeL",
- ".spectrum-Slider--sizeS",
- ".spectrum-Slider--sizeXL",
".spectrum-Slider--tick",
".spectrum-Slider--tick .spectrum-Slider-controls",
".spectrum-Slider--tick .spectrum-Slider-handle",
@@ -82,6 +79,10 @@
".spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before",
".spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before",
".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle",
+ ".spectrum-Slider.spectrum-Slider--sizeL",
+ ".spectrum-Slider.spectrum-Slider--sizeM",
+ ".spectrum-Slider.spectrum-Slider--sizeS",
+ ".spectrum-Slider.spectrum-Slider--sizeXL",
".spectrum-Slider:dir(rtl)",
".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before",
".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused",
@@ -241,13 +242,10 @@
"--spectrum-font-size-75",
"--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
"--spectrum-gray-400",
- "--spectrum-gray-50",
- "--spectrum-gray-600",
"--spectrum-gray-700",
+ "--spectrum-gray-75",
"--spectrum-gray-800",
- "--spectrum-gray-900",
"--spectrum-line-height-100",
"--spectrum-logical-rotation",
"--spectrum-neutral-content-color-default",
@@ -257,23 +255,7 @@
"--spectrum-spacing-900",
"--spectrum-text-to-visual-75"
],
- "system-theme": [
- "--system-spectrum-slider-handle-background-color",
- "--system-spectrum-slider-handle-background-color-disabled",
- "--system-spectrum-slider-handle-border-color",
- "--system-spectrum-slider-handle-border-color-down",
- "--system-spectrum-slider-handle-border-color-hover",
- "--system-spectrum-slider-handle-border-color-key-focus",
- "--system-spectrum-slider-handle-disabled-background-color",
- "--system-spectrum-slider-handle-focus-ring-color-key-focus",
- "--system-spectrum-slider-ramp-handle-background-color",
- "--system-spectrum-slider-ramp-track-color",
- "--system-spectrum-slider-ramp-track-color-disabled",
- "--system-spectrum-slider-tick-mark-color",
- "--system-spectrum-slider-ticks-handle-background-color",
- "--system-spectrum-slider-track-color",
- "--system-spectrum-slider-track-fill-color"
- ],
+ "system-theme": [],
"passthroughs": [],
"high-contrast": [
"--highcontrast-disabled-border-color",
diff --git a/components/slider/metadata/slider.yml b/components/slider/metadata/slider.yml
deleted file mode 100644
index f16fb512e45..00000000000
--- a/components/slider/metadata/slider.yml
+++ /dev/null
@@ -1,487 +0,0 @@
-name: Slider
-SpectrumSiteSlug: https://spectrum.adobe.com/page/slider/
-sections:
- - name: Migration Guide
- description: |
- ### Dial is now a separate component
- Dial has been moved to the [Dial](dial.html) component.
-
- ### Color slider is now a separate component
- Color slider has been moved to the [Color Slider](colorslider.html) component.
- Replace class names starting with `.spectrum-Slider` with `.spectrum-ColorSlider`.
-
- ### Use class `is-dragged` instead of `u-isGrabbing`
- On `spectrum-Slider-handle` when dragging, use `is-dragged` instead of `u-isGrabbing`.
-
- ### Three Handles is included in the `range` variant
- When using a slider with three handles, classify it as a `range` variant to apply correct styling
-
- ### Indicating focus
- Focus must be bubbled up to the parent so descendants siblings can be styled.
-
- Thus, implementations should add the following class to the `.spectrum-Slider` parent class in the following situations:
-
- * `.is-disabled` - when the slider is disabled
-
- Implementations should also bubble the following class to the `.spectrum-Slider-controls` parent class in the following situations:
-
- * `.is-focused` - when the handle input is focused with the mouse or keyboard
-examples:
- - id: slider
- name: Standard
- markup: |
-
-
- - id: slider-sizes
- name: Sizes
- markup: |
-
- - id: slider-label
- name: With Label
- markup: |
-
-
-
-
Slider Label - Disabled
-
14
-
-
-
-
-
Slider Label - Disabled
-
14
-
-
-
-
-
Slider Label
-
14 - 48
-
-
-
-
-
Slider Label - Disabled
-
14 - 48
-
-
-
-
-
Slider Label - Disabled
-
14
-
-
-
-
-
Slider Label - Disabled
-
14
-
-
-
-
-
Slider Label - Disabled
-
14
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Slider {
+ --spectrum-slider-track-color: var(--spectrum-gray-200);
+ --spectrum-slider-track-fill-color: var(--spectrum-gray-700);
+ --spectrum-slider-ramp-track-color: var(--spectrum-gray-400);
+ --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100);
+
+ --spectrum-slider-handle-background-color: transparent;
+ --spectrum-slider-handle-background-color-disabled: transparent;
+ --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75);
+ --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75);
+ --spectrum-slider-handle-border-color: var(--spectrum-gray-700);
+ --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75);
+
+ --spectrum-slider-tick-mark-color: var(--spectrum-gray-200);
+
+ --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800);
+ --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
+ --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800);
+ --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
+
+ /* TODO: placeholder value for sideLabel variant value width */
+ --spectrum-slider-value-inline-size: 18px;
+
+ --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100);
+
+ --spectrum-slider-min-size: var(--spectrum-spacing-900);
+
+ --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75);
+ --spectrum-slider-label-margin-start: var(--spectrum-spacing-300);
+ --spectrum-slider-handle-border-width: var(--spectrum-border-width-200);
+ --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2);
+ --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2);
+ --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1);
+ --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2));
+ --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4);
+ --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness);
+ --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200);
+ --spectrum-slider-tick-mark-border-radius: 2px;
+ --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-75);
+
+ /* colors */
+ --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-slider-tick-label-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color);
+ --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-75);
+
+ /* values */
+ --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4);
+ --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap);
+
+ --spectrum-slider-range-track-reset: 0;
+
+ &.spectrum-Slider--sizeS {
+ --spectrum-slider-font-size: var(--spectrum-font-size-75);
+ --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
+ --spectrum-slider-control-height: var(--spectrum-component-height-75);
+ --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+ --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
+ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small);
+ --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100);
+ }
+
+ &,
+ &.spectrum-Slider--sizeM {
+ --spectrum-slider-font-size: var(--spectrum-font-size-75);
+ --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
+ --spectrum-slider-control-height: var(--spectrum-component-height-100);
+ --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+ --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
+ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
+ --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium);
+ --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+ }
+
+ &.spectrum-Slider--sizeL {
+ --spectrum-slider-font-size: var(--spectrum-font-size-100);
+ --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
+ --spectrum-slider-control-height: var(--spectrum-component-height-200);
+ --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+ --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
+ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
+ --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large);
+ --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+
+ /* TODO: placeholder value for sideLabel variant value width */
+ --spectrum-slider-value-inline-size: 18px;
+ }
+
+ &.spectrum-Slider--sizeXL {
+ --spectrum-slider-font-size: var(--spectrum-font-size-200);
+ --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large);
+ --spectrum-slider-control-height: var(--spectrum-component-height-300);
+ --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+ --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
+ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200);
+ --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large);
+ --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+
+ /* TODO: placeholder value for sideLabel variant value width */
+ --spectrum-slider-value-inline-size: 22px;
+ }
+ }
+}
diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css
index 1beab05efd8..092899c2ac8 100644
--- a/components/slider/themes/spectrum.css
+++ b/components/slider/themes/spectrum.css
@@ -11,25 +11,18 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-Slider {
--spectrum-slider-track-color: var(--spectrum-gray-300);
- --spectrum-slider-track-fill-color: var(--spectrum-gray-700);
- --spectrum-slider-ramp-track-color: var(--spectrum-gray-400);
--spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200);
-
- --spectrum-slider-handle-background-color: transparent;
- --spectrum-slider-handle-background-color-disabled: transparent;
--spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100);
--spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100);
- --spectrum-slider-handle-border-color: var(--spectrum-gray-700);
--spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100);
-
--spectrum-slider-tick-mark-color: var(--spectrum-gray-300);
-
- --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800);
- --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
- --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800);
- --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
}
}
diff --git a/components/splitview/CHANGELOG.md b/components/splitview/CHANGELOG.md
index 2cc36ffefab..2684bee86bb 100644
--- a/components/splitview/CHANGELOG.md
+++ b/components/splitview/CHANGELOG.md
@@ -1,5 +1,161 @@
# Change Log
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.2.3
### Patch Changes
diff --git a/components/splitview/index.css b/components/splitview/index.css
index 748e9faf336..713d9b98a75 100644
--- a/components/splitview/index.css
+++ b/components/splitview/index.css
@@ -11,27 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-SplitView {
- --spectrum-splitview-vertical-width: 100%;
- --spectrum-splitview-vertical-gripper-width: 50%;
- --spectrum-splitview-vertical-gripper-outer-width: 100%;
- --spectrum-splitview-vertical-gripper-reset: 0;
-
- --spectrum-splitview-background-color: var(--spectrum-gray-100);
- --spectrum-splitview-content-color: var(--spectrum-body-color);
-
- --spectrum-splitview-handle-background-color: var(--spectrum-gray-300);
- --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400);
- --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800);
- --spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color);
- --spectrum-splitview-handle-width: var(--spectrum-border-width-200);
-
- --spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75);
- --spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
- --spectrum-splitview-gripper-height: 16px; /* No good token to use for this */
- --spectrum-splitview-gripper-border-width-horizontal: 3px; /* No good token to use for this */
- --spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);
-}
+ @import "./themes/spectrum-two.css";
.spectrum-SplitView {
display: flex;
diff --git a/components/splitview/metadata/metadata.json b/components/splitview/metadata/metadata.json
index b8f8fa5031a..d18e2fb5894 100644
--- a/components/splitview/metadata/metadata.json
+++ b/components/splitview/metadata/metadata.json
@@ -77,9 +77,9 @@
"--spectrum-border-width-400",
"--spectrum-corner-radius-75",
"--spectrum-focus-indicator-color",
- "--spectrum-gray-100",
- "--spectrum-gray-300",
+ "--spectrum-gray-200",
"--spectrum-gray-400",
+ "--spectrum-gray-75",
"--spectrum-gray-800"
],
"system-theme": [],
diff --git a/components/splitview/metadata/splitview.yml b/components/splitview/metadata/splitview.yml
deleted file mode 100644
index cec1ec13231..00000000000
--- a/components/splitview/metadata/splitview.yml
+++ /dev/null
@@ -1,70 +0,0 @@
-name: Split view
-examples:
- - id: splitview
- name: Horizontal
- markup: |
-
- - id: splitview-horizontal
- name: Horizontally resizable
- markup: |
-
- - id: splitview-left
- name: Horizontal collapsed left
- markup: |
-
- - id: splitview-right
- name: Horizontal collapsed right
- markup: |
-
- - id: splitview-vertical
- name: Vertically resizable
- markup: |
-
- - id: splitview-vertical-top
- name: Vertical collapsed top
- markup: |
-
- - id: splitview-vertical-bottom
- name: Vertical collapsed bottom
- markup: |
-
diff --git a/components/splitview/package.json b/components/splitview/package.json
index dd82f28afcb..37a49e72a26 100644
--- a/components/splitview/package.json
+++ b/components/splitview/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/splitview",
- "version": "5.2.3",
+ "version": "6.0.0-s2-foundations.13",
"description": "The Spectrum CSS splitview component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/splitview/stories/template.js b/components/splitview/stories/template.js
index aacdd00a3e7..4fb08b911dd 100644
--- a/components/splitview/stories/template.js
+++ b/components/splitview/stories/template.js
@@ -3,6 +3,9 @@ import { classMap } from "lit/directives/class-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-SplitView",
diff --git a/components/splitview/themes/express.css b/components/splitview/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/splitview/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/splitview/themes/spectrum-two.css b/components/splitview/themes/spectrum-two.css
new file mode 100644
index 00000000000..622a83ee286
--- /dev/null
+++ b/components/splitview/themes/spectrum-two.css
@@ -0,0 +1,36 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-SplitView {
+ --spectrum-splitview-vertical-width: 100%;
+ --spectrum-splitview-vertical-gripper-width: 50%;
+ --spectrum-splitview-vertical-gripper-outer-width: 100%;
+ --spectrum-splitview-vertical-gripper-reset: 0;
+
+ --spectrum-splitview-background-color: var(--spectrum-gray-75);
+ --spectrum-splitview-content-color: var(--spectrum-body-color);
+
+ --spectrum-splitview-handle-background-color: var(--spectrum-gray-200);
+ --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400);
+ --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800);
+ --spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color);
+ --spectrum-splitview-handle-width: var(--spectrum-border-width-200);
+
+ --spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75);
+ --spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
+ --spectrum-splitview-gripper-height: 16px; /* No good token to use for this */
+ --spectrum-splitview-gripper-border-width-horizontal: 3px; /* No good token to use for this */
+ --spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);
+ }
+}
diff --git a/components/splitview/themes/spectrum.css b/components/splitview/themes/spectrum.css
new file mode 100644
index 00000000000..78ccfc778e4
--- /dev/null
+++ b/components/splitview/themes/spectrum.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-SplitView {
+ --spectrum-splitview-background-color: var(--spectrum-gray-100);
+ --spectrum-splitview-handle-background-color: var(--spectrum-gray-300);
+ }
+}
diff --git a/components/statuslight/CHANGELOG.md b/components/statuslight/CHANGELOG.md
index 38c4a9467a9..5998c3d2ffb 100644
--- a/components/statuslight/CHANGELOG.md
+++ b/components/statuslight/CHANGELOG.md
@@ -1,5 +1,161 @@
# Change Log
+## 8.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 7.2.2
### Patch Changes
diff --git a/components/statuslight/index.css b/components/statuslight/index.css
index fa5beaaa236..0a943cd643a 100644
--- a/components/statuslight/index.css
+++ b/components/statuslight/index.css
@@ -11,98 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-StatusLight {
- /* Static tokens */
- --spectrum-statuslight-corner-radius: 50%;
- --spectrum-statuslight-font-weight: 400;
- --spectrum-statuslight-border-width: var(--spectrum-border-width-100);
-
- /* Size */
- --spectrum-statuslight-height: var(--spectrum-component-height-100);
- --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
- --spectrum-statuslight-line-height: var(--spectrum-line-height-100);
- --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);
-
- --spectrum-statuslight-font-size: var(--spectrum-font-size-100);
-
- /* Space */
- --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
- --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium);
- --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
- --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
-
- /* Color */
- --spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color);
- --spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-visual-color);
- --spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color);
- --spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color);
- --spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color);
- --spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color);
- --spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color);
- --spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color);
- --spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color);
- --spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color);
- --spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color);
- --spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-visual-color);
- --spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-visual-color);
- --spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color);
- --spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color);
- --spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-visual-color);
- --spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color);
- --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color);
- --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color);
- --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color);
-}
-
-.spectrum-StatusLight--sizeS {
- --spectrum-statuslight-height: var(--spectrum-component-height-75);
- --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-small);
-
- --spectrum-statuslight-font-size: var(--spectrum-font-size-75);
-
- --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75);
- --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small);
- --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75);
- --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75);
-}
-
-.spectrum-StatusLight--sizeM {
- --spectrum-statuslight-height: var(--spectrum-component-height-100);
- --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
-
- --spectrum-statuslight-font-size: var(--spectrum-font-size-100);
-
- --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
- --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium);
- --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
- --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
-}
-
-.spectrum-StatusLight--sizeL {
- --spectrum-statuslight-height: var(--spectrum-component-height-200);
- --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-large);
-
- --spectrum-statuslight-font-size: var(--spectrum-font-size-200);
-
- --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200);
- --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large);
- --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200);
- --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200);
-}
-
-.spectrum-StatusLight--sizeXL {
- --spectrum-statuslight-height: var(--spectrum-component-height-300);
- --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-extra-large);
-
- --spectrum-statuslight-font-size: var(--spectrum-font-size-300);
-
- --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300);
- --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large);
- --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300);
- --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300);
-}
+@import "./themes/spectrum-two.css";
.spectrum-StatusLight {
display: flex;
@@ -131,6 +40,8 @@
/* Dot */
&::before {
+ --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)));
+
content: "";
flex-grow: 0;
flex-shrink: 0;
@@ -139,7 +50,6 @@
block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius));
- --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)));
margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot);
margin-inline-end: var(--mod-statuslight-spacing-dot-to-label, var(--spectrum-statuslight-spacing-dot-to-label));
}
@@ -239,10 +149,11 @@
@media (forced-colors: active) {
.spectrum-StatusLight {
- forced-color-adjust: none;
--highcontrast-statuslight-content-color-default: CanvasText;
--highcontrast-statuslight-subdued-content-color-default: CanvasText;
+ forced-color-adjust: none;
+
/* Dot */
&::before {
forced-color-adjust: none;
diff --git a/components/statuslight/metadata/statuslight.yml b/components/statuslight/metadata/statuslight.yml
deleted file mode 100644
index 09359419d1c..00000000000
--- a/components/statuslight/metadata/statuslight.yml
+++ /dev/null
@@ -1,93 +0,0 @@
-name: Status light
-SpectrumSiteSlug: https://spectrum.adobe.com/page/status-light/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### T-shirt sizing
- Status Light now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-StatusLight--size*` class.
-examples:
- - id: statuslight-sizing
- name: Sizing
- status: Verified
- markup: |
-
-
-
-
M (default)
-
-
Medium
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis tellus id interdum velit laoreet id donec ultrices tincidunt. Sollicitudin nibh sit amet commodo nulla facilisi. Auctor urna nunc id cursus. Sem viverra aliquet eget sit amet tellus cras adipiscing.
-
- - id: statuslight-colors
- name: Colors
- status: Verified
- markup: |
- Gray Status
- Red Status
- Orange Status
- Yellow Status
- Chartreuse Status
- Celery Status
- Green Status
- Seafoam Status
- Cyan Status
- Blue Status
- Indigo Status
- Purple Status
- Fuchsia Status
- Magenta Status
- - id: statuslight-neutral
- name: Neutral
- status: Verified
- markup: |
- Paused
- - id: statuslight-accent
- name: Accent
- status: Verified
- markup: |
- Accent
- - id: statuslight-info
- name: Info
- status: Verified
- markup: |
- Active
- - id: statuslight-positive
- name: Positive
- status: Verified
- markup: |
- Approved
- - id: statuslight-notice
- name: Notice
- status: Verified
- markup: |
- Needs Approval
- - id: statuslight-negative
- name: Negative
- status: Verified
- markup: |
- Rejected
diff --git a/components/statuslight/package.json b/components/statuslight/package.json
index f3aedd4f360..bf7da2c6c1d 100644
--- a/components/statuslight/package.json
+++ b/components/statuslight/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/statuslight",
- "version": "7.2.2",
+ "version": "8.0.0-s2-foundations.13",
"description": "The Spectrum CSS statuslight component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/statuslight/stories/template.js b/components/statuslight/stories/template.js
index f4ae4286f4e..81b45819948 100644
--- a/components/statuslight/stories/template.js
+++ b/components/statuslight/stories/template.js
@@ -3,6 +3,9 @@ import { classMap } from "lit/directives/class-map.js";
import { styleMap } from "lit/directives/style-map.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-StatusLight",
@@ -10,16 +13,18 @@ export const Template = ({
variant = "info",
label,
customStyles = {},
-} = {}) => html`
-
- ${label}
-
-`;
+} = {}) => {
+ return html`
+
+ ${label}
+
+ `;
+};
diff --git a/components/statuslight/themes/express.css b/components/statuslight/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/statuslight/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/statuslight/themes/spectrum-two.css b/components/statuslight/themes/spectrum-two.css
new file mode 100644
index 00000000000..3340e7664fb
--- /dev/null
+++ b/components/statuslight/themes/spectrum-two.css
@@ -0,0 +1,107 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-StatusLight {
+ /* Static tokens */
+ --spectrum-statuslight-corner-radius: 50%;
+ --spectrum-statuslight-font-weight: 400;
+ --spectrum-statuslight-border-width: var(--spectrum-border-width-100);
+
+ /* Size */
+ --spectrum-statuslight-height: var(--spectrum-component-height-100);
+ --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
+ --spectrum-statuslight-line-height: var(--spectrum-line-height-100);
+ --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);
+
+ --spectrum-statuslight-font-size: var(--spectrum-font-size-100);
+
+ /* Space */
+ --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
+ --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium);
+ --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
+ --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
+
+ /* Color */
+ --spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color);
+ --spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-visual-color);
+ --spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color);
+ --spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color);
+ --spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color);
+ --spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color);
+ --spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color);
+ --spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color);
+ --spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color);
+ --spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color);
+ --spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color);
+ --spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-visual-color);
+ --spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-visual-color);
+ --spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color);
+ --spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color);
+ --spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-visual-color);
+ --spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color);
+ --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color);
+ --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color);
+ --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color);
+ }
+
+ .spectrum-StatusLight--sizeS {
+ --spectrum-statuslight-height: var(--spectrum-component-height-75);
+ --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-small);
+
+ --spectrum-statuslight-font-size: var(--spectrum-font-size-75);
+
+ --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75);
+ --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small);
+ --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75);
+ --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75);
+ }
+
+ .spectrum-StatusLight--sizeM {
+ --spectrum-statuslight-height: var(--spectrum-component-height-100);
+ --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
+
+ --spectrum-statuslight-font-size: var(--spectrum-font-size-100);
+
+ --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
+ --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium);
+ --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
+ --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
+ }
+
+ .spectrum-StatusLight--sizeL {
+ --spectrum-statuslight-height: var(--spectrum-component-height-200);
+ --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-large);
+
+ --spectrum-statuslight-font-size: var(--spectrum-font-size-200);
+
+ --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200);
+ --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large);
+ --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200);
+ --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200);
+ }
+
+ .spectrum-StatusLight--sizeXL {
+ --spectrum-statuslight-height: var(--spectrum-component-height-300);
+ --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-extra-large);
+
+ --spectrum-statuslight-font-size: var(--spectrum-font-size-300);
+
+ --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300);
+ --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large);
+ --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300);
+ --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300);
+ }
+}
diff --git a/components/statuslight/themes/spectrum.css b/components/statuslight/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/statuslight/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/steplist/CHANGELOG.md b/components/steplist/CHANGELOG.md
index 047222c10c4..2ced2c96d04 100644
--- a/components/steplist/CHANGELOG.md
+++ b/components/steplist/CHANGELOG.md
@@ -1,5 +1,189 @@
# Change Log
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.13
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tooltip@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/steplist/index.css b/components/steplist/index.css
index ef1aa286287..31fedf494d1 100644
--- a/components/steplist/index.css
+++ b/components/steplist/index.css
@@ -11,48 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-Steplist {
- /* The width of a step */
- --spectrum-steplist-step-width: 80px;
-
- /* The diameter of the marker */
- --spectrum-steplist-marker-diameter: 8px;
-
- /* The width of the hit area */
- --spectrum-steplist-marker-hitArea: 20px;
-
- /* The height of the line */
- --spectrum-steplist-segment-height: 2px;
-
- /* This gives enough space for one line of text */
- --spectrum-steplist-topPadding: 22px;
- --spectrum-steplist-small-topPadding: 11px;
-
- /* This gives enough space for the longest possible label */
- --spectrum-steplist-sidePadding: 60px;
-
- /* Offset from the BOTTOM of the steplist */
- --spectrum-steplist-label-labelOffset: 10px;
-
- /* Font size of the label */
- --spectrum-steplist-label-text-size: 12px;
-
- --spectrum-steplist-current-label-text-color: var(--spectrum-gray-800);
-
- --spectrum-steplist-current-marker-color: var(--spectrum-gray-800);
-
- --spectrum-steplist-complete-label-text-color: var(--spectrum-gray-700);
-
- --spectrum-steplist-incomplete-label-color: var(--spectrum-gray-600);
-
- --spectrum-steplist-complete-marker-background-color: var(--spectrum-gray-600);
-
- --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-300);
-
- --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300);
-
- --spectrum-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600);
-}
+@import "./themes/spectrum-two.css";
.spectrum-Steplist {
/* Contain child elements with positive z-index */
@@ -60,6 +19,7 @@
position: relative;
display: block;
+ /* @todo: ignored because the display mode is set to block */
vertical-align: top;
margin: 0;
padding-block-start: var(--mod-steplist-topPadding, var(--spectrum-steplist-topPadding));
@@ -70,6 +30,7 @@
white-space: nowrap;
font-size: 0; /* To remove html whitespace between inline elements */
line-height: 16px; /* in case the container changes it */
+
}
.spectrum-Steplist--interactive {
@@ -189,6 +150,7 @@
inset-inline-start: 50%;
inset-block-end: var(--mod-steplist-label-labelOffset, var(--spectrum-steplist-label-labelOffset));
+
display: block;
inline-size: calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) * 1.5);
diff --git a/components/steplist/metadata/metadata.json b/components/steplist/metadata/metadata.json
index 3f2c92091bf..4d6a4a8b4ec 100644
--- a/components/steplist/metadata/metadata.json
+++ b/components/steplist/metadata/metadata.json
@@ -86,7 +86,7 @@
"--spectrum-steplist-topPadding"
],
"global": [
- "--spectrum-gray-300",
+ "--spectrum-gray-200",
"--spectrum-gray-600",
"--spectrum-gray-700",
"--spectrum-gray-800"
diff --git a/components/steplist/metadata/steplist.yml b/components/steplist/metadata/steplist.yml
deleted file mode 100644
index 30c45638424..00000000000
--- a/components/steplist/metadata/steplist.yml
+++ /dev/null
@@ -1,274 +0,0 @@
-name: Steplist
-examples:
- - id: steplist-current
- name: Standard (static)
- description: A basic steplist.
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Step 1
-
-
-
-
- Step 2
-
-
-
-
- Step 3
-
-
-
-
- Step 4
-
-
-
-
Static variant
-
-
-
-
-
-
-
-
- Step 4
-
-
-
-
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/steplist/themes/spectrum-two.css b/components/steplist/themes/spectrum-two.css
new file mode 100644
index 00000000000..6b93b324a2f
--- /dev/null
+++ b/components/steplist/themes/spectrum-two.css
@@ -0,0 +1,50 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Steplist {
+ /* The width of a step */
+ --spectrum-steplist-step-width: 80px;
+
+ /* The diameter of the marker */
+ --spectrum-steplist-marker-diameter: 8px;
+
+ /* The width of the hit area */
+ --spectrum-steplist-marker-hitArea: 20px;
+
+ /* The height of the line */
+ --spectrum-steplist-segment-height: 2px;
+
+ /* This gives enough space for one line of text */
+ --spectrum-steplist-topPadding: 22px;
+ --spectrum-steplist-small-topPadding: 11px;
+
+ /* This gives enough space for the longest possible label */
+ --spectrum-steplist-sidePadding: 60px;
+
+ /* Offset from the BOTTOM of the steplist */
+ --spectrum-steplist-label-labelOffset: 10px;
+
+ /* Font size of the label */
+ --spectrum-steplist-label-text-size: 12px;
+
+ --spectrum-steplist-current-label-text-color: var(--spectrum-gray-800);
+ --spectrum-steplist-current-marker-color: var(--spectrum-gray-800);
+ --spectrum-steplist-complete-label-text-color: var(--spectrum-gray-700);
+ --spectrum-steplist-incomplete-label-color: var(--spectrum-gray-600);
+ --spectrum-steplist-complete-marker-background-color: var(--spectrum-gray-600);
+ --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200);
+ --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200);
+ --spectrum-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600);
+ }
+}
diff --git a/tokens/dist/css/components/spectrum/closebutton.css b/components/steplist/themes/spectrum.css
similarity index 67%
rename from tokens/dist/css/components/spectrum/closebutton.css
rename to components/steplist/themes/spectrum.css
index feef7894ee4..645ce4ed213 100644
--- a/tokens/dist/css/components/spectrum/closebutton.css
+++ b/components/steplist/themes/spectrum.css
@@ -11,9 +11,14 @@
* governing permissions and limitations under the License.
*/
-.spectrum {
- --system-spectrum-closebutton-background-color-default: transparent;
- --system-spectrum-closebutton-background-color-hover: var(--spectrum-gray-200);
- --system-spectrum-closebutton-background-color-down: var(--spectrum-gray-300);
- --system-spectrum-closebutton-background-color-focus: var(--spectrum-gray-200);
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Steplist {
+ --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-300);
+ --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300);
+ }
}
diff --git a/components/stepper/CHANGELOG.md b/components/stepper/CHANGELOG.md
index 88e04eb097c..6af7c59d6ec 100644
--- a/components/stepper/CHANGELOG.md
+++ b/components/stepper/CHANGELOG.md
@@ -1,5 +1,248 @@
# Change Log
+## 7.0.0-s2-foundations.16
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5f693f2`](https://github.com/adobe/spectrum-css/commit/5f693f2b000ffe77f1293980bc6006fbc5fa76c0) Thanks [@pfulton](https://github.com/pfulton)! - Stepper bug fixes for S1 and Express variants.
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5f693f2`](https://github.com/adobe/spectrum-css/commit/5f693f2b000ffe77f1293980bc6006fbc5fa76c0) Thanks [@pfulton](https://github.com/pfulton)! - Realign structure with original style format
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5f693f2`](https://github.com/adobe/spectrum-css/commit/5f693f2b000ffe77f1293980bc6006fbc5fa76c0) Thanks [@pfulton](https://github.com/pfulton)! - Add separate variable for stepper button border width
+
+## 7.0.0-s2-foundations.15
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9ae725f`](https://github.com/adobe/spectrum-css/commit/9ae725f10ebbb78b62070c4c477cb41cfc1b1ed6) Thanks [@pfulton](https://github.com/pfulton)! - Combobox moved the quiet min-inline-size property to index.css from theme to pick up the t-shirt sizing for the calc.
+
+ Typography increases specificity for the t-shirt sizing.
+
+ Stepper fixes for the disabled + hovered states as well as regressions fixed for the quiet variant.
+
+- Updated dependencies [[`4e80ae6`](https://github.com/adobe/spectrum-css/commit/4e80ae67ddda329a5ed556b57426623c6f0f13f0)]:
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.19
+
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.14
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.18
+ - @spectrum-css/textfield@8.0.0-s2-foundations.14
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#3041](https://github.com/adobe/spectrum-css/pull/3041) [`7be40c3`](https://github.com/adobe/spectrum-css/commit/7be40c334748f3e1064c614af793117f06146475) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - --mod properties were moved out of `stepper/themes/spectrum-two.css` into `stepper/index.css` so --mods can be applied at the component level.
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.12
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.13
+ - @spectrum-css/textfield@8.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.11
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/textfield@8.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.10
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/textfield@8.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`da47fa2`](https://github.com/adobe/spectrum-css/commit/da47fa2cb18373e74a6718775f2db90bb25868d4), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.9
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/textfield@8.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.8
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/textfield@8.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.7
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/textfield@8.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.6
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/textfield@8.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.5
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/textfield@8.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.4
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/textfield@8.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.3
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/textfield@8.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.2
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/textfield@8.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.1
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/textfield@8.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/infieldbutton@6.0.0-s2-foundations.0
+ - @spectrum-css/actionbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/textfield@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 6.2.0
### Minor Changes
diff --git a/components/stepper/index.css b/components/stepper/index.css
index e7aa03340fc..f4b37364142 100644
--- a/components/stepper/index.css
+++ b/components/stepper/index.css
@@ -11,93 +11,17 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Stepper {
- /* Set defaults to medium size */
- --spectrum-stepper-height: var(--spectrum-component-height-100);
- --spectrum-stepper-border-radius: var(--spectrum-corner-radius-100);
-
- --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium);
- --spectrum-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill);
-
- --spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + (var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2));
-
- /*** Focus Indicator ***/
- --spectrum-stepper-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
- --spectrum-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- /*** :AFTER - this is for the :after element labeled below as hit area, but used as focus indicator in ActionButton ***/
- --spectrum-stepper-button-offset: calc(var(--spectrum-stepper-button-width) / 2);
-
- --spectrum-stepper-animation-duration: var(--spectrum-animation-duration-100);
+ --spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-stepper-min-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + (var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2));
/*** MODS for sub components ***/
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-buttons-border-color, var(--spectrum-stepper-buttons-border-color)));
--mod-infield-button-border-width: var(--mod-stepper-button-border-width, var(--spectrum-stepper-button-border-width));
+ --mod-infield-button-border-radius-reset: var(--spectrum-stepper-button-border-radius-reset);
--mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
- &.spectrum-Stepper--sizeS {
- --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-small);
- --spectrum-stepper-height: var(--spectrum-component-height-75);
- }
-
- &.spectrum-Stepper--sizeL {
- --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-large);
- --spectrum-stepper-height: var(--spectrum-component-height-200);
- }
-
- &.spectrum-Stepper--sizeXL {
- --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-extra-large);
- --spectrum-stepper-height: var(--spectrum-component-height-300);
- }
-
- /*** Quiet ***/
- &.spectrum-Stepper--quiet {
- --mod-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width));
- --mod-textfield-focus-indicator-color: transparent;
- }
-
- &.is-disabled {
- --mod-infield-button-border-color-quiet-disabled: var(--spectrum-disabled-border-color);
- }
-
- /*** Invalid ***/
- &.is-invalid {
- --mod-stepper-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-negative-border-color-default));
- --mod-stepper-border-color-hover: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover));
- --mod-stepper-border-color-focus: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-negative-border-color-focus));
- --mod-stepper-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-negative-border-color-focus-hover));
- --mod-stepper-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-negative-border-color-key-focus));
- --mod-infield-button-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid));
- --mod-textfield-icon-spacing-inline-start-invalid: 0;
-
- &:hover {
- --mod-infield-button-border-color: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover));
- }
-
- &.is-focused,
- &:focus {
- --mod-infield-button-border-color: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid));
-
- &:hover {
- --mod-infield-button-border-color: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid));
- }
- }
-
- &.is-keyboardFocused,
- &:focus-visible {
- --mod-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid));
- }
- }
-}
-
-.x {
- border-radius: var(--spectrum-stepper-button-border-radius-reset);
-}
-
-.spectrum-Stepper {
position: relative;
display: inline-flex;
flex-flow: row nowrap;
@@ -107,28 +31,29 @@
border-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
- .spectrum-Stepper-input {
- border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
- border-start-end-radius: 0;
- border-end-end-radius: 0;
- border-inline-end-width: 0;
+ &::before {
+ content: "";
}
- /*** Hover ***/
- &:hover:not(.is-invalid) {
- --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover)));
+ &::after {
+ content: "";
+ position: absolute;
+ inset-block-end: calc(-1 * (var(--mod-stepper-focus-indicator-gap, var(--spectrum-stepper-focus-indicator-gap)) + var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width))));
+ inset-inline-start: 0;
+ inline-size: 100%;
+ block-size: var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width));
}
+ /*** Hover ***/
&:hover:not(.is-disabled) {
- .spectrum-Stepper-input,
- .spectrum-Stepper-buttons {
- border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
- }
+ --mod-stepper-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
+ --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover)));
}
/*** Focused ***/
&.is-focused,
&:focus {
+ --mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus)));
&:not(.is-disabled) {
@@ -143,7 +68,7 @@
}
&:hover {
- /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties */
+ --mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-buttons-border-color-focus-hover)));
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-buttons-border-color-focus-hover)));
.spectrum-Stepper-input,
@@ -156,6 +81,7 @@
/*** Keyboard Focused ***/
&.is-keyboardFocused,
&:focus-visible {
+ --mod-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus)));
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus)));
&:not(.is-disabled) {
@@ -174,74 +100,154 @@
}
}
}
-}
-/*** Quiet ***/
-.spectrum-Stepper.spectrum-Stepper--quiet {
- --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
+ /*** Invalid ***/
+ &.is-invalid:not(.is-disabled) {
+ --mod-stepper-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid));
+ --mod-stepper-border-color-hover: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-stepper-border-color-hover-invalid));
+ --mod-stepper-border-color-focus: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid));
+ --mod-stepper-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid));
+ --mod-stepper-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid));
+
+ --mod-infield-button-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid));
+ --mod-textfield-icon-spacing-inline-start-invalid: 0;
- /* quiet corners are not rounded */
- border-start-start-radius: 0;
- border-start-end-radius: 0;
- border-end-start-radius: 0;
- border-end-end-radius: 0;
+ &:hover {
+ --mod-infield-button-border-color: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-stepper-border-color-hover-invalid));
+ }
- &.hide-stepper .spectrum-Stepper-input {
- border-inline-end-width: 0;
- border-end-end-radius: 0;
+ &.is-focused,
+ &:focus {
+ --mod-infield-button-border-color: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid));
+
+ &:hover {
+ --mod-infield-button-border-color: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid));
+ }
+ }
+
+ &.is-keyboardFocused,
+ &:focus-visible {
+ --mod-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid));
+ }
}
- &::after {
- content: "";
- position: absolute;
- inset-block-end: calc(-1 * (var(--mod-stepper-focus-indicator-gap, var(--spectrum-stepper-focus-indicator-gap)) + var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width))));
- inset-inline-start: 0;
- inline-size: 100%;
- block-size: var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width));
+ &.is-disabled {
+ --mod-stepper-border-color: var(--spectrum-stepper-button-border-color-disabled);
+ --mod-stepper-border-color-hover: var(--spectrum-stepper-button-border-color-disabled);
+ --mod-stepper-border-color-focus: var(--spectrum-stepper-button-border-color-disabled);
+ --mod-stepper-border-color-focus-hover: var(--spectrum-stepper-button-border-color-disabled);
+ --mod-stepper-border-color-keyboard-focus: var(--spectrum-stepper-button-border-color-disabled);
+ --mod-stepper-buttons-background-color: var(--spectrum-stepper-buttons-background-color-disabled);
+
+ --mod-infield-button-border-width: var(--spectrum-stepper-button-border-width-disabled);
+ --mod-infield-button-border-color: var(--spectrum-stepper-button-border-color-disabled);
+ --mod-textfield-border-color-disabled: var(--spectrum-stepper-button-border-color-disabled);
}
- .spectrum-Stepper-buttons {
- border: none;
+ .spectrum-Stepper-input {
+ border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
+ border-start-end-radius: 0;
+ border-end-end-radius: 0;
+ border-inline-end-width: 0;
}
- .spectrum-Stepper-button {
- --mod-infield-button-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
- --mod-infield-button-stacked-bottom-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
- --mod-infield-button-stacked-bottom-border-radius-end-end: 0;
- --mod-infield-button-stacked-bottom-border-radius-end-start: 0;
- --mod-infield-button-fill-justify-content: flex-end;
- padding: 0;
+ /* hide-stepper */
+ &.hide-stepper .spectrum-Stepper-input {
+ border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
+ border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
+ border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
}
- .spectrum-Stepper-input,
+ /* container for stepUp and stepDown buttons */
.spectrum-Stepper-buttons {
- background-color: transparent;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-sizing: border-box;
+
+ block-size: var(--mod-stepper-height, var(--spectrum-stepper-height));
+ inline-size: var(--mod-stepper-button-width, var(--spectrum-stepper-button-width));
+
+ border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
+ border-style: var(--mod-stepper-buttons-border-style, var(--spectrum-stepper-buttons-border-style));
+ border-width: var(--highcontrast-stepper-buttons-border-width, var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width)));
+ border-inline-start-width: 0;
+
+ /* Have to add border radius here to avoid overlapping textfield border */
+ border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
+ border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
+
+ background-color: var(--highcontrast-stepper-buttons-background-color, var(--mod-stepper-buttons-background-color, var(--spectrum-stepper-buttons-background-color)));
+ transition: border-color var(--mod-stepper-animation-duration, var(--spectrum-stepper-animation-duration)) ease-in-out;
}
- /* quiet hover */
- &:not(.is-disabled):hover {
- --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
+ /*** Quiet ***/
+ &.spectrum-Stepper--quiet {
+ /* quiet corners are not rounded */
+ border-start-start-radius: 0;
+ border-start-end-radius: 0;
+ border-end-start-radius: 0;
+ border-end-end-radius: 0;
+
+ .spectrum-Stepper-input {
+ --mod-textfield-focus-indicator-color: transparent;
+ }
+ /* stylelint-disable-next-line selector-class-pattern -- @todo fix this in a future release */
+ &.hide-stepper .spectrum-Stepper-input {
+ border-inline-end-width: 0;
+ border-end-end-radius: 0;
+ }
+
+ .spectrum-Stepper-buttons {
+ --mod-infield-button-border-color: transparent;
+
+ border-width: 0;
+ border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
+ border-block-end-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
+ border-block-end-style: solid;
+ border-end-end-radius: 0;
+ }
+
+ .spectrum-Stepper-button {
+ --mod-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width));
+ --mod-infield-button-border-color: var(--mod-stepper-border-color-quiet, var(--spectrum-stepper-button-border-color-quiet));
+ --mod-infield-button-stacked-bottom-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
+ --mod-infield-button-stacked-bottom-border-radius-end-end: 0;
+ --mod-infield-button-stacked-bottom-border-radius-end-start: 0;
+ --mod-infield-button-fill-justify-content: flex-end;
+
+ padding: 0;
+ }
+
+ .spectrum-Stepper-input,
.spectrum-Stepper-buttons {
background-color: transparent;
}
- }
- /* quiet focus */
- &.is-focused,
- &:focus {
- --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
+ /* quiet hover */
+ &:not(.is-disabled):hover {
+ --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
- &:hover {
- --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
+ .spectrum-Stepper-buttons {
+ background-color: transparent;
+ }
}
- }
- /* quiet keyboard focused */
- &.is-keyboardFocused {
- --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
+ /* quiet focus */
+ &.is-focused,
+ &:focus {
+ --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
+
+ &:hover {
+ --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
+ }
+ }
+
+ /* quiet keyboard focused */
+ &.is-keyboardFocused:not(.is-disabled) {
+ --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
- &:not(.is-disabled) {
outline: none;
/* quiet focus indicator only on bottom border */
@@ -256,40 +262,6 @@
}
}
-.spectrum-Stepper::before {
- content: "";
-}
-
-/* container for stepUp and stepDown buttons */
-.spectrum-Stepper-buttons {
- display: flex;
- flex-direction: column;
- justify-content: center;
- box-sizing: border-box;
-
- block-size: var(--mod-stepper-height, var(--spectrum-stepper-height));
- inline-size: var(--mod-stepper-button-width, var(--spectrum-stepper-button-width));
-
- border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
- border-style: var(--mod-stepper-buttons-border-style, var(--spectrum-stepper-buttons-border-style));
- border-width: var(--highcontrast-stepper-buttons-border-width, var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width)));
- border-inline-start-width: 0;
-
- /* Have to add border radius here to avoid overlapping textfield border */
- border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
- border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
-
- background-color: var(--highcontrast-stepper-buttons-background-color, var(--mod-stepper-buttons-background-color, var(--spectrum-stepper-buttons-background-color)));
- transition: border-color var(--mod-stepper-animation-duration, var(--spectrum-stepper-animation-duration)) ease-in-out;
-}
-
-/* hide-stepper */
-.spectrum-Stepper.hide-stepper .spectrum-Stepper-input {
- border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
- border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
- border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
-}
-
@media (forced-colors: active) {
.spectrum-Stepper {
--highcontrast-stepper-border-color: CanvasText;
diff --git a/components/stepper/metadata/metadata.json b/components/stepper/metadata/metadata.json
index 23c1ff624f2..bedf0f20be1 100644
--- a/components/stepper/metadata/metadata.json
+++ b/components/stepper/metadata/metadata.json
@@ -2,8 +2,8 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-Stepper",
+ ".spectrum-Stepper .spectrum-Stepper-buttons",
".spectrum-Stepper .spectrum-Stepper-input",
- ".spectrum-Stepper-buttons",
".spectrum-Stepper.hide-stepper .spectrum-Stepper-input",
".spectrum-Stepper.is-disabled",
".spectrum-Stepper.is-focused",
@@ -13,13 +13,14 @@
".spectrum-Stepper.is-focused:not(.is-disabled) .spectrum-Stepper-buttons",
".spectrum-Stepper.is-focused:not(.is-disabled) .spectrum-Stepper-input",
".spectrum-Stepper.is-invalid",
- ".spectrum-Stepper.is-invalid.is-focused",
- ".spectrum-Stepper.is-invalid.is-focused:hover",
- ".spectrum-Stepper.is-invalid.is-keyboardFocused",
- ".spectrum-Stepper.is-invalid:focus",
- ".spectrum-Stepper.is-invalid:focus-visible",
- ".spectrum-Stepper.is-invalid:focus:hover",
- ".spectrum-Stepper.is-invalid:hover",
+ ".spectrum-Stepper.is-invalid.is-focused:not(.is-disabled)",
+ ".spectrum-Stepper.is-invalid.is-focused:not(.is-disabled):hover",
+ ".spectrum-Stepper.is-invalid.is-keyboardFocused:not(.is-disabled)",
+ ".spectrum-Stepper.is-invalid:not(.is-disabled)",
+ ".spectrum-Stepper.is-invalid:not(.is-disabled):focus",
+ ".spectrum-Stepper.is-invalid:not(.is-disabled):focus-visible",
+ ".spectrum-Stepper.is-invalid:not(.is-disabled):focus:hover",
+ ".spectrum-Stepper.is-invalid:not(.is-disabled):hover",
".spectrum-Stepper.is-keyboardFocused",
".spectrum-Stepper.is-keyboardFocused:not(.is-disabled)",
".spectrum-Stepper.is-keyboardFocused:not(.is-disabled) .spectrum-Stepper-buttons",
@@ -31,18 +32,18 @@
".spectrum-Stepper.spectrum-Stepper--quiet.hide-stepper .spectrum-Stepper-input",
".spectrum-Stepper.spectrum-Stepper--quiet.is-focused",
".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:hover",
- ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused",
".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)",
".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled):after",
".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled):hover",
- ".spectrum-Stepper.spectrum-Stepper--quiet:after",
".spectrum-Stepper.spectrum-Stepper--quiet:focus",
".spectrum-Stepper.spectrum-Stepper--quiet:focus:hover",
".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover",
".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover .spectrum-Stepper-buttons",
".spectrum-Stepper.spectrum-Stepper--sizeL",
+ ".spectrum-Stepper.spectrum-Stepper--sizeM",
".spectrum-Stepper.spectrum-Stepper--sizeS",
".spectrum-Stepper.spectrum-Stepper--sizeXL",
+ ".spectrum-Stepper:after",
".spectrum-Stepper:before",
".spectrum-Stepper:focus",
".spectrum-Stepper:focus-visible",
@@ -54,10 +55,7 @@
".spectrum-Stepper:focus:hover .spectrum-Stepper-input",
".spectrum-Stepper:focus:not(.is-disabled) .spectrum-Stepper-buttons",
".spectrum-Stepper:focus:not(.is-disabled) .spectrum-Stepper-input",
- ".spectrum-Stepper:hover:not(.is-disabled) .spectrum-Stepper-buttons",
- ".spectrum-Stepper:hover:not(.is-disabled) .spectrum-Stepper-input",
- ".spectrum-Stepper:hover:not(.is-invalid)",
- ".x"
+ ".spectrum-Stepper:hover:not(.is-disabled)"
],
"modifiers": [
"--mod-stepper-animation-duration",
@@ -71,6 +69,7 @@
"--mod-stepper-border-color-invalid",
"--mod-stepper-border-color-keyboard-focus",
"--mod-stepper-border-color-keyboard-focus-invalid",
+ "--mod-stepper-border-color-quiet",
"--mod-stepper-border-radius",
"--mod-stepper-border-width",
"--mod-stepper-button-border-width",
@@ -99,6 +98,7 @@
"--spectrum-stepper-border-color-focus-hover-invalid",
"--spectrum-stepper-border-color-focus-invalid",
"--spectrum-stepper-border-color-hover",
+ "--spectrum-stepper-border-color-hover-invalid",
"--spectrum-stepper-border-color-invalid",
"--spectrum-stepper-border-color-keyboard-focus",
"--spectrum-stepper-border-color-keyboard-focus-invalid",
@@ -106,12 +106,15 @@
"--spectrum-stepper-border-width",
"--spectrum-stepper-button-background-color-focus",
"--spectrum-stepper-button-background-color-keyboard-focus",
+ "--spectrum-stepper-button-border-color-disabled",
+ "--spectrum-stepper-button-border-color-quiet",
"--spectrum-stepper-button-border-radius-reset",
"--spectrum-stepper-button-border-width",
- "--spectrum-stepper-button-offset",
+ "--spectrum-stepper-button-border-width-disabled",
"--spectrum-stepper-button-padding",
"--spectrum-stepper-button-width",
"--spectrum-stepper-buttons-background-color",
+ "--spectrum-stepper-buttons-background-color-disabled",
"--spectrum-stepper-buttons-border-color",
"--spectrum-stepper-buttons-border-color-focus",
"--spectrum-stepper-buttons-border-color-focus-hover",
@@ -123,32 +126,29 @@
"--spectrum-stepper-focus-indicator-gap",
"--spectrum-stepper-focus-indicator-width",
"--spectrum-stepper-height",
+ "--spectrum-stepper-min-width-multiplier",
"--spectrum-stepper-width"
],
"global": [
"--spectrum-animation-duration-100",
"--spectrum-border-width-100",
- "--spectrum-border-width-200",
"--spectrum-component-height-100",
"--spectrum-component-height-200",
"--spectrum-component-height-300",
"--spectrum-component-height-75",
"--spectrum-corner-radius-100",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-border-color",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
- "--spectrum-gray-200",
+ "--spectrum-gray-100",
+ "--spectrum-gray-25",
"--spectrum-gray-300",
- "--spectrum-gray-400",
"--spectrum-gray-50",
"--spectrum-gray-500",
"--spectrum-gray-600",
"--spectrum-gray-800",
"--spectrum-gray-900",
"--spectrum-in-field-button-edge-to-fill",
- "--spectrum-in-field-button-fill-stacked-inner-border-rounding",
"--spectrum-in-field-button-width-stacked-extra-large",
"--spectrum-in-field-button-width-stacked-large",
"--spectrum-in-field-button-width-stacked-medium",
@@ -160,41 +160,17 @@
"--spectrum-negative-border-color-key-focus",
"--spectrum-text-field-minimum-width-multiplier"
],
- "system-theme": [
- "--system-spectrum-stepper-border-color",
- "--system-spectrum-stepper-border-color-focus",
- "--system-spectrum-stepper-border-color-focus-hover",
- "--system-spectrum-stepper-border-color-focus-hover-invalid",
- "--system-spectrum-stepper-border-color-focus-invalid",
- "--system-spectrum-stepper-border-color-hover",
- "--system-spectrum-stepper-border-color-invalid",
- "--system-spectrum-stepper-border-color-keyboard-focus",
- "--system-spectrum-stepper-border-color-keyboard-focus-invalid",
- "--system-spectrum-stepper-border-width",
- "--system-spectrum-stepper-button-background-color-focus",
- "--system-spectrum-stepper-button-background-color-keyboard-focus",
- "--system-spectrum-stepper-button-border-radius-reset",
- "--system-spectrum-stepper-button-border-width",
- "--system-spectrum-stepper-buttons-background-color",
- "--system-spectrum-stepper-buttons-border-color",
- "--system-spectrum-stepper-buttons-border-color-focus",
- "--system-spectrum-stepper-buttons-border-color-hover",
- "--system-spectrum-stepper-buttons-border-color-keyboard-focus",
- "--system-spectrum-stepper-buttons-border-style",
- "--system-spectrum-stepper-buttons-border-width",
- "--system-spectrum-stepper-disabled-buttons-background-color",
- "--system-spectrum-stepper-disabled-buttons-border-width"
- ],
+ "system-theme": [],
"passthroughs": [
- "--mod-infield-button-border-block-end-width",
"--mod-infield-button-border-color",
- "--mod-infield-button-border-color-quiet-disabled",
+ "--mod-infield-button-border-radius-reset",
"--mod-infield-button-border-width",
"--mod-infield-button-fill-justify-content",
"--mod-infield-button-stacked-bottom-border-block-end-width",
"--mod-infield-button-stacked-bottom-border-radius-end-end",
"--mod-infield-button-stacked-bottom-border-radius-end-start",
"--mod-infield-button-width-stacked",
+ "--mod-textfield-border-color-disabled",
"--mod-textfield-border-width",
"--mod-textfield-focus-indicator-color",
"--mod-textfield-icon-spacing-inline-start-invalid"
diff --git a/components/stepper/metadata/mods.md b/components/stepper/metadata/mods.md
index bdec6a209ac..6549b7711f3 100644
--- a/components/stepper/metadata/mods.md
+++ b/components/stepper/metadata/mods.md
@@ -11,6 +11,7 @@
| `--mod-stepper-border-color-invalid` |
| `--mod-stepper-border-color-keyboard-focus` |
| `--mod-stepper-border-color-keyboard-focus-invalid` |
+| `--mod-stepper-border-color-quiet` |
| `--mod-stepper-border-radius` |
| `--mod-stepper-border-width` |
| `--mod-stepper-button-border-width` |
diff --git a/components/stepper/metadata/stepper.yml b/components/stepper/metadata/stepper.yml
deleted file mode 100644
index 5e92079ede1..00000000000
--- a/components/stepper/metadata/stepper.yml
+++ /dev/null
@@ -1,439 +0,0 @@
-name: Stepper
-status: Contribution
-sections:
- - name: Migration Guide
- description: |
- ### New Textfield markup
- Stepper now uses the new Textfield markup. See the [Textfield migration guide](textfield.html#migrationguide) for more information.
-
- ### Use InFieldButton instead of FieldButton
- Stepper now uses InFieldButtons instead of FieldButtons for the up/down buttons.
-
- ### Icon classes removed
- `.spectrum-Stepper-stepUpIcon` and `.spectrum-Stepper-stepDownIcon` are no longer needed and have been removed.
-
- ### Indicating validity, focus, and disable
- Validity and focus must be bubbled up to the parent so descendants siblings can be styled.
-
- Thus, implementations must add the following classes in the following situations:
-
- * `.spectrum-Stepper.is-focused` - when the input or button is focused with the mouse
- * `.spectrum-Stepper.is-keyboardFocused` - when the input or button is focused with the keyboard
- * `.spectrum-Stepper.is-valid` - when the input has an explicit valid state
- * `.spectrum-Stepper.is-invalid` - when the input has an explicit invalid state
- * `.spectrum-Stepper.is-disabled` - when the component is disabled. Note that the Textfield must have `.is-disabled`, and the `` must have the `[disabled]` property.
-
-examples:
- - id: stepper
- name: Standard
- markup: |
-
-
-
S
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
L
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
XL
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+ @container (--system: spectrum) {
+ .spectrum-Stepper {
+ --spectrum-stepper-border-width: var(--spectrum-border-width-100);
+ --spectrum-stepper-border-color: var(--spectrum-gray-500);
+ --spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
+ --spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
+ --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800);
+ --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
+ --spectrum-stepper-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-stepper-min-width-multiplier: var(--spectrum-text-field-minimum-width-multiplier);
+ --spectrum-stepper-animation-duration: var(--spectrum-animation-duration-100);
+
+ --spectrum-stepper-buttons-border-style: none;
+ --spectrum-stepper-buttons-border-width: 0;
+ --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500);
+ --spectrum-stepper-buttons-background-color: var(--spectrum-gray-25);
+ --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
+ --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
+ --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900);
+
+ --spectrum-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill);
+ --spectrum-stepper-button-border-radius-reset: 0px;
+ --spectrum-stepper-button-border-width: var(--spectrum-border-width-100);
+ --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-300);
+ --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-100);
+
+ /** Invalid **/
+ --spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default);
+ --spectrum-stepper-border-color-hover-invalid: var(--spectrum-negative-border-color-hover);
+ --spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus);
+ --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover);
+ --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus);
+
+ /*** Focus Indicator ***/
+ --spectrum-stepper-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
+ --spectrum-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ /** Quiet **/
+ --spectrum-stepper-button-border-color-quiet: transparent;
+
+ /** Disabled **/
+ --spectrum-stepper-button-border-color-disabled: var(--spectrum-gray-100);
+ --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-100);
+ --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
+
+ &.spectrum-Stepper--sizeS {
+ --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-small);
+ --spectrum-stepper-height: var(--spectrum-component-height-75);
+ }
+
+ &,
+ &.spectrum-Stepper--sizeM {
+ --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium);
+ --spectrum-stepper-height: var(--spectrum-component-height-100);
+ }
+
+ &.spectrum-Stepper--sizeL {
+ --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-large);
+ --spectrum-stepper-height: var(--spectrum-component-height-200);
+ }
+
+ &.spectrum-Stepper--sizeXL {
+ --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-extra-large);
+ --spectrum-stepper-height: var(--spectrum-component-height-300);
+ }
+ }
+}
diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css
index 17bb6158b38..ac1142c6677 100644
--- a/components/stepper/themes/spectrum.css
+++ b/components/stepper/themes/spectrum.css
@@ -11,33 +11,16 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Stepper {
- --spectrum-stepper-border-width: var(--spectrum-border-width-100);
-
- --spectrum-stepper-buttons-border-style: none;
- --spectrum-stepper-buttons-border-width: 0;
- --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500);
- --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
- --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
- --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
- --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900);
- --spectrum-stepper-button-border-radius-reset: 0px;
- --spectrum-stepper-button-border-width: var(--spectrum-border-width-100);
+/* @combine .spectrum.spectrum--legacy */
- --spectrum-stepper-border-color: var(--spectrum-gray-500);
- --spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
- --spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
- --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800);
- --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
+@import "./spectrum-two.css";
- --spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default);
- --spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus);
- --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover);
- --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus);
-
- --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-300);
+@container (--system: legacy) {
+ .spectrum-Stepper {
--spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200);
+ --spectrum-stepper-button-border-color-disabled: var(--spectrum-gray-200);
+ --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
+ --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-100);
}
}
diff --git a/components/swatch/CHANGELOG.md b/components/swatch/CHANGELOG.md
index 4aba31687db..536b26a5a52 100644
--- a/components/swatch/CHANGELOG.md
+++ b/components/swatch/CHANGELOG.md
@@ -1,5 +1,186 @@
# Change Log
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2954](https://github.com/adobe/spectrum-css/pull/2954) [`2d89227`](https://github.com/adobe/spectrum-css/commit/2d892277adbc1d8d5598bdf85130d3499fd31e13) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Reimplements support for the `spectrum-Swatch--lightBorder` class for swatches specifically in a swatch group.
+
+### Patch Changes
+
+- Updated dependencies [[`58a89ea`](https://github.com/adobe/spectrum-css/commit/58a89ea464c387111511271a5f5afce044f11042)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.15
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.0
+
## 6.2.2
### Patch Changes
diff --git a/components/swatch/index.css b/components/swatch/index.css
index 5b893cdd137..6f857f34c51 100644
--- a/components/swatch/index.css
+++ b/components/swatch/index.css
@@ -11,69 +11,7 @@
* governing permissions and limitations under the License.
*/
-/* Swatch tokens */
-.spectrum-Swatch {
- /* Placeholder tokens */
- --spectrum-swatch-focus-indicator-border-radius: 8px;
- --spectrum-swatch-icon-border-color: rgba(0, 0, 0, 51%);
-
- /* Size */
- --spectrum-swatch-size: var(--spectrum-swatch-size-small);
- --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-swatch-border-thickness: var(--spectrum-border-width-100);
- --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200);
- --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
- --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small);
- --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-
- /* Color */
- --spectrum-swatch-border-color: rgba(0, 0, 0, 51%);
- --spectrum-swatch-border-color-selected: var(--spectrum-gray-900);
- --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50);
- --spectrum-swatch-disabled-icon-border-color: var(--spectrum-swatch-disabled-icon-border-color);
- --spectrum-swatch-disabled-icon-color: var(--spectrum-white);
- --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800);
- --spectrum-swatch-slash-icon-color: var(--spectrum-red-900);
- --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- /* Light theme placeholder tokens */
- .spectrum--light & {
- --spectrum-swatch-border-color: rgba(0, 0, 0, 51%);
- --spectrum-swatch-border-color-light: rgba(0, 0, 0, 20%);
- }
-
- /* Dark and Darkest theme placeholder tokens */
- .spectrum--dark &,
- .spectrum--darkest & {
- --spectrum-swatch-border-color: rgba(255, 255, 255, 51%);
- --spectrum-swatch-border-color-light: rgba(255, 255, 255, 20%);
- }
-}
-
-.spectrum-Swatch--sizeXS {
- --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small);
- --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50);
- --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small);
-}
-
-.spectrum-Swatch--sizeS {
- --spectrum-swatch-size: var(--spectrum-swatch-size-small);
- --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
- --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small);
-}
-
-.spectrum-Swatch--sizeM {
- --spectrum-swatch-size: var(--spectrum-swatch-size-medium);
- --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
- --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium);
-}
-
-.spectrum-Swatch--sizeL {
- --spectrum-swatch-size: var(--spectrum-swatch-size-large);
- --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-200);
- --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large);
-}
+@import "./themes/spectrum-two.css";
/* Windows high contrast mode */
@media (forced-colors: active) {
@@ -97,7 +35,6 @@
}
/* Swatch styles */
-/* stylelint-disable max-nesting-depth */
.spectrum-Swatch {
inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
block-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
@@ -160,7 +97,7 @@
&.is-mixedValue {
.spectrum-Swatch-fill {
- /* Undefined variable allows custom stylesheet or JS to pass the value to this element */
+ /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- undefined variable allows custom stylesheet or JS to pass the value to this element */
background: var(--spectrum-picked-color, transparent);
}
@@ -173,7 +110,7 @@
/* Swatch fill: Not fill with Slash */
&.is-nothing {
.spectrum-Swatch-fill {
- /* Undefined variable allows custom stylesheet or JS to pass the value to this element */
+ /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- undefined variable allows custom stylesheet or JS to pass the value to this element */
background-color: var(--spectrum-picked-color, transparent);
background-image: none;
@@ -187,12 +124,8 @@
}
}
- &.spectrum-Swatch--rectangle {
- .spectrum-Swatch-fill {
- &::after {
- transform: rotate(-25deg);
- }
- }
+ &.spectrum-Swatch--rectangle .spectrum-Swatch-fill::after {
+ transform: rotate(-25deg);
}
}
@@ -240,7 +173,6 @@
}
}
}
-/* stylelint-enable max-nesting-depth */
.spectrum-Swatch-fill {
display: flex;
@@ -264,7 +196,7 @@
inset: 0;
z-index: 0;
- /* Undefined variable allows custom stylesheet or JS to pass the value to this element */
+ /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- undefined variable allows custom stylesheet or JS to pass the value to this element */
background-color: var(--spectrum-picked-color, transparent);
/* Swatch border */
@@ -279,7 +211,7 @@
&::before {
box-shadow: none;
- /* Undefined variable allows custom stylesheet or JS to pass the value to this element */
+ /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- undefined variable allows custom stylesheet or JS to pass the value to this element */
background-color: var(--spectrum-picked-color, transparent);
}
}
@@ -297,7 +229,7 @@
display: none;
pointer-events: none;
- /* Undefined variable allows custom stylesheet or JS to pass the value to this element */
+ /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- undefined variable allows custom stylesheet or JS to pass the value to this element */
color: var(--spectrum-picked-color, transparent);
}
diff --git a/components/swatch/metadata/metadata.json b/components/swatch/metadata/metadata.json
index 308ec62b65b..32c3f2f8015 100644
--- a/components/swatch/metadata/metadata.json
+++ b/components/swatch/metadata/metadata.json
@@ -1,9 +1,6 @@
{
"sourceFile": "index.css",
"selectors": [
- ".spectrum--dark .spectrum-Swatch",
- ".spectrum--darkest .spectrum-Swatch",
- ".spectrum--light .spectrum-Swatch",
".spectrum-Swatch",
".spectrum-Swatch .spectrum-Swatch-disabledIcon",
".spectrum-Swatch .spectrum-Swatch-fill",
@@ -24,10 +21,6 @@
".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before",
".spectrum-Swatch--roundingNone:after",
".spectrum-Swatch--roundingNone:before",
- ".spectrum-Swatch--sizeL",
- ".spectrum-Swatch--sizeM",
- ".spectrum-Swatch--sizeS",
- ".spectrum-Swatch--sizeXS",
".spectrum-Swatch-disabledIcon",
".spectrum-Swatch-disabledIcon path:first-child",
".spectrum-Swatch-disabledIcon path:last-child",
@@ -47,6 +40,10 @@
".spectrum-Swatch.is-selected .spectrum-Swatch-fill",
".spectrum-Swatch.is-selected .spectrum-Swatch-fill:before",
".spectrum-Swatch.is-selected:before",
+ ".spectrum-Swatch.spectrum-Swatch--sizeL",
+ ".spectrum-Swatch.spectrum-Swatch--sizeM",
+ ".spectrum-Swatch.spectrum-Swatch--sizeS",
+ ".spectrum-Swatch.spectrum-Swatch--sizeXS",
".spectrum-Swatch:after",
".spectrum-Swatch:before",
".spectrum-Swatch:focus-visible:after",
@@ -76,12 +73,13 @@
"component": [
"--spectrum-swatch-border-color",
"--spectrum-swatch-border-color-light",
+ "--spectrum-swatch-border-color-light-opacity",
+ "--spectrum-swatch-border-color-opacity",
"--spectrum-swatch-border-color-selected",
"--spectrum-swatch-border-radius",
"--spectrum-swatch-border-thickness",
"--spectrum-swatch-border-thickness-selected",
"--spectrum-swatch-dash-icon-color",
- "--spectrum-swatch-disabled-icon-border-color",
"--spectrum-swatch-disabled-icon-color",
"--spectrum-swatch-disabled-icon-size",
"--spectrum-swatch-focus-indicator-border-radius",
@@ -104,18 +102,19 @@
],
"global": [
"--spectrum-animation-duration-100",
+ "--spectrum-black-rgb",
"--spectrum-border-width-100",
"--spectrum-border-width-200",
"--spectrum-corner-radius-100",
+ "--spectrum-corner-radius-200",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
- "--spectrum-gray-50",
+ "--spectrum-gray-25",
"--spectrum-gray-800",
"--spectrum-gray-900",
"--spectrum-picked-color",
"--spectrum-red-900",
- "--spectrum-white",
"--spectrum-workflow-icon-size-100",
"--spectrum-workflow-icon-size-200",
"--spectrum-workflow-icon-size-50",
diff --git a/components/swatch/metadata/swatch.yml b/components/swatch/metadata/swatch.yml
deleted file mode 100644
index 85c28dfeb29..00000000000
--- a/components/swatch/metadata/swatch.yml
+++ /dev/null
@@ -1,301 +0,0 @@
-name: Swatch
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/swatch/
-description: |
- - Set `--spectrum-picked-color` to customize the swatch fill background color.
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
-examples:
- - id: swatch-sizing
- name: Sizing
- markup: |
-
- - id: swatch-roundingnone
- name: Rounding - None
- markup: |
-
- - id: swatch-roundingfull
- name: Rounding - Full
- markup: |
-
- - id: swatch-lightborder
- name: Light border
- markup: |
-
- - id: swatch-noborder
- name: No border
- markup: |
-
- - id: swatch-rectangle
- name: Shape - Rectangle
- markup: |
-
- - id: swatch-image
- name: Image
- markup: |
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/swatch/themes/spectrum-two.css b/components/swatch/themes/spectrum-two.css
new file mode 100644
index 00000000000..f49cac0bd1a
--- /dev/null
+++ b/components/swatch/themes/spectrum-two.css
@@ -0,0 +1,64 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ /* Swatch tokens */
+ .spectrum-Swatch {
+ /* Size */
+ --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200);
+ --spectrum-swatch-border-thickness: var(--spectrum-border-width-100);
+ --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200);
+ --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+
+ --spectrum-swatch-border-color-opacity: 0.51;
+ --spectrum-swatch-border-color-light-opacity: 0.2;
+
+ /* Color */
+ --spectrum-swatch-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-border-color-opacity));
+ --spectrum-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-border-color-opacity));
+ --spectrum-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-border-color-light-opacity));
+ --spectrum-swatch-border-color-selected: var(--spectrum-gray-900);
+ --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25);
+ --spectrum-swatch-disabled-icon-color: var(--spectrum-gray-25);
+ --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800);
+ --spectrum-swatch-slash-icon-color: var(--spectrum-red-900);
+ --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ &.spectrum-Swatch--sizeXS {
+ --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small);
+ --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50);
+ --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small);
+ }
+
+ &.spectrum-Swatch--sizeS {
+ --spectrum-swatch-size: var(--spectrum-swatch-size-small);
+ --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
+ --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small);
+ }
+
+ &,
+ &.spectrum-Swatch--sizeM {
+ --spectrum-swatch-size: var(--spectrum-swatch-size-medium);
+ --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
+ --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium);
+ }
+
+ &.spectrum-Swatch--sizeL {
+ --spectrum-swatch-size: var(--spectrum-swatch-size-large);
+ --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-200);
+ --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large);
+ }
+ }
+}
diff --git a/components/swatch/themes/spectrum.css b/components/swatch/themes/spectrum.css
new file mode 100644
index 00000000000..9a377d01f0a
--- /dev/null
+++ b/components/swatch/themes/spectrum.css
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Swatch {
+ --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50);
+ --spectrum-swatch-disabled-icon-color: var(--spectrum-gray-50);
+ }
+}
diff --git a/components/swatchgroup/CHANGELOG.md b/components/swatchgroup/CHANGELOG.md
index 05aed3454f1..830c5d5c21e 100644
--- a/components/swatchgroup/CHANGELOG.md
+++ b/components/swatchgroup/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 4.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.14
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 4.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 4.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 4.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 4.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 4.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 4.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 4.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/swatch@7.0.0-s2-foundations.6
+
+## 4.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 4.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 4.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 4.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 4.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 4.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/swatch@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 3.1.3
### Patch Changes
diff --git a/components/swatchgroup/index.css b/components/swatchgroup/index.css
index b918210cec8..97250f65a20 100644
--- a/components/swatchgroup/index.css
+++ b/components/swatchgroup/index.css
@@ -11,21 +11,15 @@
* governing permissions and limitations under the License.
*/
-.spectrum-SwatchGroup {
- --spectrum-swatchgroup-spacing-compact: var(--spectrum-spacing-50);
- --spectrum-swatchgroup-spacing-regular: var(--spectrum-spacing-75);
- --spectrum-swatchgroup-spacing-spacious: var(--spectrum-spacing-100);
-}
+@import "./themes/spectrum-two.css";
.spectrum-SwatchGroup {
display: inline-flex;
flex-flow: row wrap;
align-items: flex-start;
justify-content: flex-start;
-}
-/* Regular (Default) */
-.spectrum-SwatchGroup {
+ /* Regular (Default) */
gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing-regular));
}
diff --git a/components/swatchgroup/metadata/swatchgroup.yml b/components/swatchgroup/metadata/swatchgroup.yml
deleted file mode 100644
index 2c9905783d6..00000000000
--- a/components/swatchgroup/metadata/swatchgroup.yml
+++ /dev/null
@@ -1,296 +0,0 @@
-name: Swatch group
-status: Verified
-SpectrumSiteSlug: https://spectrum.adobe.com/page/swatchgroup/
-description: |
- - Grouped swatches must use the `.spectrum-Swatch--roundingNone` class to help minimize the Hermann grid illusion
- - Swatches with a color that have a contrast ratio of less than 3:1 should have `.spectrum-Swatch--lightBorder` class, otherwise, it should have the `.spectrum-Swatch--noBorder` class
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
-examples:
- - id: swatchgroup-compact
- name: Density - Compact
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/swatchgroup/themes/spectrum-two.css b/components/swatchgroup/themes/spectrum-two.css
new file mode 100644
index 00000000000..9bc11c31ac9
--- /dev/null
+++ b/components/swatchgroup/themes/spectrum-two.css
@@ -0,0 +1,20 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-SwatchGroup {
+ --spectrum-swatchgroup-spacing-compact: var(--spectrum-spacing-50);
+ --spectrum-swatchgroup-spacing-regular: var(--spectrum-spacing-75);
+ --spectrum-swatchgroup-spacing-spacious: var(--spectrum-spacing-100);
+ }
+}
diff --git a/components/swatchgroup/themes/spectrum.css b/components/swatchgroup/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/swatchgroup/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/switch/CHANGELOG.md b/components/switch/CHANGELOG.md
index 6a27cf0415f..8f353e95bc6 100644
--- a/components/switch/CHANGELOG.md
+++ b/components/switch/CHANGELOG.md
@@ -1,5 +1,167 @@
# Change Log
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a477157`](https://github.com/adobe/spectrum-css/commit/a477157a27c6fe5bba3f42397438d21c0cff4ddb) Thanks [@pfulton](https://github.com/pfulton)! - fix(switch): migrate mods
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/switch/index.css b/components/switch/index.css
index 9bc6027e728..925858eef24 100644
--- a/components/switch/index.css
+++ b/components/switch/index.css
@@ -11,98 +11,11 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
.spectrum-Switch {
- --spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-switch-label-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-switch-label-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus);
- --spectrum-switch-label-color-disabled: var(--spectrum-disabled-content-color);
-
- --spectrum-switch-background-color: var(--spectrum-gray-300);
- --spectrum-switch-background-color-disabled: var(--spectrum-gray-300);
- --spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color);
-
- --spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default);
- --spectrum-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
- --spectrum-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
- --spectrum-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
-
--spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
- --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- --spectrum-switch-handle-background-color: var(--spectrum-gray-75);
- --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color);
-}
-
-.spectrum-Switch--disabled {
- --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color);
-}
-
-.spectrum-Switch.spectrum-Switch--emphasized {
- /*
- Selector specificity needed to beat the cascade, post-build.
- The `spectrum` & `express` theme vars get appended below this in the dist file
- & the higher specificity here will override.
- */
- /* selected + emphasized */
- --spectrum-switch-background-color-selected-default: var(--spectrum-accent-color-900);
- --spectrum-switch-background-color-selected-hover: var(--spectrum-accent-color-1000);
- --spectrum-switch-background-color-selected-down: var(--spectrum-accent-color-1100);
- --spectrum-switch-background-color-selected-focus: var(--spectrum-accent-color-1000);
-
- --spectrum-switch-handle-border-color-selected-default: var(--spectrum-accent-color-900);
- --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-accent-color-1000);
- --spectrum-switch-handle-border-color-selected-down: var(--spectrum-accent-color-1100);
- --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-accent-color-1000);
-}
-
-.spectrum-Switch--sizeS {
- --spectrum-switch-min-height: var(--spectrum-component-height-75);
- --spectrum-switch-control-width: var(--spectrum-switch-control-width-small);
- --spectrum-switch-control-height: var(--spectrum-switch-control-height-small);
- --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-75);
- --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-small);
- --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-75);
-
- --spectrum-switch-font-size: var(--spectrum-font-size-75);
-}
-.spectrum-Switch--sizeM {
- --spectrum-switch-min-height: var(--spectrum-component-height-100);
- --spectrum-switch-control-width: var(--spectrum-switch-control-width-medium);
- --spectrum-switch-control-height: var(--spectrum-switch-control-height-medium);
- --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-100);
- --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium);
- --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
-
- --spectrum-switch-font-size: var(--spectrum-font-size-100);
-}
-
-.spectrum-Switch--sizeL {
- --spectrum-switch-min-height: var(--spectrum-component-height-200);
- --spectrum-switch-control-width: var(--spectrum-switch-control-width-large);
- --spectrum-switch-control-height: var(--spectrum-switch-control-height-large);
- --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-200);
- --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-large);
- --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-200);
-
- --spectrum-switch-font-size: var(--spectrum-font-size-200);
-}
-
-.spectrum-Switch--sizeXL {
- --spectrum-switch-min-height: var(--spectrum-component-height-300);
- --spectrum-switch-control-width: var(--spectrum-switch-control-width-extra-large);
- --spectrum-switch-control-height: var(--spectrum-switch-control-height-extra-large);
- --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-300);
- --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large);
- --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-300);
-
- --spectrum-switch-font-size: var(--spectrum-font-size-300);
-}
-
-.spectrum-Switch {
display: inline-flex;
align-items: flex-start;
position: relative;
@@ -192,6 +105,7 @@
border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2);
+
&::before {
display: block;
position: absolute;
@@ -220,15 +134,15 @@
/* :after is used for the focus halo */
&::after {
- border-radius: calc(calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
content: "";
- display: block;
position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
- inset-block-end: 0;
- inset-block-start: 0;
+ display: block;
margin: 0;
+ border-radius: calc(calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
transition:
opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
@@ -333,7 +247,8 @@
.spectrum-Switch-input:focus-visible {
& + .spectrum-Switch-switch {
&::after {
- box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color)));
+ /* @deprecated --mod-focus-indicator-thickness -- migrate modifiers to use --mod-switch-focus-indicator-thickness instead */
+ box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--mod-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness))) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color)));
}
&::before {
@@ -403,8 +318,6 @@
/* high contrast mode */
@media (forced-colors: active) {
.spectrum-Switch {
- forced-color-adjust: none;
-
--highcontrast-switch-label-color-default: ButtonText;
--highcontrast-switch-label-color-hover: ButtonText;
--highcontrast-switch-label-color-down: ButtonText;
@@ -432,6 +345,7 @@
--highcontrast-switch-background-color-selected-disabled: Highlight;
--highcontrast-switch-focus-indicator-color: ButtonText;
+ forced-color-adjust: none;
.spectrum-Switch-input {
&:not(:checked) + .spectrum-Switch-switch {
@@ -448,12 +362,12 @@
&:disabled,
&[disabled] {
&:checked + .spectrum-Switch-switch {
- box-shadow: inset 0 0 0 1px GrayText;
background-color: GrayText;
+ box-shadow: inset 0 0 0 1px GrayText;
&::before {
- border-color: GrayText;
background-color: ButtonFace;
+ border-color: GrayText;
}
}
}
@@ -464,22 +378,22 @@
&:disabled,
&[disabled] {
&:not(:checked) + .spectrum-Switch-switch {
- box-shadow: inset 0 0 0 1px GrayText;
background-color: ButtonFace;
+ box-shadow: inset 0 0 0 1px GrayText;
&::before {
- border-color: GrayText;
background-color: ButtonFace;
+ border-color: GrayText;
}
}
&:checked + .spectrum-Switch-switch {
- box-shadow: inset 0 0 0 1px GrayText;
background-color: GrayText;
+ box-shadow: inset 0 0 0 1px GrayText;
&::before {
- border-color: GrayText;
background-color: ButtonFace;
+ border-color: GrayText;
}
}
diff --git a/components/switch/metadata/metadata.json b/components/switch/metadata/metadata.json
index d97f21effae..3b6b859fd9d 100644
--- a/components/switch/metadata/metadata.json
+++ b/components/switch/metadata/metadata.json
@@ -182,10 +182,10 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
- "--spectrum-gray-300",
+ "--spectrum-gray-200",
+ "--spectrum-gray-50",
"--spectrum-gray-600",
"--spectrum-gray-700",
- "--spectrum-gray-75",
"--spectrum-gray-800",
"--spectrum-gray-900",
"--spectrum-line-height-100",
@@ -202,16 +202,7 @@
"--spectrum-text-to-control-300",
"--spectrum-text-to-control-75"
],
- "system-theme": [
- "--system-spectrum-switch-handle-border-color-default",
- "--system-spectrum-switch-handle-border-color-down",
- "--system-spectrum-switch-handle-border-color-focus",
- "--system-spectrum-switch-handle-border-color-hover",
- "--system-spectrum-switch-handle-border-color-selected-default",
- "--system-spectrum-switch-handle-border-color-selected-down",
- "--system-spectrum-switch-handle-border-color-selected-focus",
- "--system-spectrum-switch-handle-border-color-selected-hover"
- ],
+ "system-theme": [],
"passthroughs": [],
"high-contrast": [
"--highcontrast-switch-background-color",
diff --git a/components/switch/metadata/switch.yml b/components/switch/metadata/switch.yml
deleted file mode 100644
index 0cebd67302d..00000000000
--- a/components/switch/metadata/switch.yml
+++ /dev/null
@@ -1,129 +0,0 @@
-name: Switch
-SpectrumSiteSlug: https://spectrum.adobe.com/page/switch/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Component renamed
- Toggle is now known as Switch. Replace all `.spectrum-ToggleSwitch*` classnames with `.spectrum-Switch*`.
- ### T-shirt sizing
- Switch now supports t-shirt sizing and requires that you specify the size by adding a .spectrum-Switch--size* class. The default size is "medium".
- ### Quiet and emphasized
- Spectrum has chosen the variant previously known as `quiet` to be the default and has added an `emphasized` variant with the same styles as the previous default.
- If you were using the `quiet` variant, the `.spectrum-Switch--quiet` class is no longer required and can be removed.
- If you need a switch to look like it did before this change, add `.spectrum-Switch--emphasized`.
-
- ### A/B toggle variant removed
- It's been deprecated and removed. A similar use case could be served by using Radio buttons.
-
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: switch
- name: Standard
- status: Verified
- description: The on/off variant of the Switch.
- markup: |
-
- Switch Off
-
-
- Switch On
-
-
-
- Switch Off
-
-
- Switch On
-
- - id: switch
- name: Sizes
- status: Verified
- description: The t-shirt sizes of the Switch.
- markup: |
-
-
- Switch Size S
-
-
-
- Switch Size M
-
-
-
- Switch Size L
-
-
-
- Switch Size XL
-
- - id: switch
- name: Emphasis
- status: Verified
- description: The emphasized variant of the Switch.
- markup: |
-
- Switch Off
-
-
- Switch On
-
-
-
- Switch Off
-
-
- Switch On
-
- - id: switch
- name: Disabled
- status: Verified
- description: The disabled variant of the Switch.
- markup: |
-
- Switch Disabled Off
-
-
- Switch Disabled On
-
diff --git a/components/switch/package.json b/components/switch/package.json
index 4be587e5ff8..1e0a3b87c29 100644
--- a/components/switch/package.json
+++ b/components/switch/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/switch",
- "version": "5.1.3",
+ "version": "6.0.0-s2-foundations.14",
"description": "The Spectrum CSS switch component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/switch/stories/template.js b/components/switch/stories/template.js
index c3dc779290c..6f4a729d66c 100644
--- a/components/switch/stories/template.js
+++ b/components/switch/stories/template.js
@@ -6,6 +6,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Switch",
diff --git a/components/switch/themes/express.css b/components/switch/themes/express.css
index 6f4e39a2b7a..75e9439ab46 100644
--- a/components/switch/themes/express.css
+++ b/components/switch/themes/express.css
@@ -11,9 +11,12 @@
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Switch {
--spectrum-switch-handle-border-color-default: var(--spectrum-gray-800);
--spectrum-switch-handle-border-color-hover: var(--spectrum-gray-900);
diff --git a/components/switch/themes/spectrum-two.css b/components/switch/themes/spectrum-two.css
new file mode 100644
index 00000000000..6215d0ea9ac
--- /dev/null
+++ b/components/switch/themes/spectrum-two.css
@@ -0,0 +1,113 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Switch {
+ --spectrum-switch-handle-border-color-default: var(--spectrum-gray-600);
+ --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700);
+ --spectrum-switch-handle-border-color-down: var(--spectrum-gray-800);
+ --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700);
+
+ --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700);
+ --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800);
+ --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900);
+ --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800);
+
+ --spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-switch-label-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-switch-label-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus);
+ --spectrum-switch-label-color-disabled: var(--spectrum-disabled-content-color);
+
+ --spectrum-switch-background-color: var(--spectrum-gray-200);
+ --spectrum-switch-background-color-disabled: var(--spectrum-gray-200);
+ --spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color);
+
+ --spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default);
+ --spectrum-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
+ --spectrum-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
+ --spectrum-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
+
+ --spectrum-switch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ --spectrum-switch-handle-background-color: var(--spectrum-gray-50);
+ --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color);
+ }
+
+ .spectrum-Switch--disabled {
+ --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color);
+ }
+
+ .spectrum-Switch.spectrum-Switch--emphasized {
+ /*
+ Selector specificity needed to beat the cascade, post-build.
+ The `spectrum` & `express` theme vars get appended below this in the dist file
+ & the higher specificity here will override.
+ */
+ /* selected + emphasized */
+ --spectrum-switch-background-color-selected-default: var(--spectrum-accent-color-900);
+ --spectrum-switch-background-color-selected-hover: var(--spectrum-accent-color-1000);
+ --spectrum-switch-background-color-selected-down: var(--spectrum-accent-color-1100);
+ --spectrum-switch-background-color-selected-focus: var(--spectrum-accent-color-1000);
+
+ --spectrum-switch-handle-border-color-selected-default: var(--spectrum-accent-color-900);
+ --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-accent-color-1000);
+ --spectrum-switch-handle-border-color-selected-down: var(--spectrum-accent-color-1100);
+ --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-accent-color-1000);
+ }
+
+ .spectrum-Switch--sizeS {
+ --spectrum-switch-min-height: var(--spectrum-component-height-75);
+ --spectrum-switch-control-width: var(--spectrum-switch-control-width-small);
+ --spectrum-switch-control-height: var(--spectrum-switch-control-height-small);
+ --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-75);
+ --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-small);
+ --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-75);
+
+ --spectrum-switch-font-size: var(--spectrum-font-size-75);
+ }
+
+ .spectrum-Switch--sizeM {
+ --spectrum-switch-min-height: var(--spectrum-component-height-100);
+ --spectrum-switch-control-width: var(--spectrum-switch-control-width-medium);
+ --spectrum-switch-control-height: var(--spectrum-switch-control-height-medium);
+ --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-100);
+ --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium);
+ --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
+
+ --spectrum-switch-font-size: var(--spectrum-font-size-100);
+ }
+
+ .spectrum-Switch--sizeL {
+ --spectrum-switch-min-height: var(--spectrum-component-height-200);
+ --spectrum-switch-control-width: var(--spectrum-switch-control-width-large);
+ --spectrum-switch-control-height: var(--spectrum-switch-control-height-large);
+ --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-200);
+ --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-large);
+ --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-200);
+
+ --spectrum-switch-font-size: var(--spectrum-font-size-200);
+ }
+
+ .spectrum-Switch--sizeXL {
+ --spectrum-switch-min-height: var(--spectrum-component-height-300);
+ --spectrum-switch-control-width: var(--spectrum-switch-control-width-extra-large);
+ --spectrum-switch-control-height: var(--spectrum-switch-control-height-extra-large);
+ --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-300);
+ --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large);
+ --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-300);
+
+ --spectrum-switch-font-size: var(--spectrum-font-size-300);
+ }
+}
diff --git a/components/switch/themes/spectrum.css b/components/switch/themes/spectrum.css
index 755d004ae61..21b4971b275 100644
--- a/components/switch/themes/spectrum.css
+++ b/components/switch/themes/spectrum.css
@@ -11,16 +11,16 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-Switch {
- --spectrum-switch-handle-border-color-default: var(--spectrum-gray-600);
- --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700);
- --spectrum-switch-handle-border-color-down: var(--spectrum-gray-800);
- --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700);
+ --spectrum-switch-background-color: var(--spectrum-gray-300);
+ --spectrum-switch-background-color-disabled: var(--spectrum-gray-300);
- --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700);
- --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800);
- --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900);
- --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800);
+ --spectrum-switch-handle-background-color: var(--spectrum-gray-75);
}
}
diff --git a/components/table/CHANGELOG.md b/components/table/CHANGELOG.md
index 2652683651b..0ec8155fa52 100644
--- a/components/table/CHANGELOG.md
+++ b/components/table/CHANGELOG.md
@@ -1,5 +1,229 @@
# Change Log
+## 7.0.0-s2-foundations.15
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.13
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.16
+ - @spectrum-css/button@14.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.14
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`1037169`](https://github.com/adobe/spectrum-css/commit/103716919fa4e0d43c68e67e1fd3355651c02016) Thanks [@pfulton](https://github.com/pfulton)! - Move --highcontrast references out of themes; remove remaining --mods from the themes
+
+## 7.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#3040](https://github.com/adobe/spectrum-css/pull/3040) [`cf2e737`](https://github.com/adobe/spectrum-css/commit/cf2e73743b2c3d43d4c51fceeabfb99fda1ac4b5) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - Migrating --mod to index.css from infield button, logic button and table components
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.12
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.12
+ - @spectrum-css/button@14.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.11
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.11
+ - @spectrum-css/button@14.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.10
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.10
+ - @spectrum-css/button@14.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.9
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.9
+ - @spectrum-css/button@14.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.8
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.8
+ - @spectrum-css/button@14.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.7
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.7
+ - @spectrum-css/button@14.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.6
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.6
+ - @spectrum-css/button@14.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.5
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.5
+ - @spectrum-css/button@14.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.4
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.4
+ - @spectrum-css/button@14.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.3
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.3
+ - @spectrum-css/button@14.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.2
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.2
+ - @spectrum-css/button@14.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.1
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.1
+ - @spectrum-css/button@14.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/checkbox@10.0.0-s2-foundations.0
+ - @spectrum-css/button@14.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+ - @spectrum-css/thumbnail@7.0.0-s2-foundations.0
+
## 6.1.3
### Patch Changes
diff --git a/components/table/index.css b/components/table/index.css
index 0ceaf0bd923..93603083651 100644
--- a/components/table/index.css
+++ b/components/table/index.css
@@ -11,333 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-Table {
- /* Size and Spacing */
- --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium);
- --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium);
-
- --spectrum-table-min-header-height: var(--spectrum-component-height-100);
- --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-regular);
- --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-regular);
- --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-regular);
-
- --spectrum-table-cell-inline-space: var(--spectrum-table-edge-to-content);
-
- --spectrum-table-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-table-border-width: var(--spectrum-table-border-divider-width);
- --spectrum-table-outer-border-inline-width: var(--spectrum-table-border-divider-width);
-
- --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100);
-
- --spectrum-table-default-vertical-align: top;
- --spectrum-table-header-vertical-align: middle;
-
- /* Typography */
- --spectrum-table-header-font-weight: var(--spectrum-bold-font-weight);
-
- --spectrum-table-row-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-table-row-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-table-row-font-style: var(--spectrum-default-font-style);
- --spectrum-table-row-font-size: var(--spectrum-font-size-100);
- --spectrum-table-row-line-height: var(--spectrum-line-height-100);
-
- /* General Colors */
- --spectrum-table-border-color: var(--spectrum-gray-300);
- --spectrum-table-divider-color: var(--spectrum-gray-300);
-
- --spectrum-table-header-background-color: var(--spectrum-transparent-white-100);
- --spectrum-table-header-text-color: var(--spectrum-body-color);
-
- --spectrum-table-row-background-color: var(--spectrum-gray-50);
- --spectrum-table-row-text-color: var(--spectrum-neutral-content-color-default);
-
- /* ----- *
- @todo Refactor or remove these properties once the RGB stripped value is available. */
- --spectrum-table-selected-row-background-color: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity));
- --spectrum-table-selected-row-background-color-non-emphasized: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized));
- --spectrum-table-row-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity));
-
- --spectrum-table-row-active-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity));
- --spectrum-table-selected-row-background-color-focus: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity-hover));
- --spectrum-table-selected-row-background-color-non-emphasized-focus: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover));
-
- /* ----- */
-
- --spectrum-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
- --spectrum-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down);
- --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus);
- --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover);
- --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-
- /* Row Selection */
- --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium);
- --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular);
-
- --spectrum-table-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-table-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- --spectrum-table-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity));
- --spectrum-table-drop-zone-outline-color: var(--spectrum-accent-visual-color);
-
- --spectrum-table-transition-duration: var(--spectrum-animation-duration-100);
-
- /* Summary Row and Section Header Row */
- --spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-table-summary-row-background-color: var(--spectrum-gray-200);
-
- --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium);
- --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100);
- --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100);
-
- --spectrum-table-section-header-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-table-section-header-background-color: var(--spectrum-gray-200);
-
- /* Collapsible and Thumbnails */
- --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300);
- --spectrum-table-collapsible-disclosure-inline-spacing: 0px;
- --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100);
- --spectrum-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100);
-
- --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100);
- --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular);
- --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300);
-
- /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341
- and for modifying emphasized/non-emphasized background colors from the root element. */
- --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color)));
- --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized)));
- --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-non-emphasized-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus)));
-
- /* Passthrough for nested component(s) */
- --mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size));
-
- &:dir(rtl) {
- --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
- }
-}
-
-/********* T-SHIRT SIZES (Regular Density) *********/
-.spectrum-Table--sizeS {
- /* Size and Spacing */
- --spectrum-table-min-header-height: var(--spectrum-component-height-100);
- --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-small);
- --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-small);
-
- --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-regular);
- --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-regular);
- --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-regular);
-
- --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100);
-
- /* Typography */
- --spectrum-table-row-font-size: var(--spectrum-font-size-75);
-
- /* Row Selection */
- --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-small);
- --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-regular);
-
- /* Summary Row and Section Header Row */
- --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-small);
- --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-75);
- --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-75);
-
- /* Collapsible and Thumbnails */
- --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-75);
-
- --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-regular);
- --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100);
- --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200);
-}
-
-.spectrum-Table--sizeL {
- /* Size and Spacing */
- --spectrum-table-min-header-height: var(--spectrum-component-height-200);
- --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-large);
- --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-large);
-
- --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-regular);
- --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-regular);
- --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-regular);
-
- --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-200);
-
- /* Typography */
- --spectrum-table-row-font-size: var(--spectrum-font-size-200);
-
- /* Row Selection */
- --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-large);
- --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-regular);
-
- /* Summary Row and Section Header Row */
- --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-large);
- --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-200);
- --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-200);
-
- /* Collapsible and Thumbnails */
- --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-200);
-
- --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-regular);
- --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-200);
- --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500);
-}
-
-.spectrum-Table--sizeXL {
- /* Size and Spacing */
- --spectrum-table-min-header-height: var(--spectrum-component-height-300);
- --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-extra-large);
- --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-extra-large);
-
- --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-regular);
- --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-regular);
- --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-regular);
-
- --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-300);
-
- /* Typography */
- --spectrum-table-row-font-size: var(--spectrum-font-size-300);
-
- /* Row Selection */
- --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-extra-large);
- --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-regular);
-
- /* Summary Row and Section Header Row */
- --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-extra-large);
- --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-300);
- --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-300);
-
- /* Collapsible and Thumbnails */
- --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-300);
-
- --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-regular);
- --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-300);
- --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700);
-}
-
-/********* VARIANTS *********/
-.spectrum-Table--compact {
- /* Size and Spacing */
- --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-medium-compact));
- --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-medium-compact));
- --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-medium-compact));
-
- /* Row Selection */
- --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-medium-compact));
-
- /* Collapsible and Thumbnails */
- --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-medium-compact));
- --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-200));
-
- &.spectrum-Table--sizeS {
- /* Size and Spacing */
- --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-small-compact));
- --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-small-compact));
- --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-small-compact));
-
- /* Row Selection */
- --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-small-compact));
-
- /* Collapsible and Thumbnails */
- --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-small-compact));
- --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-50));
- }
-
- &.spectrum-Table--sizeL {
- /* Size and Spacing */
- --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-large-compact));
- --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-large-compact));
- --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-large-compact));
-
- /* Row Selection */
- --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-large-compact));
-
- /* Collapsible and Thumbnails */
- --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-large-compact));
- --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-300));
- }
-
- &.spectrum-Table--sizeXL {
- /* Size and Spacing */
- --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-extra-large-compact));
- --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-extra-large-compact));
- --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-extra-large-compact));
-
- /* Row Selection */
- --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-extra-large-compact));
-
- /* Collapsible and Thumbnails */
- --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact));
- --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-500));
- }
-}
-
-.spectrum-Table--spacious {
- /* Size and Spacing */
- --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-medium-spacious));
- --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-medium-spacious));
- --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-medium-spacious));
-
- /* Row Selection */
- --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious));
-
- /* Collapsible and Thumbnails */
- --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious));
- --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-500));
-
- &.spectrum-Table--sizeS {
- /* Size and Spacing */
- --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-small-spacious));
- --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-small-spacious));
- --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-small-spacious));
-
- /* Row Selection */
- --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-small-spacious));
-
- /* Collapsible and Thumbnails */
- --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-small-spacious));
- --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-300));
- }
-
- &.spectrum-Table--sizeL {
- /* Size and Spacing */
- --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-large-spacious));
- --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-large-spacious));
- --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-large-spacious));
-
- /* Row Selection */
- --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-large-spacious));
-
- /* Collapsible and Thumbnails */
- --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-large-spacious));
- --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-700));
- }
-
- &.spectrum-Table--sizeXL {
- /* Size and Spacing */
- --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-extra-large-spacious));
- --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-extra-large-spacious));
- --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-extra-large-spacious));
-
- /* Row Selection */
- --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-extra-large-spacious));
-
- /* Collapsible and Thumbnails */
- --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious));
- --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-800));
- }
-}
-
-.spectrum-Table--emphasized {
- --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color)));
- --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-focus)));
-}
-
-.spectrum-Table--quiet {
- --mod-table-border-radius: var(--mod-table-border-radius--quiet, 0px);
- --mod-table-outer-border-inline-width: var(--mod-table-outer-border-inline-width--quiet, 0px);
- --mod-table-header-background-color: var(--mod-table-header-background-color--quiet, var(--spectrum-transparent-white-100));
- --mod-table-row-background-color: var(--mod-table-row-background-color--quiet, var(--spectrum-transparent-white-100));
-}
+@import "./themes/spectrum-two.css";
/********* HIGH CONTRAST *********/
@media (forced-colors: active) {
@@ -399,6 +73,19 @@
}
}
+.spectrum-Table {
+ /* @passthrough for nested component(s) */
+ --mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size));
+
+ --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color)));
+ --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized)));
+ --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-non-emphasized-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus)));
+
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
+}
+
/********* REGULAR / DEFAULT *********/
.spectrum-Table:not(.spectrum-Table-scroller),
.spectrum-Table-main {
@@ -508,12 +195,12 @@
border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
&.is-drop-target {
+ /* Make sure negative offset outline is not covered by borders. */
+ --spectrum-table-border-color: transparent;
+
outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness));
outline-style: solid;
outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color)));
-
- /* Make sure negative offset outline is not covered by borders. */
- --mod-table-border-color: transparent;
}
}
@@ -640,14 +327,14 @@
&.is-selected {
--highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color);
--highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color);
- --spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color);
+ --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--spectrum-table-selected-cell-background-color));
&:hover,
&:focus-visible,
&.is-focused {
--highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color-focus);
--highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color-focus);
- --spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color-focus);
+ --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color-focus, var(--spectrum-table-selected-cell-background-color-focus));
}
}
@@ -659,14 +346,14 @@
}
&.is-drop-target {
+ /* Make sure negative offset outline is not covered by borders. */
+ --spectrum-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent);
+
outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness));
outline-style: solid;
outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color)));
outline-offset: calc(-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)));
- /* Make sure negative offset outline is not covered by borders. */
- --mod-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent);
-
.spectrum-Table-cell {
border-block-start-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color)));
}
@@ -721,7 +408,7 @@
inline-size: var(--spectrum-checkbox-control-size-small);
/* The calc subtraction is because the --spectrum-table-checkbox-to-text spacing value
- includes the inline start padding in the adjacent cell. */
+ includes the inline start padding in the adjacent cell. */
padding-inline-end: calc(var(--mod-table-checkbox-to-text, var(--spectrum-table-checkbox-to-text)) - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)));
/* Block spacing must be moved to calculated margin on the checkbox element. */
@@ -729,6 +416,7 @@
.spectrum-Table-checkbox {
--mod-checkbox-spacing: 0px;
+
min-block-size: initial;
}
@@ -771,7 +459,7 @@
/********* SCROLLABLE *********/
/* Wrapper that allows a scrollable body and sticky column header. */
.spectrum-Table-scroller {
- --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100)));
+ --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-75)));
box-sizing: border-box;
display: inline-block;
@@ -782,15 +470,15 @@
border-block: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
- &.spectrum-Table--quiet {
- --mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100)));
- border-block-start: none;
- }
-
/* Make sure shift-tab reverse keyboard navigation keeps the whole cell in focus.
--mod-table-current-header-height should be dynamically updated with JS to match the table header height. */
scroll-padding-top: var(--mod-table-current-header-height, calc((var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) + var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width))));
+ &.spectrum-Table--quiet {
+ --spectrum-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-75)));
+ border-block-start: none;
+ }
+
.spectrum-Table-head {
position: sticky;
inset-block-start: 0;
@@ -987,3 +675,128 @@
padding-block: var(--table-thumbnail-inner-content-block-spacing);
}
}
+
+/********* VARIANTS *********/
+.spectrum-Table--compact {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-medium-compact));
+ --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-medium-compact));
+ --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-medium-compact));
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-medium-compact));
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-medium-compact));
+ --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-200));
+
+ &.spectrum-Table--sizeS {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-small-compact));
+ --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-small-compact));
+ --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-small-compact));
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-small-compact));
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-small-compact));
+ --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-50));
+ }
+
+ &.spectrum-Table--sizeL {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-large-compact));
+ --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-large-compact));
+ --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-large-compact));
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-large-compact));
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-large-compact));
+ --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-300));
+ }
+
+ &.spectrum-Table--sizeXL {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-extra-large-compact));
+ --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-extra-large-compact));
+ --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-extra-large-compact));
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-extra-large-compact));
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact));
+ --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-500));
+ }
+}
+
+.spectrum-Table--spacious {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-medium-spacious));
+ --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-medium-spacious));
+ --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-medium-spacious));
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious));
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious));
+ --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-500));
+
+ &.spectrum-Table--sizeS {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-small-spacious));
+ --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-small-spacious));
+ --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-small-spacious));
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-small-spacious));
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-small-spacious));
+ --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-300));
+ }
+
+ &.spectrum-Table--sizeL {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-large-spacious));
+ --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-large-spacious));
+ --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-large-spacious));
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-large-spacious));
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-large-spacious));
+ --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-700));
+ }
+
+ &.spectrum-Table--sizeXL {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-extra-large-spacious));
+ --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-extra-large-spacious));
+ --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-extra-large-spacious));
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-extra-large-spacious));
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious));
+ --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-800));
+ }
+}
+
+.spectrum-Table--emphasized {
+ --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color)));
+ --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-focus)));
+}
+
+.spectrum-Table--quiet {
+ --spectrum-table-border-radius: var(--mod-table-border-radius--quiet, 0px);
+ --spectrum-table-outer-border-inline-width: var(--mod-table-outer-border-inline-width--quiet, 0px);
+ --spectrum-table-header-background-color: var(--mod-table-header-background-color--quiet, var(--spectrum-transparent-white-100));
+ --spectrum-table-row-background-color: var(--mod-table-row-background-color--quiet, var(--spectrum-transparent-white-100));
+}
diff --git a/components/table/metadata/metadata.json b/components/table/metadata/metadata.json
index cac1a19e229..1a7b84fc30d 100644
--- a/components/table/metadata/metadata.json
+++ b/components/table/metadata/metadata.json
@@ -249,6 +249,7 @@
"--spectrum-table-focus-indicator-color",
"--spectrum-table-focus-indicator-thickness",
"--spectrum-table-header-background-color",
+ "--spectrum-table-header-background-color--quiet",
"--spectrum-table-header-bottom-to-text",
"--spectrum-table-header-checkbox-block-spacing",
"--spectrum-table-header-font-weight",
@@ -403,9 +404,9 @@
"--spectrum-font-size-75",
"--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-gray-50",
+ "--spectrum-gray-25",
"--spectrum-gray-700-rgb",
+ "--spectrum-gray-75",
"--spectrum-gray-900-rgb",
"--spectrum-line-height-100",
"--spectrum-logical-rotation",
@@ -428,7 +429,8 @@
"--spectrum-thumbnail-size-500",
"--spectrum-thumbnail-size-700",
"--spectrum-thumbnail-size-800",
- "--spectrum-transparent-white-100"
+ "--spectrum-transparent-white-100",
+ "--spectrum-transparent-white-25"
],
"system-theme": [],
"passthroughs": ["--mod-checkbox-spacing", "--mod-thumbnail-size"],
diff --git a/components/table/metadata/table.yml b/components/table/metadata/table.yml
deleted file mode 100644
index df332cdf499..00000000000
--- a/components/table/metadata/table.yml
+++ /dev/null
@@ -1,1347 +0,0 @@
-name: Table
-description: The Table component is for displaying tabular info, with the option for sorting or row selection.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/table/
-sections:
- - name: Custom properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration guide
- description: |
- ### Sorted icon moved to left side of text
- The sorted icon was previously on the right side of the text, but has been moved to the left in the markup. If used on the right side of the text, the spacing between icon and text will be incorrect.
-
- ### Remove whitespace between column title text and sort icon(s)
- In the column header, when the sort icon or header menu icon is displayed, remove any white space in the HTML markup between the icon and the column title. This ensures that no extra space is created. Also, the column title text is now wrapped in a `` element when the column is sortable.
-examples:
- - id: table-medium
- name: Default (medium)
- description: "Tables come in four different sizes: small, medium, large, and extra-large. The medium size is the default and recommended option."
- markup: |
-
-
-
-
-
- Column title
-
-
-
- Column title
-
- Column title
-
-
-
-
- Row Item Alpha
- Row Item Alpha
- Row Item Alpha
-
-
- Row Item Bravo
- Row Item Bravo
- Row Item Bravo
-
-
- Row Item Charlie
- Row Item Charlie
- Row Item Charlie
-
-
- Row Item Delta
- Row Item Delta
- Row Item Delta
-
-
- Row Item Echo
- Row Item Echo
- Row Item Echo
-
-
-
- - id: table-small
- name: T-Shirt sizes
- description: "Tables come in four different sizes: small, medium, large, and extra-large. The medium size is the default and recommended option."
- markup: |
-
-
Small
-
-
-
-
-
-
-
- Column title
-
-
-
-
- Column title
-
- Column title
-
-
-
-
- Row Item Bravo
- Row Item Bravo
- Row Item Bravo
-
-
- Row Item Alpha
- Row Item Alpha
- Row Item Alpha
-
-
-
-
-
Medium
-
-
-
-
-
-
-
- Column title
-
-
-
-
- Column title
-
- Column title
-
-
-
-
- Row Item Bravo
- Row Item Bravo
- Row Item Bravo
-
-
- Row Item Alpha
- Row Item Alpha
- Row Item Alpha
-
-
-
-
-
Large
-
-
-
-
-
-
-
- Column title
-
-
-
-
- Column title
-
- Column title
-
-
-
-
- Row Item Bravo
- Row Item Bravo
- Row Item Bravo
-
-
- Row Item Alpha
- Row Item Alpha
- Row Item Alpha
-
-
-
-
-
Extra Large
-
-
-
-
-
-
-
- Column title
-
-
-
-
- Column title
-
- Column title
-
-
-
-
- Row Item Bravo
- Row Item Bravo
- Row Item Bravo
-
-
- Row Item Alpha
- Row Item Alpha
- Row Item Alpha
-
-
-
-
-
-
-
-
- Column title
-
-
-
- Column title
-
- Column title
-
-
-
-
- Row Item Alpha
- Row Item Alpha
- Row Item Alpha
-
-
- Row Item Bravo
- Row Item Bravo
- Row Item Bravo
-
-
- Row Item Charlie
- Row Item Charlie
- Row Item Charlie
-
-
- Row Item Delta
- Row Item Delta
- Row Item Delta
-
-
- Row Item Echo
- Row Item Echo
- Row Item Echo
-
-
-
- - id: table-spacious
- name: Spacious
- description: The spacious variant increases the spacing used within the table.
- markup: |
-
-
-
-
-
- Column title
-
-
-
- Column title
-
- Column title
-
-
-
-
- Row Item Alpha
- Row Item Alpha
- Row Item Alpha
-
-
- Row Item Bravo
- Row Item Bravo
- Row Item Bravo
-
-
- Row Item Charlie
- Row Item Charlie
- Row Item Charlie
-
-
- Row Item Delta
- Row Item Delta
- Row Item Delta
-
-
- Row Item Echo
- Row Item Echo
- Row Item Echo
-
-
-
- - id: table-multi-select
- name: Multi-select
- description: The standard multi-select table includes a column of checkboxes used for selecting rows.
- markup: |
-
- - id: table-multi-select-non-emphasized
- name: Non-emphasized multi-select
- description: Excluding the `spectrum-Table--emphasized` class will change the style of selected rows.
- markup: |
-
- - id: table-quiet
- name: Quiet
- description: The quiet table has a transparent background and no borders on the left and right.
- markup: |
-
-
-
-
-
- Column title
-
-
-
- Column title
-
- Column title
-
-
-
-
- Row Item Alpha
- Row Item Alpha
- Row Item Alpha
-
-
- Row Item Bravo
- Row Item Bravo
- Row Item Bravo
-
-
- Row Item Charlie
- Row Item Charlie
- Row Item Charlie
-
-
- Row Item Delta
- Row Item Delta
- Row Item Delta
-
-
- Row Item Echo
- Row Item Echo
- Row Item Echo
-
-
-
- - id: table-quiet-multi-select
- name: Multi-select (quiet)
- markup: |
-
- - id: table-column-dividers
- name: Column dividers
- description: The standard table can display column dividers by including the `spectrum-Table-cell--divider` class with `spectrum-Table-cell`. Use sparingly to group related content (see guidelines for more info).
- markup: |
-
-
-
-
-
- Column title
-
-
-
- Column title
-
- Column title
-
-
-
-
- Row Item Echo
- Row Item Echo
- Row Item Echo
-
-
- Row Item Delta
- Row Item Delta
- Row Item Delta
-
-
- Row Item Charlie
- Row Item Charlie
- Row Item Charlie
-
-
- Row Item Bravo
- Row Item Bravo
- Row Item Bravo
-
-
- Row Item Alpha
- Row Item Alpha
- Row Item Alpha
-
-
-
- - id: table-summary-row
- name: Summary row
- description: "Tables can have a summary row to show totals, at either the top or the bottom of the table."
- markup: |
-
-
-
-
-
- Column title
-
-
-
- Column title
-
- Column title
-
-
-
-
- Row Item Alpha
- 18
- 2875
-
-
- Row Item Bravo
- 23
- 3679
-
-
- Row Item Delta
- 7
- 1308
-
-
- Summary
- 48
- 7862
-
-
-
- - id: table-section-header-row
- name: Section header row
- description: "Tables can style one or more rows as section headers."
- markup: |
-
-
-
-
-
- Column title
-
-
-
- Column title
-
- Column title
-
-
-
-
-
- Row Item Alpha
- Row Item Alpha
- Row Item Alpha
-
-
- Row Item Alpha
- Row Item Alpha
- Row Item Alpha
-
-
- Row Item Bravo
- Row Item Bravo
- Row Item Bravo
-
-
-
- Row Item Delta
- Row Item Delta
- Row Item Delta
-
-
- Row Item Echo
- Row Item Echo
- Row Item Echo
-
-
-
- - id: table-section-header-row-quiet
- name: Section header row (quiet)
- markup: |
-
-
-
-
-
- Column title
-
-
-
- Column title
-
- Column title
-
-
-
-
-
- Row Item Alpha
- Row Item Alpha
- Row Item Alpha
-
-
- Row Item Alpha
- Row Item Alpha
- Row Item Alpha
-
-
- Row Item Bravo
- Row Item Bravo
- Row Item Bravo
-
-
-
- Row Item Delta
- Row Item Delta
- Row Item Delta
-
-
- Row Item Echo
- Row Item Echo
- Row Item Echo
-
-
-
- - id: table-scrollable
- name: Scrollable with fixed column headers
- description: |
- A table can be wrapped in a fixed height div with the `spectrum-Table-scroller` class. This allows scrolling of the table body and makes the column headers sticky (i.e. fixed to the top on scroll).
-
- When using the scrollable wrapper, the column headers must have a solid background color set. This can be customized to match the parent background with the custom property `--mod-table-header-background-color-scrollable`.
-
- To make sure that reverse keyboard link navigation (shift-tab) keeps the whole cell in focus, `--mod-table-current-header-height` should be dynamically updated with JS to match the height of `.spectrum-Table-head`.
- markup: |
-
- - id: table-divs
- name: Divs
- description: A table can alternatively be composed entirely of `` tags, instead of a `
`. This example also uses the scrollable wrapper.
- markup: |
-
- - id: table-collapsible
- name: Collapsible rows
- description: "In a table with collapsible rows, all child items must have columns that match the parent items. See the Guidelines for more info on how and when to use collapsible rows."
- markup: |
-
-
-
-
-
- Column title
-
-
-
- Column title
-
- Column title
-
-
-
-
-
-
-
-
-
-
-
Row Item Alpha
-
-
- Row Item Alpha
- Row Item Alpha
-
-
-
-
-
-
-
-
-
Row Item Bravo
-
-
- Row Item Bravo
- Row Item Bravo
-
-
-
-
- Row Item Charlie
- Row Item Charlie
-
-
-
-
-
-
-
-
-
Row Item Delta
-
- Row Item Delta
- Row Item Delta
-
-
-
-
-
- Row Item Echo
- Row Item Echo
-
-
-
-
-
- Row Item Foxtrot
- Row Item Foxtrot
-
-
-
- - id: table-thumbnails
- name: Thumbnails
- description: "Thumbnails can be used in the table content, with some additional markup and classes for alignment. This variant can also be combined with collapsible rows."
- markup: |
-
-
-
-
-
-
- Animals
-
-
-
-
- Number
-
-
-
-
-
-
-
-
-
-
-
-
-
Birds
-
- 2
-
-
-
-
-
-
-
-
-
-
Ducks
-
- 23
-
-
-
-
-
-
-
-
-
-
Goats
-
- 7
-
-
-
-
-
-
-
-
-
-
Rabbits
-
- 18
-
-
-
- - id: table-body-dropzone-table
- name: Body dropzone
- markup: |
-
-
-
-
-
- Column title
-
-
-
- Column title
-
- Column title
-
-
-
-
- Row Item Alpha
- Row Item Alpha
- Row Item Alpha
-
-
- Row Item Bravo
- Row Item Bravo
- Row Item Bravo
-
-
- Row Item Charlie
- Row Item Charlie
- Row Item Charlie
-
-
- Row Item Delta
- Row Item Delta
- Row Item Delta
-
-
- Row Item Echo
- Row Item Echo
- Row Item Echo
-
-
-
- - id: table-row-dropzone
- name: Row dropzone
- description: Rows that accept dropped content.
- markup: |
-
- - id: table-row-dropzone-quiet
- name: Row dropzone (quiet)
- markup: |
-
diff --git a/components/table/package.json b/components/table/package.json
index 4514609fafb..334d0ff8251 100644
--- a/components/table/package.json
+++ b/components/table/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/table",
- "version": "6.1.3",
+ "version": "7.0.0-s2-foundations.15",
"description": "The Spectrum CSS table component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/table/stories/template.js b/components/table/stories/template.js
index 2de59d0c12c..2a48da8b00f 100644
--- a/components/table/stories/template.js
+++ b/components/table/stories/template.js
@@ -9,6 +9,9 @@ import { when } from "lit/directives/when.js";
import { html, literal } from "lit/static-html.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const TableRowItem = ({
rootClass = "spectrum-Table",
diff --git a/components/table/themes/express.css b/components/table/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/table/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/table/themes/spectrum-two.css b/components/table/themes/spectrum-two.css
new file mode 100644
index 00000000000..b51b36d8682
--- /dev/null
+++ b/components/table/themes/spectrum-two.css
@@ -0,0 +1,335 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Table {
+ /* Size and Spacing */
+ --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium);
+ --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium);
+
+ --spectrum-table-min-header-height: var(--spectrum-component-height-100);
+ --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-regular);
+ --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-regular);
+ --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-regular);
+
+ --spectrum-table-cell-inline-space: var(--spectrum-table-edge-to-content);
+
+ --spectrum-table-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-table-border-width: var(--spectrum-table-border-divider-width);
+ --spectrum-table-outer-border-inline-width: var(--spectrum-table-border-divider-width);
+
+ --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100);
+
+ --spectrum-table-default-vertical-align: top;
+ --spectrum-table-header-vertical-align: middle;
+
+ /* Typography */
+ --spectrum-table-header-font-weight: var(--spectrum-bold-font-weight);
+
+ --spectrum-table-row-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-table-row-font-weight: var(--spectrum-regular-font-weight);
+ --spectrum-table-row-font-style: var(--spectrum-default-font-style);
+ --spectrum-table-row-font-size: var(--spectrum-font-size-100);
+ --spectrum-table-row-line-height: var(--spectrum-line-height-100);
+
+ /* General Colors */
+ --spectrum-table-border-color: var(--spectrum-gray-200);
+ --spectrum-table-divider-color: var(--spectrum-gray-200);
+
+ --spectrum-table-header-background-color: var(--spectrum-transparent-white-25);
+ --spectrum-table-header-text-color: var(--spectrum-body-color);
+
+ --spectrum-table-row-background-color: var(--spectrum-gray-25);
+ --spectrum-table-row-text-color: var(--spectrum-neutral-content-color-default);
+
+ /* ----- *
+ @todo Refactor or remove these properties once the RGB stripped value is available. */
+ --spectrum-table-selected-row-background-color: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity));
+ --spectrum-table-selected-row-background-color-non-emphasized: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized));
+ --spectrum-table-row-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity));
+
+ --spectrum-table-row-active-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity));
+ --spectrum-table-selected-row-background-color-focus: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity-hover));
+ --spectrum-table-selected-row-background-color-non-emphasized-focus: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover));
+
+ /* ----- */
+
+ --spectrum-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+ --spectrum-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down);
+ --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus);
+ --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover);
+ --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+
+ /* Row Selection */
+ --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium);
+ --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular);
+
+ --spectrum-table-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-table-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ --spectrum-table-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity));
+ --spectrum-table-drop-zone-outline-color: var(--spectrum-accent-visual-color);
+
+ --spectrum-table-transition-duration: var(--spectrum-animation-duration-100);
+
+ /* Summary Row and Section Header Row */
+ --spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight);
+ --spectrum-table-summary-row-background-color: var(--spectrum-gray-100);
+
+ --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium);
+ --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100);
+ --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100);
+
+ --spectrum-table-section-header-font-weight: var(--spectrum-bold-font-weight);
+ --spectrum-table-section-header-background-color: var(--spectrum-gray-100);
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300);
+ --spectrum-table-collapsible-disclosure-inline-spacing: 0px;
+ --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100);
+ --spectrum-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100);
+
+ --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100);
+ --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular);
+ --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300);
+
+ /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341
+ and for modifying emphasized/non-emphasized background colors from the root element. */
+ --spectrum-table-cell-background-color: var(--spectrum-table-row-background-color);
+ --spectrum-table-selected-cell-background-color: var(--spectrum-table-selected-row-background-color-non-emphasized);
+ --spectrum-table-selected-cell-background-color-focus: var(--spectrum-table-selected-row-background-color-non-emphasized-focus);
+ }
+
+ /********* T-SHIRT SIZES (Regular Density) *********/
+ .spectrum-Table--sizeS {
+ /* Size and Spacing */
+ --spectrum-table-min-header-height: var(--spectrum-component-height-100);
+ --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-small);
+ --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-small);
+
+ --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-regular);
+ --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-regular);
+ --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-regular);
+
+ --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100);
+
+ /* Typography */
+ --spectrum-table-row-font-size: var(--spectrum-font-size-75);
+
+ /* Row Selection */
+ --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-small);
+ --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-regular);
+
+ /* Summary Row and Section Header Row */
+ --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-small);
+ --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-75);
+ --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-75);
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-75);
+
+ --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-regular);
+ --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100);
+ --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200);
+ }
+
+ .spectrum-Table--sizeL {
+ /* Size and Spacing */
+ --spectrum-table-min-header-height: var(--spectrum-component-height-200);
+ --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-large);
+ --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-large);
+
+ --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-regular);
+ --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-regular);
+ --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-regular);
+
+ --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-200);
+
+ /* Typography */
+ --spectrum-table-row-font-size: var(--spectrum-font-size-200);
+
+ /* Row Selection */
+ --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-large);
+ --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-regular);
+
+ /* Summary Row and Section Header Row */
+ --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-large);
+ --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-200);
+ --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-200);
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-200);
+
+ --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-regular);
+ --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-200);
+ --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500);
+ }
+
+ .spectrum-Table--sizeXL {
+ /* Size and Spacing */
+ --spectrum-table-min-header-height: var(--spectrum-component-height-300);
+ --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-extra-large);
+ --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-extra-large);
+
+ --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-regular);
+ --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-regular);
+ --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-regular);
+
+ --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-300);
+
+ /* Typography */
+ --spectrum-table-row-font-size: var(--spectrum-font-size-300);
+
+ /* Row Selection */
+ --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-extra-large);
+ --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-regular);
+
+ /* Summary Row and Section Header Row */
+ --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-extra-large);
+ --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-300);
+ --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-300);
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-300);
+
+ --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-regular);
+ --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-300);
+ --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700);
+ }
+
+ /********* VARIANTS *********/
+ .spectrum-Table--compact {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-compact);
+ --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-compact);
+ --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-compact);
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-compact);
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-compact);
+ --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200);
+
+ &.spectrum-Table--sizeS {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-compact);
+ --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-compact);
+ --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-compact);
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-compact);
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-compact);
+ --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-50);
+ }
+
+ &.spectrum-Table--sizeL {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-compact);
+ --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-compact);
+ --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-compact);
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-compact);
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-compact);
+ --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300);
+ }
+
+ &.spectrum-Table--sizeXL {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-compact);
+ --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-compact);
+ --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-compact);
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-compact);
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact);
+ --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500);
+ }
+ }
+
+ .spectrum-Table--spacious {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-spacious);
+ --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-spacious);
+ --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-spacious);
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-spacious);
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious);
+ --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500);
+
+ &.spectrum-Table--sizeS {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-spacious);
+ --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-spacious);
+ --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-spacious);
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-spacious);
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-spacious);
+ --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300);
+ }
+
+ &.spectrum-Table--sizeL {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-spacious);
+ --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-spacious);
+ --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-spacious);
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-spacious);
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-spacious);
+ --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700);
+ }
+
+ &.spectrum-Table--sizeXL {
+ /* Size and Spacing */
+ --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-spacious);
+ --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-spacious);
+ --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-spacious);
+
+ /* Row Selection */
+ --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-spacious);
+
+ /* Collapsible and Thumbnails */
+ --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious);
+ --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-800);
+ }
+ }
+
+ .spectrum-Table--emphasized {
+ --spectrum-table-selected-cell-background-color: var(--spectrum-table-selected-row-background-color);
+ --spectrum-table-selected-cell-background-color-focus: var(--spectrum-table-selected-row-background-color-focus);
+ }
+
+ .spectrum-Table--quiet {
+ --spectrum-table-border-radius: 0px;
+ --spectrum-table-outer-border-inline-width: 0px;
+ --spectrum-table-header-background-color: var(--spectrum-transparent-white-25);
+ --spectrum-table-row-background-color: var(--spectrum-transparent-white-25);
+ }
+}
diff --git a/components/table/themes/spectrum.css b/components/table/themes/spectrum.css
new file mode 100644
index 00000000000..0557fdaf25f
--- /dev/null
+++ b/components/table/themes/spectrum.css
@@ -0,0 +1,34 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Table {
+ --spectrum-table-header-background-color: var(--spectrum-transparent-white-100);
+ --spectrum-table-border-color: var(--spectrum-gray-300);
+ --spectrum-table-divider-color: var(--spectrum-gray-300);
+ --spectrum-table-header-background-color: var(--spectrum-transparent-white-100);
+ --spectrum-table-row-background-color: var(--spectrum-gray-50);
+ --spectrum-table-summary-row-background-color: var(--spectrum-gray-200);
+ --spectrum-table-section-header-background-color: var(--spectrum-gray-200);
+ }
+
+ .spectrum-Table--quiet {
+ --spectrum-table-header-background-color: var(--spectrum-transparent-white-100);
+ --spectrum-table-row-background-color: var(--spectrum-transparent-white-100);
+ }
+}
diff --git a/components/tabs/CHANGELOG.md b/components/tabs/CHANGELOG.md
index 2164b91d882..b08baf5617a 100644
--- a/components/tabs/CHANGELOG.md
+++ b/components/tabs/CHANGELOG.md
@@ -1,5 +1,214 @@
# Change Log
+## 6.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.13
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/menu@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#3036](https://github.com/adobe/spectrum-css/pull/3036) [`96686a5`](https://github.com/adobe/spectrum-css/commit/96686a56e2532bc747985b40686783ddd9b98221) Thanks [@rise-erpelding](https://github.com/rise-erpelding)! - [CSS-890]: adjusts --mods to be applied inside of index.css
+
+### Patch Changes
+
+- Updated dependencies [[`96686a5`](https://github.com/adobe/spectrum-css/commit/96686a56e2532bc747985b40686783ddd9b98221)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.18
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/menu@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/menu@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/menu@8.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/menu@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/menu@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/menu@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/picker@9.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+ - @spectrum-css/menu@8.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/menu@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/menu@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/menu@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/menu@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/menu@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/picker@9.0.0-s2-foundations.0
+ - @spectrum-css/menu@8.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/tabs/index.css b/components/tabs/index.css
index eed76f3efd8..d2dc14d48b1 100644
--- a/components/tabs/index.css
+++ b/components/tabs/index.css
@@ -11,147 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-Tabs {
- /* Default is Medium sizing */
- --spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium);
- --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium);
- --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium);
- --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium);
- --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium);
- --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium);
-
- --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-75);
- --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-100);
- --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium);
-
- --spectrum-tabs-color: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down);
- --spectrum-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
- --spectrum-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
- --spectrum-tabs-color-disabled: var(--spectrum-gray-500);
-
- --spectrum-tabs-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-tabs-font-style: var(--spectrum-default-font-style);
- --spectrum-tabs-font-size: var(--spectrum-font-size-100);
- --spectrum-tabs-line-height: var(--spectrum-line-height-100);
-
- /* Focus Indicator */
- --spectrum-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
- --spectrum-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium);
- --spectrum-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color);
- --spectrum-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down);
-
- --spectrum-tabs-list-background-direction: top;
- --spectrum-tabs-divider-background-color: var(--spectrum-gray-300);
- --spectrum-tabs-divider-size: var(--spectrum-border-width-200);
- --spectrum-tabs-divider-border-radius: 1px;
-
- --spectrum-tabs-animation-duration: var(--spectrum-animation-duration-100);
- --spectrum-tabs-animation-ease: var(--spectrum-animation-ease-in-out);
-
- &.spectrum-Tabs--sizeS {
- --spectrum-tabs-item-height: var(--spectrum-tab-item-height-small);
- --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small);
- --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small);
- --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-small);
- --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-small);
- --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small);
-
- --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-50);
- --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-75);
- --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small);
-
- --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small);
- --spectrum-tabs-font-size: var(--spectrum-font-size-75);
- }
-
- &.spectrum-Tabs--sizeL {
- --spectrum-tabs-item-height: var(--spectrum-tab-item-height-large);
- --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large);
- --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large);
- --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-large);
- --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-large);
- --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large);
-
- --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-100);
- --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-200);
- --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large);
-
- --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large);
- --spectrum-tabs-font-size: var(--spectrum-font-size-200);
- }
-
- &.spectrum-Tabs--sizeXL {
- --spectrum-tabs-item-height: var(--spectrum-tab-item-height-extra-large);
- --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large);
- --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large);
- --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large);
- --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large);
- --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large);
-
- --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-200);
- --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-300);
- --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large);
-
- --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large);
- --spectrum-tabs-font-size: var(--spectrum-font-size-300);
- }
-
- &.spectrum-Tabs--emphasized {
- --mod-tabs-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-accent-content-color-default));
- --mod-tabs-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-accent-content-color-hover));
- --mod-tabs-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-accent-content-color-key-focus));
-
- --mod-tabs-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-accent-content-color-default));
- }
-}
-
-.spectrum-Tabs--vertical {
- --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
-}
-
-.spectrum-Tabs--vertical-right {
- --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left);
-}
-
-.spectrum-Tabs--vertical:dir(rtl) {
- --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left);
-}
-
-.spectrum-Tabs--vertical-right:dir(rtl) {
- --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
-}
-
-.spectrum-Tabs.spectrum-Tabs--compact {
- --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium));
- --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium));
- --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium));
- --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium));
-
- &.spectrum-Tabs--sizeS {
- --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-small));
- --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small));
- --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small));
- --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-small));
- }
-
- &.spectrum-Tabs--sizeL {
- --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large));
- --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large));
- --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large));
- --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-large));
- }
-
- &.spectrum-Tabs--sizeXL {
- --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-extra-large));
- --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large));
- --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large));
- --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large));
- }
-}
+@import "./themes/spectrum-two.css";
.spectrum-Tabs {
display: flex;
@@ -167,6 +27,14 @@
vertical-align: top;
background: linear-gradient(to var(--mod-tabs-list-background-direction, var(--spectrum-tabs-list-background-direction)), var(--highcontrast-tabs-divider-background-color, var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))) 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)));
+
+ &.spectrum-Tabs--emphasized {
+ --mod-tabs-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-tabs-color-selected));
+ --mod-tabs-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-tabs-color-hover));
+ --mod-tabs-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-tabs-color-key-focus));
+
+ --mod-tabs-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-tabs-selection-indicator-color));
+ }
}
.spectrum-Tabs-item {
@@ -316,6 +184,10 @@
}
}
+.spectrum-Tabs--vertical {
+ --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
+}
+
.spectrum-Tabs--vertical,
.spectrum-Tabs--vertical-right {
display: inline-flex;
@@ -353,11 +225,49 @@
}
.spectrum-Tabs--vertical-right {
+ --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left);
+
.spectrum-Tabs-selectionIndicator {
inset-inline: auto 0;
}
}
+.spectrum-Tabs--vertical:dir(rtl) {
+ --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left);
+}
+
+.spectrum-Tabs--vertical-right:dir(rtl) {
+ --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
+}
+
+.spectrum-Tabs.spectrum-Tabs--compact {
+ --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium));
+ --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium));
+ --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium));
+ --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium));
+
+ &.spectrum-Tabs--sizeS {
+ --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-small));
+ --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small));
+ --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small));
+ --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-small));
+ }
+
+ &.spectrum-Tabs--sizeL {
+ --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large));
+ --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large));
+ --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large));
+ --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-large));
+ }
+
+ &.spectrum-Tabs--sizeXL {
+ --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-extra-large));
+ --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large));
+ --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large));
+ --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large));
+ }
+}
+
@media (forced-colors: active) {
.spectrum-Tabs {
--highcontrast-tabs-divider-background-color: var(--spectrum-gray-500);
diff --git a/components/tabs/metadata/metadata.json b/components/tabs/metadata/metadata.json
index fd417bceeb0..35d1d830638 100644
--- a/components/tabs/metadata/metadata.json
+++ b/components/tabs/metadata/metadata.json
@@ -136,7 +136,6 @@
"--spectrum-accent-content-color-key-focus",
"--spectrum-animation-duration-100",
"--spectrum-animation-ease-in-out",
- "--spectrum-bold-font-weight",
"--spectrum-border-width-200",
"--spectrum-corner-radius-100",
"--spectrum-default-font-style",
@@ -147,7 +146,7 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
- "--spectrum-gray-300",
+ "--spectrum-gray-200",
"--spectrum-gray-500",
"--spectrum-line-height-100",
"--spectrum-neutral-subdued-content-color-default",
@@ -208,7 +207,7 @@
"--spectrum-workflow-icon-size-50",
"--spectrum-workflow-icon-size-75"
],
- "system-theme": ["--system-spectrum-tabs-font-weight"],
+ "system-theme": [],
"passthroughs": [],
"high-contrast": [
"--highcontrast-tabs-color",
diff --git a/components/tabs/metadata/tabs.yml b/components/tabs/metadata/tabs.yml
deleted file mode 100644
index a76e85dbef3..00000000000
--- a/components/tabs/metadata/tabs.yml
+++ /dev/null
@@ -1,738 +0,0 @@
-name: Tabs
-SpectrumSiteSlug: https://spectrum.adobe.com/page/tabs/
-sections:
- - name: Migration Guide
- description: |
- ### T-shirt sizing
- Tabs now support t-shirt sizing and require that you specify the size by adding a `.spectrum-Tabs--size*` class.
-
- ### Change workflow icon size to medium
- If you use a workflow icon with tab items, please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
-
- ### Compact Tabs
- Compact tabs should not be used without `.spectrum-Tabs--quiet`.
-examples:
- - id: tabs-sizing
- name: Sizing
- markup: |
- S
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
M (default)
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
L
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
XL
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
-
-
-
- Tab 1
-
-
-
-
- Tab 2
-
-
-
-
- Tab 3
-
-
-
-
- Tab 4
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
-
-
-
- Tab 1
-
-
-
-
- Tab 2
-
-
-
-
- Tab 3
-
-
-
-
- Tab 4
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
-
-
-
- Tab 1
-
-
-
-
- Tab 2
-
-
-
-
- Tab 3
-
-
-
-
- Tab 4
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
-
-
-
- Tab 1
-
-
-
-
- Tab 2
-
-
-
-
- Tab 3
-
-
-
-
- Tab 4
-
-
-
-
-
-
- Tab 1
-
-
-
-
- Tab 2
-
-
-
-
- Tab 3
-
-
-
-
- Tab 4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
-
-
-
- Tab 1
-
-
-
-
- Tab 2
-
-
-
-
- Tab 3
-
-
-
-
- Tab 4
-
-
-
-
-
-
- Tab 1
-
-
-
-
- Tab 2
-
-
-
-
- Tab 3
-
-
-
-
- Tab 4
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
-
- Tab 1
-
-
- Tab 2
-
-
- Tab 3
-
-
- Tab 4
-
-
-
-
-
-
- Tab 1
-
-
-
-
- Tab 2
-
-
-
-
- Tab 3
-
-
-
-
- Tab 4
-
-
-
-
-
-
- Tab 1
-
-
-
-
- Tab 2
-
-
-
-
- Tab 3
-
-
-
-
- Tab 4
-
-
-
Closed
-
-
- Open
-
-
-
-
-
-
- - id: tabs-compact-overflow
- name: Compact tabs with overflow
- status: Verified
- markup: |
- Closed
-
-
- Open
-
-
-
-
-
-
- - id: tabs-with-anchors
- name: Tabs with anchors
- status: Verified
- markup: |
-
diff --git a/components/tabs/package.json b/components/tabs/package.json
index f83cb2aa251..8d8dc6bd35f 100644
--- a/components/tabs/package.json
+++ b/components/tabs/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/tabs",
- "version": "5.1.3",
+ "version": "6.0.0-s2-foundations.14",
"description": "The Spectrum CSS tabs component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/tabs/stories/template.js b/components/tabs/stories/template.js
index 985a91d6724..63f44a1c292 100644
--- a/components/tabs/stories/template.js
+++ b/components/tabs/stories/template.js
@@ -10,6 +10,9 @@ import { when } from "lit/directives/when.js";
import { html, literal } from "lit/static-html.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Tabs",
diff --git a/components/tabs/themes/express.css b/components/tabs/themes/express.css
index e958787153b..bd41e5a1b98 100644
--- a/components/tabs/themes/express.css
+++ b/components/tabs/themes/express.css
@@ -11,9 +11,12 @@
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Tabs {
--spectrum-tabs-font-weight: var(--spectrum-bold-font-weight);
}
diff --git a/components/tabs/themes/spectrum-two.css b/components/tabs/themes/spectrum-two.css
new file mode 100644
index 00000000000..a2aef52d72d
--- /dev/null
+++ b/components/tabs/themes/spectrum-two.css
@@ -0,0 +1,112 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Tabs {
+ --spectrum-tabs-font-weight: var(--spectrum-default-font-weight);
+
+ /* Default is Medium sizing */
+ --spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium);
+ --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium);
+ --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium);
+ --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium);
+ --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium);
+ --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium);
+
+ --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-75);
+ --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-100);
+ --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium);
+
+ --spectrum-tabs-color: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down);
+ --spectrum-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+ --spectrum-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+ --spectrum-tabs-color-disabled: var(--spectrum-gray-500);
+
+ --spectrum-tabs-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-tabs-font-style: var(--spectrum-default-font-style);
+ --spectrum-tabs-font-size: var(--spectrum-font-size-100);
+ --spectrum-tabs-line-height: var(--spectrum-line-height-100);
+
+ /* Focus Indicator */
+ --spectrum-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
+ --spectrum-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium);
+ --spectrum-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color);
+ --spectrum-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down);
+
+ --spectrum-tabs-list-background-direction: top;
+ --spectrum-tabs-divider-background-color: var(--spectrum-gray-200);
+ --spectrum-tabs-divider-size: var(--spectrum-border-width-200);
+ --spectrum-tabs-divider-border-radius: 1px;
+
+ --spectrum-tabs-animation-duration: var(--spectrum-animation-duration-100);
+ --spectrum-tabs-animation-ease: var(--spectrum-animation-ease-in-out);
+
+ &.spectrum-Tabs--sizeS {
+ --spectrum-tabs-item-height: var(--spectrum-tab-item-height-small);
+ --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small);
+ --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small);
+ --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-small);
+ --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-small);
+ --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small);
+
+ --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-50);
+ --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-75);
+ --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small);
+
+ --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small);
+ --spectrum-tabs-font-size: var(--spectrum-font-size-75);
+ }
+
+ &.spectrum-Tabs--sizeL {
+ --spectrum-tabs-item-height: var(--spectrum-tab-item-height-large);
+ --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large);
+ --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large);
+ --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-large);
+ --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-large);
+ --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large);
+
+ --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-100);
+ --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-200);
+ --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large);
+
+ --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large);
+ --spectrum-tabs-font-size: var(--spectrum-font-size-200);
+ }
+
+ &.spectrum-Tabs--sizeXL {
+ --spectrum-tabs-item-height: var(--spectrum-tab-item-height-extra-large);
+ --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large);
+ --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large);
+ --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large);
+ --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large);
+ --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large);
+
+ --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-200);
+ --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-300);
+ --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large);
+
+ --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large);
+ --spectrum-tabs-font-size: var(--spectrum-font-size-300);
+ }
+
+ &.spectrum-Tabs--emphasized {
+ --spectrum-tabs-color-selected: var(--spectrum-accent-content-color-default);
+ --spectrum-tabs-color-hover: var(--spectrum-accent-content-color-hover);
+ --spectrum-tabs-color-key-focus: var(--spectrum-accent-content-color-key-focus);
+
+ --spectrum-tabs-selection-indicator-color: var(--spectrum-accent-content-color-default);
+ }
+ }
+}
diff --git a/components/tabs/themes/spectrum.css b/components/tabs/themes/spectrum.css
index 4e49c9ae85d..4caae0c5e2d 100644
--- a/components/tabs/themes/spectrum.css
+++ b/components/tabs/themes/spectrum.css
@@ -11,8 +11,13 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
.spectrum-Tabs {
- --spectrum-tabs-font-weight: var(--spectrum-default-font-weight);
+ --spectrum-tabs-divider-background-color: var(--spectrum-gray-300);
}
}
diff --git a/components/tag/CHANGELOG.md b/components/tag/CHANGELOG.md
index a243b395dd4..20441ff45f9 100644
--- a/components/tag/CHANGELOG.md
+++ b/components/tag/CHANGELOG.md
@@ -1,5 +1,203 @@
# Change Log
+## 10.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.14
+ - @spectrum-css/avatar@8.0.0-s2-foundations.13
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 10.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.12
+ - @spectrum-css/avatar@8.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 10.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.11
+ - @spectrum-css/avatar@8.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 10.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.10
+ - @spectrum-css/avatar@8.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 10.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.9
+ - @spectrum-css/avatar@8.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 10.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.8
+ - @spectrum-css/avatar@8.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 10.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.7
+ - @spectrum-css/avatar@8.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 10.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.6
+ - @spectrum-css/avatar@8.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 10.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.5
+ - @spectrum-css/avatar@8.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 10.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.4
+ - @spectrum-css/avatar@8.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 10.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.3
+ - @spectrum-css/avatar@8.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 10.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.2
+ - @spectrum-css/avatar@8.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 10.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.1
+ - @spectrum-css/avatar@8.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 10.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/clearbutton@7.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/avatar@8.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 9.1.3
### Patch Changes
diff --git a/components/tag/index.css b/components/tag/index.css
index 2c692141007..b78674585ec 100644
--- a/components/tag/index.css
+++ b/components/tag/index.css
@@ -11,175 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-Tag {
- /* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */
- --spectrum-avatar-opacity-disabled: 0.3;
-
- --spectrum-tag-animation-duration: var(--spectrum-animation-duration-100);
- --spectrum-tag-border-width: var(--spectrum-border-width-100);
-
- /* focus ring */
- --spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-tag-focus-ring-color: var(--spectrum-focus-indicator-color);
-
- /* label */
- --spectrum-tag-label-line-height: var(--spectrum-line-height-100);
- --spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight);
-
- /* selected */
- --spectrum-tag-content-color-selected: var(--spectrum-gray-50);
- --spectrum-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
- --spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
- --spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down);
- --spectrum-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
-
- /* invalid variant */
- --spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900);
- --spectrum-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000);
- --spectrum-tag-border-color-invalid-active: var(--spectrum-negative-color-1100);
- --spectrum-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000);
-
- /* invalid variant content */
- --spectrum-tag-content-color-invalid: var(--spectrum-negative-content-color-default);
- --spectrum-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover);
- --spectrum-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down);
- --spectrum-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus);
-
- /* invalid selected variant */
- --spectrum-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default);
- --spectrum-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover);
- --spectrum-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down);
- --spectrum-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus);
- --spectrum-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default);
- --spectrum-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover);
- --spectrum-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down);
- --spectrum-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus);
-
- /* invalid selected variant content */
- --spectrum-tag-content-color-invalid-selected: var(--spectrum-white);
-
- /* emphasized variant */
- --spectrum-tag-border-color-emphasized: var(--spectrum-accent-background-color-default);
- --spectrum-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover);
- --spectrum-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down);
- --spectrum-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus);
- --spectrum-tag-background-color-emphasized: var(--spectrum-accent-background-color-default);
- --spectrum-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover);
- --spectrum-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down);
- --spectrum-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus);
-
- /* emphasized variant content */
- --spectrum-tag-content-color-emphasized: var(--spectrum-white);
-
- /* disabled variant content */
- --spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color);
-
- /* ↧↧↧ Fallback defaults in case of no t-shirt size - set to Medium styles ↧↧↧ */
- /* icon spacing fallback if no t-shirt size */
- --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100);
- --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100);
- --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100);
- --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100);
-
- /* avatar spacing fallback if no t-shirt size */
- --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium);
- --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium);
- --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100);
-
- /* label spacing fallback if no t-shirt size */
- --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100);
-
- /* clear button inline spacing fallback if no t-shirt size */
- --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100);
-
- /* tag defaults if no t-shirt size */
- --spectrum-tag-height: var(--spectrum-component-height-100);
-
- /* text defaults if no t-shirt size */
- --spectrum-tag-font-size: var(--spectrum-font-size-100);
-
- /* clear button spacing if no t-shirt size */
- --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium);
-}
-
-/* t-shirt sizes */
-.spectrum-Tag--sizeS {
- --spectrum-tag-height: var(--spectrum-component-height-75);
- --spectrum-tag-font-size: var(--spectrum-font-size-75);
- --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75);
-
- --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75);
- --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small);
-
- --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);
- --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75);
- --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
-
- --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small);
- --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small);
- --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75);
-
- --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75);
-
- /* tokens based on theme and t-shirt size */
- --spectrum-tag-corner-radius: var(--spectrum-tag-size-small-corner-radius);
- --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-small-spacing-inline-start);
- --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-small-label-spacing-inline-end);
- --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-small-clear-button-spacing-inline-end);
-}
-
-.spectrum-Tag--sizeM {
- --spectrum-tag-height: var(--spectrum-component-height-100);
- --spectrum-tag-font-size: var(--spectrum-font-size-100);
- --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100);
-
- --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100);
- --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium);
-
- --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100);
- --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100);
- --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100);
-
- --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); /* 6px 9px */
- --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium);
- --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100);
-
- --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100);
-
- /* tokens based on theme and t-shirt size */
- --spectrum-tag-corner-radius: var(--spectrum-tag-size-medium-corner-radius);
- --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-medium-spacing-inline-start);
- --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-medium-label-spacing-inline-end);
- --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-medium-clear-button-spacing-inline-end);
-}
-
-.spectrum-Tag--sizeL {
- --spectrum-tag-height: var(--spectrum-component-height-200);
- --spectrum-tag-font-size: var(--spectrum-font-size-200);
- --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-200);
-
- --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200);
- --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large);
-
- --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200);
- --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200);
- --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-200);
-
- --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large);
- --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large);
- --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200);
-
- --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-200);
-
- /* tokens based on theme and t-shirt size */
- --spectrum-tag-corner-radius: var(--spectrum-tag-size-large-corner-radius);
- --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-large-spacing-inline-start);
- --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-large-label-spacing-inline-end);
- --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-large-clear-button-spacing-inline-end);
-}
+@import "./themes/spectrum-two.css";
.spectrum-Tag {
border-color: var(--highcontrast-tag-border-color, var(--mod-tag-border-color, var(--spectrum-tag-border-color)));
@@ -200,6 +32,7 @@
box-sizing: border-box;
vertical-align: bottom;
max-inline-size: 100%;
+
outline: none;
user-select: none;
@@ -226,6 +59,11 @@
/* clear button */
.spectrum-Tag-clearButton {
+ /* width of fill neutralized to ensure correct inline spacing within tag */
+ --mod-clear-button-width: fit-content;
+ --spectrum-clearbutton-fill-size: fit-content;
+ --spectrum-clearbutton-fill-background-color: transparent;
+
box-sizing: border-box;
padding-block-start: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
@@ -240,14 +78,8 @@
/* ensure clear button is correct color */
color: currentColor;
- /* width of fill neutralized to ensure correct inline spacing within tag */
- --mod-clear-button-width: fit-content;
- --spectrum-clearbutton-fill-size: fit-content;
- --spectrum-clearbutton-fill-background-color: transparent;
-
.spectrum-ClearButton-fill {
background-color: var(--mod-clearbutton-fill-background-color, var(--spectrum-clearbutton-fill-background-color));
-
inline-size: var(--mod-clearbutton-fill-size, var(--spectrum-clearbutton-fill-size));
block-size: var(--mod-clearbutton-fill-size, var(--spectrum-clearbutton-fill-size));
}
@@ -415,8 +247,6 @@
/* windows high contrast mode */
@media (forced-colors: active) {
.spectrum-Tag {
- forced-color-adjust: none;
-
--highcontrast-tag-border-color: ButtonText;
--highcontrast-tag-border-color-hover: ButtonText;
--highcontrast-tag-border-color-active: ButtonText;
@@ -433,6 +263,8 @@
--highcontrast-tag-content-color-focus: ButtonText;
--highcontrast-tag-focus-ring-color: Highlight;
+
+ forced-color-adjust: none;
&.is-selected {
--highcontrast-tag-border-color-selected: Highlight;
diff --git a/components/tag/metadata/metadata.json b/components/tag/metadata/metadata.json
index 79e64cf042e..267941b416b 100644
--- a/components/tag/metadata/metadata.json
+++ b/components/tag/metadata/metadata.json
@@ -37,7 +37,8 @@
".spectrum-Tag:active",
".spectrum-Tag:focus-visible",
".spectrum-Tag:focus-visible:after",
- ".spectrum-Tag:hover"
+ ".spectrum-Tag:hover",
+ ":scope"
],
"modifiers": [
"--mod-tag-animation-duration",
@@ -226,12 +227,6 @@
"--spectrum-component-height-100",
"--spectrum-component-height-200",
"--spectrum-component-height-75",
- "--spectrum-component-pill-edge-to-text-100",
- "--spectrum-component-pill-edge-to-text-200",
- "--spectrum-component-pill-edge-to-text-75",
- "--spectrum-component-pill-edge-to-visual-100",
- "--spectrum-component-pill-edge-to-visual-200",
- "--spectrum-component-pill-edge-to-visual-75",
"--spectrum-component-top-to-text-100",
"--spectrum-component-top-to-text-200",
"--spectrum-component-top-to-text-75",
@@ -240,7 +235,6 @@
"--spectrum-component-top-to-workflow-icon-75",
"--spectrum-corner-radius-100",
"--spectrum-disabled-background-color",
- "--spectrum-disabled-border-color",
"--spectrum-disabled-content-color",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
@@ -248,13 +242,10 @@
"--spectrum-font-size-100",
"--spectrum-font-size-200",
"--spectrum-font-size-75",
- "--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
+ "--spectrum-gray-100",
+ "--spectrum-gray-25",
"--spectrum-gray-50",
- "--spectrum-gray-500",
"--spectrum-gray-700",
- "--spectrum-gray-75",
"--spectrum-gray-800",
"--spectrum-gray-900",
"--spectrum-line-height-100",
@@ -269,18 +260,10 @@
"--spectrum-negative-content-color-down",
"--spectrum-negative-content-color-hover",
"--spectrum-negative-content-color-key-focus",
- "--spectrum-neutral-background-color-default",
- "--spectrum-neutral-background-color-down",
- "--spectrum-neutral-background-color-hover",
- "--spectrum-neutral-background-color-key-focus",
"--spectrum-neutral-background-color-selected-default",
"--spectrum-neutral-background-color-selected-down",
"--spectrum-neutral-background-color-selected-hover",
"--spectrum-neutral-background-color-selected-key-focus",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus",
"--spectrum-neutral-subdued-background-color-default",
"--spectrum-neutral-subdued-background-color-down",
"--spectrum-neutral-subdued-background-color-hover",
@@ -298,38 +281,7 @@
"--spectrum-workflow-icon-size-200",
"--spectrum-workflow-icon-size-75"
],
- "system-theme": [
- "--system-spectrum-tag-background-color",
- "--system-spectrum-tag-background-color-active",
- "--system-spectrum-tag-background-color-disabled",
- "--system-spectrum-tag-background-color-focus",
- "--system-spectrum-tag-background-color-hover",
- "--system-spectrum-tag-border-color",
- "--system-spectrum-tag-border-color-active",
- "--system-spectrum-tag-border-color-disabled",
- "--system-spectrum-tag-border-color-focus",
- "--system-spectrum-tag-border-color-hover",
- "--system-spectrum-tag-border-color-selected",
- "--system-spectrum-tag-border-color-selected-active",
- "--system-spectrum-tag-border-color-selected-focus",
- "--system-spectrum-tag-border-color-selected-hover",
- "--system-spectrum-tag-content-color",
- "--system-spectrum-tag-content-color-active",
- "--system-spectrum-tag-content-color-focus",
- "--system-spectrum-tag-content-color-hover",
- "--system-spectrum-tag-size-large-clear-button-spacing-inline-end",
- "--system-spectrum-tag-size-large-corner-radius",
- "--system-spectrum-tag-size-large-label-spacing-inline-end",
- "--system-spectrum-tag-size-large-spacing-inline-start",
- "--system-spectrum-tag-size-medium-clear-button-spacing-inline-end",
- "--system-spectrum-tag-size-medium-corner-radius",
- "--system-spectrum-tag-size-medium-label-spacing-inline-end",
- "--system-spectrum-tag-size-medium-spacing-inline-start",
- "--system-spectrum-tag-size-small-clear-button-spacing-inline-end",
- "--system-spectrum-tag-size-small-corner-radius",
- "--system-spectrum-tag-size-small-label-spacing-inline-end",
- "--system-spectrum-tag-size-small-spacing-inline-start"
- ],
+ "system-theme": [],
"passthroughs": [
"--mod-avatar-opacity-disabled",
"--mod-clear-button-width",
diff --git a/components/tag/metadata/tag.yml b/components/tag/metadata/tag.yml
deleted file mode 100644
index 36becfb308a..00000000000
--- a/components/tag/metadata/tag.yml
+++ /dev/null
@@ -1,449 +0,0 @@
-name: Tag
-status: Verified
-description: Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/tag/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Pluralized classes changed to singular
- - `spectrum-Tags-itemLabel` is now `spectrum-Tag-itemLabel`
- - `spectrum-Tags-itemIcon` is now `spectrum-Tag-itemIcon`
-
- ### New emphasized variant has been added
- ### A div wrapper is required for avatar
- ```
-
-
-
-
-
Default
-
-
- Tag label
-
-
-
-
-
- Tag label
-
-
-
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
Selected
-
-
- Tag label
-
-
-
-
-
- Tag label
-
-
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
Invalid
-
-
-
-
- Tag label
-
-
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
Disabled
-
-
- Tag label
-
-
-
-
-
- Tag label
-
-
-
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
Selected + Invalid
-
-
-
- Tag label
-
-
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
Emphasized
-
-
- Tag label
-
-
-
-
-
- Tag label
-
-
-
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
-
S (default)
-
-
- Tag label
-
-
-
-
-
- Tag label
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
M
-
-
- Tag label
-
-
-
-
-
- Tag label
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
L
-
-
- Tag label
-
-
-
-
-
- Tag label
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
-
Default
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
Selected
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
Invalid
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
Disabled
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
Selected + Invalid
-
-
-
-
-
Tag label
-
-
-
-
-
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Tag {
+ /* border */
+ --spectrum-tag-border-color: var(--spectrum-gray-700);
+ --spectrum-tag-border-color-hover: var(--spectrum-gray-800);
+ --spectrum-tag-border-color-active: var(--spectrum-gray-900);
+ --spectrum-tag-border-color-focus: var(--spectrum-gray-800);
+
+ /* corner border radius */
+ --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100);
+ --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100);
+ --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100);
+
+ /* background */
+ --spectrum-tag-background-color: var(--spectrum-gray-50);
+ --spectrum-tag-background-color-hover: var(--spectrum-gray-50);
+ --spectrum-tag-background-color-active: var(--spectrum-gray-100);
+ --spectrum-tag-background-color-focus: var(--spectrum-gray-50);
+
+ /* content color */
+ --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+ --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down);
+ --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+
+ /* selected variant */
+ --spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default);
+ --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover);
+ --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down);
+ --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
+
+ /* disabled variant */
+ --spectrum-tag-border-color-disabled: transparent;
+ --spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color);
+
+ /* tokens based on theme and t-shirt size */
+ --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
+ --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75);
+ --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75);
+ --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
+ --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100);
+ --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100);
+ --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
+ --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200);
+ --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200);
+
+ /* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */
+ --spectrum-avatar-opacity-disabled: 0.3;
+
+ --spectrum-tag-animation-duration: var(--spectrum-animation-duration-100);
+ --spectrum-tag-border-width: var(--spectrum-border-width-100);
+
+ /* focus ring */
+ --spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-tag-focus-ring-color: var(--spectrum-focus-indicator-color);
+
+ /* label */
+ --spectrum-tag-label-line-height: var(--spectrum-line-height-100);
+ --spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight);
+
+ /* selected */
+ --spectrum-tag-content-color-selected: var(--spectrum-gray-25);
+ --spectrum-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
+ --spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
+ --spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down);
+ --spectrum-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
+
+ /* invalid variant */
+ --spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900);
+ --spectrum-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000);
+ --spectrum-tag-border-color-invalid-active: var(--spectrum-negative-color-1100);
+ --spectrum-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000);
+
+ /* invalid variant content */
+ --spectrum-tag-content-color-invalid: var(--spectrum-negative-content-color-default);
+ --spectrum-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover);
+ --spectrum-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down);
+ --spectrum-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus);
+
+ /* invalid selected variant */
+ --spectrum-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default);
+ --spectrum-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover);
+ --spectrum-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down);
+ --spectrum-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus);
+ --spectrum-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default);
+ --spectrum-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover);
+ --spectrum-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down);
+ --spectrum-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus);
+
+ /* invalid selected variant content */
+ --spectrum-tag-content-color-invalid-selected: var(--spectrum-white);
+
+ /* emphasized variant */
+ --spectrum-tag-border-color-emphasized: var(--spectrum-accent-background-color-default);
+ --spectrum-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover);
+ --spectrum-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down);
+ --spectrum-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus);
+ --spectrum-tag-background-color-emphasized: var(--spectrum-accent-background-color-default);
+ --spectrum-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover);
+ --spectrum-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down);
+ --spectrum-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus);
+
+ /* emphasized variant content */
+ --spectrum-tag-content-color-emphasized: var(--spectrum-white);
+
+ /* disabled variant content */
+ --spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color);
+
+ /* ↧↧↧ Fallback defaults in case of no t-shirt size - set to Medium styles ↧↧↧ */
+ /* icon spacing fallback if no t-shirt size */
+ --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100);
+ --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100);
+ --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100);
+ --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100);
+
+ /* avatar spacing fallback if no t-shirt size */
+ --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium);
+ --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium);
+ --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100);
+
+ /* label spacing fallback if no t-shirt size */
+ --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100);
+
+ /* clear button inline spacing fallback if no t-shirt size */
+ --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100);
+
+ /* tag defaults if no t-shirt size */
+ --spectrum-tag-height: var(--spectrum-component-height-100);
+
+ /* text defaults if no t-shirt size */
+ --spectrum-tag-font-size: var(--spectrum-font-size-100);
+
+ /* clear button spacing if no t-shirt size */
+ --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium);
+ }
+
+ /* t-shirt sizes */
+ .spectrum-Tag--sizeS {
+ --spectrum-tag-height: var(--spectrum-component-height-75);
+ --spectrum-tag-font-size: var(--spectrum-font-size-75);
+ --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75);
+
+ --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75);
+ --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small);
+
+ --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);
+ --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75);
+ --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
+
+ --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small);
+ --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small);
+ --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75);
+
+ --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75);
+
+ /* tokens based on theme and t-shirt size */
+ --spectrum-tag-corner-radius: var(--spectrum-tag-size-small-corner-radius);
+ --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-small-spacing-inline-start);
+ --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-small-label-spacing-inline-end);
+ --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-small-clear-button-spacing-inline-end);
+ }
+
+ &,
+ .spectrum-Tag--sizeM {
+ --spectrum-tag-height: var(--spectrum-component-height-100);
+ --spectrum-tag-font-size: var(--spectrum-font-size-100);
+ --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100);
+
+ --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100);
+ --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium);
+
+ --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100);
+ --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100);
+ --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100);
+
+ --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); /* 6px 9px */
+ --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium);
+ --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100);
+
+ --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100);
+
+ /* tokens based on theme and t-shirt size */
+ --spectrum-tag-corner-radius: var(--spectrum-tag-size-medium-corner-radius);
+ --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-medium-spacing-inline-start);
+ --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-medium-label-spacing-inline-end);
+ --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-medium-clear-button-spacing-inline-end);
+ }
+
+ .spectrum-Tag--sizeL {
+ --spectrum-tag-height: var(--spectrum-component-height-200);
+ --spectrum-tag-font-size: var(--spectrum-font-size-200);
+ --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-200);
+
+ --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200);
+ --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large);
+
+ --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200);
+ --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200);
+ --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-200);
+
+ --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large);
+ --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large);
+ --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200);
+
+ --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-200);
+
+ /* tokens based on theme and t-shirt size */
+ --spectrum-tag-corner-radius: var(--spectrum-tag-size-large-corner-radius);
+ --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-large-spacing-inline-start);
+ --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-large-label-spacing-inline-end);
+ --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-large-clear-button-spacing-inline-end);
+ }
+}
diff --git a/components/tag/themes/spectrum.css b/components/tag/themes/spectrum.css
index 27c05be7bdd..8d2d11b2bc0 100644
--- a/components/tag/themes/spectrum.css
+++ b/components/tag/themes/spectrum.css
@@ -11,50 +11,18 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Tag {
- /* border */
- --spectrum-tag-border-color: var(--spectrum-gray-700);
- --spectrum-tag-border-color-hover: var(--spectrum-gray-800);
- --spectrum-tag-border-color-active: var(--spectrum-gray-900);
- --spectrum-tag-border-color-focus: var(--spectrum-gray-800);
- /* corner border radius */
- --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100);
- --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100);
- --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100);
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
- /* background */
+@container style(--system: legacy) {
+ .spectrum-Tag {
--spectrum-tag-background-color: var(--spectrum-gray-75);
--spectrum-tag-background-color-hover: var(--spectrum-gray-75);
--spectrum-tag-background-color-active: var(--spectrum-gray-200);
--spectrum-tag-background-color-focus: var(--spectrum-gray-75);
- /* content color */
- --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
- --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down);
- --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
-
- /* selected variant */
- --spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default);
- --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover);
- --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down);
- --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
-
- /* disabled variant */
- --spectrum-tag-border-color-disabled: transparent;
- --spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color);
-
- /* tokens based on theme and t-shirt size */
- --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
- --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75);
- --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75);
- --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
- --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100);
- --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100);
- --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
- --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200);
- --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200);
+ --spectrum-tag-content-color-selected: var(--spectrum-gray-50);
}
}
diff --git a/components/taggroup/CHANGELOG.md b/components/taggroup/CHANGELOG.md
index 31a37ff120a..a4a1fcc7215 100644
--- a/components/taggroup/CHANGELOG.md
+++ b/components/taggroup/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 6.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 6.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 6.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 6.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 6.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 6.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 6.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 6.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/tag@10.0.0-s2-foundations.6
+
+## 6.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 6.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 6.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 6.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 6.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 6.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tag@10.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+
## 5.1.3
### Patch Changes
diff --git a/components/taggroup/index.css b/components/taggroup/index.css
index 4b022b0e1c0..6a59b342434 100644
--- a/components/taggroup/index.css
+++ b/components/taggroup/index.css
@@ -11,10 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-TagGroup {
- --spectrum-tag-group-item-margin-block: var(--spectrum-spacing-75);
- --spectrum-tag-group-item-margin-inline: var(--spectrum-spacing-75);
-}
+@import "./themes/spectrum-two.css";
.spectrum-TagGroup {
display: inline-flex;
diff --git a/components/taggroup/metadata/taggroup.yml b/components/taggroup/metadata/taggroup.yml
deleted file mode 100644
index 8f8786951b7..00000000000
--- a/components/taggroup/metadata/taggroup.yml
+++ /dev/null
@@ -1,177 +0,0 @@
-name: Tag group
-status: Verified
-description: A group of tags . Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. When horizontal space is limited in a tag group, the individual tags wrap to form another line.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/tag/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Updated tag classes
- The examples now use the latest markup from the tag component. This includes additional classes:
- - `spectrum-Tag-itemLabel`
- - `spectrum-Tag-itemIcon`
- - `spectrum-Tag-clearButton`
-
- ### A div wrapper is required for avatar
- ```
-
-
-
-
- Tag 1
-
-
- Tag 2
-
-
-
-
-
-
-
Shantanu
-
-
-
-
-
-
Shantanu
-
-
-
-
-
- Shantanu
-
-
-
-
- Shantanu
-
-
-
-
- Shantanu
-
-
-
-
-
-
-
Shantanu
-
-
-
-
-
-
-
-
-
-
-
-
Shantanu
-
-
-
-
-
-
-
-
-
-
-
-
Shantanu
-
-
-
-
-
-
-
-
-
-
-
Shantanu
-
-
-
-
-
-
-
-
-
-
-
Shantanu
-
-
-
-
-
-
-
-
({ ...a, [c]: true }), {}),
- })}
- style=${styleMap(customStyles)}
- role="list"
- aria-label=${ifDefined(ariaLabel)}
- >
- ${items.map((i) => Tag({
- ...i,
- ...args,
- size,
- hasClearButton: isRemovable,
- customClasses: [`${rootClass}-item`],
- }, context))}
-
-`;
+} = {}, context = {}) => {
+ return html`
+ ({ ...a, [c]: true }), {}),
+ })}
+ style=${styleMap(customStyles)}
+ role="list"
+ aria-label=${ifDefined(ariaLabel)}
+ >
+ ${items.map((i) => Tag({
+ ...i,
+ ...args,
+ size,
+ hasClearButton: isRemovable,
+ customClasses: [`${rootClass}-item`],
+ }, context))}
+
+ `;
+};
diff --git a/components/taggroup/themes/express.css b/components/taggroup/themes/express.css
new file mode 100644
index 00000000000..b1f3d9e5ad7
--- /dev/null
+++ b/components/taggroup/themes/express.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/taggroup/themes/spectrum-two.css b/components/taggroup/themes/spectrum-two.css
new file mode 100644
index 00000000000..f843bd94864
--- /dev/null
+++ b/components/taggroup/themes/spectrum-two.css
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-TagGroup {
+ --spectrum-tag-group-item-margin-block: var(--spectrum-spacing-75);
+ --spectrum-tag-group-item-margin-inline: var(--spectrum-spacing-75);
+ }
+}
diff --git a/components/taggroup/themes/spectrum.css b/components/taggroup/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/taggroup/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/textfield/CHANGELOG.md b/components/textfield/CHANGELOG.md
index 8cab0175717..b8500f0b8a9 100644
--- a/components/textfield/CHANGELOG.md
+++ b/components/textfield/CHANGELOG.md
@@ -1,5 +1,183 @@
# Change Log
+## 8.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 8.0.0-s2-foundations.13
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`9294678`](https://github.com/adobe/spectrum-css/commit/929467879ebedb5601f54509d95f3dcd97681607) Thanks [@pfulton](https://github.com/pfulton)! - [SWC-306]: Reintroduces previous changes in textfield that had been reverted, including adjusted line height, cleanup of legacy vendor prefixes and normalization (#2771), a fix for focus pseudo pointer events (#2761)
+
+## 8.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 8.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 8.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 8.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`da47fa2`](https://github.com/adobe/spectrum-css/commit/da47fa2cb18373e74a6718775f2db90bb25868d4) Thanks [@pfulton](https://github.com/pfulton)! - Fix line-height discrepency
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 8.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 8.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 8.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/helptext@6.0.0-s2-foundations.6
+
+## 8.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 8.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 8.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 8.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 8.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/helptext@6.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 8.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/helptext@6.0.0-s2-foundations.0
+
## 7.2.3
### Patch Changes
diff --git a/components/textfield/index.css b/components/textfield/index.css
index e3bb87dded1..0b9119c7723 100644
--- a/components/textfield/index.css
+++ b/components/textfield/index.css
@@ -11,206 +11,13 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
+@import "./themes/spectrum-two.css";
+/********* TEXT FIELD and TEXT AREA Outer Wrapper *********/
.spectrum-Textfield {
- /* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */
- /* disallow mod for max compatibility */
+ /* line height */
--spectrum-textfield-input-line-height: var(--spectrum-textfield-height);
- --spectrum-texfield-animation-duration: var(--spectrum-animation-duration-100);
-
- --spectrum-textfield-width: 240px; /* override per api */
- --spectrum-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier);
- --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100);
-
- /* default height */
- --spectrum-textfield-height: var(--spectrum-component-height-100);
-
- /* default spacing */
- --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100);
- --spectrum-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet);
- --spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100);
- --spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100);
- --spectrum-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet);
-
- /* default label spacing */
- --spectrum-textfield-label-spacing-block: var(--spectrum-field-label-to-component);
- --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium);
- --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100);
-
- /* default help text spacing */
- --spectrum-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component);
-
- /* default icon size */
- --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100);
- --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100);
-
- /* default icon spacing - invalid */
- --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium);
- --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium);
- --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet);
- --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium);
-
- /* default icon spacing - valid */
- --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium);
- --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium);
- --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet);
- --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium);
-
- /* font styles */
- --spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-textfield-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100);
-
- /* character count */
- --spectrum-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-textfield-character-count-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75);
- --spectrum-textfield-character-count-spacing-inline: var(--spectrum-spacing-200);
- --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75);
- --spectrum-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field);
- --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium);
-
- /* focus indicator */
- --spectrum-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
- --spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-
- /*** Colors ***/
- --spectrum-textfield-background-color: var(--spectrum-gray-50);
-
- /* Text Colors */
- --spectrum-textfield-text-color-default: var(--spectrum-neutral-content-color-default);
- --spectrum-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus);
- --spectrum-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover);
- --spectrum-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus);
-
- /* Read Only Text Color */
- --spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default);
-
- /* Disabled Colors */
- --spectrum-textfield-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-textfield-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color);
-
- /* Invalid Colors */
- --spectrum-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default);
- --spectrum-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover);
- --spectrum-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus);
- --spectrum-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover);
- --spectrum-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus);
- --spectrum-textfield-icon-color-invalid: var(--spectrum-negative-visual-color);
-
- --spectrum-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default);
-
- /* Valid Colors */
- --spectrum-textfield-text-color-valid: var(--spectrum-neutral-content-color-default);
- --spectrum-textfield-icon-color-valid: var(--spectrum-positive-visual-color);
-
- /* Focus Indicator Color */
- --spectrum-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- /* Text Area / Multiline */
- --spectrum-text-area-min-inline-size: var(--spectrum-text-area-minimum-width);
- --spectrum-text-area-min-block-size: var(--spectrum-text-area-minimum-height);
- --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100);
-}
-
-/********* Text field t-shirt sizes *********/
-.spectrum-Textfield--sizeS {
- --spectrum-textfield-height: var(--spectrum-component-height-75);
- --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small);
- --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100);
- --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75);
- --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-75);
- --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-75);
- --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-75);
- --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small);
- --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small);
- --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small);
- --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small);
- --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small);
- --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small);
- --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75);
- --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75);
- --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small);
- --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small);
-
- /* Text Area / Multiline size small */
- --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-75);
-}
-.spectrum-Textfield--sizeM {
- --spectrum-textfield-height: var(--spectrum-component-height-100);
- --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium);
- --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
- --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100);
- --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100);
- --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100);
- --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100);
- --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium);
- --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium);
- --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium);
- --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium);
- --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium);
- --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium);
- --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75);
- --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75);
- --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium);
- --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium);
-
- /* Text Area / Multiline size medium */
- --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100);
-}
-
-.spectrum-Textfield--sizeL {
- --spectrum-textfield-height: var(--spectrum-component-height-200);
- --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large);
- --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
- --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200);
- --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200);
- --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-200);
- --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-200);
- --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large);
- --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large);
- --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large);
- --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large);
- --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large);
- --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large);
- --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-100);
- --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100);
- --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large);
- --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large);
-
- /* Text Area / Multiline size large */
- --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-200);
-}
-
-.spectrum-Textfield--sizeXL {
- --spectrum-textfield-height: var(--spectrum-component-height-300);
- --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large);
- --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
- --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300);
- --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200);
- --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-300);
- --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-300);
- --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large);
- --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large);
- --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large);
- --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large);
- --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large);
- --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large);
- --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-200);
- --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200);
- --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large);
- --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large);
-
- /* Text Area / Multiline size extra large */
- --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-300);
-}
-
-/********* TEXT FIELD and TEXT AREA Outer Wrapper *********/
-.spectrum-Textfield {
position: relative;
text-overflow: ellipsis;
@@ -355,8 +162,8 @@
font-size: var(--mod-textfield-character-count-font-size, var(--spectrum-textfield-character-count-font-size));
font-family: var(--mod-textfield-character-count-font-family, var(--spectrum-textfield-character-count-font-family));
font-weight: var(--mod-textfield-character-count-font-weight, var(--spectrum-textfield-character-count-font-weight));
- grid-row: 1;
grid-column: 2 / span 1;
+ grid-row: 1;
padding-inline-end: calc(var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)) / 2);
.spectrum-Textfield--quiet & {
@@ -368,10 +175,12 @@
.spectrum-Textfield-input {
/* no mod defined to allow for maximum compatibility */
line-height: var(--spectrum-textfield-input-line-height);
+
box-sizing: border-box;
inline-size: 100%;
min-inline-size: var(--mod-textfield-min-width, var(--spectrum-textfield-min-width));
block-size: var(--mod-textfield-height, var(--spectrum-textfield-height));
+
padding-block-start: calc(var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
padding-block-end: calc(var(--mod-textfield-spacing-block-end, var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)));
@@ -380,7 +189,9 @@
vertical-align: top; /* used to align them correctly in forms. */
outline: none;
background-color: var(--mod-textfield-background-color, var(--spectrum-textfield-background-color));
- border: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) solid var(--highcontrast-textfield-border-color, var(--mod-textfield-border-color, var(--spectrum-textfield-border-color)));
+ border-color: var(--highcontrast-textfield-border-color, var(--mod-textfield-border-color, var(--spectrum-textfield-border-color)));
+ border-style: solid;
+ border-width: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width));
border-radius: var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius));
transition: border-color var(--mod-texfield-animation-duration, var(--spectrum-texfield-animation-duration)) ease-in-out;
@@ -397,8 +208,11 @@
/*** ↓ Browser Mitigations for Input ↓ ***/
/* Firefox and Safari - Remove the margin for input. */
margin: 0;
+
+ /* stylelint-disable-next-line order/properties-order -- keep this in position to prevent issues with custom -moz- prefix */
appearance: none;
+
&[type="number"] {
/* stylelint-disable-next-line property-no-vendor-prefix -- Removes the native spin buttons in Firefox. */
-moz-appearance: textfield;
@@ -473,14 +287,14 @@
border-color: var(--highcontrast-textfield-border-color-keyboard-focus, var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus)));
color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)));
- &::placeholder {
- color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)));
- }
-
/* focus indicator is focused state */
outline: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)) solid;
outline-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color)));
outline-offset: var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap));
+
+ &::placeholder {
+ color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)));
+ }
}
/*** Input Valid ✅ ***/
diff --git a/components/textfield/metadata/metadata.json b/components/textfield/metadata/metadata.json
index 375c277382e..e81784244d8 100644
--- a/components/textfield/metadata/metadata.json
+++ b/components/textfield/metadata/metadata.json
@@ -47,10 +47,6 @@
".spectrum-Textfield--sideLabel .spectrum-Textfield-input",
".spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon",
".spectrum-Textfield--sideLabel:after",
- ".spectrum-Textfield--sizeL",
- ".spectrum-Textfield--sizeM",
- ".spectrum-Textfield--sizeS",
- ".spectrum-Textfield--sizeXL",
".spectrum-Textfield-characterCount",
".spectrum-Textfield-input",
".spectrum-Textfield-input:-moz-ui-invalid",
@@ -88,6 +84,10 @@
".spectrum-Textfield.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input",
".spectrum-Textfield.spectrum-Textfield--quiet:after",
".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon",
+ ".spectrum-Textfield.spectrum-Textfield--sizeL",
+ ".spectrum-Textfield.spectrum-Textfield--sizeM",
+ ".spectrum-Textfield.spectrum-Textfield--sizeS",
+ ".spectrum-Textfield.spectrum-Textfield--sizeXL",
".spectrum-Textfield:hover .spectrum-Textfield-input",
".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder"
],
@@ -228,7 +228,6 @@
"global": [
"--spectrum-animation-duration-100",
"--spectrum-border-width-100",
- "--spectrum-border-width-200",
"--spectrum-character-count-to-field-quiet-extra-large",
"--spectrum-character-count-to-field-quiet-large",
"--spectrum-character-count-to-field-quiet-medium",
@@ -292,8 +291,7 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
- "--spectrum-gray-400",
- "--spectrum-gray-50",
+ "--spectrum-gray-25",
"--spectrum-gray-500",
"--spectrum-gray-600",
"--spectrum-gray-800",
@@ -331,14 +329,7 @@
"--spectrum-workflow-icon-size-300",
"--spectrum-workflow-icon-size-75"
],
- "system-theme": [
- "--system-spectrum-textfield-border-color",
- "--system-spectrum-textfield-border-color-focus",
- "--system-spectrum-textfield-border-color-focus-hover",
- "--system-spectrum-textfield-border-color-hover",
- "--system-spectrum-textfield-border-color-keyboard-focus",
- "--system-spectrum-textfield-border-width"
- ],
+ "system-theme": [],
"passthroughs": [],
"high-contrast": [
"--highcontrast-textfield-border-color",
diff --git a/components/textfield/metadata/textarea.yml b/components/textfield/metadata/textarea.yml
deleted file mode 100644
index 76a927e543e..00000000000
--- a/components/textfield/metadata/textarea.yml
+++ /dev/null
@@ -1,281 +0,0 @@
-name: Text area
-status: Verified
-description: A multi-line text field using the `
-
-
50/50 characters remaining
-
-
Tell us your story
-
50
-
-
-
50/50 characters remaining
-
-
-
Tell us your story
-
50
-
-
-
50/50 characters remaining
-
-
-
Tell us your story
-
50
-
-
-
50/50 characters remaining
-
-
-
Tags
-
-
-
Tags must be comma separated.
-
-
- Comments
- 50
-
-
-
- - id: textfield-sidelabel
- name: Textfield with Side Label
- markup: |
-
-
Comments
-
50
-
-
-
50/50 characters remaining
-
-
- Comments
-
-
-
- - id: textfield
- name: Valid
- markup: |
-
- Comments
-
-
-
-
-
- - id: textfield
- name: Valid (disabled)
- markup: |
-
- Comments
-
-
-
-
-
- - id: textfield
- name: Invalid
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
- Comments
-
-
-
-
-
- - id: textfield
- name: Invalid (disabled)
- markup: |
-
- Comments
-
-
-
-
-
- - id: textfield
- name: Focused
- markup: |
-
- Comments
-
-
-
- - id: textfield
- name: Keyboard Focused
- markup: |
-
- Comments
-
-
-
- - id: textfield
- name: Focused (invalid)
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
- Comments
-
-
-
-
-
- - id: textfield
- name: Keyboard Focused (invalid)
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
- Comments
-
-
-
-
-
- - id: textfield-quiet
- name: Quiet
- markup: |
-
- Comments
-
-
-
- - id: textfield-quiet
- name: Quiet Disabled
- markup: |
-
- Comments
-
-
-
- - id: textfield-quiet
- name: Quiet Valid
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
- Comments
-
-
-
-
-
- - id: textfield-quiet
- name: Quiet Valid (disabled)
- markup: |
-
- Comments
-
-
-
-
-
- - id: textfield-quiet
- name: Quiet Invalid
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
- Comments
-
-
-
-
-
- - id: textfield-quiet
- name: Quiet Invalid (disabled)
- markup: |
-
- Comments
-
-
-
-
-
- - id: textfield-quiet
- name: Quiet Focused
- markup: |
-
- Comments
-
-
-
- - id: textfield-quiet
- name: Quiet Keyboard Focused
- markup: |
-
- Comments
-
-
-
- - id: textfield-quiet
- name: Quiet Focused (invalid)
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
- Comments
-
-
-
-
-
- - id: textfield-quiet
- name: Quiet Keyboard Focused (invalid)
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
- Comments
-
-
-
-
diff --git a/components/textfield/metadata/textfield.yml b/components/textfield/metadata/textfield.yml
deleted file mode 100644
index 74c4fe721f2..00000000000
--- a/components/textfield/metadata/textfield.yml
+++ /dev/null
@@ -1,425 +0,0 @@
-name: Text field
-status: Verified
-description: A single-line text field using the `` element should appear before the `
-
Password
-
50
-
-
-
Create a password with at least 8 characters.
-
-
-
Password
-
50
-
-
-
Create a password with at least 8 characters.
-
-
-
Password
-
50
-
-
-
Create a password with at least 8 characters.
-
-
-
Password
-
50
-
-
-
Create a password with at least 8 characters.
-
-
-
Password
-
-
-
Create a password with at least 8 characters.
-
-
- Enter your name
- 50
-
-
- - id: textfield-sidelabel
- name: Textfield with Side Label
- markup: |
-
-
Password
-
50
-
-
-
Create a password with at least 8 characters.
-
-
- Enter your name
-
-
- - id: textfield-keyboard-focused
- name: Keyboard Focused
- markup: |
-
- Enter your name
-
-
- - id: textfield-disabled
- name: Disabled
- markup: |
-
- Enter your name
-
-
- - id: textfield-readonly
- name: Read-only
- markup: |
-
- Enter your name
-
-
- - id: textfield-valid
- name: Valid
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
- Enter your name
-
-
-
-
-
- Enter your name
-
-
-
-
-
- Enter your name
-
-
-
-
-
- Enter your name
-
-
-
-
- - id: textfield-valid-disabled
- name: Valid (disabled)
- markup: |
-
- Enter your name
-
-
-
-
- - id: textfield-invalid
- name: Invalid
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
-
Password
-
-
-
-
-
Create a password with at least 8 characters.
-
-
-
Password
-
-
-
-
-
Create a password with at least 8 characters.
-
-
-
Password
-
-
-
-
-
Create a password with at least 8 characters.
-
-
-
Password
-
-
-
-
-
Create a password with at least 8 characters.
-
-
- Enter your name
-
-
-
-
- - id: textfield-focused-invalid
- name: Focused (invalid)
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
- Enter your name
-
-
-
-
- - id: textfield-keyboard-focused-invalid
- name: Keyboard Focused (invalid)
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
- Enter your name
-
-
-
-
- - id: textfield-quiet
- name: Quiet
- markup: |
-
- Enter your name
-
-
- - id: textfield-quiet-disabled
- name: Quiet Disabled
- markup: |
-
- Enter your name
-
-
- - id: textfield-quiet-valid
- name: Quiet Valid
- markup: |
-
- Enter your name
-
-
-
-
- - id: textfield-quiet-valid-disabled
- name: Quiet Valid (disabled)
- markup: |
-
- Enter your name
-
-
-
-
- - id: textfield-quiet-invalid
- name: Quiet Invalid
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
- Enter your name
-
-
-
-
- - id: textfield-quiet-invalid-disabled
- name: Quiet Invalid (disabled)
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
- Enter your name
-
-
-
-
- - id: textfield-quiet-focused
- name: Quiet Focused
- markup: |
-
- Enter your name
-
-
- - id: textfield-quiet-keyboard-focused
- name: Quiet Keyboard Focused
- markup: |
-
- Enter your name
-
-
- - id: textfield-quiet-focused-invalid
- name: Quiet Focused (invalid)
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
- Enter your name
-
-
-
-
- - id: textfield-quiet-keyboard-focused-invalid
- name: Quiet Keyboard Focused (invalid)
- description: |
- *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.*
- markup: |
-
- Enter your name
-
-
-
diff --git a/components/textfield/package.json b/components/textfield/package.json
index 10f37f9ad0e..4a1c014de33 100644
--- a/components/textfield/package.json
+++ b/components/textfield/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/textfield",
- "version": "7.2.3",
+ "version": "8.0.0-s2-foundations.14",
"description": "The Spectrum CSS textfield component",
"license": "Apache-2.0",
"author": "Adobe",
diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js
index 8d34b6ffc8f..868619a84fc 100644
--- a/components/textfield/stories/template.js
+++ b/components/textfield/stories/template.js
@@ -9,6 +9,9 @@ import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
+import "../themes/express.css";
/**
* @typedef API
diff --git a/components/textfield/themes/express.css b/components/textfield/themes/express.css
index 5bb5ddc44da..554fa195494 100644
--- a/components/textfield/themes/express.css
+++ b/components/textfield/themes/express.css
@@ -11,9 +11,12 @@
* governing permissions and limitations under the License.
*/
+
+/* @combine .spectrum.spectrum--express */
+
@import "./spectrum.css";
-@container (--system: express) {
+@container style(--system: express) {
.spectrum-Textfield {
--spectrum-textfield-border-color: var(--spectrum-gray-400);
--spectrum-textfield-border-color-hover: var(--spectrum-gray-500);
diff --git a/components/textfield/themes/spectrum-two.css b/components/textfield/themes/spectrum-two.css
new file mode 100644
index 00000000000..47b67ed990b
--- /dev/null
+++ b/components/textfield/themes/spectrum-two.css
@@ -0,0 +1,193 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Textfield {
+ --spectrum-textfield-border-color: var(--spectrum-gray-500);
+ --spectrum-textfield-border-color-hover: var(--spectrum-gray-600);
+ --spectrum-textfield-border-color-focus: var(--spectrum-gray-800);
+ --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900);
+ --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
+
+ --spectrum-textfield-border-width: var(--spectrum-border-width-100);
+
+ --spectrum-texfield-animation-duration: var(--spectrum-animation-duration-100);
+
+ --spectrum-textfield-width: 240px; /* override per api */
+ --spectrum-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier);
+ --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100);
+
+ /* default spacing */
+ --spectrum-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet);
+ --spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100);
+ --spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100);
+ --spectrum-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet);
+
+ /* default label spacing */
+ --spectrum-textfield-label-spacing-block: var(--spectrum-field-label-to-component);
+
+ /* default help text spacing */
+ --spectrum-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component);
+
+ /* quiet spacing */
+ --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet);
+ --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet);
+
+ /* font styles */
+ --spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-textfield-font-weight: var(--spectrum-regular-font-weight);
+
+ /* character count */
+ --spectrum-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack);
+ --spectrum-textfield-character-count-font-weight: var(--spectrum-regular-font-weight);
+ --spectrum-textfield-character-count-spacing-inline: var(--spectrum-spacing-200);
+ --spectrum-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field);
+
+ /* focus indicator */
+ --spectrum-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
+ --spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+
+ /*** Colors ***/
+ --spectrum-textfield-background-color: var(--spectrum-gray-25);
+
+ /* Text Colors */
+ --spectrum-textfield-text-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus);
+ --spectrum-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover);
+ --spectrum-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ /* Read Only Text Color */
+ --spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default);
+
+ /* Disabled Colors */
+ --spectrum-textfield-background-color-disabled: var(--spectrum-disabled-background-color);
+ --spectrum-textfield-border-color-disabled: var(--spectrum-disabled-border-color);
+ --spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color);
+
+ /* Invalid Colors */
+ --spectrum-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default);
+ --spectrum-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover);
+ --spectrum-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus);
+ --spectrum-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover);
+ --spectrum-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus);
+ --spectrum-textfield-icon-color-invalid: var(--spectrum-negative-visual-color);
+
+ --spectrum-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default);
+
+ /* Valid Colors */
+ --spectrum-textfield-text-color-valid: var(--spectrum-neutral-content-color-default);
+ --spectrum-textfield-icon-color-valid: var(--spectrum-positive-visual-color);
+
+ /* Focus Indicator Color */
+ --spectrum-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ /* Text Area / Multiline */
+ --spectrum-text-area-min-inline-size: var(--spectrum-text-area-minimum-width);
+ --spectrum-text-area-min-block-size: var(--spectrum-text-area-minimum-height);
+
+ /********* Text field t-shirt sizes *********/
+ &.spectrum-Textfield--sizeS {
+ --spectrum-textfield-height: var(--spectrum-component-height-75);
+ --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small);
+ --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100);
+ --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75);
+ --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-75);
+ --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-75);
+ --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-75);
+ --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small);
+ --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small);
+ --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small);
+ --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small);
+ --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small);
+ --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small);
+ --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75);
+ --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75);
+ --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small);
+ --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small);
+
+ /* Text Area / Multiline size small */
+ --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-75);
+ }
+
+ &,
+ &.spectrum-Textfield--sizeM {
+ --spectrum-textfield-height: var(--spectrum-component-height-100);
+ --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium);
+ --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
+ --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100);
+ --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100);
+ --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100);
+ --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100);
+ --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium);
+ --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium);
+ --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium);
+ --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium);
+ --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium);
+ --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium);
+ --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75);
+ --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75);
+ --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium);
+ --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium);
+
+ /* Text Area / Multiline size medium */
+ --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100);
+ }
+
+ &.spectrum-Textfield--sizeL {
+ --spectrum-textfield-height: var(--spectrum-component-height-200);
+ --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large);
+ --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
+ --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200);
+ --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200);
+ --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-200);
+ --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-200);
+ --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large);
+ --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large);
+ --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large);
+ --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large);
+ --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large);
+ --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large);
+ --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-100);
+ --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100);
+ --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large);
+ --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large);
+
+ /* Text Area / Multiline size large */
+ --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-200);
+ }
+
+ &.spectrum-Textfield--sizeXL {
+ --spectrum-textfield-height: var(--spectrum-component-height-300);
+ --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large);
+ --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200);
+ --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300);
+ --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200);
+ --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-300);
+ --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-300);
+ --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large);
+ --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large);
+ --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large);
+ --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large);
+ --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large);
+ --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large);
+ --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-200);
+ --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200);
+ --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large);
+ --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large);
+
+ /* Text Area / Multiline size extra large */
+ --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-300);
+ }
+ }
+}
diff --git a/components/textfield/themes/spectrum.css b/components/textfield/themes/spectrum.css
index a4854e02352..49bd851d92b 100644
--- a/components/textfield/themes/spectrum.css
+++ b/components/textfield/themes/spectrum.css
@@ -11,14 +11,13 @@
* governing permissions and limitations under the License.
*/
-@container (--system: spectrum) {
- .spectrum-Textfield {
- --spectrum-textfield-border-color: var(--spectrum-gray-500);
- --spectrum-textfield-border-color-hover: var(--spectrum-gray-600);
- --spectrum-textfield-border-color-focus: var(--spectrum-gray-800);
- --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900);
- --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
- --spectrum-textfield-border-width: var(--spectrum-border-width-100);
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
+
+@container style(--system: legacy) {
+ .spectrum-Textfield {
+ --spectrum-textfield-background-color: var(--spectrum-gray-50);
}
}
diff --git a/components/thumbnail/CHANGELOG.md b/components/thumbnail/CHANGELOG.md
index 208e05187b2..38cad68595d 100644
--- a/components/thumbnail/CHANGELOG.md
+++ b/components/thumbnail/CHANGELOG.md
@@ -1,5 +1,175 @@
# Change Log
+## 7.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 7.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 7.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.10
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 7.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 7.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 7.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 7.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.6
+
+## 7.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 7.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 7.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 7.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.0
+
## 6.1.4
### Patch Changes
diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css
index a8b5a108918..0ffda6d5120 100644
--- a/components/thumbnail/index.css
+++ b/components/thumbnail/index.css
@@ -11,76 +11,7 @@
* governing permissions and limitations under the License.
*/
-.spectrum-Thumbnail {
- --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500);
-
- --spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75);
- --spectrum-thumbnail-border-width: var(--spectrum-border-width-100);
-
- /* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
- --spectrum-thumbnail-border-color-rgba: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-color-opacity));
- --spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400);
- --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white);
- --spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100);
- --spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500);
-
- --spectrum-thumbnail-border-width-selected: var(--spectrum-border-width-200);
- --spectrum-thumbnail-border-color-selected: var(--spectrum-accent-color-800);
-
- --spectrum-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
- --spectrum-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
- --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled);
-}
-
-.spectrum-Thumbnail--size50 {
- --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50);
-}
-
-.spectrum-Thumbnail--size75 {
- --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75);
-}
-
-.spectrum-Thumbnail--size100 {
- --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100);
-}
-
-.spectrum-Thumbnail--size200 {
- --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200);
-}
-
-.spectrum-Thumbnail--size300 {
- --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300);
-}
-
-.spectrum-Thumbnail--size400 {
- --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400);
-}
-
-.spectrum-Thumbnail--size500 {
- --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500);
-}
-
-.spectrum-Thumbnail--size600 {
- --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600);
-}
-
-.spectrum-Thumbnail--size700 {
- --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700);
-}
-
-.spectrum-Thumbnail--size800 {
- --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800);
-}
-
-.spectrum-Thumbnail--size900 {
- --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900);
-}
-
-.spectrum-Thumbnail--size1000 {
- --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000);
-}
+@import "./themes/spectrum-two.css";
.spectrum-Thumbnail {
position: relative;
@@ -93,6 +24,11 @@
border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
+ /* Friends should align to the top of the tabs */
+ vertical-align: top;
+ overflow: hidden;
+ z-index: 0;
+
&::before {
content: "";
z-index: 2;
@@ -106,7 +42,7 @@
&.is-disabled {
opacity: var(--mod-thumbnail-color-opacity-disabled, var(--spectrum-thumbnail-color-opacity-disabled));
}
- /* stylelint-disable selector-pseudo-class-no-unknown */
+
&.is-focused {
overflow: visible;
@@ -128,12 +64,6 @@
border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
}
}
- /* stylelint-enable selector-pseudo-class-no-unknown */
-
- /* Friends should align to the top of the tabs */
- vertical-align: top;
- overflow: hidden;
- z-index: 0;
}
.spectrum-Thumbnail-layer {
@@ -150,7 +80,6 @@
content: none;
}
- /* stylelint-disable declaration-block-no-redundant-longhand-properties */
&.is-selected {
outline-style: solid;
outline-color: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-thumbnail-border-color-selected)));
@@ -170,7 +99,6 @@
outline-color: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-thumbnail-layer-border-color-inner)));
outline-width: calc(var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer)));
}
-/* stylelint-enable declaration-block-no-redundant-longhand-properties */
.spectrum-Thumbnail-image-wrapper {
display: flex;
@@ -182,8 +110,8 @@
.spectrum-Thumbnail-image {
position: relative;
- max-block-size: 100%;
max-inline-size: 100%;
+ max-block-size: 100%;
z-index: 1;
}
@@ -213,12 +141,13 @@
/* Windows High Contrast Mode */
@media (forced-colors: active) {
.spectrum-Thumbnail {
- /* Allow checkerboard pattern to be visible. */
- forced-color-adjust: none;
--highcontrast-thumbnail-border-color-selected: Highlight;
--highcontrast-thumbnail-focus-indicator-color: Highlight;
--highcontrast-thumbnail-border-color: CanvasText;
--highcontrast-thumbnail-layer-border-color-inner: Canvas;
--highcontrast-thumbnail-layer-border-color-outer: CanvasText;
+
+ /* Allow checkerboard pattern to be visible. */
+ forced-color-adjust: none;
}
}
diff --git a/components/thumbnail/metadata/thumbnail.yml b/components/thumbnail/metadata/thumbnail.yml
deleted file mode 100644
index 999ae628740..00000000000
--- a/components/thumbnail/metadata/thumbnail.yml
+++ /dev/null
@@ -1,209 +0,0 @@
-name: Thumbnail
-status: Contribution
-sections:
- - name: Migration Guide
- description: |
- ### Thumbnail sizing
- Thumbnail sizes are specified by appending a number to the size class: `.spectrum-Thumbnail--size*`. Sizes scale expotentially and are based on the Spectrum type scale. These range from size-50 to size-1000.
-
- ### Image Cover
- Thumbnail now offers a way to control the content inside a child `img` tag by adding a modifier `spectrum-Thumbnail--cover` class in addition to the `spectrum-Thumbnail` class.
-
- ### Layer
- Adds variant for when thumbnails are used in layer management (such as the Compact or Detail Layers panels). When used this way the thumbnail is given a thick blue border when selected.
-
- ### Remove focus-ring class
- We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
-examples:
- - id: thumbnail-image
- name: Thumbnail
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
50
-
-
-
-
-
-
-
-
-
75
-
-
-
-
-
-
-
-
-
100
-
-
-
-
-
-
-
-
-
200
-
-
-
-
-
-
-
-
-
300
-
-
-
-
-
-
-
-
-
400
-
-
-
-
-
-
-
-
-
500
-
-
-
-
-
-
-
-
-
600
-
-
-
-
-
-
-
-
-
700
-
-
-
-
-
-
-
-
-
800
-
-
-
-
-
-
-
-
-
900
-
-
-
-
-
-
-
-
-
1000
-
-
-
-
-
-
-
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--express */
+
+@import "./spectrum.css";
diff --git a/components/thumbnail/themes/spectrum-two.css b/components/thumbnail/themes/spectrum-two.css
new file mode 100644
index 00000000000..5194159fe7c
--- /dev/null
+++ b/components/thumbnail/themes/spectrum-two.css
@@ -0,0 +1,85 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@container style(--system: spectrum) {
+ .spectrum-Thumbnail {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500);
+
+ --spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75);
+ --spectrum-thumbnail-border-width: var(--spectrum-border-width-100);
+
+ /* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
+ --spectrum-thumbnail-border-color-rgba: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-color-opacity));
+ --spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400);
+ --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white);
+ --spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100);
+ --spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500);
+
+ --spectrum-thumbnail-border-width-selected: var(--spectrum-border-width-200);
+ --spectrum-thumbnail-border-color-selected: var(--spectrum-accent-color-800);
+
+ --spectrum-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+ --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled);
+ }
+
+ .spectrum-Thumbnail--size50 {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50);
+ }
+
+ .spectrum-Thumbnail--size75 {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75);
+ }
+
+ .spectrum-Thumbnail--size100 {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100);
+ }
+
+ .spectrum-Thumbnail--size200 {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200);
+ }
+
+ .spectrum-Thumbnail--size300 {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300);
+ }
+
+ .spectrum-Thumbnail--size400 {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400);
+ }
+
+ .spectrum-Thumbnail--size500 {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500);
+ }
+
+ .spectrum-Thumbnail--size600 {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600);
+ }
+
+ .spectrum-Thumbnail--size700 {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700);
+ }
+
+ .spectrum-Thumbnail--size800 {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800);
+ }
+
+ .spectrum-Thumbnail--size900 {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900);
+ }
+
+ .spectrum-Thumbnail--size1000 {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000);
+ }
+}
diff --git a/components/thumbnail/themes/spectrum.css b/components/thumbnail/themes/spectrum.css
new file mode 100644
index 00000000000..5a930981122
--- /dev/null
+++ b/components/thumbnail/themes/spectrum.css
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+/* @combine .spectrum.spectrum--legacy */
+
+@import "./spectrum-two.css";
diff --git a/components/toast/CHANGELOG.md b/components/toast/CHANGELOG.md
index d335680d525..c735a8f52cb 100644
--- a/components/toast/CHANGELOG.md
+++ b/components/toast/CHANGELOG.md
@@ -1,5 +1,203 @@
# Change Log
+## 11.0.0-s2-foundations.13
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.14
+ - @spectrum-css/button@14.0.0-s2-foundations.15
+ - @spectrum-css/icon@8.0.0-s2-foundations.15
+ - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
+## 11.0.0-s2-foundations.12
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05) Thanks [@pfulton](https://github.com/pfulton)! - - Accordion: Flatten sizing variables in theme layer
+ - ActionButton: Fix typo in variable name "\*-defaul-selectedt"
+ - Move out rtl logical transform from theme to index.css for: calendar, pagination, treeview
+
+### Patch Changes
+
+- Updated dependencies [[`5546ec6`](https://github.com/adobe/spectrum-css/commit/5546ec6a508eb249ede78031db22ddf5972e5c05)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.12
+ - @spectrum-css/button@14.0.0-s2-foundations.12
+ - @spectrum-css/icon@8.0.0-s2-foundations.13
+ - @spectrum-css/tokens@15.0.0-s2-foundations.13
+
+## 11.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`b0862e1`](https://github.com/adobe/spectrum-css/commit/b0862e1a5b95c19443fd919c6baf4b4ea9ba79c1)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.11
+ - @spectrum-css/button@14.0.0-s2-foundations.11
+ - @spectrum-css/icon@8.0.0-s2-foundations.12
+ - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
+## 11.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.10
+ - @spectrum-css/button@14.0.0-s2-foundations.10
+ - @spectrum-css/icon@8.0.0-s2-foundations.11
+ - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
+## 11.0.0-s2-foundations.9
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09) Thanks [@pfulton](https://github.com/pfulton)! - Push out the latest release to the components
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df) Thanks [@pfulton](https://github.com/pfulton)! - Across the board version update to latest build system state
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d) Thanks [@pfulton](https://github.com/pfulton)! - Doing a widespread release on all packages to ensure the latest compiled CSS is published.
+
+- Updated dependencies [[`681ba47`](https://github.com/adobe/spectrum-css/commit/681ba478c1259d0bbb183670f3188538ec3bee1d), [`84c8721`](https://github.com/adobe/spectrum-css/commit/84c87212ccb37c887225eaff28e84d9f8e608e09), [`0a0dace`](https://github.com/adobe/spectrum-css/commit/0a0dacec163234bc73961ef17826cdc33765d9df)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.9
+ - @spectrum-css/button@14.0.0-s2-foundations.9
+ - @spectrum-css/icon@8.0.0-s2-foundations.9
+ - @spectrum-css/tokens@15.0.0-s2-foundations.9
+
+## 11.0.0-s2-foundations.8
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959) Thanks [@pfulton](https://github.com/pfulton)! - Update system property tooling (splitinator) to leverage the selector parser
+
+### Patch Changes
+
+- Updated dependencies [[`2633985`](https://github.com/adobe/spectrum-css/commit/2633985775ef5a8fad929e275e55e99b75b10959)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.8
+ - @spectrum-css/button@14.0.0-s2-foundations.8
+ - @spectrum-css/icon@8.0.0-s2-foundations.8
+ - @spectrum-css/tokens@15.0.0-s2-foundations.8
+
+## 11.0.0-s2-foundations.7
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22) Thanks [@pfulton](https://github.com/pfulton)! - Revert themes asset naming to simplify code review; bug fixes in custom property loading from theme assets
+
+### Patch Changes
+
+- Updated dependencies [[`24a51cc`](https://github.com/adobe/spectrum-css/commit/24a51cc3b682a06a5133c4f5bf72c11a2337ee22)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.7
+ - @spectrum-css/button@14.0.0-s2-foundations.7
+ - @spectrum-css/icon@8.0.0-s2-foundations.7
+ - @spectrum-css/tokens@15.0.0-s2-foundations.7
+
+## 11.0.0-s2-foundations.6
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0) Thanks [@pfulton](https://github.com/pfulton)! - Inject missing tokens into theme files and adjust logic in the splitinator tool to replace nested variable references to the new system mappings
+
+- Updated dependencies [[`130e137`](https://github.com/adobe/spectrum-css/commit/130e1372b223641efe0a3a23c83ff1d01a70bf1d), [`4d88749`](https://github.com/adobe/spectrum-css/commit/4d887492f98f1f505535680bfb0baa06d24460a0)]:
+ - @spectrum-css/tokens@15.0.0-s2-foundations.6
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.6
+ - @spectrum-css/button@14.0.0-s2-foundations.6
+ - @spectrum-css/icon@8.0.0-s2-foundations.6
+
+## 11.0.0-s2-foundations.5
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50) Thanks [@pfulton](https://github.com/pfulton)! - Fix to how the system mapped custom property names are generated; adding support for pseudo functions, combinators, and complex selectors
+
+- Updated dependencies [[`de1d39f`](https://github.com/adobe/spectrum-css/commit/de1d39fdedc297032735acf97d0f87b6f2e45f50)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.5
+ - @spectrum-css/button@14.0.0-s2-foundations.5
+ - @spectrum-css/icon@8.0.0-s2-foundations.5
+ - @spectrum-css/tokens@15.0.0-s2-foundations.5
+
+## 11.0.0-s2-foundations.4
+
+### Patch Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5) Thanks [@pfulton](https://github.com/pfulton)! - Corrects a faulty regex that was negatively affecting compilation of custom properties
+
+- Updated dependencies [[`485128c`](https://github.com/adobe/spectrum-css/commit/485128ca7947acb064f31e4118044a3f7e3f88b5)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.4
+ - @spectrum-css/button@14.0.0-s2-foundations.4
+ - @spectrum-css/icon@8.0.0-s2-foundations.4
+ - @spectrum-css/tokens@15.0.0-s2-foundations.4
+
+## 11.0.0-s2-foundations.3
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df) Thanks [@pfulton](https://github.com/pfulton)! - fixes a compilation issue in the tokens dist artifacts
+
+### Patch Changes
+
+- Updated dependencies [[`6b12d37`](https://github.com/adobe/spectrum-css/commit/6b12d375c12b36f387b331fff42b24bc7c3845df)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.3
+ - @spectrum-css/button@14.0.0-s2-foundations.3
+ - @spectrum-css/icon@8.0.0-s2-foundations.3
+ - @spectrum-css/tokens@15.0.0-s2-foundations.3
+
+## 11.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.2
+ - @spectrum-css/button@14.0.0-s2-foundations.2
+ - @spectrum-css/icon@8.0.0-s2-foundations.2
+ - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
+## 11.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.1
+ - @spectrum-css/button@14.0.0-s2-foundations.1
+ - @spectrum-css/icon@8.0.0-s2-foundations.1
+ - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
+## 11.0.0-s2-foundations.0
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce) Thanks [@pfulton](https://github.com/pfulton)! - S2 colors + grays foundation
+
+### Patch Changes
+
+- Updated dependencies [[`5e9953d`](https://github.com/adobe/spectrum-css/commit/5e9953d96806a5d1e769a343cd538e4af81916ce)]:
+ - @spectrum-css/closebutton@6.0.0-s2-foundations.0
+ - @spectrum-css/button@14.0.0-s2-foundations.0
+ - @spectrum-css/tokens@15.0.0-s2-foundations.0
+ - @spectrum-css/icon@8.0.0-s2-foundations.0
+
## 10.2.1
### Patch Changes
diff --git a/components/toast/index.css b/components/toast/index.css
index 5c1a6c0f40c..16080f639e0 100644
--- a/components/toast/index.css
+++ b/components/toast/index.css
@@ -11,54 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/express.css";
-
-.spectrum-Toast {
- /* Hardcoded variables */
- --spectrum-toast-font-weight: var(--spectrum-regular-font-weight);
-
- /* Size */
-
- --spectrum-toast-font-size: var(--spectrum-font-size-100);
- --spectrum-toast-corner-radius: var(--spectrum-corner-radius-100);
- --spectrum-toast-block-size: var(--spectrum-toast-height);
- --spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width);
- --spectrum-toast-border-width: var(--spectrum-border-width-100);
-
- --spectrum-toast-line-height: var(--spectrum-line-height-100);
- --spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100);
-
- /* Space */
-
- --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100);
-
- --spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300);
- --spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300);
-
- --spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100);
- --spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100);
-
- --spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon);
-
- --spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300);
- --spectrum-toast-spacing-close-button: var(--spectrum-spacing-100);
-
- --spectrum-toast-spacing-block-start: var(--spectrum-spacing-100);
- --spectrum-toast-spacing-block-end: var(--spectrum-spacing-100);
-
- --spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text);
- --spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);
-
- /* Color */
-
- --spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default);
- --spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default);
- --spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default);
-
- --spectrum-toast-text-and-icon-color: var(--spectrum-white);
-
- --spectrum-toast-divider-color: var(--spectrum-transparent-white-300);
-}
+@import "./themes/spectrum-two.css";
@media (forced-colors: active) {
.spectrum-Toast {
@@ -146,6 +99,7 @@
color: var(--highcontrast-toast-text-and-icon-color, var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color)));
+
&:lang(ja),
&:lang(zh),
&:lang(ko) {
diff --git a/components/toast/metadata/metadata.json b/components/toast/metadata/metadata.json
index b186fd9d8ef..c7026196ec6 100644
--- a/components/toast/metadata/metadata.json
+++ b/components/toast/metadata/metadata.json
@@ -90,17 +90,16 @@
"--spectrum-informative-background-color-default",
"--spectrum-line-height-100",
"--spectrum-negative-background-color-default",
- "--spectrum-neutral-background-color-default",
"--spectrum-neutral-subdued-background-color-default",
"--spectrum-positive-background-color-default",
"--spectrum-regular-font-weight",
"--spectrum-spacing-100",
"--spectrum-spacing-300",
"--spectrum-text-to-visual-100",
- "--spectrum-transparent-white-300",
+ "--spectrum-transparent-white-400",
"--spectrum-white"
],
- "system-theme": ["--system-spectrum-toast-background-color-default"],
+ "system-theme": [],
"passthroughs": [],
"high-contrast": [
"--highcontrast-toast-background-color-default",
diff --git a/components/toast/metadata/toast.yml b/components/toast/metadata/toast.yml
deleted file mode 100644
index 6165311d23a..00000000000
--- a/components/toast/metadata/toast.yml
+++ /dev/null
@@ -1,187 +0,0 @@
-name: Toast
-SpectrumSiteSlug: https://spectrum.adobe.com/page/toast/
-sections:
- - name: Custom Properties API
- description: |
- This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here .
- - name: Migration Guide
- description: |
- ### Clear button replaced by Close button
- Replace `spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--sizeM` with `spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite` and remove the `
+
](https://opensource.adobe.com/spectrum-css/get-started.html) [
](https://opensource.adobe.com/spectrum-css/preview/)
+ [