` reference to the icon within a loaded sprite sheet. This improves Storybook performance, especially for multiple icons. When set to `false`, the icon file's full markup is used.",
+ type: { name: "boolean" },
+ table: {
+ type: { summary: "boolean" },
+ category: "Advanced",
+ },
+ control: "boolean",
+ },
},
args: {
rootClass: "spectrum-Icon",
setName: "workflow",
- iconName: "ABC",
+ iconName: "Color",
+ uiIconName: "Checkmark400",
size: "xl",
useRef: true,
},
parameters: {
packageJson,
metadata,
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/9qeVZSJ9t0kv6r7njzgHx7/S2-%2F-Styles-visualizer-(WIP)?node-id=295-24257&t=ZC7fyaQ0VQYQ5VYM-1",
+ },
},
tags: ["!autodocs"],
};
@@ -98,6 +92,44 @@ export default {
export const Default = IconGroup.bind({});
Default.args = {};
+/**
+ * All icons in the Workflow icon set.
+ */
+export const Workflow = FullIconSetTemplate.bind({});
+Workflow.storyName = "Workflow icons";
+Workflow.args = {
+ setName: "workflow",
+ useRef: true,
+};
+Workflow.argTypes = {
+ setName: { table: { disable: true } },
+ iconName: { table: { disable: true } },
+};
+Workflow.parameters = {
+ chromatic: { disableSnapshot: true },
+ // Layout other than "centered" needed for dynamic grid columns CSS to work correctly.
+ layout: "padded",
+};
+
+/**
+ * All icons in the UI icon set.
+ */
+export const UI = FullIconSetTemplate.bind({});
+UI.storyName = "UI icons";
+UI.args = {
+ setName: "ui",
+ useRef: true,
+};
+UI.argTypes = {
+ setName: { table: { disable: true } },
+ uiIconName: { table: { disable: true } },
+};
+UI.parameters = {
+ chromatic: { disableSnapshot: true },
+ // Layout other than "centered" needed for dynamic grid columns CSS to work correctly.
+ layout: "padded",
+};
+
// ********* VRT ONLY ********* //
export const WithForcedColors = IconGroup.bind({});
WithForcedColors.tags = ["!autodocs", "!dev"];
@@ -111,50 +143,13 @@ WithForcedColors.parameters = {
},
};
-/**
- * Helper template function to display multiple icons using an array of icon names.
- */
-const IconListTemplate = (args, iconsList = [], context) => html`
-
- ${iconsList.map(
- (iconName) => Template({ ...args, iconName }, context)
- )}
-
-`;
-
-/* Stories for the MDX "Docs" only. */
+// ********* DOCS ONLY ********* //
/**
* A sampling of multiple Workflow icons.
*/
-export const WorkflowDefault = (args, context) => IconListTemplate(
- {
- ...args,
- setName: "workflow",
- size: "xl",
- },
- [
- "Alert",
- "Asset",
- "Actions",
- "ArrowDown",
- "Camera",
- "Copy",
- "DeviceDesktop",
- "Download",
- "FilterAdd",
- "Form",
- "Light",
- "Polygon",
- ],
- context
-);
+export const WorkflowDefault = WorkflowDefaultTemplate.bind({});
+WorkflowDefault.storyName = "Workflow icons";
WorkflowDefault.tags = ["!dev"];
WorkflowDefault.parameters = {
chromatic: { disableSnapshot: true },
@@ -162,49 +157,14 @@ WorkflowDefault.parameters = {
/**
* An example of a Workflow icon displayed at all sizes, from small to extra-large.
+ * Note that the extra-extra-large size is currently *not* part of the design specifications and may be deprecated in the near future.
*/
-export const WorkflowSizing = (args, context) => html`
-
- ${["xs","s","m","l","xl"].map(
- (size) => html`
-
- ${Typography({
- semantics: "heading",
- size: "xs",
- content: [
- {
- xs: "Extra-small",
- s: "Small",
- m: "Medium",
- l: "Large",
- xl: "Extra-large",
- }[size],
- ],
- customStyles: {
- "white-space": "nowrap",
- "--mod-detail-font-color": "var(--spectrum-seafoam-900)",
- }
- })}
- ${Template({ ...args, size }, context)}
-
- `
- )}
-
- ${IconListTemplate(
- {
- ...args,
- setName: "ui",
- },
- [
- "Asterisk100",
- "Asterisk200",
- "Asterisk300",
- ],
- context
- )}
-
-
- ${IconListTemplate(
- {
- ...args,
- setName: "ui",
- },
- [
- "ChevronDown50",
- "ChevronDown75",
- "ChevronDown100",
- "ChevronDown200",
- "ChevronDown300",
- "ChevronDown400",
- ],
- context
- )}
-
-`;
-UIDefault.storyName = "UI Default";
+export const UIDefault = UIDefaultTemplate.bind({});
+UIDefault.storyName = "UI icons";
UIDefault.tags = ["!dev"];
UIDefault.parameters = {
chromatic: { disableSnapshot: true },
@@ -259,21 +187,26 @@ UIDefault.parameters = {
/**
* A UI arrow displayed for all directions (left, right, up, down).
*/
-export const UIArrows = (args, context) => IconListTemplate(
- {
- ...args,
- setName: "ui",
- },
- [
- "ArrowRight100",
- "ArrowLeft100",
- "ArrowDown100",
- "ArrowUp100",
- ],
- context
-);
+export const UIArrows = UIArrowsTemplate.bind({});
UIArrows.storyName = "UI Arrows";
UIArrows.tags = ["!dev"];
UIArrows.parameters = {
chromatic: { disableSnapshot: true },
};
+
+/**
+ * In Storybook documentation, if a workflow icon name does not exist in the set, the
+ * placeholder "Circle" icon will be shown. Missing ui icons will render
+ * nothing. The following example purposefully uses an icon name that does
+ * not exist to demonstrate this behavior.
+ */
+export const MissingWorkflowIcon = Default.bind({});
+MissingWorkflowIcon.storyName = "Missing workflow icon placeholder";
+MissingWorkflowIcon.tags = ["!dev"];
+MissingWorkflowIcon.args = {
+ setName: "workflow",
+ iconName: "ThisIconNameDoesNotExist",
+};
+MissingWorkflowIcon.parameters = {
+ chromatic: { disableSnapshot: true },
+};
diff --git a/components/icon/stories/icon.test.js b/components/icon/stories/icon.test.js
index fc81d4cb922..34202826597 100644
--- a/components/icon/stories/icon.test.js
+++ b/components/icon/stories/icon.test.js
@@ -1,99 +1,127 @@
-import { Variants } from "@spectrum-css/preview/decorators";
+import { Container, Variants } from "@spectrum-css/preview/decorators";
+import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
import { html } from "lit";
import { styleMap } from "lit/directives/style-map.js";
-import { when } from "lit/directives/when.js";
import { Template } from "./template.js";
-import { uiIconSizes, uiIconsWithDirections } from "./utilities.js";
+import { uiIconsWithDirections, uniqueUiIconBaseNames, workflowSizes } from "./utilities.js";
/**
* Chromatic VRT template that displays multiple icons to cover various options.
+ * Includes Chromatic-only testing grid with:
+ * - Several workflow icons, at all sizes, with some set to a color
+ * - All UI icons, organized within a grid by sizing number and name
*/
-const TestTemplate = (args, context) => {
- return html`
-
-
- ${[
- {
- setName: "workflow",
- iconName: "Alert",
- fill: "var(--spectrum-negative-content-color-default)",
- },
- {
- setName: "workflow",
- iconName: "Hand",
- },
- {
- setName: "workflow",
- iconName: "Help",
- },
- {
- setName: "workflow",
- iconName: "ArrowLeft",
- },
- {
- setName: "workflow",
- iconName: "ArrowRight",
- },
- {
- setName: "workflow",
- iconName: "ChevronDown",
- }
- ].map((row_args) => html`
-
- ${["xs","s","m","l","xl","xxl"].map(
- (size) => Template({ ...args, ...row_args, size })
- )}
-
`
- )}
-
-
- ${uiIconsWithDirections.map(iconName => html`
-
- ${uiIconSizes[iconName.replace(/(Left|Right|Up|Down)$/, "")]?.map((iconSize) =>
- Template({ ...args, setName: "ui", iconName: iconName + iconSize }, context)
- )}
- ${when(uiIconSizes[iconName]?.length == 0, () =>
- Template({ ...args, setName: "ui", iconName }, context)
- )}
-
`
- )}
-
-
+ ${workflowSizes.map(scale => html`
+
+ ${Typography({
+ customClasses: ["chromatic-ignore"],
+ semantics: "detail",
+ size: "s",
+ content: [scale],
+ customStyles: {
+ "--mod-detail-font-color": "var(--spectrum-seafoam-900)",
+ }
+ })}
+
+ `)}
+ ${[
+ "Add",
+ "AlertTriangle",
+ "Edit",
+ "File",
+ "Folder",
+ "MenuHamburger",
+ "SelectRectangle",
+ "Redo",
+ "Star",
+ "StarFilled",
+ "User",
+ "ColorHarmony",
+ "CornerRadiusBottomLeft",
+ ].map((iconName, idx) => html`
+ ${workflowSizes.map((size) => Template({
+ ...args,
+ useRef: true,
+ iconName,
+ setName: "workflow",
+ size,
+ fill: idx % 5 === 0 ? "var(--spectrum-negative-content-color-default)" : undefined
+ }, context))}
+ `)}
+
+ ${["50", "75", "100", "200", "300", "400", "500", "600"].map(scale => html`
+
+ ${Typography({
+ customClasses: ["chromatic-ignore"],
+ semantics: "detail",
+ size: "s",
+ content: [scale],
+ customStyles: {
+ "--mod-detail-font-color": "var(--spectrum-seafoam-900)",
+ }
+ })}
+
+ `)}
+ ${uniqueUiIconBaseNames.sort().reduce((print, iconName) => {
+ let output = Array(8).fill(html`
`);
+ ["50", "75", "100", "200", "300", "400", "500", "600"].forEach((scale, idx) => {
+ if (uiIconsWithDirections.includes(`${iconName}${scale}`)) {
+ output[idx] = Template({
+ ...args,
+ setName: "ui",
+ useRef: false,
+ uiIconName: `${iconName}${scale}`,
+ }, context);
+ }
+ });
+ print.push(...output);
+ return print;
+ }, [])}
+
- ${idKey.replace(/([A-Z])/g, " $1").trim()}
+ ${iconNameToLoad.replace(/([A-Z])/g, " $1").trim()}
`;
};
+
+/**
+ * Display all icons in the icon set within a grid.
+ */
+export const FullIconSetTemplate = (args, context) => {
+ return html`
+
+ ${when(args.setName === "workflow", () => {
+ return workflowIconsCleaned.sort().map((iconName) => IconWithLabelTemplate({ ...args, iconName }, context));
+ }, () => {
+ return uiIconsWithDirections.sort().map((iconName) => IconWithLabelTemplate({ ...args, uiIconName: iconName }, context));
+ })}
+
+ `;
+};
+
+/**
+ * Display a single icon in the icon set with a label showing the icon name.
+ */
+export const IconWithLabelTemplate = (args, context) => html`
+
+ ${Template({
+ useRef: true,
+ size: "xxl",
+ setName: args.setName,
+ iconName: args?.iconName ?? undefined,
+ uiIconName: args?.uiIconName ?? undefined,
+ ...args,
+ }, context)}
+ ${Typography({
+ customClasses: ["chromatic-ignore"],
+ semantics: "body",
+ size: "xxs",
+ content: [
+ args.setName == "ui" ? args.uiIconName : args.iconName,
+ ],
+ })}
+
+`;
+
+/**
+ * Helper template function to display multiple icons using an array of icon names.
+ */
+export const IconListTemplate = (args, context, iconsList = []) => html`
+
+ ${iconsList.map(
+ (iconName) => Template({
+ ...args,
+ iconName: args?.setName === "workflow" ? iconName : undefined,
+ uiIconName: args?.setName === "ui" ? iconName : undefined,
+ }, context)
+ )}
+
+`;
+
+/**
+ * Display examples of multiple workflow icons.
+ */
+export const WorkflowDefaultTemplate = (args, context) => html`
+ ${IconListTemplate(
+ {
+ ...args,
+ setName: "workflow",
+ size: "xl",
+ },
+ context,
+ [
+ "AlertTriangle",
+ "Bell",
+ "Camera",
+ "Color",
+ "Copy",
+ "DeviceDesktop",
+ "Download",
+ "Draw",
+ "Files",
+ "Hand",
+ "Lightbulb",
+ "InfoCircle",
+ ]
+ )}
+`;
+
+/**
+ * Display examples of all directions of a single UI arrow.
+ */
+export const UIArrowsTemplate = (args, context) => html`
+ ${IconListTemplate(
+ {
+ ...args,
+ setName: "ui",
+ },
+ context,
+ [
+ "ArrowRight100",
+ "ArrowLeft100",
+ "ArrowDown100",
+ "ArrowUp100",
+ ]
+ )}
+`;
+
+/**
+ * Display examples of multiple UI icons.
+ */
+export const UIDefaultTemplate = (args, context) => html`
+
+ ${IconListTemplate(
+ {
+ ...args,
+ setName: "ui",
+ },
+ context,
+ [
+ "Asterisk100",
+ "Asterisk200",
+ "Asterisk300",
+ ]
+ )}
+
+
+ ${IconListTemplate(
+ {
+ ...args,
+ setName: "ui",
+ },
+ context,
+ [
+ "ChevronDown50",
+ "ChevronDown75",
+ "ChevronDown100",
+ "ChevronDown200",
+ "ChevronDown300",
+ "ChevronDown400",
+ ]
+ )}
+
+`;
diff --git a/components/icon/stories/utilities.js b/components/icon/stories/utilities.js
index d4219af7974..16faf30eaa3 100644
--- a/components/icon/stories/utilities.js
+++ b/components/icon/stories/utilities.js
@@ -1,44 +1,216 @@
-// Imports an array of all icon names in the workflow set
-import iconOpts from "@adobe/spectrum-css-workflow-icons";
+// Import arrays containing data with all icon names in both icon sets.
+import workflowIconOpts from "@adobe/spectrum-css-workflow-icons/dist/manifest.json";
+import uiIconOpts from "@spectrum-css/ui-icons/dist/icons.json";
-export const workflowIcons = (iconOpts || []).map((icon) =>
- icon.replace(/\.svg$/, "")
+/**
+ * Clean workflow icon name to strip out unnecessary prefix and postfix text.
+ * Also removes file extension if present.
+ * Example: "S2_Icon_AlertCircle_20_N" becomes "AlertCircle"
+ *
+ * @param {string} iconName
+ * @returns {string}
+ */
+export const cleanWorkflowIconName = (iconName) => (
+ iconName.replace(/\.svg$/, "").replace(/^S2_Icon_/, "").replace(/_N$/, "").replace(/_20$/, "")
+);
+
+/**
+ * Clean UI icon name to remove file extension and any unnecessary text.
+ *
+ * @param {string} iconName
+ * @returns {string}
+ */
+export const cleanUiIconName = (iconName) => (
+ iconName.replace(/\.svg$/, "")
);
/**
- * UI Icons have specific sizes represented by a number.
- * Each size has its own individual file and a CSS class with defined dimensions.
- */
-export const uiIconSizes = {
- "Arrow": ["75","100","200","300","400","500","600"],
- "Asterisk": ["75","100","200","300"],
- "Checkmark": ["50","75","100","200","300","400","500","600"],
- "Chevron": ["50","75","100","200","300","400","500"],
- "CornerTriangle": ["75","100","200","300"],
- "Cross": ["75","100","200","300","400","500","600"],
- "Dash": ["50","75","100","200","300","400","500","600"],
- "SingleGripper": [],
- "DoubleGripper": [],
- "TripleGripper": [],
+ * Get the ID of the icon within the sprite sheet.
+ *
+ * The sprite sheets are single SVG files containing all of the icons in the set, each with a
+ * unique ID. The ID can then be used to display the icon elsewhere by referencing the ID
+ * within an SVG element.
+ *
+ * Example of the format of IDs within the different sprite sheets:
+ * ui ID: #spectrum-css-icon-alert-triangle
+ * workflow ID: #icon-spectrum-css-icon-Arrow100
+ *
+ * @param {string} iconName Icon name (original or cleaned).
+ * @param {string} setName Icon set.
+ * @returns {string} Icon name with original file name prefix and postfix added.
+ */
+export const getSpriteSheetName = (iconName, setName) => {
+ if (setName == "ui") {
+ return "spectrum-css-icon-" + iconName;
+ }
+ else if (setName == "workflow") {
+ // Use cleaned name, without file name prefix/postfix.
+ let iconID = cleanWorkflowIconName(iconName);
+
+ // These regexes convert camel case or pascal case strings into kebab-case:
+ // -------
+ // Matches a lowercase letter or digit followed by an uppercase letter and inserts a hyphen between them.
+ // E.g. "AddCircle" becomes "Add-Circle".
+ // Digits are included in the first grouping because of the exception of "3D" being "3-d" in the IDs.
+ iconID = iconID.replaceAll(/([a-z0-9])([A-Z])/g, "$1-$2");
+
+ // Matches an uppercase sequence followed by an uppercase letter with a lowercase letter.
+ // Replacing this separately helps prevent uppercase acronyms like CC and CCW from being split up by dashes.
+ iconID = iconID.replaceAll(/([A-Z]+)([A-Z][a-z])/g, "$1-$2");
+ // -------
+
+ // Underscores become dashes.
+ iconID = iconID.replace("_", "-");
+
+ // All IDs begin with this prefix and are lowercase.
+ iconID = "icon-" + iconID.toLowerCase();
+
+ return iconID;
+ }
+ else {
+ console.error("setSpriteSheetName received an invalid setName and could not create the ID.");
+ return "";
+ }
};
/**
- * List of UI icon names, corresponding to files.
+ * Sorted array with all the SVG workflow icon names, cleaned to remove file extension and
+ * unnecessary prefix and postfix text. These might look something like "3DAsset".
+ *
+ * Excludes 22x20 icons, which currently do not match workflow icon sizing.
*/
-export const uiIcons = Object.keys(uiIconSizes);
+export const workflowIconsCleaned = (workflowIconOpts?.svg ?? [])
+ .filter(iconName => !iconName.includes("22x20"))
+ .map(iconName => cleanWorkflowIconName(iconName))
+ .sort(alphaNumericSort);
/**
- * List of all UI icon names for CSS. Chevron and Arrow have directional suffixes
+ * Sorted array with all UI icon names, without the file extension.
+ */
+export const uiIconsCleaned = (uiIconOpts || [])
+ .map(iconName => cleanUiIconName(iconName))
+ .sort(alphaNumericSort);
+
+/**
+ * @description A custom alpha-numeric sort that helps keep the order of the sizing numbers at the end of the string.
+ * @param {string} a
+ * @param {string} b
+ * @returns {number}
+ */
+function alphaNumericSort(a, b) {
+ const aSet = a.match(/^([a-zA-Z]+)([0-9]+)(\.svg)?$/i);
+ const bSet = b.match(/^([a-zA-Z]+)([0-9]+)(\.svg)?$/i);
+
+ // Handle cases where match fails
+ if (!aSet || !bSet) return 0;
+
+ // Compare characters at start of string (case-insensitive)
+ const aChar = aSet[1].toLowerCase();
+ const bChar = bSet[1].toLowerCase();
+ if (aChar !== bChar) return aChar > bChar ? 1 : -1;
+
+ // Compare numbers at end of string
+ const aInt = parseInt(aSet[2]);
+ const bInt = parseInt(bSet[2]);
+ return aInt - bInt;
+}
+
+/**
+ * Array of all UI icon names for CSS. Chevron and Arrow have directional suffixes
* for rotating the same base icon, e.g. Arrow becomes ArrowRight, ArrowDown, etc.
+ *
+ * @param {string[]} uiIcons Array of icon names.
+ * @returns {string[]}
+ */
+export const getUiIconsWithDirections = (uiIcons) => [
+ ...uiIcons.filter((c) => !["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))),
+ ...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Right$2")),
+ ...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Left$2")),
+ ...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Up$2")),
+ ...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Down$2")),
+].sort(alphaNumericSort);
+
+/**
+ * Array of all cleaned UI icon names for CSS. Including sizing numbers and directional suffixes.
*/
-export const uiIconsWithDirections = [
- ...uiIcons.filter((c) => !["Chevron", "Arrow"].includes(c)),
- "ArrowRight",
- "ArrowLeft",
- "ArrowUp",
- "ArrowDown",
- "ChevronRight",
- "ChevronLeft",
- "ChevronUp",
- "ChevronDown",
+export const uiIconsWithDirections = getUiIconsWithDirections(uiIconsCleaned);
+
+/**
+ * Array of all unique base UI icon names without their sizing numbers.
+ */
+export const getUniqueUiIconBaseNames = (uiIcons) => [
+ ...new Set(uiIcons.map(ui => ui.replace(/\d{2,3}$/, "")))
];
+
+/**
+ * Array of all base UI icon names (without sizing numbers) for CSS (including directional suffixes).
+ */
+export const uniqueUiIconBaseNames = getUniqueUiIconBaseNames(uiIconsWithDirections);
+
+/**
+ * Workflow icon sizes. Does not apply to UI icons. Note: XXL is not part of the design
+ * spec and may be deprecated in the future.
+ */
+export const workflowSizes = ["xs", "s", "m", "l", "xl", "xxl"];
+
+/**
+ * Create an object where the key is the UI icon name, and the value is an array of
+ * strings with every sizing number available.
+ *
+ * Returns something like the following:
+ * {
+ * "Arrow": ['100', '400'],
+ * "Asterisk": ['100', '200', '300'],
+ * ...
+ * }
+ *
+ * @param {string[]} uiIcons Array of all UI icon names.
+ * @returns {object}
+ */
+export const getUiIconSizes = (uiIcons) => {
+ let uiIconSizes = {};
+
+ uiIcons.forEach(iconName => {
+ // UI icon name without the sizing number at the end.
+ const iconNameRoot = iconName.replace(/\d{2,3}$/, "");
+
+ // Sizing number at the end of the icon name (e.g. "100").
+ const iconNameSize = iconName.match(/\d{2,3}/g)?.[0];
+
+ // Add to object (with no duplicates).
+ uiIconSizes[iconNameRoot] = [
+ ...new Set([
+ ...uiIconSizes[iconNameRoot] ?? [],
+ ...(iconNameSize ? [iconNameSize] : []),
+ ])
+ ];
+ });
+
+ return uiIconSizes;
+};
+
+export const uiIconSizes = getUiIconSizes(uiIconsWithDirections);
+
+/**
+ * If UI icon name does not have a sizing number appended, add one to approximate the provided
+ * t-shirt sizing for the component, based on the most common mapping.
+ *
+ * @param {string} uiIconName
+ * @param {string} size t-shirt sizing
+ * @returns {string} uiIconName with appended default sizing number, if one is not already present.
+ */
+export const appendUiIconDefaultSizing = (uiIconName, size = "m") => {
+ // If icon name already has a size number on the end, no change is needed.
+ if (uiIconName.match(/\d{2,3}$/)) {
+ return uiIconName;
+ }
+
+ return uiIconName + ({
+ xs: "50",
+ s: "75",
+ m: "100",
+ l: "200",
+ xl: "300",
+ xxl: "400",
+ }[size] || "100");
+};
diff --git a/components/icon/ui-icons.css b/components/icon/ui-icons.css
index ce39d50ea8c..000c6671d44 100644
--- a/components/icon/ui-icons.css
+++ b/components/icon/ui-icons.css
@@ -11,22 +11,6 @@
* 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
* -------------
diff --git a/components/illustratedmessage/dist/metadata.json b/components/illustratedmessage/dist/metadata.json
index 24de798ac33..12705f6822e 100644
--- a/components/illustratedmessage/dist/metadata.json
+++ b/components/illustratedmessage/dist/metadata.json
@@ -2,7 +2,18 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-IllustratedMessage",
- ".spectrum-IllustratedMessage-accent",
+ ".spectrum-IllustratedMessage--horizontal",
+ ".spectrum-IllustratedMessage--horizontal .spectrum-IllustratedMessage-illustration",
+ ".spectrum-IllustratedMessage--sizeL",
+ ".spectrum-IllustratedMessage--sizeL:lang(ja)",
+ ".spectrum-IllustratedMessage--sizeL:lang(ko)",
+ ".spectrum-IllustratedMessage--sizeL:lang(zh)",
+ ".spectrum-IllustratedMessage--sizeS",
+ ".spectrum-IllustratedMessage--sizeS:lang(ja)",
+ ".spectrum-IllustratedMessage--sizeS:lang(ko)",
+ ".spectrum-IllustratedMessage--sizeS:lang(zh)",
+ ".spectrum-IllustratedMessage-actions",
+ ".spectrum-IllustratedMessage-content",
".spectrum-IllustratedMessage-description",
".spectrum-IllustratedMessage-heading",
".spectrum-IllustratedMessage-illustration",
@@ -11,23 +22,24 @@
".spectrum-IllustratedMessage:lang(zh)"
],
"modifiers": [
- "--mod-illustrated-message-content-maximum-width",
"--mod-illustrated-message-description-color",
"--mod-illustrated-message-description-font-family",
"--mod-illustrated-message-description-font-size",
"--mod-illustrated-message-description-font-style",
"--mod-illustrated-message-description-font-weight",
"--mod-illustrated-message-description-line-height",
- "--mod-illustrated-message-description-max-inline-size",
"--mod-illustrated-message-description-pointer-events",
"--mod-illustrated-message-description-position",
+ "--mod-illustrated-message-description-to-action",
"--mod-illustrated-message-description-z-index",
"--mod-illustrated-message-display",
- "--mod-illustrated-message-heading-max-inline-size",
- "--mod-illustrated-message-heading-to-body",
"--mod-illustrated-message-heading-to-description",
- "--mod-illustrated-message-illustration-accent-color",
+ "--mod-illustrated-message-horizontal-maximum-width",
+ "--mod-illustrated-message-illustrated-inline-size",
+ "--mod-illustrated-message-illustration-block-size",
"--mod-illustrated-message-illustration-color",
+ "--mod-illustrated-message-illustration-size",
+ "--mod-illustrated-message-illustration-to-heading",
"--mod-illustrated-message-pointer-events",
"--mod-illustrated-message-title-color",
"--mod-illustrated-message-title-font-family",
@@ -35,51 +47,55 @@
"--mod-illustrated-message-title-font-style",
"--mod-illustrated-message-title-font-weight",
"--mod-illustrated-message-title-line-height",
- "--mod-illustrated-message-title-to-heading"
+ "--mod-illustrated-message-vertical-maximum-width"
],
"component": [
- "--spectrum-illustrated-message-body-size",
- "--spectrum-illustrated-message-cjk-title-size",
"--spectrum-illustrated-message-description-color",
"--spectrum-illustrated-message-description-font-family",
"--spectrum-illustrated-message-description-font-size",
"--spectrum-illustrated-message-description-font-style",
"--spectrum-illustrated-message-description-font-weight",
"--spectrum-illustrated-message-description-line-height",
- "--spectrum-illustrated-message-description-max-inline-size",
- "--spectrum-illustrated-message-heading-max-inline-size",
+ "--spectrum-illustrated-message-description-to-action",
"--spectrum-illustrated-message-heading-to-description",
- "--spectrum-illustrated-message-illustration-accent-color",
+ "--spectrum-illustrated-message-horizontal-maximum-width",
"--spectrum-illustrated-message-illustration-color",
- "--spectrum-illustrated-message-maximum-width",
+ "--spectrum-illustrated-message-illustration-size",
+ "--spectrum-illustrated-message-illustration-to-content",
+ "--spectrum-illustrated-message-illustration-to-heading",
+ "--spectrum-illustrated-message-large-body-font-size",
+ "--spectrum-illustrated-message-large-cjk-title-font-size",
+ "--spectrum-illustrated-message-large-title-font-size",
+ "--spectrum-illustrated-message-medium-body-font-size",
+ "--spectrum-illustrated-message-medium-cjk-title-font-size",
+ "--spectrum-illustrated-message-medium-title-font-size",
+ "--spectrum-illustrated-message-small-body-font-size",
+ "--spectrum-illustrated-message-small-cjk-title-font-size",
+ "--spectrum-illustrated-message-small-title-font-size",
"--spectrum-illustrated-message-title-color",
"--spectrum-illustrated-message-title-font-family",
"--spectrum-illustrated-message-title-font-size",
"--spectrum-illustrated-message-title-font-style",
"--spectrum-illustrated-message-title-font-weight",
"--spectrum-illustrated-message-title-line-height",
- "--spectrum-illustrated-message-title-size",
- "--spectrum-illustrated-message-title-to-heading"
+ "--spectrum-illustrated-message-vertical-maximum-width"
],
"global": [
- "--spectrum-accent-visual-color",
"--spectrum-body-color",
- "--spectrum-body-line-height",
"--spectrum-body-sans-serif-font-style",
"--spectrum-body-sans-serif-font-weight",
"--spectrum-heading-color",
- "--spectrum-heading-line-height",
- "--spectrum-heading-sans-serif-font-style",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-neutral-visual-color",
+ "--spectrum-line-height-200",
+ "--spectrum-neutral-content-color-default",
"--spectrum-sans-font-family-stack",
- "--spectrum-spacing-400",
- "--spectrum-spacing-75"
+ "--spectrum-spacing-100",
+ "--spectrum-spacing-200",
+ "--spectrum-spacing-300",
+ "--spectrum-spacing-75",
+ "--spectrum-title-line-height",
+ "--spectrum-title-sans-serif-font-style",
+ "--spectrum-title-sans-serif-font-weight"
],
- "system-theme": [],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-illustrated-message-illustration-accent-color",
- "--highcontrast-illustrated-message-illustration-color"
- ]
+ "passthroughs": ["--mod-buttongroup-justify-content"],
+ "high-contrast": ["--highcontrast-illustrated-message-illustration-color"]
}
diff --git a/components/illustratedmessage/index.css b/components/illustratedmessage/index.css
index 6b588504d11..39894c695a1 100644
--- a/components/illustratedmessage/index.css
+++ b/components/illustratedmessage/index.css
@@ -1,82 +1,96 @@
/*!
- * 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.
- */
+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
-@media (forced-colors: active) {
- .spectrum-IllustratedMessage {
- --highcontrast-illustrated-message-illustration-color: CanvasText;
- --highcontrast-illustrated-message-illustration-accent-color: Highlight;
- }
-}
+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-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);
+ --spectrum-illustrated-message-illustration-to-heading: var(--spectrum-spacing-200);
+ --spectrum-illustrated-message-illustration-to-content: var(--spectrum-spacing-200);
+ --spectrum-illustrated-message-description-to-action: var(--spectrum-spacing-300);
+ /* @passthrough -- settings for nested button group */
+ --mod-buttongroup-justify-content: center;
/* Illustration */
- --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color);
- --spectrum-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color);
+ --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-illustrated-message-illustration-size: 96px;
/* 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-font-weight: var(--spectrum-title-sans-serif-font-weight);
+ --spectrum-illustrated-message-title-font-style: var(--spectrum-title-sans-serif-font-style);
+ --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-medium-title-font-size);
+ --spectrum-illustrated-message-title-line-height: var(--spectrum-title-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-font-size: var(--spectrum-illustrated-message-medium-body-font-size);
+ --spectrum-illustrated-message-description-line-height: var(--spectrum-line-height-200);
--spectrum-illustrated-message-description-color: var(--spectrum-body-color);
- block-size: 100%;
-
- display: var(--mod-illustrated-message-display, flex);
- flex-direction: column;
- align-items: center;
- justify-content: center;
+ /* CJK (Chinese, Japanese, and Korean) language support */
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-medium-cjk-title-font-size);
+ }
+}
- text-align: center;
- pointer-events: var(--mod-illustrated-message-pointer-events, auto);
- max-inline-size: var(--mod-illustrated-message-content-maximum-width);
+.spectrum-IllustratedMessage--sizeS {
+ --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-small-title-font-size);
+ --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-small-body-font-size);
- /* 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);
+ --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-small-cjk-title-font-size);
}
}
-.spectrum-IllustratedMessage-illustration {
- margin-block-end: var(--mod-illustrated-message-title-to-heading, var(--spectrum-illustrated-message-title-to-heading));
- color: var(--highcontrast-illustrated-message-illustration-color, var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color)));
- fill: currentColor;
- stroke: currentColor;
+.spectrum-IllustratedMessage--sizeL {
+ --spectrum-illustrated-message-illustration-size: 160px;
+ --spectrum-illustrated-message-illustration-to-heading: var(--spectrum-spacing-100);
+ --spectrum-illustrated-message-illustration-to-content: var(--spectrum-spacing-100);
+ --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-large-title-font-size);
+ --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-large-body-font-size);
+
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-large-cjk-title-font-size);
+ }
}
-.spectrum-IllustratedMessage-accent {
- color: var(--highcontrast-illustrated-message-illustration-accent-color, var(--mod-illustrated-message-illustration-accent-color, var(--spectrum-illustrated-message-illustration-accent-color)));
+.spectrum-IllustratedMessage {
+ block-size: 100%;
+ display: var(--mod-illustrated-message-display, grid);
+ grid-template-areas:
+ ". illustration ."
+ "body body body";
+ text-align: center;
+ pointer-events: var(--mod-illustrated-message-pointer-events, auto);
+ max-inline-size: var(--mod-illustrated-message-vertical-maximum-width, var(--spectrum-illustrated-message-vertical-maximum-width));
+}
- /* Safari 16.3 🐛🛠️: Repeated stroke/fill properties is a workaround for a currentcolor bug that was fixed in 16.4. */
+.spectrum-IllustratedMessage-illustration {
+ margin-block-end: var(--mod-illustrated-message-illustration-to-heading, var(--spectrum-illustrated-message-illustration-to-heading));
+ color: var(--highcontrast-illustrated-message-illustration-color, var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color)));
fill: currentColor;
stroke: currentColor;
+ block-size: var(--mod-illustrated-message-illustration-block-size, var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size)));
+ inline-size: var(--mod-illustrated-message-illustrated-inline-size, var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size)));
+ grid-area: illustration;
}
.spectrum-IllustratedMessage-heading {
@@ -88,9 +102,8 @@
color: var(--mod-illustrated-message-title-color, var(--spectrum-illustrated-message-title-color));
- 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);
+ margin-block-end: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description));
}
.spectrum-IllustratedMessage-description {
@@ -106,7 +119,32 @@
color: var(--mod-illustrated-message-description-color, var(--spectrum-illustrated-message-description-color));
- max-inline-size: var(--mod-illustrated-message-description-max-inline-size, var(--spectrum-illustrated-message-description-max-inline-size));
- margin-block-start: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description));
- margin-block-end: 0;
+ margin-block: 0;
+}
+
+.spectrum-IllustratedMessage--horizontal {
+ --mod-buttongroup-justify-content: flex-start;
+ max-inline-size: var(--mod-illustrated-message-horizontal-maximum-width, var(--spectrum-illustrated-message-horizontal-maximum-width));
+ text-align: start;
+ gap: var(--spectrum-illustrated-message-illustration-to-content);
+ grid-template-areas: "illustration body";
+ align-items: center;
+
+ .spectrum-IllustratedMessage-illustration {
+ margin-block-end: 0;
+ }
+}
+
+.spectrum-IllustratedMessage-actions {
+ margin-block-start: var(--mod-illustrated-message-description-to-action, var(--spectrum-illustrated-message-description-to-action));
+}
+
+.spectrum-IllustratedMessage-content {
+ grid-area: body;
+}
+
+@media (forced-colors: active) {
+ .spectrum-IllustratedMessage {
+ --highcontrast-illustrated-message-illustration-color: CanvasText;
+ }
}
diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js
index 2b00b063d31..794accd74da 100644
--- a/components/illustratedmessage/stories/illustratedmessage.stories.js
+++ b/components/illustratedmessage/stories/illustratedmessage.stories.js
@@ -1,20 +1,38 @@
-import { Template as Link } from "@spectrum-css/link/stories/template.js";
+import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { html } from "lit";
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
import { IllustratedMessageGroup } from "./illustratedmessage.test.js";
import { Template } from "./template.js";
/**
- * 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.
+ * The Illustrated Message displays an illustration along with a heading, description and group of buttons. 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.
*/
export default {
title: "Illustrated message",
component: "IllustratedMessage",
argTypes: {
- useAccentColor: {
- name: "Illustration accent color",
+ title: {
+ name: "Title",
+ type: { name: "string" },
+ table: {
+ type: { summary: "string" },
+ category: "Content",
+ },
+ control: "text",
+ },
+ description: {
+ name: "Description",
+ type: { name: "string" },
+ table: {
+ type: { summary: "string" },
+ category: "Content",
+ },
+ control: "text",
+ },
+ isHorizontal: {
+ name: "Horizontal orientation",
+ description: "The default content orientation is vertical. Add the horizontal class to horizontally align the illustration with the content. The illustration will align left or right determined by the global direction of the text.",
type: { name: "boolean" },
table: {
type: { summary: "boolean" },
@@ -22,26 +40,33 @@ export default {
},
control: "boolean",
},
- heading: {
- name: "Heading",
- type: { name: "string" },
+ size: {
+ name: "Size",
+ type: { name: "string", required: true },
table: {
type: { summary: "string" },
- category: "Content",
+ category: "Component",
},
- control: "text",
+ options: ["s", "m", "l"],
+ control: "select",
},
- description: {
- name: "Description",
+ hasButtons: {
+ name: "Show button group",
+ type: { name: "boolean" },
table: {
- category: "Content",
- disable: true,
+ type: { summary: "boolean" },
+ category: "Component",
},
+ control: "boolean",
},
},
args: {
rootClass: "spectrum-IllustratedMessage",
- useAccentColor: false,
+ isHorizontal: false,
+ size: "m",
+ hasButtons: true,
+ title: "Error 404: Page not found",
+ description: "This page isn't available. Try checking the URL or visit a different page.",
},
parameters: {
design: {
@@ -50,32 +75,22 @@ export default {
},
packageJson,
metadata,
+ layout: "centered"
},
};
export const Default = IllustratedMessageGroup.bind({});
-Default.args = {
- heading: "Error 404: Page not found",
- description: [
- "This page isn't available. Try checking the URL or visit a different page.",
- ],
-};
+Default.args = {};
/**
- * To use the accent color, the class `.spectrum-IllustratedMessage-accent` can be added to element(s) within the illustration SVG.
- */
-export const AccentColor = Template.bind({});
-AccentColor.tags = ["!dev"];
-AccentColor.args = {
- heading: "Drag and drop your file",
- description: [
- () => {
- return html`${Link({ url: "#", text: "Select a file" })} from your computer.`;
- },
- ],
- useAccentColor: true,
+ * Horizontal illustrated messages are displayed on extra large screen sizes or in a menu.
+*/
+export const Horizontal = Template.bind({});
+Horizontal.tags = ["!dev"];
+Horizontal.args = {
+ isHorizontal: true
};
-AccentColor.parameters = {
+Horizontal.parameters = {
chromatic: { disableSnapshot: true },
};
@@ -88,3 +103,21 @@ WithForcedColors.parameters = {
modes: disableDefaultModes
},
};
+/**
+ * Illustrated message comes in three sizes: small, medium, and large.
+ * - Small illustrated message is typically used in quick or in-line actions.
+ * - The medium size is the default, and often used in panels.
+ * - The large size illustrated message is generally used in full page layouts and dialogs.
+ */
+export const Sizing = (args, context) => Sizes({
+ Template: Template,
+ withBorder: false,
+ withHeader: false,
+ ...args
+}, context);
+
+Sizing.args = {};
+Sizing.tags = ["!dev"];
+Sizing.parameters = {
+ chromatic: { disableSnapshot: true },
+};
diff --git a/components/illustratedmessage/stories/illustratedmessage.test.js b/components/illustratedmessage/stories/illustratedmessage.test.js
index 2b7b85946a1..a6da8059521 100644
--- a/components/illustratedmessage/stories/illustratedmessage.test.js
+++ b/components/illustratedmessage/stories/illustratedmessage.test.js
@@ -1,25 +1,17 @@
-import { Template as Link } from "@spectrum-css/link/stories/template.js";
import { Variants } from "@spectrum-css/preview/decorators";
-import { html } from "lit";
import { Template } from "./template.js";
export const IllustratedMessageGroup = Variants({
Template,
testData: [{
- heading: "Error 404: Page not found",
- description: [
- "This page isn't available. Try checking the URL or visit a different page.",
- ],
- useAccentColor: false,
- }, {
- testHeading: "With accent color",
- heading: "Drag and drop your file",
- description: [
- () => {
- return html`${Link({ url: "#", text: "Select a file" })} from your computer.`;
- },
- ],
- useAccentColor: true,
- }
+ },
+ {
+ testHeading: "Horizontal layout",
+ isHorizontal: true
+ },
+ {
+ testHeading: "W/o button group",
+ hasButtons: false
+ },
],
});
diff --git a/components/illustratedmessage/stories/template.js b/components/illustratedmessage/stories/template.js
index ace824ddae9..8ee5daa77b0 100644
--- a/components/illustratedmessage/stories/template.js
+++ b/components/illustratedmessage/stories/template.js
@@ -1,4 +1,4 @@
-import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
+import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { when } from "lit/directives/when.js";
@@ -7,111 +7,76 @@ import "../index.css";
export const Template = ({
rootClass = "spectrum-IllustratedMessage",
- heading,
+ title,
description,
customClasses = [],
- useAccentColor = false,
-} = {}, context = {}) => {
+ hasButtons = false,
+ isHorizontal = false,
+ size = "m",
+ customIllustration,
+}) => {
+ const descriptionContent = Array.isArray(description)
+ ? description
+ : [() => html`${description}`];
return html`
- ({ ...a, [c]: true }), {}),
- })}
- >
- ${illustrationSvgMarkup(useAccentColor)}
- ${when(heading, () =>
- Typography({
- semantics: "heading",
- "size": "m",
- customClasses: [`${rootClass}-heading`],
- content: [heading],
- }, context)
+
({ ...a, [c]: true }), {}),
+ })}
+ >
+ ${customIllustration
+ ? customIllustration()
+ : illustrationSvgMarkup(size)}
+
+ ${when(
+ title,
+ () =>
+ html`
+ ${title}
+ `
)}
- ${when(description, () =>
- Typography({
- semantics: "body",
- "size": "s",
- customClasses: [`${rootClass}-description`],
- content: [
- ...description.map((c) => (typeof c === "function" ? c({}) : c))
- ],
- }, context)
+ ${when(
+ descriptionContent,
+ () =>
+ html`
+ ${descriptionContent.map((c) =>
+ typeof c === "function" ? c({}) : c
+ )}
+
`
+ )}
+ ${when(hasButtons, () =>
+ ButtonGroup({
+ size,
+ customClasses: ["spectrum-IllustratedMessage-actions"],
+ items: [
+ {
+ variant: "secondary",
+ treatment: "outline",
+ label: "Remind me later",
+ },
+ {
+ variant: "accent",
+ treatment: "fill",
+ label: "Rate now",
+ },
+ ]
+ })
)}
- `;
+
+`;
};
-const illustrationSvgMarkup = (withAccentColorClass = false) => html`
-
-
-
-
-
-`;
+const illustrationSvgMarkup = (size = "m") => {
+ const computedSize = size === "l" ? 160 : 96;
+ return html`
+
+
+ `;
+};
diff --git a/components/infieldbutton/CHANGELOG.md b/components/infieldbutton/CHANGELOG.md
index 47a91a0f120..244ccc31f11 100644
--- a/components/infieldbutton/CHANGELOG.md
+++ b/components/infieldbutton/CHANGELOG.md
@@ -1,5 +1,12 @@
# Change log
+## 7.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+
## 6.1.1
### Patch Changes
diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json
index 08964986f5d..9b4476f0a4a 100644
--- a/components/infieldbutton/dist/metadata.json
+++ b/components/infieldbutton/dist/metadata.json
@@ -132,23 +132,12 @@
"--spectrum-disabled-content-color",
"--spectrum-gray-100",
"--spectrum-gray-200",
+ "--spectrum-gray-50",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
"--spectrum-neutral-content-color-hover",
"--spectrum-neutral-content-color-key-focus"
],
- "system-theme": [
- "--system-infield-button-background-color",
- "--system-infield-button-background-color-down",
- "--system-infield-button-background-color-hover",
- "--system-infield-button-background-color-key-focus",
- "--system-infield-button-border-color",
- "--system-infield-button-border-radius",
- "--system-infield-button-border-radius-reset",
- "--system-infield-button-border-width",
- "--system-infield-button-stacked-bottom-border-radius-end-start",
- "--system-infield-button-stacked-top-border-radius-start-start"
- ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-infield-button-border-color",
diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css
index ab1533eeacc..84bb9389975 100644
--- a/components/infieldbutton/index.css
+++ b/components/infieldbutton/index.css
@@ -11,9 +11,22 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
.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);
diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json
index 66ae9550b32..e21c2644e1e 100644
--- a/components/infieldbutton/package.json
+++ b/components/infieldbutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/infieldbutton",
- "version": "6.1.1",
+ "version": "7.0.0-next.0",
"description": "The Spectrum CSS infield button component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -37,7 +37,7 @@
}
},
"devDependencies": {
- "@spectrum-css/icon": "9.1.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js
index 7f0b4ee8db1..5cc77d42045 100644
--- a/components/infieldbutton/stories/template.js
+++ b/components/infieldbutton/stories/template.js
@@ -4,9 +4,6 @@ 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 = (
{
diff --git a/components/infieldbutton/themes/express.css b/components/infieldbutton/themes/express.css
deleted file mode 100644
index 1d930d4cfee..00000000000
--- a/components/infieldbutton/themes/express.css
+++ /dev/null
@@ -1,34 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
-
-@container style(--system: express) {
- .spectrum-InfieldButton {
- --spectrum-infield-button-border-width: 0;
- --spectrum-infield-button-border-color: transparent;
-
- --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-75);
- --spectrum-infield-button-border-radius-reset: var(--spectrum-corner-radius-75);
-
- --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75);
- --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75);
-
- --spectrum-infield-button-background-color: var(--spectrum-gray-200);
- --spectrum-infield-button-background-color-hover: var(--spectrum-gray-300);
- --spectrum-infield-button-background-color-down: var(--spectrum-gray-400);
- --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-300);
- }
-}
diff --git a/components/infieldbutton/themes/spectrum-two.css b/components/infieldbutton/themes/spectrum-two.css
deleted file mode 100644
index 9cd01ec53c9..00000000000
--- a/components/infieldbutton/themes/spectrum-two.css
+++ /dev/null
@@ -1,31 +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.
- */
-
-@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-100);
- --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200);
- --spectrum-infield-button-background-color-down: var(--spectrum-gray-200);
- --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200);
- }
-}
diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css
deleted file mode 100644
index ff95c7c2dce..00000000000
--- a/components/infieldbutton/themes/spectrum.css
+++ /dev/null
@@ -1,25 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@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);
- --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200);
- }
-}
diff --git a/components/infieldprogresscircle/CHANGELOG.md b/components/infieldprogresscircle/CHANGELOG.md
new file mode 100644
index 00000000000..7b3a7ceecaf
--- /dev/null
+++ b/components/infieldprogresscircle/CHANGELOG.md
@@ -0,0 +1,9 @@
+# @spectrum-css/infieldprogresscircle
+
+## 1.0.0-next.0
+
+### Major Changes
+
+- [#2352](https://github.com/adobe/spectrum-css/pull/2352) [`fb80825`](https://github.com/adobe/spectrum-css/commit/fb80825cc31d6b5eb46dc42e595bce253e7db805) Thanks [@pfulton](https://github.com/pfulton)! - ## Infield Progresscircle S2 Migration
+
+ In-field progress circle is a new component created to replace progress circle (size S) in t-shirt size components. The button, textfield, combo box, and picker `template.js` files have all been updated to call for infield progress circles. This component comes in four sizes: (S, M, L, XL), has updated color variants (default, white, black), and has a unified track thickness.
diff --git a/components/infieldprogresscircle/README.md b/components/infieldprogresscircle/README.md
new file mode 100644
index 00000000000..4d411cc9502
--- /dev/null
+++ b/components/infieldprogresscircle/README.md
@@ -0,0 +1,7 @@
+# @spectrum-css/infieldprogresscircle
+
+> The Spectrum CSS infield progress circle component
+
+This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
+
+See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details.
diff --git a/components/infieldprogresscircle/dist/metadata.json b/components/infieldprogresscircle/dist/metadata.json
new file mode 100644
index 00000000000..ffc95f11390
--- /dev/null
+++ b/components/infieldprogresscircle/dist/metadata.json
@@ -0,0 +1,25 @@
+{
+ "sourceFile": "index.css",
+ "selectors": [
+ ".spectrum-InfieldProgressCircle",
+ ".spectrum-InfieldProgressCircle .spectrum-ProgressCircle-fill",
+ ".spectrum-InfieldProgressCircle--sizeL",
+ ".spectrum-InfieldProgressCircle--sizeS",
+ ".spectrum-InfieldProgressCircle--sizeXL"
+ ],
+ "modifiers": [],
+ "component": [
+ "--spectrum-in-field-progress-circle-edge-to-fill",
+ "--spectrum-in-field-progress-circle-size-100",
+ "--spectrum-in-field-progress-circle-size-200",
+ "--spectrum-in-field-progress-circle-size-300",
+ "--spectrum-in-field-progress-circle-size-75",
+ "--spectrum-infieldprogresscircle-padding-block"
+ ],
+ "global": ["--spectrum-progress-circle-thickness-small"],
+ "passthroughs": [
+ "--mod-progress-circle-size",
+ "--mod-progress-circle-thickness"
+ ],
+ "high-contrast": []
+}
diff --git a/components/infieldprogresscircle/index.css b/components/infieldprogresscircle/index.css
new file mode 100644
index 00000000000..e3525eccc40
--- /dev/null
+++ b/components/infieldprogresscircle/index.css
@@ -0,0 +1,37 @@
+/*!
+Copyright 2025 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.
+*/
+
+.spectrum-InfieldProgressCircle {
+ --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small);
+ --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-100);
+ --spectrum-infieldprogresscircle-padding-block: var(--spectrum-in-field-progress-circle-edge-to-fill);
+}
+
+.spectrum-InfieldProgressCircle--sizeS {
+ --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-75);
+}
+
+.spectrum-InfieldProgressCircle--sizeL {
+ --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-200);
+}
+
+.spectrum-InfieldProgressCircle--sizeXL {
+ --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-300);
+}
+
+.spectrum-InfieldProgressCircle {
+ padding-block: var(--spectrum-infieldprogresscircle-padding-block);
+
+ .spectrum-ProgressCircle-fill {
+ stroke-linecap: square;
+ }
+}
diff --git a/components/infieldprogresscircle/package.json b/components/infieldprogresscircle/package.json
new file mode 100644
index 00000000000..a6a1da3defa
--- /dev/null
+++ b/components/infieldprogresscircle/package.json
@@ -0,0 +1,57 @@
+{
+ "name": "@spectrum-css/infieldprogresscircle",
+ "version": "1.0.0-next.0",
+ "description": "The Spectrum CSS infieldprogresscircle component",
+ "license": "Apache-2.0",
+ "author": "Adobe",
+ "homepage": "https://opensource.adobe.com/spectrum-css/?path=/docs/components-in-field-progress-circle--docs",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/adobe/spectrum-css.git",
+ "directory": "components/infieldprogresscircle"
+ },
+ "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": "./dist/metadata.json",
+ "./package.json": "./package.json",
+ "./stories/*": "./stories/*"
+ },
+ "main": "dist/index.css",
+ "peerDependencies": {
+ "@spectrum-css/tokens": ">=16"
+ },
+ "devDependencies": {
+ "@spectrum-css/tokens": "16.0.1"
+ },
+ "keywords": [
+ "design-system",
+ "spectrum",
+ "spectrum-css",
+ "adobe",
+ "adobe-spectrum",
+ "component",
+ "css"
+ ],
+ "publishConfig": {
+ "access": "public"
+ },
+ "spectrum": [
+ {
+ "guidelines": "https://spectrum.adobe.com/page/progress-circle",
+ "rootClass": "spectrum-InfieldProgressCircle",
+ "swc": "https://opensource.adobe.com/spectrum-web-components/components/progress-circle/"
+ }
+ ],
+ "peerDependenciesMeta": {
+ "@spectrum-css/tokens": {
+ "optional": true
+ }
+ }
+}
diff --git a/components/infieldprogresscircle/project.json b/components/infieldprogresscircle/project.json
new file mode 100644
index 00000000000..ff11b0651fc
--- /dev/null
+++ b/components/infieldprogresscircle/project.json
@@ -0,0 +1,17 @@
+{
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
+ "name": "infieldprogresscircle",
+ "tags": ["component"],
+ "targets": {
+ "build": {},
+ "clean": {},
+ "compare": {},
+ "format": {},
+ "lint": {},
+ "report": {},
+ "test": {
+ "defaultConfiguration": "scope"
+ },
+ "validate": {}
+ }
+}
diff --git a/components/infieldprogresscircle/stories/infieldprogresscircle.stories.js b/components/infieldprogresscircle/stories/infieldprogresscircle.stories.js
new file mode 100644
index 00000000000..e8c60ee9d6d
--- /dev/null
+++ b/components/infieldprogresscircle/stories/infieldprogresscircle.stories.js
@@ -0,0 +1,121 @@
+import { Sizes } from "@spectrum-css/preview/decorators";
+import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import { size } from "@spectrum-css/preview/types";
+import { default as ProgressCircle } from "@spectrum-css/progresscircle/stories/progresscircle.stories.js";
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+import { InfieldProgressCircleGroup } from "./infieldprogresscircle.test.js";
+import { Template } from "./template.js";
+
+/**
+ * In-field progress circles are used in t-shirt size components such as [buttons](/docs/components-button--docs), [combo boxes](/docs/components-combobox--docs), and [pickers](/docs/components-picker--docs). The in-field progress circle can be used in place of an icon or in tight spaces when space is limited both vertically and horizontally.
+*/
+
+export default {
+ title: "In-field progress circle",
+ component: "InfieldProgressCircle",
+ argTypes: {
+ ...ProgressCircle.argTypes,
+ size: size(["s", "m", "l", "xl"]),
+ },
+ args: {
+ ...ProgressCircle.args,
+ rootClass: "spectrum-InfieldProgressCircle",
+ },
+ parameters: {
+ ...ProgressCircle.parameters,
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=14970-6050",
+ },
+ packageJson,
+ metadata,
+ }
+};
+
+export const Default = InfieldProgressCircleGroup.bind({});
+Default.args = {};
+
+// ********* VRT ONLY ********* //
+export const WithForcedColors = InfieldProgressCircleGroup.bind({});
+WithForcedColors.args = Default.args;
+WithForcedColors.tags = ["!autodocs", "!dev"];
+WithForcedColors.parameters = {
+ chromatic: {
+ forcedColors: "active",
+ modes: disableDefaultModes,
+ },
+};
+
+// ********* DOCS ONLY ********* //
+
+export const Sizing = (args, context) => Sizes({
+ Template,
+ withHeading: false,
+ withBorder: false,
+ ...args,
+}, context);
+Sizing.args = {};
+Sizing.tags = ["!dev"];
+Sizing.parameters = {
+ chromatic: { disableSnapshot: true },
+};
+
+/**
+ * The indeterminate progress circle displays a repeating animation for the inner fill.
+ */
+export const Indeterminate = (args, context) => Sizes({
+ Template,
+ withHeading: false,
+ withBorder: false,
+ ...args,
+}, context);
+Indeterminate.args = {
+ isIndeterminate: true,
+};
+Indeterminate.tags = ["!dev"];
+Indeterminate.parameters = {
+ chromatic: { disableSnapshot: true },
+};
+
+export const StaticWhiteDeterminate = Sizing.bind({});
+StaticWhiteDeterminate.tags = ["!dev"];
+StaticWhiteDeterminate.storyName = "Static white, default";
+StaticWhiteDeterminate.args = {
+ staticColor: "white",
+};
+StaticWhiteDeterminate.parameters = {
+ chromatic: { disableSnapshot: true },
+};
+
+export const StaticWhiteIndeterminate = Sizing.bind({});
+StaticWhiteIndeterminate.tags = ["!dev"];
+StaticWhiteIndeterminate.storyName = "Static white, indeterminate";
+StaticWhiteIndeterminate.args = {
+ staticColor: "white",
+ isIndeterminate: true,
+};
+StaticWhiteIndeterminate.parameters = {
+ chromatic: { disableSnapshot: true },
+};
+
+export const StaticBlackDeterminate = Sizing.bind({});
+StaticBlackDeterminate.tags = ["!dev"];
+StaticBlackDeterminate.storyName = "Static black, default";
+StaticBlackDeterminate.args = {
+ staticColor: "black",
+};
+StaticBlackDeterminate.parameters = {
+ chromatic: { disableSnapshot: true },
+};
+
+export const StaticBlackIndeterminate = Sizing.bind({});
+StaticBlackIndeterminate.tags = ["!dev"];
+StaticBlackIndeterminate.storyName = "Static black, indeterminate";
+StaticBlackIndeterminate.args = {
+ staticColor: "black",
+ isIndeterminate: true,
+};
+StaticBlackIndeterminate.parameters = {
+ chromatic: { disableSnapshot: true },
+};
diff --git a/components/infieldprogresscircle/stories/infieldprogresscircle.test.js b/components/infieldprogresscircle/stories/infieldprogresscircle.test.js
new file mode 100644
index 00000000000..2ef07f947ab
--- /dev/null
+++ b/components/infieldprogresscircle/stories/infieldprogresscircle.test.js
@@ -0,0 +1,25 @@
+import { Variants } from "@spectrum-css/preview/decorators";
+import { Template } from "./template.js";
+
+export const InfieldProgressCircleGroup = Variants({
+ Template,
+ testData: [
+ {
+ testHeading: "Default",
+ },
+ {
+ testHeading: "Static white",
+ staticColor: "white",
+ },
+ {
+ testHeading: "Static black",
+ staticColor: "black",
+ },
+ ],
+ stateData: [
+ {
+ testHeading: "Indeterminate",
+ isIndeterminate: true,
+ }
+ ]
+});
diff --git a/components/infieldprogresscircle/stories/template.js b/components/infieldprogresscircle/stories/template.js
new file mode 100644
index 00000000000..7f8fc1f8de1
--- /dev/null
+++ b/components/infieldprogresscircle/stories/template.js
@@ -0,0 +1,21 @@
+import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
+import { capitalize } from "lodash-es";
+import "../index.css";
+
+export const Template = ({
+ customClasses = [],
+ rootClass = "spectrum-InfieldProgressCircle",
+ size = "m",
+ staticColor,
+ ...item
+} = {}, context = {}) => ProgressCircle({
+ customClasses: [
+ rootClass,
+ typeof size !== "undefined" ? `${rootClass}--size${size.toUpperCase()}` : null,
+ typeof staticColor !== "undefined" ? `${rootClass}--static${capitalize(staticColor)}` : null,
+ ...customClasses
+ ].filter(Boolean),
+ size,
+ staticColor,
+ ...item
+}, context );
diff --git a/components/inlinealert/CHANGELOG.md b/components/inlinealert/CHANGELOG.md
index 0917d027041..274f7932438 100644
--- a/components/inlinealert/CHANGELOG.md
+++ b/components/inlinealert/CHANGELOG.md
@@ -1,5 +1,13 @@
# Change log
+## 11.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+ - @spectrum-css/button@15.0.0-next.0
+
## 10.1.0
### Minor Changes
diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index 935c89f08a3..bd5894d28c9 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -98,7 +98,6 @@
"--spectrum-spacing-400",
"--spectrum-workflow-icon-size-100"
],
- "system-theme": [],
"passthroughs": [],
"high-contrast": [
"--highcontrast-inlinealert-background-color",
diff --git a/components/inlinealert/package.json b/components/inlinealert/package.json
index c1e06dbf222..f6cc54475c0 100644
--- a/components/inlinealert/package.json
+++ b/components/inlinealert/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/inlinealert",
- "version": "10.1.0",
+ "version": "11.0.0-next.0",
"description": "The Spectrum CSS in-line alert component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,8 +25,8 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/button": ">=14.0.0 <15.0.0",
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
+ "@spectrum-css/button": ">=15.0.0-next.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -41,8 +41,8 @@
}
},
"devDependencies": {
- "@spectrum-css/button": "14.1.3",
- "@spectrum-css/icon": "9.1.0",
+ "@spectrum-css/button": "15.0.0-next.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/link/CHANGELOG.md b/components/link/CHANGELOG.md
index 82f09e93090..3f4feed99b5 100644
--- a/components/link/CHANGELOG.md
+++ b/components/link/CHANGELOG.md
@@ -1,5 +1,39 @@
# Change log
+## 8.0.0-next.0
+
+### Major Changes
+
+- [#3570](https://github.com/adobe/spectrum-css/pull/3570) [`c88fcdc`](https://github.com/adobe/spectrum-css/commit/c88fcdcfa4866f4b3ff7a1027e4253b8f2114351) Thanks [@aramos-adobe](https://github.com/aramos-adobe)!
+
+#### Link S2 migration
+
+ The link component is updated with S2 specifications, colors, and typography. There is a new inline variant which uses the `.spectrum-Link--inline` modifier class and the default is the standalone variant.
+
+ ##### Note
+
+ - Quiet styling does not apply to the inline variant so that it is distinguishable from the surrounding text and the underline indicator is clear
+ - `--mod-spectrum-link-font-weight` can be used to adjust inline variant to match surrounding text. Apply font weights to this mod `inherit` does not apply.
+
+ #### New tokens
+
+ ##### Color
+
+ `spectrum-link-focus-indicator-color`
+ `spectrum-link-focus-indicator-thickness`
+ `spectrum-link-focus-indicator-gap`
+ `spectrum-link-corner-radius`
+
+ ##### Typography
+
+ `spectrum-link-line-height`
+ `spectrum-link-line-height-cjk-100`
+ `spectrum-link-font-size`
+ `spectrum-link-font-style`
+ `spectrum-link-font-weight`
+ `spectrum-link-text-underline-thickness`
+ `spectrum-link-text-underline-gap`
+
## 7.1.0
### Minor Changes
diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json
index 9befaceefc4..5bebb76f6d0 100644
--- a/components/link/dist/metadata.json
+++ b/components/link/dist/metadata.json
@@ -2,6 +2,7 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-Link",
+ ".spectrum-Link--inline",
".spectrum-Link--quiet",
".spectrum-Link--quiet:hover",
".spectrum-Link--secondary",
@@ -9,26 +10,41 @@
".spectrum-Link--staticWhite",
".spectrum-Link:active",
".spectrum-Link:focus-visible",
- ".spectrum-Link:hover"
+ ".spectrum-Link:hover",
+ ".spectrum-Link:lang(ja)",
+ ".spectrum-Link:lang(ko)",
+ ".spectrum-Link:lang(zh)"
],
"modifiers": [
"--mod-link-animation-duration",
+ "--mod-link-inline-font-weight",
+ "--mod-link-line-height-cjk",
"--mod-link-text-color",
"--mod-link-text-color-active",
"--mod-link-text-color-black",
"--mod-link-text-color-focus",
"--mod-link-text-color-hover",
- "--mod-link-text-color-primary-active",
- "--mod-link-text-color-primary-default",
- "--mod-link-text-color-primary-focus",
- "--mod-link-text-color-primary-hover",
"--mod-link-text-color-secondary-active",
"--mod-link-text-color-secondary-default",
"--mod-link-text-color-secondary-focus",
"--mod-link-text-color-secondary-hover",
"--mod-link-text-color-white"
],
- "component": [],
+ "component": [
+ "--spectrum-link-corner-radius",
+ "--spectrum-link-default-font-family",
+ "--spectrum-link-focus-indicator-color",
+ "--spectrum-link-focus-indicator-gap",
+ "--spectrum-link-focus-indicator-thickness",
+ "--spectrum-link-font-size",
+ "--spectrum-link-font-style",
+ "--spectrum-link-font-weight",
+ "--spectrum-link-inline-font-weight",
+ "--spectrum-link-line-height",
+ "--spectrum-link-line-height-cjk",
+ "--spectrum-link-text-underline-gap",
+ "--spectrum-link-text-underline-thickness"
+ ],
"global": [
"--spectrum-accent-content-color-default",
"--spectrum-accent-content-color-down",
@@ -36,13 +52,28 @@
"--spectrum-accent-content-color-key-focus",
"--spectrum-animation-duration-100",
"--spectrum-black",
+ "--spectrum-cjk-line-height-100",
+ "--spectrum-corner-radius-100",
+ "--spectrum-default-font-style",
+ "--spectrum-focus-indicator-color",
+ "--spectrum-focus-indicator-gap",
+ "--spectrum-focus-indicator-thickness",
+ "--spectrum-font-size-100",
+ "--spectrum-line-height-100",
+ "--spectrum-medium-font-weight",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
"--spectrum-neutral-content-color-hover",
"--spectrum-neutral-content-color-key-focus",
+ "--spectrum-regular-font-weight",
+ "--spectrum-sans-font-family-stack",
+ "--spectrum-text-underline-gap",
+ "--spectrum-text-underline-thickness",
"--spectrum-white"
],
- "system-theme": [],
"passthroughs": [],
- "high-contrast": ["--highcontrast-link-text-color"]
+ "high-contrast": [
+ "--highcontrast-link-focus-indicator-color",
+ "--highcontrast-link-text-color"
+ ]
}
diff --git a/components/link/index.css b/components/link/index.css
index 97a5f291228..0cd89349e43 100644
--- a/components/link/index.css
+++ b/components/link/index.css
@@ -11,21 +11,28 @@
* governing permissions and limitations under the License.
*/
-/* Windows high contrast mode */
-@media (forced-colors: active) {
- .spectrum-Link {
- --highcontrast-link-text-color: LinkText;
- }
-}
+.spectrum-Link {
+ /* Focus state */
+ --spectrum-link-focus-indicator-color: var(--spectrum-focus-indicator-color);
+ --spectrum-link-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+ --spectrum-link-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+ --spectrum-link-corner-radius: var(--spectrum-corner-radius-100);
-.spectrum-Link--secondary {
- --mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default));
- --mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover));
- --mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down));
- --mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus));
-}
+ /* Typography */
+ --spectrum-link-default-font-family: var(--spectrum-sans-font-family-stack);
+
+ /* Standalone */
+ --spectrum-link-line-height: var(--spectrum-line-height-100);
+ --spectrum-link-line-height-cjk: var(--spectrum-cjk-line-height-100);
+ --spectrum-link-font-size: var(--spectrum-font-size-100);
+ --spectrum-link-font-style: var(--spectrum-default-font-style);
+ --spectrum-link-font-weight: var(--spectrum-medium-font-weight);
+ --spectrum-link-text-underline-thickness: var(--spectrum-text-underline-thickness);
+ --spectrum-link-text-underline-gap: var(--spectrum-text-underline-gap);
+
+ /* Inline */
+ --spectrum-link-inline-font-weight: var(--spectrum-regular-font-weight);
-.spectrum-Link {
/* Remove the gray background on active links in IE 10. */
background-color: transparent;
@@ -36,29 +43,45 @@
outline: none;
cursor: pointer;
- /* @deprecated --mod-link-text-color-primary-default in favor of --mod-link-text-color */
- color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default))));
+ color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--spectrum-accent-content-color-default)));
+ font-family: var(--spectrum-link-default-font-family);
+ font-weight: var(--spectrum-link-font-weight);
+ font-size: var(--spectrum-link-font-size);
+ font-style: var(--spectrum-link-font-style);
+ line-height: var(--spectrum-link-line-height);
+ text-decoration-thickness: var(--spectrum-link-text-underline-thickness);
+ text-underline-offset: var(--spectrum-link-text-underline-gap);
&:hover {
- /* @deprecated --mod-link-text-color-primary-hover in favor of --mod-link-text-color-hover */
- --mod-link-text-color: var(--mod-link-text-color-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-accent-content-color-hover)));
+ --mod-link-text-color: var(--mod-link-text-color-hover, var(--spectrum-accent-content-color-hover));
}
&:active {
- /* @deprecated --mod-link-text-color-primary-active in favor of --mod-link-text-color-active */
- --mod-link-text-color: var(--mod-link-text-color-active, var(--mod-link-text-color-primary-active, var(--spectrum-accent-content-color-down)));
+ --mod-link-text-color: var(--mod-link-text-color-active, var(--spectrum-accent-content-color-down));
}
&:focus-visible {
- /* @deprecated --mod-link-text-color-primary-focus in favor of --mod-link-text-color-focus */
- --mod-link-text-color: var(--mod-link-text-color-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-accent-content-color-key-focus)));
+ --mod-link-text-color: var(--mod-link-text-color-focus, var(--spectrum-accent-content-color-key-focus));
- text-decoration: underline;
- text-decoration-style: double;
- text-decoration-color: inherit;
+ outline: var(--spectrum-link-focus-indicator-thickness) solid var(--highcontrast-link-focus-indicator-color, var(--spectrum-link-focus-indicator-color));
+ padding: var(--spectrum-link-focus-indicator-gap);
+ border-radius: var(--spectrum-link-corner-radius);
+ }
+
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ line-height: var(--mod-link-line-height-cjk, var(--spectrum-link-line-height-cjk));
}
}
+.spectrum-Link--secondary {
+ --mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default));
+ --mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover));
+ --mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down));
+ --mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus));
+}
+
.spectrum-Link--quiet {
text-decoration: none;
@@ -67,6 +90,10 @@
}
}
+.spectrum-Link--inline {
+ --spectrum-link-font-weight: var(--mod-link-inline-font-weight, var(--spectrum-link-inline-font-weight));
+}
+
.spectrum-Link--staticWhite {
--mod-link-text-color: var(--mod-link-text-color-white, var(--spectrum-white));
--mod-link-text-color-hover: var(--mod-link-text-color-white, var(--spectrum-white));
@@ -80,3 +107,11 @@
--mod-link-text-color-active: var(--mod-link-text-color-black, var(--spectrum-black));
--mod-link-text-color-focus: var(--mod-link-text-color-black, var(--spectrum-black));
}
+
+/* Windows high contrast mode */
+@media (forced-colors: active) {
+ .spectrum-Link {
+ --highcontrast-link-text-color: LinkText;
+ --highcontrast-link-focus-indicator-color: LinkText;
+ }
+}
diff --git a/components/link/package.json b/components/link/package.json
index 36e977af7d1..dc42e02731e 100644
--- a/components/link/package.json
+++ b/components/link/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/link",
- "version": "7.1.0",
+ "version": "8.0.0-next.0",
"description": "The Spectrum CSS link component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/tokens": ">=16.0.1"
+ "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
"@spectrum-css/tokens": {
diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js
index 53c71bfacb2..bdb276051ce 100644
--- a/components/link/stories/link.stories.js
+++ b/components/link/stories/link.stories.js
@@ -3,7 +3,7 @@ import { isActive, isFocused, isHovered, isQuiet, staticColor } from "@spectrum-
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
import { LinkGroup } from "./link.test.js";
-import { TemplateWithFillerText } from "./template.js";
+import { LinkGroupText, MultilineText, TemplateWithFillerText } from "./template.js";
/**
* A link allows users to navigate to a different location. They can be presented in-line inside a paragraph or as standalone text.
@@ -54,8 +54,20 @@ export default {
},
control: "boolean",
},
+ isInline: {
+ name: "Inline",
+ type: { name: "boolean" },
+ table: {
+ type: { summary: "boolean" },
+ category: "Component",
+ },
+ control: "boolean",
+ },
staticColor,
- isQuiet,
+ isQuiet: {
+ ...isQuiet,
+ if: { arg: "isInline", neq: true },
+ },
},
args: {
rootClass: "spectrum-Link",
@@ -65,6 +77,7 @@ export default {
isActive: false,
isFocused: false,
isVisited: false,
+ isInline: false,
},
parameters: {
actions: {
@@ -76,7 +89,7 @@ export default {
},
packageJson,
metadata,
- },
+ }
};
export const Default = LinkGroup.bind({});
@@ -88,106 +101,83 @@ Default.tags = ["!autodocs"];
// ********* DOCS ONLY ********* //
/**
- * The primary link is the default variant and is blue. This should be used to call attention to the link and for when the blue color won’t feel too overwhelming in the experience.
+ * The standalone link is the default variant with the primary style which appears blue. This should be used to call attention to the link and for when the blue color won’t feel too overwhelming in the experience.
+ * All links can have a quiet style, without an underline. This style should only be used when the placement and context of the link is explicit enough that a visible underline isn’t necessary.
*/
-export const Primary = TemplateWithFillerText.bind({});
-Primary.args = {
- ...Default.args,
- text: "link using spectrum-Link"
-};
+export const Primary = LinkGroupText.bind({});
+Primary.args = {};
Primary.tags = ["!dev"];
Primary.parameters = {
chromatic: { disableSnapshot: true },
};
+Primary.storyName = "Standalone, primary";
/**
* The secondary variant is the same gray color as the paragraph text. Its subdued appearance is optimal for when the primary variant is too overwhelming, such as in blocks of text with several references linked throughout.
+ * Link is using the class `spectrum-Link--secondary`.
*/
-export const Secondary = TemplateWithFillerText.bind({});
+export const Secondary = LinkGroupText.bind({});
Secondary.args = {
variant: "secondary",
- text: "link using spectrum-Link--secondary",
};
Secondary.parameters = {
chromatic: { disableSnapshot: true },
};
Secondary.tags = ["!dev"];
-
-/**
- * All links can have a quiet style, without an underline. This style should only be used when the placement and context of the link is explicit enough that a visible underline isn’t necessary.
- */
-export const QuietPrimary = TemplateWithFillerText.bind({});
-QuietPrimary.storyName = "Primary (quiet)";
-QuietPrimary.args = {
- isQuiet: true,
- text: "link using spectrum-Link--quiet",
-};
-QuietPrimary.parameters = {
- chromatic: { disableSnapshot: true },
-};
-QuietPrimary.tags = ["!dev"];
-
-export const QuietSecondary = TemplateWithFillerText.bind({});
-QuietSecondary.storyName = "Secondary (quiet)";
-QuietSecondary.args = {
- isQuiet: true,
- variant: "secondary",
- text: "link using spectrum-Link--quiet and spectrum-Link--secondary",
-};
-QuietSecondary.parameters = {
- chromatic: { disableSnapshot: true },
-};
-QuietSecondary.tags = ["!dev"];
+Secondary.storyName = "Standalone, secondary";
/**
* Use static white on dark color or image backgrounds, regardless of color theme. Make sure that the background and the link color meet the minimum color contrast ratio.
+ * Link is using the class `spectrum-Link--staticWhite`.
*/
-export const StaticWhite = Default.bind({});
+export const StaticWhite = LinkGroupText.bind({});
StaticWhite.storyName = "Static white";
StaticWhite.args = {
staticColor: "white",
- text: "Link using spectrum-Link--staticWhite",
};
StaticWhite.tags = ["!dev"];
StaticWhite.parameters = {
chromatic: { disableSnapshot: true },
};
+StaticWhite.storyName = "Standalone, static white";
/**
* Use static black on light color or image backgrounds, regardless of color theme. Make sure that the background and the link color meet the minimum color contrast ratio.
+ * Link using is the class `spectrum-Link--staticBlack`.
*/
-export const StaticBlack = Default.bind({});
+export const StaticBlack = LinkGroupText.bind({});
StaticBlack.storyName = "Static black";
StaticBlack.args = {
staticColor: "black",
- text: "Link using spectrum-Link--staticBlack",
};
StaticBlack.tags = ["!dev"];
StaticBlack.parameters = {
chromatic: { disableSnapshot: true },
};
+StaticBlack.storyName = "Standalone, static black";
-export const QuietStaticWhite = Default.bind({});
-QuietStaticWhite.storyName = "Static white (quiet)";
-QuietStaticWhite.args = {
- isQuiet: true,
- staticColor: "white",
- text: "Link using spectrum-Link--staticWhite and spectrum-Link--quiet",
-};
-QuietStaticWhite.tags = ["!dev"];
-QuietStaticWhite.parameters = {
+/**
+ * The focus ring wraps when the link component breaks on multiple rows.
+ */
+export const Multiline = MultilineText.bind({});
+Multiline.args = {};
+Multiline.tags = ["!dev"];
+Multiline.parameters = {
chromatic: { disableSnapshot: true },
};
+Multiline.storyName = "Multiline, focused";
-export const QuietStaticBlack = Default.bind({});
-QuietStaticBlack.storyName = "Static black (quiet)";
-QuietStaticBlack.args = {
- isQuiet: true,
- staticColor: "black",
- text: "Link using spectrum-Link--staticBlack and spectrum-Link--quiet",
+/**
+ * Inline links are used within a paragraph of text. They are styled differently from standalone links in which the font weight is lighter and can be adjusted to match the paragraph text.
+ * Inline links do not have a quiet variant style so that it is distinguishable from the surrounding text and the underline indicator is clear.
+ */
+export const Inline = TemplateWithFillerText.bind({});
+Inline.args = {
+ isInline: true,
+ text: "Inline link",
};
-QuietStaticBlack.tags = ["!dev"];
-QuietStaticBlack.parameters = {
+Inline.tags = ["!dev"];
+Inline.parameters = {
chromatic: { disableSnapshot: true },
};
diff --git a/components/link/stories/link.test.js b/components/link/stories/link.test.js
index 04b33e7abe7..3fdfa9576fe 100644
--- a/components/link/stories/link.test.js
+++ b/components/link/stories/link.test.js
@@ -11,6 +11,15 @@ export const LinkGroup = Variants({
testHeading: "Secondary",
variant: "secondary",
},
+ {
+ testHeading: "Inline",
+ isInline: true,
+ },
+ {
+ testHeading: "Inline - secondary",
+ isInline: true,
+ variant: "secondary",
+ },
{
testHeading: "Quiet",
isQuiet: true,
@@ -47,7 +56,7 @@ export const LinkGroup = Variants({
testHeading: "Static white - quiet",
staticColor: "white",
isQuiet: true,
- },
+ }
],
stateData: [
{
diff --git a/components/link/stories/template.js b/components/link/stories/template.js
index a4faba05967..798f0da7323 100644
--- a/components/link/stories/template.js
+++ b/components/link/stories/template.js
@@ -1,4 +1,4 @@
-import { getRandomId } 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";
@@ -17,6 +17,7 @@ export const Template = ({
isActive = false,
isFocused = false,
isVisited = false,
+ isInline = false,
id = getRandomId("link"),
customClasses = [],
} = {}) => {
@@ -25,6 +26,7 @@ export const Template = ({
class=${classMap({
[rootClass]: true,
[`${rootClass}--quiet`]: isQuiet,
+ [`${rootClass}--inline`]: isInline,
[`${rootClass}--${variant}`]: typeof variant !== "undefined",
[`${rootClass}--static${capitalize(staticColor)}`]:
typeof staticColor !== "undefined",
@@ -43,9 +45,48 @@ export const Template = ({
};
export const TemplateWithFillerText = (args, context) => html`
-
+
Hello, this is a
${Template(args, context)}
. This is just filler text, but if you keep reading maybe something good will happen.
-
+ I like focus styles. They are very important for accessibility. They help users know where they are on the page.
+ ${Template({
+ ...args,
+ text: "This is a link that spans multiple lines",
+ isFocused: true,
+ isInline: true,
+ }, context)}
+ They are also very pretty.
+
+`;
+
+export const LinkGroupText = (args, context) => Container({
+ withBorder: false,
+ direction: "row",
+ content: [
+ Container({
+ withBorder: false,
+ direction: "column",
+ heading: "Default",
+ content: Template({
+ ...args,
+ text: "Learn more",
+ }, context)
+ }, context),
+ Container({
+ withBorder: false,
+ direction: "column",
+ heading: "Quiet",
+ content: Template({
+ ...args,
+ text: "Learn more",
+ isQuiet: true,
+ }, context)
+ }, context)
+ ],
+}, context);
diff --git a/components/logicbutton/dist/metadata.json b/components/logicbutton/dist/metadata.json
index 6adfbf58b24..195d8c87082 100644
--- a/components/logicbutton/dist/metadata.json
+++ b/components/logicbutton/dist/metadata.json
@@ -15,9 +15,7 @@
".spectrum-LogicButton:focus-visible:after"
],
"modifiers": [
- "--mod-animation-duration-100",
"--mod-focus-indicator-gap",
- "--mod-line-height-100",
"--mod-logic-button-and-background-color",
"--mod-logic-button-and-background-color-disabled",
"--mod-logic-button-and-background-color-hover",
@@ -46,8 +44,7 @@
"--mod-logic-button-or-border-color-hover-disabled",
"--mod-logic-button-or-text-color",
"--mod-logic-button-or-text-color-disabled",
- "--mod-logic-button-padding",
- "--mod-sans-font-family-stack"
+ "--mod-logic-button-padding"
],
"component": [
"--spectrum-logic-button-and-background-color",
@@ -88,16 +85,6 @@
"--spectrum-sans-font-family-stack",
"--spectrum-white"
],
- "system-theme": [
- "--system-logic-button-and-background-color-disabled",
- "--system-logic-button-and-background-color-hover-disabled",
- "--system-logic-button-and-border-color-disabled",
- "--system-logic-button-and-border-color-hover-disabled",
- "--system-logic-button-or-background-color-disabled",
- "--system-logic-button-or-background-color-hover-disabled",
- "--system-logic-button-or-border-color-disabled",
- "--system-logic-button-or-border-color-hover-disabled"
- ],
"passthroughs": [
"--mod-button-animation-duration",
"--mod-button-focus-indicator-gap",
diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css
index 4429907705b..8e1c2658fbf 100644
--- a/components/logicbutton/index.css
+++ b/components/logicbutton/index.css
@@ -12,9 +12,18 @@
*/
@import "@spectrum-css/commons/basebutton.css";
-@import "./themes/spectrum-two.css";
.spectrum-LogicButton {
+ --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-100);
+ --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100);
+ --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-background-color-hover-disabled: var(--spectrum-gray-100);
+ --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-100);
+
--spectrum-logic-button-border-radius: var(--spectrum-corner-radius-100);
--spectrum-logic-button-and-text-color: var(--spectrum-white);
diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json
index 5e2ea7ecab3..74fccd39c5d 100644
--- a/components/logicbutton/package.json
+++ b/components/logicbutton/package.json
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/tokens": ">=16.0.1"
+ "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
"@spectrum-css/tokens": {
diff --git a/components/logicbutton/stories/template.js b/components/logicbutton/stories/template.js
index 5b0730616ef..02f5b3aa028 100644
--- a/components/logicbutton/stories/template.js
+++ b/components/logicbutton/stories/template.js
@@ -2,9 +2,6 @@ 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",
diff --git a/components/logicbutton/themes/express.css b/components/logicbutton/themes/express.css
deleted file mode 100644
index 9fd550418f2..00000000000
--- a/components/logicbutton/themes/express.css
+++ /dev/null
@@ -1,16 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
diff --git a/components/logicbutton/themes/spectrum-two.css b/components/logicbutton/themes/spectrum-two.css
deleted file mode 100644
index c0bd0d1b3fb..00000000000
--- a/components/logicbutton/themes/spectrum-two.css
+++ /dev/null
@@ -1,26 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-LogicButton {
- --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-100);
- --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100);
- --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-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
deleted file mode 100644
index 4aa43a01048..00000000000
--- a/components/logicbutton/themes/spectrum.css
+++ /dev/null
@@ -1,30 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-LogicButton {
- --spectrum-logic-button-and-background-color-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 45b0fc0ac47..60a328b3f84 100644
--- a/components/menu/CHANGELOG.md
+++ b/components/menu/CHANGELOG.md
@@ -1,10 +1,20 @@
# Change log
-## 9.2.0
+## 10.0.0-next.1
-### Minor Changes
+### Patch Changes
+
+- Updated dependencies [[`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914)]:
+ - @spectrum-css/divider@6.0.0-next.0
+
+## 10.0.0-next.0
+
+### Patch Changes
-- [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! - By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the `.js-focus-within` and '[focus-within]` selectors for the focus-within polyfill. As this feature is not used in the SWC consumption, risk to the end user for this removal is low.
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+ - @spectrum-css/checkbox@11.0.0-next.0
+ - @spectrum-css/tray@6.0.0-next.0
## 10.0.0
@@ -12,7 +22,7 @@
📝 [`205182b`](https://github.com/adobe/spectrum-css/commit/205182bebcbe82813457aa098d8799b0a23423ee) Thanks [@castastrophe](https://github.com/castastrophe)!
-## New feature
+### New feature
Minified and gzipped outputs available for all compiled CSS assets.
@@ -32,6 +42,14 @@ Minified and gzipped outputs available for all compiled CSS assets.
- @spectrum-css/tray@6.0.0
- @spectrum-css/tokens@16.0.1
+## 9.2.0
+
+### Minor Changes
+
+📝 [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the `.js-focus-within` and '[focus-within]` selectors for the focus-within polyfill. As this feature is not used in the SWC consumption, risk to the end user for this removal is low.
+
## 9.1.1
### Patch Changes
diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json
index 5142e09aa66..3b4f63996b8 100644
--- a/components/menu/dist/metadata.json
+++ b/components/menu/dist/metadata.json
@@ -378,16 +378,6 @@
"--spectrum-workflow-icon-size-300",
"--spectrum-workflow-icon-size-75"
],
- "system-theme": [
- "--system-menu-item-background-color-down",
- "--system-menu-item-background-color-hover",
- "--system-menu-item-background-color-key-focus",
- "--system-menu-item-corner-radius",
- "--system-menu-item-focus-indicator-offset",
- "--system-menu-item-focus-indicator-outline-style",
- "--system-menu-item-focus-indicator-shadow",
- "--system-menu-item-spacing-multiplier"
- ],
"passthroughs": [
"--mod-checkbox-text-to-control",
"--mod-checkbox-top-to-text",
diff --git a/components/menu/index.css b/components/menu/index.css
index 3d48ce76499..c6519dd47d6 100644
--- a/components/menu/index.css
+++ b/components/menu/index.css
@@ -11,8 +11,6 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
@media (forced-colors: active) {
.spectrum-Menu {
--highcontrast-menu-item-background-color-default: ButtonFace;
@@ -81,6 +79,18 @@
}
.spectrum-Menu {
+ --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+ --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+ --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+
+ --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100);
+
+ /* Focus state styling */
+ --spectrum-menu-item-focus-indicator-shadow: none;
+ --spectrum-menu-item-focus-indicator-offset: var(--spectrum-spacing-50);
+ --spectrum-menu-item-spacing-multiplier: 1;
+ --spectrum-menu-item-focus-indicator-outline-style: solid;
+
--spectrum-menu-item-top-to-action: var(--spectrum-spacing-50);
--spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50);
@@ -415,8 +425,10 @@
grid-template-rows: 1fr auto;
.spectrum-Menu-itemCheckbox {
+ /* @passthrough start */
--mod-checkbox-top-to-text: 0;
--mod-checkbox-text-to-control: 0;
+ /* @passthrough end */
min-block-size: 0;
diff --git a/components/menu/package.json b/components/menu/package.json
index d93b56a6ad5..fd3dba7b72c 100644
--- a/components/menu/package.json
+++ b/components/menu/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/menu",
- "version": "9.2.0",
+ "version": "10.0.0-next.1",
"description": "The Spectrum CSS menu component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,12 +25,12 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/checkbox": ">=10.0.0 <11.0.0",
- "@spectrum-css/divider": ">=5.0.0 <6.0.0",
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
+ "@spectrum-css/checkbox": ">=11.0.0-next.0",
+ "@spectrum-css/divider": ">=6.0.0-next.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
"@spectrum-css/switch": ">=6.0.0 <7.0.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0",
- "@spectrum-css/tray": ">=5.0.0 <6.0.0"
+ "@spectrum-css/tray": ">=6.0.0-next.0"
},
"peerDependenciesMeta": {
"@spectrum-css/checkbox": {
@@ -53,12 +53,12 @@
}
},
"devDependencies": {
- "@spectrum-css/checkbox": "10.1.2",
- "@spectrum-css/divider": "5.1.0",
- "@spectrum-css/icon": "9.1.0",
+ "@spectrum-css/checkbox": "11.0.0-next.0",
+ "@spectrum-css/divider": "6.0.0-next.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
"@spectrum-css/switch": "6.1.0",
"@spectrum-css/tokens": "16.0.1",
- "@spectrum-css/tray": "5.1.0"
+ "@spectrum-css/tray": "6.0.0-next.2"
},
"keywords": [
"design-system",
diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js
index c50482cb696..98b765fc520 100644
--- a/components/menu/stories/template.js
+++ b/components/menu/stories/template.js
@@ -13,25 +13,6 @@ 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";
-
-/**
- * Get the tray submenu back arrow name with scale number (defined in design spec).
- */
-const iconWithScale = (size = "m", iconName = "ArrowLeft") => {
- switch (size) {
- case "s":
- return `${iconName}200`;
- case "l":
- return `${iconName}400`;
- case "xl":
- return `${iconName}500`;
- default:
- return `${iconName}300`;
- }
-};
export const MenuItem = (
{
@@ -87,10 +68,7 @@ export const MenuItem = (
${when(isCollapsible || (selectionMode == "single" && isSelected), () =>
Icon(
{
- iconName: iconWithScale(
- size,
- isCollapsible ? "ChevronRight" : "Checkmark",
- ),
+ iconName: isCollapsible ? "ChevronRight" : "Checkmark",
setName: "ui",
useRef: false,
size,
@@ -199,7 +177,7 @@ export const MenuItem = (
${when(isDrillIn, () =>
Icon(
{
- iconName: iconWithScale(size, "ChevronRight"),
+ iconName: "ChevronRight",
setName: "ui",
useRef: false,
size,
@@ -269,7 +247,12 @@ export const MenuGroup = (
>
${Icon(
{
- iconName: iconWithScale(size),
+ iconName: "ArrowRight" + ({
+ s: "100",
+ m: "100",
+ l: "400",
+ xl: "400",
+ }[size] || "100"),
setName: "ui",
size,
customClasses: ["spectrum-Menu-backIcon"],
@@ -476,7 +459,7 @@ export const DisabledItemGroup = (args, context) => {
context,
shouldTruncate: group.shouldTruncate || false,
items: group.items,
- })}
+ }, context)}
`
}, context)}
`)
@@ -585,11 +568,11 @@ export const OverflowGroup = (args, context) => {
context,
shouldTruncate: group.shouldTruncate || false,
items: group.items,
- })}
+ }, context)}
`
- })}
+ }, context)}
`)
- });
+ }, context);
};
export const SelectionGroup = (args, context) => {
@@ -703,12 +686,12 @@ export const SelectionGroup = (args, context) => {
selectionMode: group.selectionMode || "none",
hasActions: group.hasActions || false,
items: group.items,
- })
+ }, context)
}, context))
});
};
-export const SubmenuInPopover = (context) => Popover({
+export const SubmenuInPopover = (args, context) => Popover({
isOpen: true,
position: "end-top",
customStyles: {
@@ -720,7 +703,8 @@ export const SubmenuInPopover = (context) => Popover({
...args,
}, context),
content: [
- (args, context) => Template({
+ Template({
+ ...args,
items: [
{
label: "Language",
@@ -735,9 +719,8 @@ export const SubmenuInPopover = (context) => Popover({
label: "Show grid",
}
],
- ...args
}, context),
- (args, context) => Popover({
+ Popover({
isOpen: true,
position: "end-top",
customStyles: {
@@ -745,7 +728,8 @@ export const SubmenuInPopover = (context) => Popover({
"inline-size": "120px",
},
content: [
- (args, context) => Template({
+ Template({
+ ...args,
selectionMode: "single",
items: [
{
@@ -768,10 +752,8 @@ export const SubmenuInPopover = (context) => Popover({
label: "日本語",
}
],
- ...args,
}, context)
],
- ...args,
}, context)
],
}, context);
diff --git a/components/menu/themes/express.css b/components/menu/themes/express.css
deleted file mode 100644
index 9fd550418f2..00000000000
--- a/components/menu/themes/express.css
+++ /dev/null
@@ -1,16 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
diff --git a/components/menu/themes/spectrum-two.css b/components/menu/themes/spectrum-two.css
deleted file mode 100644
index 11951a42550..00000000000
--- a/components/menu/themes/spectrum-two.css
+++ /dev/null
@@ -1,28 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-Menu {
- --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
- --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
- --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
-
- --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100);
-
- /* Focus state styling */
- --spectrum-menu-item-focus-indicator-shadow: none;
- --spectrum-menu-item-focus-indicator-offset: var(--spectrum-spacing-50);
- --spectrum-menu-item-spacing-multiplier: 1;
- --spectrum-menu-item-focus-indicator-outline-style: solid;
- }
-}
diff --git a/components/menu/themes/spectrum.css b/components/menu/themes/spectrum.css
deleted file mode 100644
index 0836ce0774f..00000000000
--- a/components/menu/themes/spectrum.css
+++ /dev/null
@@ -1,32 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-Menu {
- --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
- --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
- --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
-
- --spectrum-menu-item-corner-radius: 0;
-
- /* Focus state styling */
- --spectrum-menu-item-focus-indicator-shadow: inset;
- --spectrum-menu-item-focus-indicator-offset: 0;
- --spectrum-menu-item-spacing-multiplier: 0;
- --spectrum-menu-item-focus-indicator-outline-style: none;
- }
-}
diff --git a/components/meter/CHANGELOG.md b/components/meter/CHANGELOG.md
index 312da9fb01b..b394a2aff6d 100644
--- a/components/meter/CHANGELOG.md
+++ b/components/meter/CHANGELOG.md
@@ -1,5 +1,12 @@
# Change Log
+## 2.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies []:
+ - @spectrum-css/progressbar@7.0.0-next.0
+
## 1.1.0
### Minor Changes
diff --git a/components/meter/dist/metadata.json b/components/meter/dist/metadata.json
index 9bfe3424ce7..12d5893d69d 100644
--- a/components/meter/dist/metadata.json
+++ b/components/meter/dist/metadata.json
@@ -5,8 +5,7 @@
".spectrum-Meter.is-negative",
".spectrum-Meter.is-notice",
".spectrum-Meter.is-positive",
- ".spectrum-Meter.spectrum-Meter--sizeL",
- ".spectrum-Meter.spectrum-Meter--sizeS"
+ ".spectrum-Meter.spectrum-Meter--sizeL"
],
"modifiers": [
"--mod-meter-inline-size",
@@ -27,9 +26,9 @@
"--spectrum-font-size-75",
"--spectrum-negative-visual-color",
"--spectrum-notice-visual-color",
- "--spectrum-positive-visual-color"
+ "--spectrum-positive-visual-color",
+ "--spectrum-progressbar-size-2500"
],
- "system-theme": [],
"passthroughs": [
"--mod-progressbar-fill-color",
"--mod-progressbar-font-size",
diff --git a/components/meter/index.css b/components/meter/index.css
index b51a393aa73..2db081b1e9d 100644
--- a/components/meter/index.css
+++ b/components/meter/index.css
@@ -17,14 +17,12 @@
--mod-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-maximum-width));
--mod-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-minimum-width));
- &,
- &.spectrum-Meter--sizeS {
- --mod-progressbar-thickness: var(--spectrum-meter-thickness-small);
- --mod-progressbar-font-size: var(--spectrum-font-size-75);
- --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
- }
+ --mod-progressbar-thickness: var(--spectrum-meter-thickness-small);
+ --mod-progressbar-font-size: var(--spectrum-font-size-75);
+ --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
&.spectrum-Meter--sizeL {
+ --mod-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-progressbar-size-2500));
--mod-progressbar-thickness: var(--spectrum-meter-thickness-large);
--mod-progressbar-font-size: var(--spectrum-font-size-100);
--mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
diff --git a/components/meter/package.json b/components/meter/package.json
index a99280d1626..eed64636b35 100644
--- a/components/meter/package.json
+++ b/components/meter/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/meter",
- "version": "1.1.0",
+ "version": "2.0.0-next.0",
"description": "The Spectrum CSS meter component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/progressbar": ">=6.0.0 <7.0.0",
+ "@spectrum-css/progressbar": ">=7.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -37,7 +37,7 @@
}
},
"devDependencies": {
- "@spectrum-css/progressbar": "6.1.0",
+ "@spectrum-css/progressbar": "7.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/meter/stories/meter.stories.js b/components/meter/stories/meter.stories.js
index 15603bc9d7c..cbb31433a4b 100644
--- a/components/meter/stories/meter.stories.js
+++ b/components/meter/stories/meter.stories.js
@@ -48,6 +48,7 @@ export default {
packageJson,
metadata,
},
+ tags: ["migrated"],
};
/**
diff --git a/components/miller/CHANGELOG.md b/components/miller/CHANGELOG.md
index 2e843968bc0..7900d37ed8a 100644
--- a/components/miller/CHANGELOG.md
+++ b/components/miller/CHANGELOG.md
@@ -1,5 +1,14 @@
# Change log
+## 9.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+ - @spectrum-css/assetlist@9.0.0-next.0
+ - @spectrum-css/checkbox@11.0.0-next.0
+
## 8.1.0
### Minor Changes
@@ -201,6 +210,7 @@ Output for all component CSS files is now being run through a lightweight optimi
### 🛑 BREAKING CHANGE
- Removes component-builder & component-builder-simple for script leveraging postcss
+
- Imports added to index.css and themes/express.css
## 5.1.4
diff --git a/components/miller/dist/metadata.json b/components/miller/dist/metadata.json
index adb2109144c..fbb3770d558 100644
--- a/components/miller/dist/metadata.json
+++ b/components/miller/dist/metadata.json
@@ -13,7 +13,6 @@
],
"component": [],
"global": ["--spectrum-spacing-100"],
- "system-theme": [],
"passthroughs": [],
"high-contrast": []
}
diff --git a/components/miller/package.json b/components/miller/package.json
index de87a481455..635cda00a2b 100644
--- a/components/miller/package.json
+++ b/components/miller/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/miller",
- "version": "8.1.0",
+ "version": "9.0.0-next.0",
"description": "The Spectrum CSS miller component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,9 +25,9 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/assetlist": ">=8.0.0 <9.0.0",
- "@spectrum-css/checkbox": ">=10.0.0 <11.0.0",
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
+ "@spectrum-css/assetlist": ">=9.0.0-next.0",
+ "@spectrum-css/checkbox": ">=11.0.0-next.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -45,9 +45,9 @@
}
},
"devDependencies": {
- "@spectrum-css/assetlist": "8.2.0",
- "@spectrum-css/checkbox": "10.1.2",
- "@spectrum-css/icon": "9.1.0",
+ "@spectrum-css/assetlist": "9.0.0-next.0",
+ "@spectrum-css/checkbox": "11.0.0-next.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/modal/CHANGELOG.md b/components/modal/CHANGELOG.md
index 4d31ed47ae8..fb3515d8050 100644
--- a/components/modal/CHANGELOG.md
+++ b/components/modal/CHANGELOG.md
@@ -1,12 +1,20 @@
# Change log
+## 7.1.1-next.0
+
+### Patch Changes
+
+📝 [#3604](https://github.com/adobe/spectrum-css/pull/3604) [`cb1b957`](https://github.com/adobe/spectrum-css/commit/cb1b957c05ecf02d3f473de09a8bfd5f2b5d42bf) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)!
+
+In Spectrum 2, elements that would typically be children of a modal (like dialogs, alert dialogs, and tray) have background-color token specs defined. Because modal _also_ had a defined background color, there was some antialiasing bleed-through happening on the corners, since both the modal and its child now had background colors on top of each other. `--spectrum-modal-background-color` is now redefined as `transparent` to avoid these conflicts in S2. `--mod-modal-background-color` is still available to consumers.
+
## 7.1.0
### Minor Changes
📝 [`205182b`](https://github.com/adobe/spectrum-css/commit/205182bebcbe82813457aa098d8799b0a23423ee) Thanks [@castastrophe](https://github.com/castastrophe)!
-## New feature
+### New feature
Minified and gzipped outputs available for all compiled CSS assets.
diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json
index 950d9fca3c6..c27c44872d7 100644
--- a/components/modal/dist/metadata.json
+++ b/components/modal/dist/metadata.json
@@ -15,24 +15,26 @@
"--mod-modal-background-color",
"--mod-modal-confirm-border-radius",
"--mod-modal-confirm-entry-animation-delay",
- "--mod-modal-confirm-entry-animation-distance",
"--mod-modal-confirm-entry-animation-duration",
"--mod-modal-confirm-exit-animation-delay",
"--mod-modal-confirm-exit-animation-duration",
"--mod-modal-fullscreen-margin",
"--mod-modal-max-height",
"--mod-modal-max-width",
- "--mod-modal-transition-animation-duration",
- "--mod-overlay-animation-duration",
- "--mod-overlay-animation-duration-opened"
+ "--mod-modal-transition-animation-duration"
],
"component": [
"--spectrum-modal-background-color",
+ "--spectrum-modal-confirm-border-radius",
"--spectrum-modal-confirm-entry-animation-delay",
"--spectrum-modal-confirm-entry-animation-duration",
"--spectrum-modal-confirm-exit-animation-delay",
"--spectrum-modal-confirm-exit-animation-duration",
- "--spectrum-modal-fullscreen-margin"
+ "--spectrum-modal-fullscreen-margin",
+ "--spectrum-modal-max-height",
+ "--spectrum-modal-max-width",
+ "--spectrum-modal-takeover-window-to-edge",
+ "--spectrum-modal-transition-animation-duration"
],
"global": [
"--spectrum-animation-duration-0",
@@ -41,12 +43,10 @@
"--spectrum-animation-duration-500",
"--spectrum-animation-ease-in",
"--spectrum-animation-ease-out",
- "--spectrum-animation-linear",
- "--spectrum-background-layer-2-color",
- "--spectrum-corner-radius-100",
- "--spectrum-dialog-confirm-entry-animation-distance"
+ "--spectrum-corner-radius-extra-large-default",
+ "--spectrum-dialog-confirm-entry-animation-distance",
+ "--spectrum-window-to-edge"
],
- "system-theme": ["--system-modal-background-color"],
"passthroughs": [],
"high-contrast": []
}
diff --git a/components/modal/index.css b/components/modal/index.css
index 8a5e2e9ad95..4dad9fccf32 100644
--- a/components/modal/index.css
+++ b/components/modal/index.css
@@ -11,20 +11,23 @@
* governing permissions and limitations under the License.
*/
-@import "@spectrum-css/commons/overlay.css";
-@import "./themes/spectrum-two.css";
-
.spectrum-Modal {
--spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500));
- /* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-modal-confirm-entry-animation-delay */
- --spectrum-modal-confirm-entry-animation-delay: var(--mod-overlay-animation-duration-opened, var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200)));
+ --spectrum-modal-confirm-entry-animation-delay: var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200));
- /* @deprecated --mod-overlay-animation-duration in favor of --mod-modal-confirm-exit-animation-duration */
- --spectrum-modal-confirm-exit-animation-duration: var(--mod-overlay-animation-duration, var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100)));
+ --spectrum-modal-confirm-exit-animation-duration: var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100));
--spectrum-modal-confirm-exit-animation-delay: var(--mod-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: var(--mod-modal-fullscreen-margin, 32px);
+ --spectrum-modal-fullscreen-margin: var(--spectrum-window-to-edge);
+ --spectrum-modal-takeover-window-to-edge: 0;
+ --spectrum-modal-max-height: 90vh;
+ --spectrum-modal-max-width: 90%;
+
+ --spectrum-modal-background-color: var(--mod-modal-background-color, transparent);
+ --spectrum-modal-confirm-border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-extra-large-default));
+
+ --spectrum-modal-transition-animation-duration: var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100));
}
/* Used to position the modal */
@@ -46,6 +49,9 @@
* We use the stretch value to counteract this where supported.
*/
block-size: 100vh;
+ /* stylelint-disable-next-line value-no-vendor-prefix */
+ block-size: -moz-available;
+ /* stylelint-disable-next-line value-no-vendor-prefix */
block-size: -webkit-fill-available;
/* autoprefixer: ignore next -- -moz-available providing inconsistent results; want to fall FF back to 100vh */
@@ -60,7 +66,7 @@
z-index: 2;
/* Be invisible by default */
- transition: visibility 0ms linear var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100));
+ transition: visibility 0ms linear var(--spectrum-modal-transition-animation-duration);
&.is-open {
visibility: visible;
@@ -72,17 +78,17 @@
opacity: 0;
/* Start offset by the animation distance -- @note this is using the global dialog token */
- transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-dialog-confirm-entry-animation-distance)));
+ transform: translateY(var(--spectrum-dialog-confirm-entry-animation-distance));
/* Appear above underlay */
z-index: 2;
/* Don't be bigger than the screen */
- max-block-size: var(--mod-modal-max-height, 90vh);
- max-inline-size: var(--mod-modal-max-width, 90%);
+ max-block-size: var(--mod-modal-max-height, var(--spectrum-modal-max-height));
+ max-inline-size: var(--mod-modal-max-width, var(--spectrum-modal-max-width));
- background: var(--mod-modal-background-color, var(--spectrum-modal-background-color));
- border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-100));
+ background: var(--spectrum-modal-background-color);
+ border-radius: var(--spectrum-modal-confirm-border-radius);
overflow: hidden;
outline: none; /* Firefox shows outline */
pointer-events: auto;
@@ -90,8 +96,8 @@
/* Exit animations */
transition:
opacity var(--spectrum-modal-confirm-exit-animation-duration) var(--spectrum-animation-ease-in) var(--spectrum-modal-confirm-exit-animation-delay),
- visibility var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)),
- transform var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration));
+ visibility 0ms linear calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)),
+ transform 0ms linear calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration));
&.is-open {
pointer-events: auto;
@@ -125,17 +131,15 @@
/** @unofficial */
.spectrum-Modal--fullscreen {
position: fixed;
- inset-inline-start: var(--spectrum-modal-fullscreen-margin);
- inset-block-start: var(--spectrum-modal-fullscreen-margin);
- inset-inline-end: var(--spectrum-modal-fullscreen-margin);
- inset-block-end: var(--spectrum-modal-fullscreen-margin);
+ inset-block: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
+ inset-inline: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
max-inline-size: none;
max-block-size: none;
}
.spectrum-Modal--fullscreenTakeover {
position: fixed;
- inset: 0;
+ inset: var(--spectrum-modal-takeover-window-to-edge);
max-inline-size: none;
max-block-size: none;
diff --git a/components/modal/package.json b/components/modal/package.json
index 8e0ed460b58..86d4fabd856 100644
--- a/components/modal/package.json
+++ b/components/modal/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/modal",
- "version": "7.1.0",
+ "version": "7.1.1-next.0",
"description": "The Spectrum CSS modal component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/tokens": ">=16.0.1"
+ "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
"@spectrum-css/tokens": {
@@ -33,7 +33,6 @@
}
},
"devDependencies": {
- "@spectrum-css/commons": "11.0.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js
index a4ce483de5f..560f5663e43 100644
--- a/components/modal/stories/modal.stories.js
+++ b/components/modal/stories/modal.stories.js
@@ -57,6 +57,9 @@ export default {
],
};
+/**
+ * The default modal does not include a background color itself, other than `transparent`. If implementations are in need of a background color, and one is not supported within the modal's child component (for example, the dialog defines its own background color), `--mod-modal-background-color` may be set on the `.spectrum-Modal` class.
+ */
export const Default = ModalGroup.bind({});
Default.args = {
content: [
diff --git a/components/modal/stories/template.js b/components/modal/stories/template.js
index 07a52b89131..9abbf49ebea 100644
--- a/components/modal/stories/template.js
+++ b/components/modal/stories/template.js
@@ -5,9 +5,6 @@ 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";
/**
* Just the modal markup.
diff --git a/components/modal/themes/express.css b/components/modal/themes/express.css
deleted file mode 100644
index 9fd550418f2..00000000000
--- a/components/modal/themes/express.css
+++ /dev/null
@@ -1,16 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
diff --git a/components/modal/themes/spectrum-two.css b/components/modal/themes/spectrum-two.css
deleted file mode 100644
index c31756dcdae..00000000000
--- a/components/modal/themes/spectrum-two.css
+++ /dev/null
@@ -1,18 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-Modal {
- --spectrum-modal-background-color: var(--spectrum-background-layer-2-color);
- }
-}
diff --git a/components/modal/themes/spectrum.css b/components/modal/themes/spectrum.css
deleted file mode 100644
index f637e6f343e..00000000000
--- a/components/modal/themes/spectrum.css
+++ /dev/null
@@ -1,22 +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.
- */
-
-/* @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/dist/metadata.json b/components/opacitycheckerboard/dist/metadata.json
index 51c1a155873..31fd76317b9 100644
--- a/components/opacitycheckerboard/dist/metadata.json
+++ b/components/opacitycheckerboard/dist/metadata.json
@@ -1,6 +1,9 @@
{
"sourceFile": "index.css",
- "selectors": [".spectrum-OpacityCheckerboard"],
+ "selectors": [
+ ".spectrum-OpacityCheckerboard",
+ ".spectrum-OpacityCheckerboard--sizeS"
+ ],
"modifiers": [
"--mod-opacity-checkerboard-dark",
"--mod-opacity-checkerboard-light",
@@ -8,12 +11,16 @@
"--mod-opacity-checkerboard-size"
],
"component": [
+ "--spectrum-opacity-checkerboard-dark",
+ "--spectrum-opacity-checkerboard-light",
+ "--spectrum-opacity-checkerboard-position",
+ "--spectrum-opacity-checkerboard-size",
"--spectrum-opacity-checkerboard-square-dark",
"--spectrum-opacity-checkerboard-square-light",
- "--spectrum-opacity-checkerboard-square-size"
+ "--spectrum-opacity-checkerboard-square-size-medium",
+ "--spectrum-opacity-checkerboard-square-size-small"
],
"global": [],
- "system-theme": [],
"passthroughs": [],
"high-contrast": []
}
diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css
index 675449dd8dd..8f1700294f0 100644
--- a/components/opacitycheckerboard/index.css
+++ b/components/opacitycheckerboard/index.css
@@ -12,7 +12,19 @@
*/
.spectrum-OpacityCheckerboard {
- background: repeating-conic-gradient(var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light)) 0% 25%, var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark)) 0% 50%) var(--mod-opacity-checkerboard-position, left top) / calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size)) * 2) calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size)) * 2);
+ --spectrum-opacity-checkerboard-dark: var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark));
+ --spectrum-opacity-checkerboard-light: var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light));
+ --spectrum-opacity-checkerboard-size: var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size-medium));
+
+ --spectrum-opacity-checkerboard-position: var(--mod-opacity-checkerboard-position, left top);
+}
+
+.spectrum-OpacityCheckerboard--sizeS {
+ --spectrum-opacity-checkerboard-size: var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size-small));
+}
+
+.spectrum-OpacityCheckerboard {
+ background: repeating-conic-gradient(var(--spectrum-opacity-checkerboard-light) 0% 25%, var(--spectrum-opacity-checkerboard-dark) 0% 50%) var(--spectrum-opacity-checkerboard-position) / calc(var(--spectrum-opacity-checkerboard-size) * 2) calc(var(--spectrum-opacity-checkerboard-size) * 2);
}
@media (forced-colors: active) {
diff --git a/components/opacitycheckerboard/package.json b/components/opacitycheckerboard/package.json
index 46a96fb249a..e1109442884 100644
--- a/components/opacitycheckerboard/package.json
+++ b/components/opacitycheckerboard/package.json
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/tokens": ">=16.0.1"
+ "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
"@spectrum-css/tokens": {
diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
index e908a5cd05b..7640544d884 100644
--- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
+++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
@@ -20,6 +20,16 @@ export default {
control: "text",
description: "Value for --mod-opacity-checkerboard-position. Accepts any valid CSS background-position property value.",
},
+ size: {
+ name: "Size",
+ type: { name: "string", required: true },
+ table: {
+ type: { summary: "string" },
+ category: "Component",
+ },
+ options: ["s", "m"],
+ control: "select",
+ },
},
args: {
rootClass: "spectrum-OpacityCheckerboard",
@@ -33,6 +43,7 @@ export default {
packageJson,
metadata,
},
+ tags: ["migrated"],
};
export const Default = OpacityCheckboardGroup.bind({});
diff --git a/components/page/dist/metadata.json b/components/page/dist/metadata.json
index cb8c8163de8..4e3ac035552 100644
--- a/components/page/dist/metadata.json
+++ b/components/page/dist/metadata.json
@@ -7,10 +7,6 @@
"--spectrum-page-content-tap-highlight"
],
"global": ["--spectrum-gray-75", "--spectrum-transparent-black-25"],
- "system-theme": [
- "--system-root-page-background-color",
- "--system-root-page-content-tap-highlight"
- ],
"passthroughs": [],
"high-contrast": []
}
diff --git a/components/page/index.css b/components/page/index.css
index 7a29f49a2e2..b5ce5555917 100644
--- a/components/page/index.css
+++ b/components/page/index.css
@@ -11,11 +11,9 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
:root {
- background: var(--mod-page-background, var(--spectrum-page-background-color));
+ background: var(--mod-page-background, var(--spectrum-page-background-color, var(--spectrum-gray-75)));
/* The highlight that appears over a link while it's being tapped */
- -webkit-tap-highlight-color: var(--mod-page-content-tap-highlight, var(--spectrum-page-content-tap-highlight));
+ -webkit-tap-highlight-color: var(--mod-page-content-tap-highlight, var(--spectrum-page-content-tap-highlight, var(--spectrum-transparent-black-25)));
}
diff --git a/components/page/package.json b/components/page/package.json
index cd71b59b372..0118de09cff 100644
--- a/components/page/package.json
+++ b/components/page/package.json
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/tokens": ">=16.0.1"
+ "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
"@spectrum-css/tokens": {
diff --git a/components/page/stories/template.js b/components/page/stories/template.js
index 570ca98b244..395f6d48390 100644
--- a/components/page/stories/template.js
+++ b/components/page/stories/template.js
@@ -2,9 +2,6 @@ import { renderContent } from "@spectrum-css/preview/decorators";
import { html } from "lit";
import "../index.css";
-import "../themes/spectrum.css";
-/* Must be imported last */
-import "../themes/express.css";
export const Template = ({ content = [] } = {}, context = {}) => {
return html`${renderContent(content, { context })}`;
diff --git a/components/page/themes/express.css b/components/page/themes/express.css
deleted file mode 100644
index 9fd550418f2..00000000000
--- a/components/page/themes/express.css
+++ /dev/null
@@ -1,16 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
diff --git a/components/page/themes/spectrum-two.css b/components/page/themes/spectrum-two.css
deleted file mode 100644
index 896ecf506cc..00000000000
--- a/components/page/themes/spectrum-two.css
+++ /dev/null
@@ -1,19 +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.
- */
-
-@container style(--system: spectrum) {
- :root {
- --spectrum-page-background-color: var(--spectrum-gray-75);
- --spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-25);
- }
-}
diff --git a/components/page/themes/spectrum.css b/components/page/themes/spectrum.css
deleted file mode 100644
index f6c120c2d43..00000000000
--- a/components/page/themes/spectrum.css
+++ /dev/null
@@ -1,23 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- :root {
- --spectrum-page-background-color: var(--spectrum-gray-100);
- --spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-100);
- }
-}
diff --git a/components/pagination/CHANGELOG.md b/components/pagination/CHANGELOG.md
index 1c5dcb75c7a..686ee978d8a 100644
--- a/components/pagination/CHANGELOG.md
+++ b/components/pagination/CHANGELOG.md
@@ -1,5 +1,15 @@
# Change log
+## 11.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+ - @spectrum-css/actionbutton@8.0.0-next.0
+ - @spectrum-css/button@15.0.0-next.0
+ - @spectrum-css/textfield@9.0.0-next.0
+
## 10.1.0
### Minor Changes
@@ -295,11 +305,9 @@ Output for all component CSS files is now being run through a lightweight optimi
- feat(pagination)!: migrate to spectrum tokens package([f29a74d](https://github.com/adobe/spectrum-css/commit/f29a74d))
- ###
-
- 🛑 BREAKING CHANGES
+### 🛑 BREAKING CHANGES
- - Replaces DNA tokens with Spectrum tokens.
+- Replaces DNA tokens with Spectrum tokens.
Update build to use Spectrum tokens.
Remove skin.css and incorporate its CSS into index.css.
diff --git a/components/pagination/dist/metadata.json b/components/pagination/dist/metadata.json
index 7a0b21fe8dd..e44857f71b9 100644
--- a/components/pagination/dist/metadata.json
+++ b/components/pagination/dist/metadata.json
@@ -34,7 +34,6 @@
"--spectrum-logical-rotation",
"--spectrum-neutral-subdued-content-color-default"
],
- "system-theme": [],
"passthroughs": ["--mod-textfield-min-width", "--mod-textfield-width"],
"high-contrast": []
}
diff --git a/components/pagination/package.json b/components/pagination/package.json
index 100486ff7be..640f019551e 100644
--- a/components/pagination/package.json
+++ b/components/pagination/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/pagination",
- "version": "10.1.0",
+ "version": "11.0.0-next.0",
"description": "The Spectrum CSS Pagination component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,10 +25,10 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0",
- "@spectrum-css/button": ">=14.0.0 <15.0.0",
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
- "@spectrum-css/textfield": ">=8.0.0 <9.0.0",
+ "@spectrum-css/actionbutton": ">=8.0.0-next.0",
+ "@spectrum-css/button": ">=15.0.0-next.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
+ "@spectrum-css/textfield": ">=9.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -49,10 +49,10 @@
}
},
"devDependencies": {
- "@spectrum-css/actionbutton": "7.1.2",
- "@spectrum-css/button": "14.1.3",
- "@spectrum-css/icon": "9.1.0",
- "@spectrum-css/textfield": "8.1.1",
+ "@spectrum-css/actionbutton": "8.0.0-next.1",
+ "@spectrum-css/button": "15.0.0-next.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
+ "@spectrum-css/textfield": "9.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/pagination/stories/pagination.stories.js b/components/pagination/stories/pagination.stories.js
index 7fa6fa909e1..a9098d40630 100644
--- a/components/pagination/stories/pagination.stories.js
+++ b/components/pagination/stories/pagination.stories.js
@@ -71,6 +71,7 @@ export default {
packageJson,
metadata,
},
+ tags: ["migrated"],
};
/**
diff --git a/components/picker/CHANGELOG.md b/components/picker/CHANGELOG.md
index 7f9824af954..b67d8986241 100644
--- a/components/picker/CHANGELOG.md
+++ b/components/picker/CHANGELOG.md
@@ -1,10 +1,22 @@
# Change log
+## 10.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+ - @spectrum-css/helptext@8.0.0-next.0
+ - @spectrum-css/menu@10.0.0-next.0
+ - @spectrum-css/popover@9.0.0-next.0
+
## 9.1.4
### Patch Changes
-- [#3607](https://github.com/adobe/spectrum-css/pull/3607) [`7797847`](https://github.com/adobe/spectrum-css/commit/7797847c723d530f34d610516e04150092557af1) Thanks [@blunteshwar](https://github.com/blunteshwar)! - Updated border-color for Open not hover state of picker from --spectrum-gray-900 to --spectrum-gray-800 as specified in the spec
+- [#3607](https://github.com/adobe/spectrum-css/pull/3607) [`7797847`](https://github.com/adobe/spectrum-css/commit/7797847c723d530f34d610516e04150092557af1) Thanks [@blunteshwar](https://github.com/blunteshwar)!
+
+Updated border-color for open state of picker from `--spectrum-gray-900` to `--spectrum-gray-800`.
## 9.1.3
diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json
index e2c3b4e5c0a..9a7aa93bbac 100644
--- a/components/picker/dist/metadata.json
+++ b/components/picker/dist/metadata.json
@@ -2,32 +2,23 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-Picker",
- ".spectrum-Picker + .spectrum-Popover--bottom.is-open",
+ ".spectrum-Picker + .spectrum-Popover--bottom-start.is-open",
".spectrum-Picker .spectrum-Picker-icon",
".spectrum-Picker .spectrum-Picker-label",
".spectrum-Picker .spectrum-ProgressCircle",
".spectrum-Picker--quiet",
- ".spectrum-Picker--quiet .spectrum-Picker-menuIcon",
- ".spectrum-Picker--quiet.is-keyboardFocused",
".spectrum-Picker--quiet.is-keyboardFocused:after",
- ".spectrum-Picker--quiet.is-open",
".spectrum-Picker--quiet.spectrum-Picker--sideLabel",
- ".spectrum-Picker--quiet.spectrum-Picker.is-disabled",
- ".spectrum-Picker--quiet.spectrum-Picker:disabled",
- ".spectrum-Picker--quiet:active",
".spectrum-Picker--quiet:after",
- ".spectrum-Picker--quiet:focus-visible",
".spectrum-Picker--quiet:focus-visible:after",
- ".spectrum-Picker--quiet:hover",
".spectrum-Picker--sideLabel",
".spectrum-Picker--sizeL",
- ".spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open",
+ ".spectrum-Picker--sizeL + .spectrum-Popover--bottom-start.is-open",
".spectrum-Picker--sizeS",
- ".spectrum-Picker--sizeS + .spectrum-Popover--bottom.is-open",
+ ".spectrum-Picker--sizeS + .spectrum-Popover--bottom-start.is-open",
".spectrum-Picker--sizeXL",
- ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom.is-open",
+ ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom-start.is-open",
".spectrum-Picker-label",
- ".spectrum-Picker-label ~ .spectrum-Picker-menuIcon",
".spectrum-Picker-label.is-placeholder",
".spectrum-Picker-label.is-placeholder:active",
".spectrum-Picker-label.is-placeholder:hover",
@@ -39,7 +30,7 @@
".spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder",
".spectrum-Picker.is-disabled .spectrum-Picker-menuIcon",
".spectrum-Picker.is-disabled .spectrum-Picker-validationIcon",
- ".spectrum-Picker.is-invalid .spectrum-Picker-label",
+ ".spectrum-Picker.is-disabled:not(.spectrum-Picker--quiet)",
".spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)",
".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)",
".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover",
@@ -52,15 +43,15 @@
".spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder",
".spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon",
".spectrum-Picker.is-keyboardFocused:after",
- ".spectrum-Picker.is-loading .spectrum-Picker-label",
+ ".spectrum-Picker.is-loading",
".spectrum-Picker.is-loading .spectrum-Picker-menuIcon",
- ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)",
- ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .spectrum-Picker-menuIcon",
- ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover",
- ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .spectrum-Picker-menuIcon",
- ".spectrum-Picker.is-placeholder:active .spectrum-Picker-label",
+ ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)",
+ ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon",
+ ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover",
+ ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon",
".spectrum-Picker::-moz-focus-inner",
".spectrum-Picker:active",
+ ".spectrum-Picker:active .spectrum-Picker-label.is-placeholder",
".spectrum-Picker:active:after",
".spectrum-Picker:after",
".spectrum-Picker:disabled",
@@ -68,17 +59,19 @@
".spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder",
".spectrum-Picker:disabled .spectrum-Picker-menuIcon",
".spectrum-Picker:disabled .spectrum-Picker-validationIcon",
+ ".spectrum-Picker:disabled:not(.spectrum-Picker--quiet)",
".spectrum-Picker:focus",
".spectrum-Picker:focus-visible",
".spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder",
".spectrum-Picker:focus-visible .spectrum-Picker-menuIcon",
".spectrum-Picker:focus-visible:after",
".spectrum-Picker:hover",
- ".spectrum-Picker:hover .spectrum-Picker-menuIcon"
+ ".spectrum-Picker:hover .spectrum-Picker-menuIcon",
+ ".spectrum-Picker:lang(ja) .spectrum-Picker-label",
+ ".spectrum-Picker:lang(ko) .spectrum-Picker-label",
+ ".spectrum-Picker:lang(zh) .spectrum-Picker-label"
],
"modifiers": [
- "--mod-animation-duration-100",
- "--mod-line-height-100",
"--mod-picker-animation-duration",
"--mod-picker-background-color-active",
"--mod-picker-background-color-default",
@@ -123,7 +116,11 @@
"--mod-picker-icon-color-hover-open",
"--mod-picker-icon-color-key-focus",
"--mod-picker-inline-size",
+ "--mod-picker-inline-size-quiet",
"--mod-picker-line-height",
+ "--mod-picker-line-height-cjk",
+ "--mod-picker-min-inline-size",
+ "--mod-picker-min-inline-size-quiet",
"--mod-picker-placeholder-font-style",
"--mod-picker-placeholder-font-weight",
"--mod-picker-spacing-bottom-to-text",
@@ -135,14 +132,12 @@
"--mod-picker-spacing-label-to-picker",
"--mod-picker-spacing-label-to-picker-quiet",
"--mod-picker-spacing-picker-to-popover",
- "--mod-picker-spacing-text-to-alert-icon-inline-start",
- "--mod-picker-spacing-text-to-icon",
+ "--mod-picker-spacing-starting-icon-to-text",
"--mod-picker-spacing-text-to-icon-inline-end",
"--mod-picker-spacing-top-to-alert-icon",
"--mod-picker-spacing-top-to-disclosure-icon",
"--mod-picker-spacing-top-to-progress-circle",
- "--mod-picker-spacing-top-to-text",
- "--mod-sans-font-family-stack"
+ "--mod-picker-spacing-top-to-text"
],
"component": [
"--spectrum-picker-animation-duration",
@@ -192,18 +187,18 @@
"--spectrum-picker-icon-color-key-focus",
"--spectrum-picker-inline-size",
"--spectrum-picker-line-height",
+ "--spectrum-picker-line-height-cjk",
+ "--spectrum-picker-min-inline-size",
"--spectrum-picker-minimum-width-multiplier",
"--spectrum-picker-placeholder-font-style",
"--spectrum-picker-spacing-bottom-to-text",
"--spectrum-picker-spacing-edge-to-disclosure-icon",
- "--spectrum-picker-spacing-edge-to-disclosure-icon-quiet",
"--spectrum-picker-spacing-edge-to-text",
- "--spectrum-picker-spacing-edge-to-text-quiet",
"--spectrum-picker-spacing-icon-to-disclosure-icon",
"--spectrum-picker-spacing-label-to-picker",
"--spectrum-picker-spacing-label-to-picker-quiet",
"--spectrum-picker-spacing-picker-to-popover",
- "--spectrum-picker-spacing-text-to-icon",
+ "--spectrum-picker-spacing-starting-icon-to-text",
"--spectrum-picker-spacing-text-to-icon-inline-end",
"--spectrum-picker-spacing-top-to-alert-icon",
"--spectrum-picker-spacing-top-to-disclosure-icon",
@@ -217,6 +212,7 @@
"global": [
"--spectrum-animation-duration-100",
"--spectrum-border-width-100",
+ "--spectrum-cjk-line-height-100",
"--spectrum-component-bottom-to-text-100",
"--spectrum-component-bottom-to-text-200",
"--spectrum-component-bottom-to-text-300",
@@ -229,6 +225,8 @@
"--spectrum-component-height-200",
"--spectrum-component-height-300",
"--spectrum-component-height-75",
+ "--spectrum-component-size-difference-down",
+ "--spectrum-component-size-width-ratio-down",
"--spectrum-component-to-menu-extra-large",
"--spectrum-component-to-menu-large",
"--spectrum-component-to-menu-medium",
@@ -237,10 +235,22 @@
"--spectrum-component-top-to-text-200",
"--spectrum-component-top-to-text-300",
"--spectrum-component-top-to-text-75",
- "--spectrum-corner-radius-100",
+ "--spectrum-component-top-to-workflow-icon-100",
+ "--spectrum-component-top-to-workflow-icon-200",
+ "--spectrum-component-top-to-workflow-icon-300",
+ "--spectrum-component-top-to-workflow-icon-75",
+ "--spectrum-corner-radius-medium-size-extra-large",
+ "--spectrum-corner-radius-medium-size-large",
+ "--spectrum-corner-radius-medium-size-medium",
+ "--spectrum-corner-radius-medium-size-small",
"--spectrum-default-font-style",
"--spectrum-disabled-background-color",
"--spectrum-disabled-content-color",
+ "--spectrum-downstate-height",
+ "--spectrum-downstate-width",
+ "--spectrum-field-default-width-extra-large",
+ "--spectrum-field-default-width-large",
+ "--spectrum-field-default-width-small",
"--spectrum-field-edge-to-text-quiet",
"--spectrum-field-end-edge-to-disclosure-icon-100",
"--spectrum-field-end-edge-to-disclosure-icon-200",
@@ -251,14 +261,6 @@
"--spectrum-field-label-to-component-quiet-large",
"--spectrum-field-label-to-component-quiet-medium",
"--spectrum-field-label-to-component-quiet-small",
- "--spectrum-field-text-to-alert-icon-extra-large",
- "--spectrum-field-text-to-alert-icon-large",
- "--spectrum-field-text-to-alert-icon-medium",
- "--spectrum-field-text-to-alert-icon-small",
- "--spectrum-field-top-to-alert-icon-extra-large",
- "--spectrum-field-top-to-alert-icon-large",
- "--spectrum-field-top-to-alert-icon-medium",
- "--spectrum-field-top-to-alert-icon-small",
"--spectrum-field-top-to-disclosure-icon-100",
"--spectrum-field-top-to-disclosure-icon-200",
"--spectrum-field-top-to-disclosure-icon-300",
@@ -267,7 +269,6 @@
"--spectrum-field-top-to-progress-circle-large",
"--spectrum-field-top-to-progress-circle-medium",
"--spectrum-field-top-to-progress-circle-small",
- "--spectrum-field-width",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
@@ -304,22 +305,6 @@
"--spectrum-text-to-visual-300",
"--spectrum-text-to-visual-75"
],
- "system-theme": [
- "--system-picker-background-color-active",
- "--system-picker-background-color-default",
- "--system-picker-background-color-default-open",
- "--system-picker-background-color-hover",
- "--system-picker-background-color-hover-open",
- "--system-picker-background-color-key-focus",
- "--system-picker-border-color-active",
- "--system-picker-border-color-default",
- "--system-picker-border-color-default-open",
- "--system-picker-border-color-disabled",
- "--system-picker-border-color-hover",
- "--system-picker-border-color-hover-open",
- "--system-picker-border-color-key-focus",
- "--system-picker-border-width"
- ],
"passthroughs": [
"--mod-button-animation-duration",
"--mod-button-font-family",
diff --git a/components/picker/index.css b/components/picker/index.css
index e59888c78f5..843c9b0fa2a 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -11,44 +11,65 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
@import "@spectrum-css/commons/basebutton.css";
.spectrum-Picker {
- /* font */
+ --spectrum-picker-background-color-default: var(--spectrum-gray-100);
+ --spectrum-picker-background-color-default-open: var(--spectrum-gray-200);
+ --spectrum-picker-background-color-hover: var(--spectrum-gray-200);
+ --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200);
+ --spectrum-picker-background-color-active: 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-800);
+ --spectrum-picker-border-color-hover: var(--spectrum-gray-600);
+ --spectrum-picker-border-color-hover-open: var(--spectrum-gray-900);
+ --spectrum-picker-border-color-active: var(--spectrum-gray-700);
+ --spectrum-picker-border-color-key-focus: var(--spectrum-gray-900);
+
+ --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);
+ --spectrum-picker-line-height-cjk: var(--spectrum-cjk-line-height-100);
- /* height */
+ /* Dimensions */
--spectrum-picker-block-size: var(--spectrum-component-height-100);
- --spectrum-picker-inline-size: var(--spectrum-field-width);
+ --spectrum-picker-min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size)));
- /* border */
- --spectrum-picker-border-radius: var(--spectrum-corner-radius-100);
+ /* Border */
+ --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-medium);
- /* spacing */
+ /* 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);
+
+ /* Space from label component to Picker component. */
--spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component);
+ --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium);
+
+ /* Space from optional starting icon to the text. */
+ --spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-100);
+
+ /* Space from text to either the disclosure icon or the alert/progress visual if present. */
+ --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-100);
- --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);
+ /* Space from alert/progress visual to the disclosure icon (chevron). */
--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-alert-icon: var(--spectrum-component-top-to-workflow-icon-100);
--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);
- /* animation */
+ /* 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);
@@ -72,16 +93,17 @@
--spectrum-picker-icon-color-error: var(--spectrum-negative-visual-color);
+ --spectrum-picker-border-color-disabled: var(--spectrum-gray-300);
--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 */
+ /* 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-Popover--bottom.is-open {
+ & + .spectrum-Popover--bottom-start.is-open {
--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium);
}
}
@@ -89,109 +111,99 @@
.spectrum-Picker--sizeS {
--spectrum-picker-font-size: var(--spectrum-font-size-75);
--spectrum-picker-block-size: var(--spectrum-component-height-75);
+ --spectrum-picker-inline-size: var(--spectrum-field-default-width-small);
+ --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-small);
--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-starting-icon-to-text: var(--spectrum-text-to-visual-75);
+ --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-75);
--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-alert-icon: var(--spectrum-component-top-to-workflow-icon-75);
--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-Popover--bottom-start.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-inline-size: var(--spectrum-field-default-width-large);
--spectrum-picker-block-size: var(--spectrum-component-height-200);
+ --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-large);
--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-starting-icon-to-text: var(--spectrum-text-to-visual-200);
+ --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-200);
--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-alert-icon: var(--spectrum-component-top-to-workflow-icon-200);
--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-Popover--bottom-start.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-inline-size: var(--spectrum-field-default-width-extra-large);
--spectrum-picker-block-size: var(--spectrum-component-height-300);
+ --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-extra-large);
--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-starting-icon-to-text: var(--spectrum-text-to-visual-300);
+ --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-300);
--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-alert-icon: var(--spectrum-component-top-to-workflow-icon-300);
--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-Popover--bottom-start.is-open {
--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large);
}
}
-/* Windows high contrast mode */
-@media (forced-colors: active) {
- .spectrum-Picker {
- --highcontrast-picker-focus-indicator-color: Highlight;
-
- --highcontrast-picker-border-color-default: ButtonBorder;
- --highcontrast-picker-border-color-hover: Highlight;
- --highcontrast-picker-border-color-disabled: GrayText;
-
- --highcontrast-picker-content-color-default: ButtonText;
- --highcontrast-picker-content-color-disabled: GrayText;
- --highcontrast-picker-background-color: ButtonFace;
-
- &:focus-visible,
- &.is-keyboardFocused {
- --highcontrast-picker-border-color-hover: ButtonText;
- }
-
- /* Focus indicator */
- &::after {
- /* Make sure default transparent border stays transparent. */
- forced-color-adjust: none;
- }
-
- .spectrum-Picker-label {
- /* Remove additional text backplate added in WHCM (Edge). */
- forced-color-adjust: none;
- }
- }
+.spectrum-Picker--quiet {
+ --spectrum-picker-background-color-default: transparent;
+ --spectrum-picker-background-color-default-open: transparent;
+ --spectrum-picker-background-color-hover: transparent;
+ --spectrum-picker-background-color-hover-open: transparent;
+ --spectrum-picker-background-color-active: transparent;
+ --spectrum-picker-background-color-key-focus: transparent;
+ --spectrum-picker-background-color-disabled: transparent;
+ --spectrum-picker-border-color-disabled: transparent;
+
+ --spectrum-picker-min-inline-size: var(--mod-picker-min-inline-size-quiet, 0);
+ --spectrum-picker-inline-size: var(--mod-picker-inline-size-quiet, auto);
+ --spectrum-picker-spacing-edge-to-text: var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-field-edge-to-text-quiet));
+ --spectrum-picker-spacing-edge-to-disclosure-icon: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-end-edge-to-disclousure-icon-quiet));
+ --spectrum-picker-spacing-label-to-picker: var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet));
}
.spectrum-Picker {
@extend %spectrum-BaseButton;
- /* Layout */
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)));
+ min-inline-size: var(--mod-picker-min-inline-size, var(--spectrum-picker-min-inline-size));
inline-size: var(--mod-picker-inline-size, var(--spectrum-picker-inline-size));
block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size));
- padding-block: 0;
- margin-block-start: var(--mod-picker-spacing-label-to-picker, var(--spectrum-picker-spacing-label-to-picker));
+ margin-block-start: var(--mod-picker-spacing-label-to-picker, var(--spectrum-picker-spacing-label-to-picker));
+ padding-block: 0;
padding-inline-start: var(--mod-picker-spacing-edge-to-text, var(--spectrum-picker-spacing-edge-to-text));
padding-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon, var(--spectrum-picker-spacing-edge-to-disclosure-icon));
@@ -242,13 +254,14 @@
&:active {
background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-active, var(--spectrum-picker-background-color-active)));
border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-active, var(--spectrum-picker-border-color-active)));
+ transform: perspective(max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down))) translateZ(var(--spectrum-component-size-difference-down));
/* Focus indicator */
&::after {
border-color: transparent;
}
- &.is-placeholder .spectrum-Picker-label {
+ .spectrum-Picker-label.is-placeholder {
color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active)));
}
}
@@ -274,7 +287,7 @@
}
}
- &.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) {
+ &.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) {
color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default-open, var(--spectrum-picker-font-color-default-open)));
background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default-open, var(--spectrum-picker-background-color-default-open)));
border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-default-open, var(--spectrum-picker-border-color-default-open)));
@@ -322,32 +335,17 @@
border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus)));
}
}
+}
- &.is-loading {
- .spectrum-Picker-menuIcon {
- color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled)));
- }
- }
-
- &.is-loading,
- &.is-invalid {
- .spectrum-Picker-label {
- /* @deprecation --mod-picker-spacing-text-to-alert-icon-inline-start has been renamed to --mod-picker-spacing-text-to-icon-inline-end
- and will be removed in a future version. */
- margin-inline-end: var(--mod-picker-spacing-text-to-icon-inline-end, var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-icon-inline-end)));
- }
- }
-
- .spectrum-Picker-icon {
- flex-shrink: 0;
- margin-inline-end: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon));
- }
+/* Optional workflow icon that appears before the text within the picker. */
+.spectrum-Picker .spectrum-Picker-icon {
+ flex-shrink: 0;
+ margin-inline-end: var(--mod-picker-spacing-starting-icon-to-text, var(--spectrum-picker-spacing-starting-icon-to-text));
}
+/* Value: the text within the Picker (current value or placeholder) */
.spectrum-Picker-label {
- /* Be the biggest, but also shrink! */
flex: 1 1 auto;
-
white-space: nowrap;
overflow: hidden;
@@ -358,14 +356,14 @@
text-overflow: ellipsis;
text-align: start;
- padding-block-start: var(--mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text));
- padding-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
+ margin-block-start: var(--mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text));
+ margin-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
+ margin-inline-end: var(--mod-picker-spacing-text-to-icon-inline-end, var(--spectrum-picker-spacing-text-to-icon-inline-end));
&.is-placeholder {
font-weight: var(--mod-picker-placeholder-font-weight, var(--spectrum-picker-font-weight));
font-style: var(--mod-picker-placeholder-font-style, var(--spectrum-picker-placeholder-font-style));
transition: 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)));
&:hover {
@@ -376,19 +374,23 @@
color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active)));
}
}
+
+ /* CJK (Chinese, Japanese, and Korean) language support */
+ .spectrum-Picker:lang(ja) &,
+ .spectrum-Picker:lang(zh) &,
+ .spectrum-Picker:lang(ko) & {
+ line-height: var(--mod-picker-line-height-cjk, var(--spectrum-picker-line-height-cjk));
+ }
}
-/* The picker chevron */
+/* Disclosure icon (chevron) */
.spectrum-Picker-menuIcon {
display: inline-block;
position: relative;
vertical-align: top;
- transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out;
flex-shrink: 0;
-
- margin-inline-start: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon));
margin-block: var(--mod-picker-spacing-top-to-disclosure-icon, var(--spectrum-picker-spacing-top-to-disclosure-icon));
-
+ transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out;
color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default, var(--spectrum-picker-icon-color-default)));
&:active {
@@ -397,56 +399,39 @@
}
.spectrum-Picker-validationIcon {
- flex-shrink: 0;
margin-block-start: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
margin-block-end: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
+ margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon));
+ flex-shrink: 0;
}
.spectrum-Picker .spectrum-ProgressCircle {
margin-block-start: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
margin-block-end: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
+ margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon));
}
-.spectrum-Picker-label ~ .spectrum-Picker-menuIcon {
- margin-inline-start: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon));
-}
-
-.spectrum-Picker + .spectrum-Popover--bottom.is-open {
+.spectrum-Picker + .spectrum-Popover--bottom-start.is-open {
transform: translateY(var(--mod-picker-spacing-picker-to-popover, var(--spectrum-picker-spacing-picker-to-popover)));
}
.spectrum-Picker--quiet {
- inline-size: auto;
- min-inline-size: 0;
border: none;
border-radius: 0;
- padding-inline: var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-picker-spacing-edge-to-text-quiet));
- margin-block-start: calc(var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet)) + (1px));
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, transparent);
&.spectrum-Picker--sideLabel {
margin-block-start: 0;
}
- .spectrum-Picker-menuIcon {
- margin-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet));
- }
-
&::after {
border: none;
block-size: auto;
inline-size: auto;
}
- &:hover {
- background-color: var(--highcontrast-picker-background-color, transparent);
- }
-
&:focus-visible,
&.is-keyboardFocused {
- background-color: var(--highcontrast-picker-background-color, transparent);
-
/* Focus indicator changes from a ring to a line underneath. */
&::after {
border: none;
@@ -455,16 +440,6 @@
margin: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1) 0;
}
}
-
- &:active,
- &.is-open {
- background-color: var(--highcontrast-picker-background-color, transparent);
- }
-
- &.spectrum-Picker:disabled,
- &.spectrum-Picker.is-disabled {
- background-color: var(--highcontrast-picker-background-color, transparent);
- }
}
.spectrum-Picker--sideLabel {
@@ -472,16 +447,20 @@
vertical-align: top;
}
-/* Disabled state:
+/* Disabled and loading states:
Make sure this appears after any use of :hover while postcss-hover-media-feature is being used. The plugin moves
all hover styles within a media query that changes the order of the CSS, affecting styles with the same specificity. */
.spectrum-Picker:disabled,
.spectrum-Picker.is-disabled {
cursor: default;
- background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled)));
+ transform: none;
border-color: var(--highcontrast-picker-border-color-disabled, var(--spectrum-picker-border-color-disabled));
color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled)));
+ &:not(.spectrum-Picker--quiet) {
+ background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled)));
+ }
+
.spectrum-Picker-icon,
.spectrum-Picker-menuIcon,
.spectrum-Picker-validationIcon {
@@ -492,3 +471,42 @@
color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled)));
}
}
+
+.spectrum-Picker.is-loading {
+ transform: none;
+
+ .spectrum-Picker-menuIcon {
+ color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled)));
+ }
+}
+
+/* Forced colors / high contrast mode */
+@media (forced-colors: active) {
+ .spectrum-Picker {
+ --highcontrast-picker-focus-indicator-color: Highlight;
+
+ --highcontrast-picker-border-color-default: ButtonBorder;
+ --highcontrast-picker-border-color-hover: Highlight;
+ --highcontrast-picker-border-color-disabled: GrayText;
+
+ --highcontrast-picker-content-color-default: ButtonText;
+ --highcontrast-picker-content-color-disabled: GrayText;
+ --highcontrast-picker-background-color: ButtonFace;
+
+ &:focus-visible,
+ &.is-keyboardFocused {
+ --highcontrast-picker-border-color-hover: ButtonText;
+ }
+
+ /* Focus indicator */
+ &::after {
+ /* Make sure default transparent border stays transparent. */
+ forced-color-adjust: none;
+ }
+
+ .spectrum-Picker-label {
+ /* Remove additional text backplate added in WHCM (Edge). */
+ forced-color-adjust: none;
+ }
+ }
+}
diff --git a/components/picker/package.json b/components/picker/package.json
index 6f87a82f094..accba5c7e54 100644
--- a/components/picker/package.json
+++ b/components/picker/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/picker",
- "version": "9.1.4",
+ "version": "10.0.0-next.0",
"description": "The Spectrum CSS picker component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,10 +25,10 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/helptext": ">=7.0.0 <8.0.0",
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
- "@spectrum-css/menu": ">=9.0.0 <10.0.0",
- "@spectrum-css/popover": ">=8.0.0 <9.0.0",
+ "@spectrum-css/helptext": ">=8.0.0-next.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
+ "@spectrum-css/menu": ">=10.0.0-next.0",
+ "@spectrum-css/popover": ">=9.0.0-next.0",
"@spectrum-css/progresscircle": ">=5.0.0 <6.0.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
@@ -54,10 +54,10 @@
},
"devDependencies": {
"@spectrum-css/commons": "11.0.0",
- "@spectrum-css/helptext": "7.1.0",
- "@spectrum-css/icon": "9.1.0",
- "@spectrum-css/menu": "9.2.0",
- "@spectrum-css/popover": "8.2.0",
+ "@spectrum-css/helptext": "8.0.0-next.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
+ "@spectrum-css/menu": "10.0.0-next.1",
+ "@spectrum-css/popover": "9.0.0-next.1",
"@spectrum-css/progresscircle": "5.1.0",
"@spectrum-css/tokens": "16.0.1"
},
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
index c2fa56e619d..45c32f3872a 100644
--- a/components/picker/stories/picker.stories.js
+++ b/components/picker/stories/picker.stories.js
@@ -1,5 +1,6 @@
+import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
import { WithDividers as MenuStories } from "@spectrum-css/menu/stories/menu.stories.js";
-import { Sizes } from "@spectrum-css/preview/decorators";
+import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isActive, isDisabled, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
import metadata from "../dist/metadata.json";
@@ -17,7 +18,7 @@ export default {
size: size(["s", "m", "l", "xl"]),
label: {
name: "Label",
- description: "The text for the field label",
+ description: "The label text that is displayed above or to the side of the Picker. This uses a separate Label component outside of the Picker markup.",
type: { name: "string" },
table: {
type: { summary: "string" },
@@ -32,33 +33,28 @@ export default {
type: { summary: "string" },
category: "Component",
},
+ control: {
+ type: "select",
+ labels: {
+ side: "side (inline start)",
+ },
+ },
options: ["top", "side"],
- control: { type: "select" },
},
withSwitch: {
- name: "Show switch component",
- description: "Display a separate switch component after the picker. Helpful for testing alignment with the picker when using the side label.",
+ name: "Display Switch component",
+ description: "Displays a Switch component after the Picker. This is used for testing the vertical alignment between the side label, Picker, and Switch.",
type: { name: "boolean" },
table: {
type: { summary: "boolean" },
- category: "Advanced",
+ category: "Content",
},
control: "boolean",
if: { arg: "labelPosition", eq: "side" },
},
- showWorkflowIcon: {
- name: "Show workflow icon",
- description: "Display optional workflow icon before the value or placeholder",
- type: { name: "boolean" },
- table: {
- type: { summary: "boolean" },
- category: "Advanced",
- },
- control: "boolean",
- },
placeholder: {
- name: "Placeholder",
- description: "The placeholder text prompts a user to select an option from the picker menu. It disappears once a user selects an option. This will not be displayed if the `value` control is set.",
+ name: "Value or placeholder",
+ description: "The text within the Picker that represents its current value or placeholder.",
type: { name: "string" },
table: {
type: { summary: "string" },
@@ -66,15 +62,16 @@ export default {
},
control: { type: "text" },
},
- currentValue: {
- name: "Value",
- description: "The value shows the option that a user has selected.",
- type: { name: "string" },
- table: {
- type: { summary: "string" },
- category: "Content",
- },
- control: { type: "text" },
+ contentIconName: {
+ ...(IconStories?.argTypes?.iconName ?? {}),
+ name: "Icon",
+ description: "Optional workflow icon that appears before the value/placeholder text within the picker.",
+ if: false,
+ },
+ isQuiet: {
+ ...isQuiet,
+ description: "An alternative way to display the Picker without a visible background.",
+ name: "Quiet styling",
},
helpText: {
name: "Help text",
@@ -86,12 +83,18 @@ export default {
},
control: { type: "text" },
},
- isQuiet,
isOpen,
isKeyboardFocused,
isDisabled,
- isLoading,
- isInvalid,
+ isLoading: {
+ ...isLoading,
+ description: "When in the loading state, a progress circle will display next to the disclosure icon.",
+ if: { arg: "isDisabled", eq: false }
+ },
+ isInvalid: {
+ ...isInvalid,
+ description: "When in the invalid state, some styles change on the Picker, and an invalid icon displays next to the disclosure icon.",
+ },
isHovered,
isActive,
popoverContent: { table: { disable: true } },
@@ -139,7 +142,14 @@ export default {
},
packageJson,
metadata,
+ downState: {
+ selectors: [".spectrum-Picker:not(:disabled, .is-disabled, .is-loading)"],
+ },
},
+ decorators: [
+ withDownStateDimensionCapture,
+ ],
+ tags: ["migrated"],
};
export const Default = PickerGroup.bind({});
diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
index 5bce15f0744..0d8bec6d42f 100644
--- a/components/picker/stories/template.js
+++ b/components/picker/stories/template.js
@@ -1,42 +1,48 @@
import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js";
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
+import { Template as InfieldProgressCircle } from "@spectrum-css/infieldprogresscircle/stories/template.js";
import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
import { Container, getRandomId } from "@spectrum-css/preview/decorators";
-import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
import { Template as Switch } from "@spectrum-css/switch/stories/template.js";
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 { when } from "lit/directives/when.js";
import "../index.css";
-import "../themes/spectrum.css";
-/* Must be imported last */
-import "../themes/express.css";
/**
- * Template for Picker only (no popover or help text).
+ * Template for just the Picker. Does not include sibling Label and Help text.
*/
export const Picker = ({
rootClass = "spectrum-Picker",
+ id = getRandomId("picker"),
size = "m",
- labelPosition,
- placeholder = "",
- currentValue = "",
+ labelPosition = "top",
+ placeholder,
+ contentIconName,
isQuiet = false,
isKeyboardFocused = false,
- showWorkflowIcon = false,
isOpen = false,
isInvalid = false,
isLoading = false,
isDisabled = false,
isHovered = false,
isActive = false,
+ ariaLabeledBy,
customClasses = [],
customStyles = {},
- onclick,
} = {}, context = {}) => {
+ const { updateArgs } = context;
+
+ // Use the chevron from the UI icon set for each size, as defined in the design spec.
+ let disclosureIconName = "ChevronDown100";
+ if (size == "s") { disclosureIconName = "ChevronDown75"; }
+ else if (size == "l") { disclosureIconName = "ChevronDown200"; }
+ else if (size == "xl") { disclosureIconName = "ChevronDown300"; }
+
return html`
- ${when(showWorkflowIcon, () =>
+ ${when(contentIconName, () =>
Icon({
+ iconName: contentIconName,
size,
- setName: "workflow",
- iconName: "Image",
- customClasses: [`${rootClass}-icon`],
- }, context)
- )}
- ${currentValue ? currentValue : placeholder}
+ customClasses: ["spectrum-Picker-icon"],
+ }, context))
+ }
+ ${placeholder}
${when(isLoading, () =>
- ProgressCircle({
- size: "s",
+ InfieldProgressCircle({
+ size: size,
isIndeterminate: true,
}, context)
)}
@@ -90,12 +94,7 @@ export const Picker = ({
${Icon({
size,
setName: "ui",
- iconName: {
- s: "ChevronDown75",
- m: "ChevronDown100",
- l: "ChevronDown200",
- xl: "ChevronDown300",
- }[size ?? "m"],
+ iconName: disclosureIconName,
customClasses: [`${rootClass}-menuIcon`],
}, context)}
@@ -103,92 +102,102 @@ export const Picker = ({
};
/**
- * Picker template including adjacent popover and help text.
+ * Picker template used along with other sibling components, such as Field label and Help text.
*/
export const Template = ({
- rootClass = "spectrum-Picker",
size = "m",
label,
labelPosition = "top",
- placeholder = "",
- currentValue = "",
- helpText = "",
+ placeholder,
+ helpText,
isQuiet = false,
- isKeyboardFocused = false,
- showWorkflowIcon = false,
isOpen = false,
isInvalid = false,
- isLoading = false,
isDisabled = false,
- isReadOnly = false,
- isHovered = false,
- isActive = false,
+ isLoading = false,
withSwitch = false,
fieldLabelStyle = {},
- customClasses = [],
- customStyles = {},
+ fieldLabelId = getRandomId("fieldlabel"),
+ customPopoverStyles = {
+ // Demonstrate popover at 100% of the width of the Picker.
+ minInlineSize: "100%",
+ "--mod-menu-inline-size": "100%",
+ // Helps ensure that Popover appears below the Picker, with side labels layout.
+ display: "block",
+ },
popoverContent = [],
- id = getRandomId("picker"),
} = {}, context = {}) => {
- const { updateArgs } = context;
+ const pickerMarkup = Picker({
+ size,
+ isQuiet,
+ isOpen,
+ isInvalid,
+ isDisabled,
+ isLoading,
+ placeholder,
+ popoverContent,
+ labelPosition,
+ ariaLabeledBy: fieldLabelId,
+ }, context);
- return html`
- ${when(label, () =>
- FieldLabel({
- size,
- label,
- isDisabled,
- customStyles: fieldLabelStyle,
- alignment: labelPosition === "side" ? "left" : undefined,
- }, context)
- )}
- ${Popover({
- isOpen: isOpen && !isDisabled,
- withTip: false,
- position: "bottom-start",
- trigger: (passthroughs, context) => Picker({
- ...passthroughs,
- rootClass,
- size,
- placeholder,
- currentValue,
- isQuiet,
- showWorkflowIcon,
- isKeyboardFocused,
- isOpen,
- isInvalid,
- isLoading,
- isDisabled,
- isReadOnly,
- isHovered,
- isActive,
- customClasses,
- customStyles,
- labelPosition,
- id,
- onclick: function() {
- updateArgs({ isOpen: !isOpen });
- },
- }, context),
- content: popoverContent,
- }, context)}
- ${when(helpText, () =>
- HelpText({
- text: helpText,
- variant: isInvalid ? "negative" : "neutral",
- hideIcon: true,
- }, context)
- )}
- ${when(withSwitch, () =>
- Switch({
- size,
- label: "Toggle switch",
- customStyles: {
- "padding-inline-start": "15px"
+ const popoverMarkup = popoverContent.length !== 0 ? Popover({
+ isOpen: isOpen && !isDisabled && !isLoading,
+ withTip: false,
+ position: "bottom-start",
+ isQuiet,
+ content: popoverContent,
+ size,
+ customStyles: customPopoverStyles,
+ popoverWrapperStyles: {
+ "display": "block",
+ },
+ }, context) : "";
+
+ const helpTextMarkup = helpText ? HelpText({
+ size,
+ text: helpText,
+ variant: isInvalid ? "negative" : "neutral",
+ hideIcon: true,
+ isDisabled,
+ }, context) : "";
+
+ const markup = html`
+
+ ${when(label, () =>
+ FieldLabel({
+ size,
+ label,
+ isDisabled,
+ style: fieldLabelStyle,
+ alignment: labelPosition == "side" ? "left" : undefined,
+ id: fieldLabelId,
+ }, context)
+ )}
+ ${labelPosition == "side"
+ ? html`
${pickerMarkup} ${popoverMarkup} ${helpTextMarkup}
`
+ : html`${pickerMarkup} ${popoverMarkup} ${helpTextMarkup}`
+ }
+ ${when(withSwitch, () =>
+ Switch({
+ size,
+ label: "Toggle switch",
+ id: fieldLabelId + "-switch",
+ customStyles: {
+ "padding-inline-start": "15px"
+ }
+ }, 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";
-
-@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);
- --spectrum-picker-background-color-hover: var(--spectrum-gray-300);
- --spectrum-picker-background-color-hover-open: var(--spectrum-gray-300);
- --spectrum-picker-background-color-active: var(--spectrum-gray-400);
- --spectrum-picker-background-color-key-focus: var(--spectrum-gray-300);
-
- --spectrum-picker-border-color-default: transparent;
- --spectrum-picker-border-color-default-open: transparent;
- --spectrum-picker-border-color-hover: transparent;
- --spectrum-picker-border-color-hover-open: transparent;
- --spectrum-picker-border-color-active: transparent;
- --spectrum-picker-border-color-key-focus: transparent;
-
- --spectrum-picker-border-width: 0px;
- }
-}
diff --git a/components/picker/themes/spectrum-two.css b/components/picker/themes/spectrum-two.css
deleted file mode 100644
index 3be66bfa106..00000000000
--- a/components/picker/themes/spectrum-two.css
+++ /dev/null
@@ -1,33 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-Picker {
- --spectrum-picker-background-color-default: var(--spectrum-gray-100);
- --spectrum-picker-background-color-default-open: var(--spectrum-gray-200);
- --spectrum-picker-background-color-hover: var(--spectrum-gray-200);
- --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200);
- --spectrum-picker-background-color-active: 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-800);
- --spectrum-picker-border-color-hover: var(--spectrum-gray-600);
- --spectrum-picker-border-color-hover-open: var(--spectrum-gray-900);
- --spectrum-picker-border-color-active: var(--spectrum-gray-700);
- --spectrum-picker-border-color-key-focus: var(--spectrum-gray-900);
- --spectrum-picker-border-color-disabled: var(--spectrum-gray-300);
-
- --spectrum-picker-border-width: var(--spectrum-border-width-100);
- }
-}
diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css
deleted file mode 100644
index 70759b6ea39..00000000000
--- a/components/picker/themes/spectrum.css
+++ /dev/null
@@ -1,33 +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.
- */
-
-/* @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);
- --spectrum-picker-background-color-active: var(--spectrum-gray-300);
- --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-open: var(--spectrum-gray-600);
- --spectrum-picker-border-color-key-focus: var(--spectrum-gray-600);
- --spectrum-picker-border-color-disabled: transparent;
- }
-}
diff --git a/components/pickerbutton/CHANGELOG.md b/components/pickerbutton/CHANGELOG.md
index 549c39da78c..025d8d99821 100644
--- a/components/pickerbutton/CHANGELOG.md
+++ b/components/pickerbutton/CHANGELOG.md
@@ -1,5 +1,14 @@
# Change log
+## 7.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+ - @spectrum-css/menu@10.0.0-next.0
+ - @spectrum-css/popover@9.0.0-next.0
+
## 6.1.1
### Patch Changes
diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json
index 27643d6fd25..c6186980d83 100644
--- a/components/pickerbutton/dist/metadata.json
+++ b/components/pickerbutton/dist/metadata.json
@@ -107,12 +107,13 @@
"global": [
"--spectrum-animation-duration-100",
"--spectrum-body-sans-serif-font-weight",
+ "--spectrum-border-width-100",
"--spectrum-component-height-100",
"--spectrum-component-height-200",
"--spectrum-component-height-300",
"--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",
@@ -137,18 +138,6 @@
"--spectrum-text-to-visual-300",
"--spectrum-text-to-visual-50"
],
- "system-theme": [
- "--system-picker-button-background-color",
- "--system-picker-button-background-color-down",
- "--system-picker-button-background-color-hover",
- "--system-picker-button-background-color-key-focus",
- "--system-picker-button-border-color",
- "--system-picker-button-border-radius",
- "--system-picker-button-border-radius-rounded-sided",
- "--system-picker-button-border-radius-sided",
- "--system-picker-button-border-width",
- "--system-picker-button-padding"
- ],
"passthroughs": [],
"high-contrast": []
}
diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css
index d9404687aca..65e1f840c19 100644
--- a/components/pickerbutton/index.css
+++ b/components/pickerbutton/index.css
@@ -11,9 +11,10 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
.spectrum-PickerButton {
+ /* Bring back --spectrum-in-field-button-edge-to-fill when S2 tokens available */
+ --spectrum-picker-button-padding: 4px;
+
--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);
@@ -36,7 +37,17 @@
--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-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-border-radius-rounded: var(--spectrum-corner-radius-200);
+
+ --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-background-animation-duration: var(--spectrum-animation-duration-100);
&:hover {
diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json
index fec23830b1e..cf60aeb598e 100644
--- a/components/pickerbutton/package.json
+++ b/components/pickerbutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/pickerbutton",
- "version": "6.1.1",
+ "version": "7.0.0-next.0",
"description": "The Spectrum CSS picker button component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,9 +25,9 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
- "@spectrum-css/menu": ">=9.0.0 <10.0.0",
- "@spectrum-css/popover": ">=8.0.0 <9.0.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
+ "@spectrum-css/menu": ">=10.0.0-next.0",
+ "@spectrum-css/popover": ">=9.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -45,9 +45,9 @@
}
},
"devDependencies": {
- "@spectrum-css/icon": "9.1.0",
- "@spectrum-css/menu": "9.2.0",
- "@spectrum-css/popover": "8.2.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
+ "@spectrum-css/menu": "10.0.0-next.1",
+ "@spectrum-css/popover": "9.0.0-next.1",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
index 3df4f85b636..6adcb7398fd 100644
--- a/components/pickerbutton/stories/template.js
+++ b/components/pickerbutton/stories/template.js
@@ -8,9 +8,6 @@ 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
deleted file mode 100644
index 9dbd1a7fa4a..00000000000
--- a/components/pickerbutton/themes/express.css
+++ /dev/null
@@ -1,33 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
-
-@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);
- --spectrum-picker-button-background-color-down: var(--spectrum-gray-400);
- --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-300);
-
- --spectrum-picker-button-border-color: none;
- --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75);
- --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200);
- --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75);
- --spectrum-picker-button-border-width: 0px;
-
- --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill);
- }
-}
diff --git a/components/pickerbutton/themes/spectrum-two.css b/components/pickerbutton/themes/spectrum-two.css
deleted file mode 100644
index fb132a104e9..00000000000
--- a/components/pickerbutton/themes/spectrum-two.css
+++ /dev/null
@@ -1,30 +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.
- */
-
-@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: none;
- --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75);
- --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200);
- --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75);
- --spectrum-picker-button-border-width: 0px;
-
- /* Bring back --spectrum-in-field-button-edge-to-fill when S2 tokens available */
- --spectrum-picker-button-padding: 4px;
- }
-}
diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css
deleted file mode 100644
index 85c3b9aaf9e..00000000000
--- a/components/pickerbutton/themes/spectrum.css
+++ /dev/null
@@ -1,33 +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.
- */
-
-/* @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);
-
- --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill);
- }
-}
diff --git a/components/popover/CHANGELOG.md b/components/popover/CHANGELOG.md
index b2ade910b95..92770ea8967 100644
--- a/components/popover/CHANGELOG.md
+++ b/components/popover/CHANGELOG.md
@@ -1,5 +1,21 @@
# Change log
+## 9.0.0-next.1
+
+### Patch Changes
+
+- Updated dependencies [[`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914)]:
+ - @spectrum-css/divider@6.0.0-next.0
+
+## 9.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies []:
+ - @spectrum-css/alertdialog@5.0.0-next.0
+ - @spectrum-css/menu@10.0.0-next.0
+ - @spectrum-css/dialog@13.0.0-next.0
+
## 8.2.0
### Minor Changes
diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json
index 234562ed9ae..75570cec13b 100644
--- a/components/popover/dist/metadata.json
+++ b/components/popover/dist/metadata.json
@@ -105,51 +105,52 @@
"--mod-popover-background-color",
"--mod-popover-border-color",
"--mod-popover-border-width",
- "--mod-popover-content-area-spacing-vertical",
+ "--mod-popover-content-area-spacing",
"--mod-popover-corner-radius",
+ "--mod-popover-drop-shadow-blur",
+ "--mod-popover-drop-shadow-color",
+ "--mod-popover-drop-shadow-x",
+ "--mod-popover-drop-shadow-y",
"--mod-popover-filter",
"--mod-popover-pointer-edge-spacing",
"--mod-popover-pointer-height",
- "--mod-popover-pointer-width",
- "--mod-popover-shadow-blur",
- "--mod-popover-shadow-color",
- "--mod-popover-shadow-horizontal",
- "--mod-popover-shadow-vertical"
+ "--mod-popover-pointer-width"
],
"component": [
"--spectrum-popover-animation-distance",
"--spectrum-popover-background-color",
- "--spectrum-popover-border-color",
+ "--spectrum-popover-border-color-rgb",
+ "--spectrum-popover-border-color-with-transparency",
+ "--spectrum-popover-border-opacity",
+ "--spectrum-popover-border-transparency",
"--spectrum-popover-border-width",
- "--spectrum-popover-content-area-spacing-vertical",
+ "--spectrum-popover-content-area-spacing",
"--spectrum-popover-corner-radius",
+ "--spectrum-popover-drop-shadow-blur",
+ "--spectrum-popover-drop-shadow-color",
+ "--spectrum-popover-drop-shadow-x",
+ "--spectrum-popover-drop-shadow-y",
+ "--spectrum-popover-edge-to-content-area",
"--spectrum-popover-filter",
"--spectrum-popover-pointer-edge-offset",
"--spectrum-popover-pointer-edge-spacing",
"--spectrum-popover-pointer-height",
"--spectrum-popover-pointer-width",
- "--spectrum-popover-shadow-blur",
- "--spectrum-popover-shadow-color",
- "--spectrum-popover-shadow-horizontal",
- "--spectrum-popover-shadow-vertical",
"--spectrum-popover-tip-height",
- "--spectrum-popover-tip-width",
- "--spectrum-popover-top-to-content-area"
+ "--spectrum-popover-tip-width"
],
"global": [
"--spectrum-animation-duration-0",
"--spectrum-animation-duration-100",
"--spectrum-background-layer-2-color",
- "--spectrum-border-width-100",
- "--spectrum-corner-radius-100",
- "--spectrum-drop-shadow-blur",
- "--spectrum-drop-shadow-color",
- "--spectrum-drop-shadow-x",
- "--spectrum-drop-shadow-y",
- "--spectrum-gray-400",
+ "--spectrum-corner-radius-large-default",
+ "--spectrum-drop-shadow-elevated-blur",
+ "--spectrum-drop-shadow-elevated-color",
+ "--spectrum-drop-shadow-elevated-x",
+ "--spectrum-drop-shadow-elevated-y",
+ "--spectrum-gray-200-rgb",
"--spectrum-spacing-100"
],
- "system-theme": ["--system-popover-border-width"],
"passthroughs": [],
"high-contrast": ["--highcontrast-popover-border-color"]
}
diff --git a/components/popover/index.css b/components/popover/index.css
index 080412ed506..0cc88d2eda4 100644
--- a/components/popover/index.css
+++ b/components/popover/index.css
@@ -11,48 +11,45 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
@import "@spectrum-css/commons/overlay.css";
.spectrum-Popover {
- /* animation distance is equal to and responsible for popover offset */
+ /* animation distance is equal to and responsible for popover offset ("spacing" tip to source) */
--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);
+
+ /* TODO: Cannot use popover-border-color token until the value no longer has the rgba() function alpha/opacity. We should be able to refactor instances of `--spectrum-popover-border-color-rgb` with `--spectrum-popover-border-color` once this is available. */
+ /* --spectrum-popover-border-color-default: var(--spectrum-popover-border-color); */
+ --spectrum-popover-border-color-rgb: var(--spectrum-gray-200-rgb);
+ --spectrum-popover-border-transparency: var(--spectrum-popover-border-opacity);
+ --spectrum-popover-border-color-with-transparency: rgba(var(--spectrum-popover-border-color-rgb), var(--spectrum-popover-border-transparency));
/* popover inner padding */
- --spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area);
+ --spectrum-popover-content-area-spacing: var(--spectrum-popover-edge-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);
+ --spectrum-popover-drop-shadow-x: var(--spectrum-drop-shadow-elevated-x);
+ --spectrum-popover-drop-shadow-y: var(--spectrum-drop-shadow-elevated-y);
+ --spectrum-popover-drop-shadow-blur: var(--spectrum-drop-shadow-elevated-blur);
+ --spectrum-popover-drop-shadow-color: var(--spectrum-drop-shadow-elevated-color);
/* popover corner radius */
- --spectrum-popover-corner-radius: var(--spectrum-corner-radius-100);
+ --spectrum-popover-corner-radius: var(--spectrum-corner-radius-large-default);
/* 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));
+ --spectrum-popover-pointer-edge-offset: calc(var(--spectrum-popover-corner-radius) + (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));
}
-/* windows high contrast mode */
-@media (forced-colors: active) {
- .spectrum-Popover {
- --highcontrast-popover-border-color: CanvasText;
- }
-}
-
.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)));
+ --spectrum-popover-filter: drop-shadow(var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color)));
@extend %spectrum-overlay;
box-sizing: border-box;
@@ -60,14 +57,15 @@
outline: none; /* Hide focus outline */
- padding: var(--mod-popover-content-area-spacing-vertical, var(--spectrum-popover-content-area-spacing-vertical)) 0;
+ padding: var(--mod-popover-content-area-spacing, var(--spectrum-popover-content-area-spacing));
display: inline-flex;
flex-direction: column;
border-style: solid;
border-radius: var(--mod-popover-corner-radius, var(--spectrum-popover-corner-radius));
- border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color)));
+ border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency)));
+
border-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
@@ -84,7 +82,7 @@
stroke-linecap: square;
stroke-linejoin: miter;
fill: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
- stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color)));
+ stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency)));
stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
}
}
@@ -150,7 +148,7 @@
&.spectrum-Popover--withTip {
/* tip size minus where it overlaps with popover border */
/* stylelint-disable-next-line csstools/use-logical -- intentional, right stays on the same side even for RTL */
- margin-left: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
+ margin-left: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
}
/* popover animates towards right ⮕ */
@@ -168,7 +166,7 @@
&.spectrum-Popover--withTip {
/* tip size minus where it overlaps with popover border */
/* stylelint-disable-next-line csstools/use-logical -- intentional, left stays on the same side even for RTL */
- margin-right: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
+ margin-right: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
}
/* popover animates towards left ⬅ */
@@ -185,7 +183,7 @@
/* spacing to include tip in calculation of offset from source */
&.spectrum-Popover--withTip {
/* tip size minus where it overlaps with popover border */
- margin-inline-end: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
+ margin-inline-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
}
/* LTR read, popover animates towards left ⬅ */
@@ -207,7 +205,7 @@
/* spacing to include tip in calculation of offset from source */
&.spectrum-Popover--withTip {
/* tip size minus where it overlaps with popover border */
- margin-inline-start: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
+ margin-inline-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
}
/* LTR read, popover animates towards right ⮕ */
@@ -422,3 +420,10 @@
}
}
}
+
+/* windows high contrast mode */
+@media (forced-colors: active) {
+ .spectrum-Popover {
+ --highcontrast-popover-border-color: CanvasText;
+ }
+}
diff --git a/components/popover/package.json b/components/popover/package.json
index 833cf08b3b3..b2d561502a4 100644
--- a/components/popover/package.json
+++ b/components/popover/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/popover",
- "version": "8.2.0",
+ "version": "9.0.0-next.1",
"description": "The Spectrum CSS popover component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,10 +25,10 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/alertdialog": ">=4.0.0 <5.0.0",
- "@spectrum-css/dialog": ">=12.0.0 <13.0.0",
- "@spectrum-css/divider": ">=5.0.0 <6.0.0",
- "@spectrum-css/menu": ">=9.0.0 <10.0.0",
+ "@spectrum-css/alertdialog": ">=5.0.0-next.0",
+ "@spectrum-css/dialog": ">=13.0.0-next.0",
+ "@spectrum-css/divider": ">=6.0.0-next.0",
+ "@spectrum-css/menu": ">=10.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -49,11 +49,11 @@
}
},
"devDependencies": {
- "@spectrum-css/alertdialog": "4.1.0",
+ "@spectrum-css/alertdialog": "5.0.0-next.2",
"@spectrum-css/commons": "11.0.0",
- "@spectrum-css/dialog": "12.1.0",
- "@spectrum-css/divider": "5.1.0",
- "@spectrum-css/menu": "9.2.0",
+ "@spectrum-css/dialog": "13.0.0-next.2",
+ "@spectrum-css/divider": "6.0.0-next.0",
+ "@spectrum-css/menu": "10.0.0-next.1",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js
index e5e7f986607..844b18eeeff 100644
--- a/components/popover/stories/popover.stories.js
+++ b/components/popover/stories/popover.stories.js
@@ -12,11 +12,12 @@ import { FixedWidthSourceTemplate, Template, TipPlacementVariants } from "./temp
/**
* A popover is used to display transient content (menus, options, additional actions, etc.) and appears when clicking/tapping on a source (tools, buttons, etc.).
- * It stands out via its visual style (stroke and drop shadow) and floats on top of the rest of the interface.
+ * It stands out via its visual style (stroke and/or drop shadow) and floats on top of the rest of the interface.
*
+ * ## Usage notes
* - Popover's position and distance to its source should be handled by the implementation. Positioning in Storybook is only for demonstration purposes.
- * - When the `.is-open` class is present, popover is offset from the source by the spacing value defined in `--spectrum-popover-animation-distance`. This
- * offset is done with a CSS transform and animates with a CSS transition.
+ * - When the `.is-open` class is present, popover is offset from the source by the spacing value defined in `--spectrum-popover-animation-distance`. This offset is done with a CSS transform and animates with a CSS transition.
+ * - There may be cases where a popover has another sibling popover. Implementations can add `margin` styles to the sibling popover, set to `--spectrum-popover-animation-distance`, within their popover position calculations. See [the nested popover story](/docs/components-popover--docs#nested) below for an example.
*/
export default {
title: "Popover",
@@ -81,8 +82,8 @@ export default {
isOpen: true,
withTip: false,
position: "bottom",
- popoverHeight: 142,
- popoverWidth: 89,
+ popoverHeight: 158,
+ popoverWidth: 105,
},
parameters: {
layout: "centered",
@@ -101,10 +102,10 @@ export default {
};
/**
- * By default, popovers do not have a tip. Popovers without a tip should be used when the source has a
- * visually distinct down state, in order to show the connection between the popover and its source.
+ * By default, popovers do not have a tip and are positioned at the top. Popovers without a tip should be used when the source has a
+ * visually distinct [down state](/docs/foundations-down-state--docs), in order to show the connection between the popover and its source.
*
- * This example uses the [menu](?path=/docs/components-menu--docs) component within the popover, and a button as the source.
+ * This example uses the [menu](/docs/components-menu--docs) component within the popover, has a position of `bottom`, and uses a button as the source.
*/
export const Default = PopoverGroup.bind({});
Default.args = {
@@ -163,6 +164,10 @@ Nested.args = {
(passthroughs, context) => Template({
position: "end-top",
isOpen: true,
+ customStyles: {
+ // nested popover spacing so that adjacent `.spectrum-Popover` divs don't "touch"
+ "margin": "var(--spectrum-popover-animation-distance)",
+ },
trigger: (passthroughs, context) => ActionButton({
label: "More actions",
...passthroughs,
@@ -231,7 +236,7 @@ WithTip.parameters = {
*/
// @see https://opensource.adobe.com/spectrum-web-components/components/popover/#dialog-popovers
export const DialogStyle = Template.bind({});
-DialogStyle.storyName = "Dialog style content";
+DialogStyle.storyName = "Dialog-style content";
DialogStyle.tags = ["!dev"];
DialogStyle.args = {
withTip: true,
diff --git a/components/popover/stories/popover.test.js b/components/popover/stories/popover.test.js
index ad179e3b70e..846d9bd15c4 100644
--- a/components/popover/stories/popover.test.js
+++ b/components/popover/stories/popover.test.js
@@ -30,8 +30,8 @@ export const PopoverGroup = Variants({
"end-top",
"end-bottom",
].map((position) => {
- const popoverHeight = 142;
- const popoverWidth = 89;
+ const popoverHeight = 158;
+ const popoverWidth = 105;
let wrapperStyles = {
"justify-content": "center",
diff --git a/components/popover/stories/template.js b/components/popover/stories/template.js
index 6d7e55375e2..3ff8ee18be9 100644
--- a/components/popover/stories/template.js
+++ b/components/popover/stories/template.js
@@ -8,9 +8,6 @@ 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-Popover",
@@ -24,8 +21,8 @@ export const Template = ({
triggerId = getRandomId("popover-trigger"),
customStyles = {},
popoverWrapperStyles = {},
- popoverHeight = 142,
- popoverWidth = 89,
+ popoverHeight = 158,
+ popoverWidth = 105,
popoverAlignment = {},
skipAlignment = false,
trigger,
diff --git a/components/popover/themes/express.css b/components/popover/themes/express.css
deleted file mode 100644
index 32c92bf71b5..00000000000
--- a/components/popover/themes/express.css
+++ /dev/null
@@ -1,22 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
-
-@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
deleted file mode 100644
index 80c0cdc94c4..00000000000
--- a/components/popover/themes/spectrum-two.css
+++ /dev/null
@@ -1,18 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-Popover {
- --spectrum-popover-border-width: var(--spectrum-border-width-100);
- }
-}
diff --git a/components/popover/themes/spectrum.css b/components/popover/themes/spectrum.css
deleted file mode 100644
index 3d81bc564b5..00000000000
--- a/components/popover/themes/spectrum.css
+++ /dev/null
@@ -1,16 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
diff --git a/components/progressbar/CHANGELOG.md b/components/progressbar/CHANGELOG.md
index 8241c6302c2..ec201b252c6 100644
--- a/components/progressbar/CHANGELOG.md
+++ b/components/progressbar/CHANGELOG.md
@@ -1,5 +1,12 @@
# Change log
+## 7.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies []:
+ - @spectrum-css/fieldlabel@11.0.0-next.0
+
## 6.1.0
### Minor Changes
diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json
index 3294d6c477a..25c7fd682a6 100644
--- a/components/progressbar/dist/metadata.json
+++ b/components/progressbar/dist/metadata.json
@@ -2,27 +2,31 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-ProgressBar",
+ ".spectrum-ProgressBar .spectrum-ProgressBar-fill",
+ ".spectrum-ProgressBar .spectrum-ProgressBar-label",
+ ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ja)",
+ ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ko)",
+ ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(zh)",
+ ".spectrum-ProgressBar .spectrum-ProgressBar-percentage",
+ ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ja)",
+ ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ko)",
+ ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(zh)",
+ ".spectrum-ProgressBar .spectrum-ProgressBar-track",
".spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill",
+ ".spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl)",
+ ".spectrum-ProgressBar--sideLabel",
".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label",
".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage",
".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track",
".spectrum-ProgressBar--sizeL",
- ".spectrum-ProgressBar--sizeM",
".spectrum-ProgressBar--sizeS",
".spectrum-ProgressBar--sizeXL",
- ".spectrum-ProgressBar-fill",
- ".spectrum-ProgressBar-label",
- ".spectrum-ProgressBar-percentage",
+ ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill",
+ ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label",
+ ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage",
+ ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track",
".spectrum-ProgressBar-track",
- ".spectrum-ProgressBar.spectrum-ProgressBar--sideLabel",
- ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite",
- ".spectrum-ProgressBar:dir(rtl)",
- ".spectrum-ProgressBar:lang(ja)",
- ".spectrum-ProgressBar:lang(ko)",
- ".spectrum-ProgressBar:lang(zh)",
- "0%",
- "[dir=\"rtl\"] .spectrum-ProgressBar",
- "to"
+ "[dir=\"rtl\"] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill"
],
"modifiers": [
"--mod-progressbar-animation-duration-indeterminate",
@@ -42,18 +46,19 @@
"--mod-progressbar-spacing-top-to-text",
"--mod-progressbar-text-color",
"--mod-progressbar-thickness",
- "--mod-progressbar-track-color"
+ "--mod-progressbar-track-color",
+ "--mod-spacing-progressbar-label-to-text"
],
"component": [
"--spectrum-progress-bar-maximum-width",
"--spectrum-progress-bar-minimum-width",
"--spectrum-progress-bar-thickness-extra-large",
"--spectrum-progress-bar-thickness-large",
+ "--spectrum-progress-bar-thickness-medium",
"--spectrum-progress-bar-thickness-small",
"--spectrum-progressbar-animation-duration-indeterminate",
"--spectrum-progressbar-animation-ease-in-out-indeterminate",
"--spectrum-progressbar-corner-radius",
- "--spectrum-progressbar-dir-indeterminate-multiplier",
"--spectrum-progressbar-fill-color",
"--spectrum-progressbar-fill-color-white",
"--spectrum-progressbar-fill-size-indeterminate",
@@ -67,22 +72,16 @@
"--spectrum-progressbar-size-2500",
"--spectrum-progressbar-size-2800",
"--spectrum-progressbar-size-default",
- "--spectrum-progressbar-sized-font-size",
- "--spectrum-progressbar-sized-size-default",
- "--spectrum-progressbar-sized-spacing-top-to-text",
- "--spectrum-progressbar-sized-thickness",
"--spectrum-progressbar-spacing-label-to-progressbar",
"--spectrum-progressbar-spacing-label-to-text",
"--spectrum-progressbar-spacing-top-to-text",
- "--spectrum-progressbar-static-white-track-color",
"--spectrum-progressbar-text-color",
"--spectrum-progressbar-thickness",
"--spectrum-progressbar-track-color",
- "--spectrum-progressbar-track-color-default",
"--spectrum-progressbar-track-color-white"
],
"global": [
- "--spectrum-accent-color-900",
+ "--spectrum-accent-content-color-default",
"--spectrum-animation-duration-2000",
"--spectrum-animation-ease-in-out",
"--spectrum-cjk-line-height-100",
@@ -90,25 +89,24 @@
"--spectrum-component-top-to-text-200",
"--spectrum-component-top-to-text-300",
"--spectrum-component-top-to-text-75",
- "--spectrum-corner-radius-100",
+ "--spectrum-corner-radius-full",
"--spectrum-font-size-100",
"--spectrum-font-size-200",
+ "--spectrum-font-size-300",
"--spectrum-font-size-75",
- "--spectrum-gray-200",
+ "--spectrum-gray-300",
"--spectrum-line-height-100",
- "--spectrum-neutral-content-color-default",
+ "--spectrum-neutral-subdued-content-color-default",
"--spectrum-spacing-200",
"--spectrum-spacing-75",
- "--spectrum-transparent-white-400",
- "--spectrum-white"
+ "--spectrum-transparent-white-300",
+ "--spectrum-transparent-white-700",
+ "--spectrum-transparent-white-900"
],
- "system-theme": [
- "--system-progress-bar-track-color",
- "--system-progress-bar-track-color-white"
- ],
- "passthroughs": ["--mod-fieldlabel-font-size"],
+ "passthroughs": [],
"high-contrast": [
"--highcontrast-progressbar-fill-color",
+ "--highcontrast-progressbar-fill-color-white",
"--highcontrast-progressbar-track-color"
]
}
diff --git a/components/progressbar/index.css b/components/progressbar/index.css
index 648c492df0f..a45e9285b09 100644
--- a/components/progressbar/index.css
+++ b/components/progressbar/index.css
@@ -11,50 +11,13 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
-.spectrum-ProgressBar,
-.spectrum-ProgressBar--sizeM {
- --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400);
- --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75);
- /* @todo should this be --spectrum-progress-bar-thickness-medium? */
- --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large);
- --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-100);
-}
-
-.spectrum-ProgressBar--sizeS {
- --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400);
- --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75);
- --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-small);
- --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
-}
-
-.spectrum-ProgressBar--sizeL {
- --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2500);
- --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-100);
- --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large);
- --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
-}
-
-.spectrum-ProgressBar--sizeXL {
- --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2800);
- --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-200);
- --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-extra-large);
- --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
-}
-
.spectrum-ProgressBar {
- --spectrum-progressbar-size-default: var(--mod-progressbar-size-default, var(--spectrum-progressbar-sized-size-default));
- --spectrum-progressbar-font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-sized-font-size));
- --spectrum-progressbar-thickness: var(--mod-progressbar-thickness, var(--spectrum-progressbar-sized-thickness));
- --spectrum-progressbar-spacing-top-to-text: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-sized-spacing-top-to-text));
-
- --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-animation-ease-in-out));
- --spectrum-progressbar-animation-duration-indeterminate: var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-animation-duration-2000));
- --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100);
+ /* 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-full);
- --spectrum-progressbar-fill-size-indeterminate: var(--mod-progressbar-fill-size-indeterminate, 70%);
- --spectrum-progressbar-dir-indeterminate-multiplier: 1;
+ --spectrum-progressbar-fill-size-indeterminate: 70%;
/* --spectrum-global-dimension-static-size-2400 */
--spectrum-progressbar-size-2400: 192px;
@@ -66,50 +29,56 @@
--spectrum-progressbar-size-2800: 224px;
/* Size */
- --spectrum-progressbar-line-height-cjk: var(--mod-progressbar-line-height-cjk, var(--spectrum-cjk-line-height-100));
+ --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
- --spectrum-progressbar-min-size: var(--mod-progressbar-min-size, var(--spectrum-progress-bar-minimum-width));
- --spectrum-progressbar-max-size: var(--mod-progressbar-max-size, var(--spectrum-progress-bar-maximum-width));
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-100);
+ --spectrum-progressbar-line-height: var(--spectrum-line-height-100);
+ --spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100);
- --spectrum-progressbar-line-height: var(--mod-progressbar-line-height, var(--spectrum-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);
/* Spacing */
- --spectrum-progressbar-spacing-label-to-progressbar: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-spacing-75));
- --spectrum-progressbar-spacing-label-to-text: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-spacing-200));
+ --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-fill-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-accent-color-900)));
- --spectrum-progressbar-track-color-default: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
+ --spectrum-progressbar-text-color: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-progressbar-track-color: var(--spectrum-gray-300);
+ --spectrum-progressbar-fill-color: var(--spectrum-accent-content-color-default);
+ --spectrum-progressbar-label-and-value-white: var(--spectrum-transparent-white-700);
+ --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300);
+ --spectrum-progressbar-fill-color-white: var(--spectrum-transparent-white-900);
+}
- --spectrum-progressbar-text-color: var(--mod-progressbar-text-color, var(--spectrum-neutral-content-color-default));
- --spectrum-progressbar-label-and-value-white: var(--mod-progressbar-label-and-value-white, var(--spectrum-white));
- --spectrum-progressbar-fill-color-white: var(--mod-progressbar-fill-color-white, var(--spectrum-white));
- --spectrum-progressbar-static-white-track-color: var(--spectrum-progressbar-track-color-white);
+.spectrum-ProgressBar--sizeS {
+ --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
- /* @passthrough */
- --mod-fieldlabel-font-size: var(--spectrum-progressbar-font-size);
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-75);
+ --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small);
- &:dir(rtl) {
- --spectrum-progressbar-dir-indeterminate-multiplier: -1;
- }
+ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
+}
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --mod-progressbar-line-height: var(--spectrum-progressbar-line-height-cjk);
- }
+.spectrum-ProgressBar--sizeL {
+ --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500);
+
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-200);
+ --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
+
+ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
}
-@media (forced-colors: active) {
- .spectrum-ProgressBar {
- --highcontrast-progressbar-fill-color: ButtonText;
- --highcontrast-progressbar-track-color: ButtonFace;
- }
+.spectrum-ProgressBar--sizeXL {
+ --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800);
- .spectrum-ProgressBar-track {
- forced-color-adjust: none;
- border: 1px solid ButtonText;
- }
+ --spectrum-progressbar-font-size: var(--spectrum-font-size-300);
+ --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large);
+
+ --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
}
.spectrum-ProgressBar {
@@ -118,99 +87,151 @@
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
+ font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size));
vertical-align: top;
+ word-break: break-word;
- inline-size: var(--spectrum-progressbar-size-default);
- max-inline-size: var(--spectrum-progressbar-max-size);
- min-inline-size: var(--spectrum-progressbar-min-size);
+ inline-size: var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default));
+ max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size));
+ min-inline-size: var(--mod-progressbar-min-size, var(--spectrum-progressbar-min-size));
- &.spectrum-ProgressBar--sideLabel {
- flex-flow: row;
- justify-content: space-between;
+ /* Label and Percentage */
+ .spectrum-ProgressBar-label,
+ .spectrum-ProgressBar-percentage {
+ text-align: start;
+ margin-block-start: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-spacing-top-to-text));
+ margin-block-end: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-progressbar-spacing-label-to-progressbar));
+
+ line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height));
+
+ &: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));
}
- &.spectrum-ProgressBar--staticWhite {
- --mod-progressbar-fill-color: var(--spectrum-progressbar-fill-color-white);
- --mod-progressbar-text-color: var(--spectrum-progressbar-label-and-value-white);
- --mod-progressbar-track-color: var(--spectrum-progressbar-static-white-track-color);
+ /* Label */
+ .spectrum-ProgressBar-label {
+ flex: 1 1 0%;
}
-}
-/* Label and Percentage */
-.spectrum-ProgressBar-label,
-.spectrum-ProgressBar-percentage {
- text-align: start;
- margin-block-start: var(--spectrum-progressbar-spacing-top-to-text);
- margin-block-end: var(--spectrum-progressbar-spacing-label-to-progressbar);
+ /* Percentage */
+ .spectrum-ProgressBar-percentage {
+ align-self: flex-start;
+ margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
+ word-break: normal;
+ }
+
+ /* Track */
+ .spectrum-ProgressBar-track {
+ /* Visually apply border radius to child elements */
+ overflow: hidden;
+ inline-size: 100%;
+ block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
+ border-radius: var(--spectrum-progressbar-corner-radius);
+
+ background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
+ }
- line-height: var(--spectrum-progressbar-line-height);
- color: var(--spectrum-progressbar-text-color);
+ .spectrum-ProgressBar-fill {
+ border: none;
+ block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
+ transition: width 1s;
+ background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
+ }
+}
+
+.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill {
+ inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate));
+ position: relative;
+ animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate));
+ will-change: transform;
}
-/* Label */
-.spectrum-ProgressBar-label {
- flex: 1 1 0%;
+/* Variants */
+/* Side Label */
+.spectrum-ProgressBar--sideLabel {
+ display: inline-flex;
+ flex-flow: row;
+ justify-content: space-between;
+ word-break: normal;
+
+ .spectrum-ProgressBar-track {
+ flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default));
+ }
- .spectrum-ProgressBar--sideLabel & {
+ .spectrum-ProgressBar-label {
flex-grow: 0;
- margin-inline-end: var(--spectrum-progressbar-spacing-label-to-text);
+ margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
margin-block-end: 0;
+ margin-block-start: 0;
}
-}
-
-/* Percentage */
-.spectrum-ProgressBar-percentage {
- align-self: flex-start;
- margin-inline-start: var(--spectrum-progressbar-spacing-label-to-text);
- .spectrum-ProgressBar--sideLabel & {
+ .spectrum-ProgressBar-percentage {
order: 3;
text-align: end;
+ margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
margin-block-end: 0;
+ margin-block-start: 0;
}
}
-/* Track */
-.spectrum-ProgressBar-track {
- /* Visually apply border radius to child elements */
- overflow: hidden;
- inline-size: 100%;
- block-size: var(--spectrum-progressbar-thickness);
- border-radius: var(--spectrum-progressbar-corner-radius);
+/* Static White */
+.spectrum-ProgressBar--staticWhite {
+ .spectrum-ProgressBar-fill {
+ color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
+ background: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)));
+ }
- background: var(--spectrum-progressbar-track-color-default);
+ .spectrum-ProgressBar-label,
+ .spectrum-ProgressBar-percentage {
+ color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
+ }
- .spectrum-ProgressBar--sideLabel & {
- flex: 1 1 var(--spectrum-progressbar-size-default);
+ .spectrum-ProgressBar-track {
+ background: var(--spectrum-progressbar-track-color-white);
}
}
-.spectrum-ProgressBar-fill {
- block-size: var(--spectrum-progressbar-thickness);
-
- border: none;
- background: var(--spectrum-progressbar-fill-color);
+/* Animations */
+.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill {
+ animation: indeterminate-loop-ltr var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)) infinite;
+}
- transition: width 1s;
+.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl) {
+ animation: indeterminate-loop-rtl var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)) infinite;
+}
- .spectrum-ProgressBar--indeterminate & {
- position: relative;
- inline-size: var(--spectrum-progressbar-fill-size-indeterminate);
+@keyframes indeterminate-loop-ltr {
+ from {
+ transform: translate(calc(-1 * var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate))));
+ }
- will-change: transform;
- animation-name: indeterminate-loop;
- animation-timing-function: var(--spectrum-progressbar-animation-ease-in-out-indeterminate);
- animation-duration: var(--spectrum-progressbar-animation-duration-indeterminate);
- animation-iteration-count: infinite;
+ to {
+ transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)));
}
}
-@keyframes indeterminate-loop {
+@keyframes indeterminate-loop-rtl {
from {
- transform: translate(calc(-1 * var(--spectrum-progressbar-dir-indeterminate-multiplier) * var(--spectrum-progressbar-fill-size-indeterminate)));
+ transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate)));
}
to {
- transform: translate(calc(var(--spectrum-progressbar-dir-indeterminate-multiplier) * var(--spectrum-progressbar-size-default)));
+ transform: translate(calc(-1 * var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default))));
+ }
+}
+
+@media (forced-colors: active) {
+ .spectrum-ProgressBar-track {
+ --highcontrast-progressbar-fill-color: ButtonText;
+ --highcontrast-progressbar-track-color: ButtonFace;
+ --highcontrast-progressbar-fill-color-white: ButtonText;
+
+ forced-color-adjust: none;
+ border: 1px solid ButtonText;
}
}
diff --git a/components/progressbar/package.json b/components/progressbar/package.json
index 1270fb3b86c..928315541e5 100644
--- a/components/progressbar/package.json
+++ b/components/progressbar/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/progressbar",
- "version": "6.1.0",
+ "version": "7.0.0-next.0",
"description": "The Spectrum CSS progress bar component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0",
+ "@spectrum-css/fieldlabel": ">=11.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -37,7 +37,7 @@
}
},
"devDependencies": {
- "@spectrum-css/fieldlabel": "10.1.0",
+ "@spectrum-css/fieldlabel": "11.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js
index 4468a701277..3a6a620c07a 100644
--- a/components/progressbar/stories/progressbar.stories.js
+++ b/components/progressbar/stories/progressbar.stories.js
@@ -21,12 +21,12 @@ export default {
customWidth: {
name: "Custom width",
defaultValue: 192,
- description: "Adjust the width of the component between 48px and 768px. 192px is the default width on desktop, while 240px is the default on mobile.",
+ description: "A number to adjust the width of the component. Spectrum 2 specifications limit the component width to be between 48px and 768px.",
type: { name: "number" },
table: {
type: { summary: "number" },
category: "Component",
- defaultValue: { summary: 192 },
+ defaultValue: { summary: 200 },
},
control: { type: "range", min: 48, max: 768,},
},
@@ -87,7 +87,7 @@ export default {
label: "Loading",
labelPosition: "top",
value: 0,
- customWidth: 192,
+ customWidth: 200,
isIndeterminate: false,
showValueLabel: true,
},
@@ -99,6 +99,7 @@ export default {
packageJson,
metadata,
},
+ tags: ["migrated"],
};
/**
diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js
index c358879721c..30c9cfeb827 100644
--- a/components/progressbar/stories/template.js
+++ b/components/progressbar/stories/template.js
@@ -7,9 +7,6 @@ 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",
diff --git a/components/progressbar/themes/express.css b/components/progressbar/themes/express.css
deleted file mode 100644
index 9fd550418f2..00000000000
--- a/components/progressbar/themes/express.css
+++ /dev/null
@@ -1,16 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
diff --git a/components/progressbar/themes/spectrum-two.css b/components/progressbar/themes/spectrum-two.css
deleted file mode 100644
index 3b705ef64c4..00000000000
--- a/components/progressbar/themes/spectrum-two.css
+++ /dev/null
@@ -1,19 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-ProgressBar {
- --spectrum-progressbar-track-color: var(--spectrum-gray-200);
- --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400);
- }
-}
diff --git a/components/progressbar/themes/spectrum.css b/components/progressbar/themes/spectrum.css
deleted file mode 100644
index 3760cc4cfc4..00000000000
--- a/components/progressbar/themes/spectrum.css
+++ /dev/null
@@ -1,23 +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.
- */
-
-/* @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/animation.css b/components/progresscircle/animation.css
index 176d4da4c17..433f642948b 100644
--- a/components/progresscircle/animation.css
+++ b/components/progresscircle/animation.css
@@ -11,500 +11,23 @@
* 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 {
+@keyframes spectrum-fills-rotate {
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);
+ transform: rotate(-90deg);
}
100% {
- transform: rotate(90deg);
+ transform: rotate(270deg);
}
}
-@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);
- }
-
+@keyframes spectrum-dashoffset-animation {
+ 0%,
100% {
- transform: rotate(180deg);
+ stroke-dashoffset: 75px;
}
-}
-@keyframes spectrum-fills-rotate {
- 0% {
- transform: rotate(-90deg);
- }
-
- 100% {
- transform: rotate(270deg);
+ 30% {
+ stroke-dashoffset: 20px;
}
}
diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json
index 82493f14621..a252d2638db 100644
--- a/components/progresscircle/dist/metadata.json
+++ b/components/progresscircle/dist/metadata.json
@@ -2,96 +2,25 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-ProgressCircle",
- ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask1",
- ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask2",
- ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fills",
- ".spectrum-ProgressCircle--indeterminate-fill-submask-2",
+ ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fill",
+ ".spectrum-ProgressCircle--sizeL",
+ ".spectrum-ProgressCircle--sizeS",
".spectrum-ProgressCircle-fill",
- ".spectrum-ProgressCircle-fillMask1",
- ".spectrum-ProgressCircle-fillMask2",
- ".spectrum-ProgressCircle-fillSubMask1",
- ".spectrum-ProgressCircle-fillSubMask2",
- ".spectrum-ProgressCircle-fills",
".spectrum-ProgressCircle-track",
- ".spectrum-ProgressCircle.spectrum-ProgressCircle--large",
- ".spectrum-ProgressCircle.spectrum-ProgressCircle--medium",
- ".spectrum-ProgressCircle.spectrum-ProgressCircle--small",
- ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill",
- ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track",
- "0%",
- "1.69%",
- "10.17%",
- "11.86%",
- "13.56%",
- "15.25%",
- "16.95%",
- "18.64%",
- "20.34%",
- "22.03%",
- "23.73%",
- "25.42%",
- "27.12%",
- "28.81%",
- "3.39%",
- "30.51%",
- "32.2%",
- "33.9%",
- "35.59%",
- "37.29%",
- "38.98%",
- "40.68%",
- "42.37%",
- "44.07%",
- "45.76%",
- "47.46%",
- "49.15%",
- "5.08%",
- "50.85%",
- "52.54%",
- "54.24%",
- "55.93%",
- "57.63%",
- "59.32%",
- "6.78%",
- "61.02%",
- "62.71%",
- "64.41%",
- "66.1%",
- "67.8%",
- "69.49%",
- "71.19%",
- "72.88%",
- "74.58%",
- "76.27%",
- "77.97%",
- "79.66%",
- "8.47%",
- "81.36%",
- "83.05%",
- "84.75%",
- "86.44%",
- "88.14%",
- "89.83%",
- "91.53%",
- "93.22%",
- "94.92%",
- "96.61%",
- "98.31%",
- "to"
+ ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack",
+ ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite",
+ ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-innerCircle",
+ ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-outerCircle"
],
"modifiers": [
"--mod-progress-circle-fill-border-color",
- "--mod-progress-circle-fill-border-color-over-background",
"--mod-progress-circle-position",
"--mod-progress-circle-size",
"--mod-progress-circle-thickness",
- "--mod-progress-circle-track-border-color",
- "--mod-progress-circle-track-border-color-over-background",
- "--mod-progress-circle-track-border-style"
+ "--mod-progress-circle-track-border-color"
],
"component": [
"--spectrum-progress-circle-fill-border-color",
- "--spectrum-progress-circle-fill-border-color-over-background",
"--spectrum-progress-circle-size",
"--spectrum-progress-circle-size-large",
"--spectrum-progress-circle-size-medium",
@@ -100,27 +29,19 @@
"--spectrum-progress-circle-thickness-large",
"--spectrum-progress-circle-thickness-medium",
"--spectrum-progress-circle-thickness-small",
- "--spectrum-progress-circle-track-border-color",
- "--spectrum-progress-circle-track-border-color-over-background",
- "--spectrum-progress-circle-track-border-style"
+ "--spectrum-progress-circle-track-border-color"
],
"global": [
"--spectrum-accent-content-color-default",
- "--spectrum-gray-200",
- "--spectrum-gray-300",
- "--spectrum-transparent-white-1000",
- "--spectrum-transparent-white-300",
- "--spectrum-transparent-white-400",
- "--spectrum-transparent-white-900"
- ],
- "system-theme": [
- "--system-progress-circle-fill-border-color-over-background",
- "--system-progress-circle-track-border-color",
- "--system-progress-circle-track-border-color-over-background"
+ "--spectrum-static-black-track-color",
+ "--spectrum-static-black-track-indicator-color",
+ "--spectrum-static-white-track-color",
+ "--spectrum-static-white-track-indicator-color",
+ "--spectrum-track-color"
],
"passthroughs": [],
"high-contrast": [
"--highcontrast-progress-circle-fill-border-color",
- "--highcontrast-progress-circle-fill-border-color-over-background"
+ "--highcontrast-progress-circle-track-color"
]
}
diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css
index 019cbb78bbd..d2adf1c18dd 100644
--- a/components/progresscircle/index.css
+++ b/components/progresscircle/index.css
@@ -1,66 +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.
- */
+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
-@import "./themes/spectrum-two.css";
+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.
+*/
-/* windows high contrast mode */
-@media (forced-colors: active) {
- .spectrum-ProgressCircle {
- /* fill is bright color */
- --highcontrast-progress-circle-fill-border-color: Highlight;
-
- /* fill over background is bright color */
- --highcontrast-progress-circle-fill-border-color-over-background: Highlight;
- }
-
- /* track double for visibility */
- .spectrum-ProgressCircle-track {
- --spectrum-progress-circle-track-border-style: double;
- }
-}
+@import "animation.css";
.spectrum-ProgressCircle {
/* circle unfilled border color */
- --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300);
+ --spectrum-progress-circle-track-border-color: var(--spectrum-track-color);
/* 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);
-
- /* 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);
- }
+ /* default size and thickness */
+ --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium);
+ --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
+}
- &,
- &.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--sizeS {
+ --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
+ --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small);
+}
- &.spectrum-ProgressCircle--large {
- --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
- --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large);
- }
+.spectrum-ProgressCircle--sizeL {
+ --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
+ --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large);
+}
+.spectrum-ProgressCircle {
display: inline-block;
inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
@@ -70,591 +44,66 @@
/* Fix for Safari rendering bug */
/* more info: https://github.com/adobe/spectrum-web-components/issues/1392 */
transform: translate3d(0, 0, 0);
-}
-
-.spectrum-ProgressCircle-track {
- box-sizing: border-box;
- inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
- block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
- border-style: var(--mod-progress-circle-track-border-style, var(--spectrum-progress-circle-track-border-style));
- border-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
- border-radius: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
- border-color: var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color));
-}
+ &.spectrum-ProgressCircle--staticWhite {
+ --spectrum-progress-circle-track-border-color: var(--spectrum-static-white-track-color);
+ --spectrum-progress-circle-fill-border-color: var(--spectrum-static-white-track-indicator-color);
+ }
-/* circle progress fill parent container */
-.spectrum-ProgressCircle-fills {
- position: absolute;
- inset-block-start: 0;
- inset-inline-start: 0;
- inline-size: 100%;
- block-size: 100%;
+ &.spectrum-ProgressCircle--staticBlack {
+ --spectrum-progress-circle-track-border-color: var(--spectrum-static-black-track-color);
+ --spectrum-progress-circle-fill-border-color: var(--spectrum-static-black-track-indicator-color);
+ }
}
-/* circle progress filled */
+.spectrum-ProgressCircle-track,
.spectrum-ProgressCircle-fill {
box-sizing: border-box;
inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
-
- border-style: solid;
- border-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
- border-radius: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
- border-color: var(--highcontrast-progress-circle-fill-border-color, var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color)));
}
-/* circle colors over background */
-.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite {
- .spectrum-ProgressCircle-track {
- border-color: var(--mod-progress-circle-track-border-color-over-background, var(--spectrum-progress-circle-track-border-color-over-background));
- }
-
- .spectrum-ProgressCircle-fill {
- border-color: var(--highcontrast-progress-circle-fill-border-color-over-background, var(--mod-progress-circle-fill-border-color-over-background, var(--spectrum-progress-circle-fill-border-color-over-background)));
- }
-}
-
-/* animation masks - circle fill progress */
-.spectrum-ProgressCircle-fillMask1,
-.spectrum-ProgressCircle-fillMask2 {
- inline-size: 50%;
- block-size: 100%;
- transform-origin: 100% center;
- transform: rotate(180deg);
- overflow: hidden;
- position: absolute;
-}
-
-.spectrum-ProgressCircle-fillSubMask1,
-.spectrum-ProgressCircle-fillSubMask2 {
- inline-size: 100%;
- block-size: 100%;
- transform-origin: 100% center;
- overflow: hidden;
- transform: rotate(-180deg);
+.spectrum-ProgressCircle-track {
+ stroke-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
+ stroke: var(--highcontrast-progress-circle-track-color, var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color)));
}
-.spectrum-ProgressCircle-fillMask2 {
- transform: rotate(0deg);
+/* circle progress filled */
+.spectrum-ProgressCircle-fill {
+ stroke-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
+ stroke: var(--highcontrast-progress-circle-fill-border-color, var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color)));
+ transform: rotate(-90deg);
+ transform-origin: center;
}
/* animation masks - circle indeterminate with continuous animation */
.spectrum-ProgressCircle--indeterminate {
- .spectrum-ProgressCircle-fills {
+ .spectrum-ProgressCircle-fill {
will-change: transform;
- transform: translateZ(0);
- animation: 1s infinite cubic-bezier(0.25, 0.78, 0.48, 0.89) spectrum-fills-rotate;
+ animation:
+ 1s cubic-bezier(0.6, 0.1, 0.3, 0.9) infinite spectrum-fills-rotate,
+ 1s cubic-bezier(0.25, 0.1, 0.25, 1.3) infinite spectrum-dashoffset-animation;
transform-origin: center;
}
-
- .spectrum-ProgressCircle-fillSubMask1 {
- will-change: transform;
- transform: translateZ(0);
- animation: 1s infinite linear spectrum-fill-mask-1;
- }
-
- .spectrum-ProgressCircle-fillSubMask2 {
- will-change: transform;
- transform: translateZ(0);
- 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);
+/* windows high contrast mode */
+@media (forced-colors: active) {
+ .spectrum-ProgressCircle {
+ /* fill is bright color */
+ --highcontrast-progress-circle-fill-border-color: Highlight;
+ --highcontrast-progress-circle-track-color: Background;
}
-}
-@keyframes spectrum-fills-rotate {
- 0% {
- transform: rotate(-90deg);
- }
+ .spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) {
+ .spectrum-innerCircle {
+ stroke: CanvasText;
+ }
- 100% {
- transform: rotate(270deg);
+ .spectrum-outerCircle {
+ border: 1px solid;
+ border-color: CanvasText;
+ border-radius: 50%;
+ }
}
}
diff --git a/components/progresscircle/package.json b/components/progresscircle/package.json
index 6f08404e35d..5b863ba30f1 100644
--- a/components/progresscircle/package.json
+++ b/components/progresscircle/package.json
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/tokens": ">=16.0.1"
+ "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
"@spectrum-css/tokens": {
diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js
index f64c2f2780a..9146a54f0f1 100644
--- a/components/progresscircle/stories/progresscircle.stories.js
+++ b/components/progresscircle/stories/progresscircle.stories.js
@@ -15,16 +15,28 @@ export default {
argTypes: {
size: size(["s", "m", "l"]),
isIndeterminate,
- staticColor: {
- ...staticColor,
- options: ["white"],
- },
+ staticColor,
+ value: {
+ name: "Percent filled",
+ type: { name: "number" },
+ table: {
+ type: { summary: "number" },
+ category: "Content",
+ },
+ control: {
+ type: "range",
+ min: 0,
+ max: 100
+ },
+ if: { arg: "isIndeterminate", truthy: false },
+ }
},
args: {
rootClass: "spectrum-ProgressCircle",
size: "m",
isIndeterminate: false,
staticColor: undefined,
+ value: 43
},
parameters: {
design: {
@@ -102,3 +114,25 @@ StaticWhiteIndeterminate.args = {
StaticWhiteIndeterminate.parameters = {
chromatic: { disableSnapshot: true },
};
+
+export const StaticBlackDeterminate = Sizing.bind({});
+StaticBlackDeterminate.tags = ["!dev"];
+StaticBlackDeterminate.storyName = "Static black, default";
+StaticBlackDeterminate.args = {
+ staticColor: "black",
+ isIndeterminate: false,
+};
+StaticBlackDeterminate.parameters = {
+ chromatic: { disableSnapshot: true },
+};
+
+export const StaticBlackIndeterminate = Sizing.bind({});
+StaticBlackIndeterminate.tags = ["!dev"];
+StaticBlackIndeterminate.storyName = "Static black, indeterminate";
+StaticBlackIndeterminate.args = {
+ staticColor: "black",
+ isIndeterminate: true,
+};
+StaticBlackIndeterminate.parameters = {
+ chromatic: { disableSnapshot: true },
+};
diff --git a/components/progresscircle/stories/progresscircle.test.js b/components/progresscircle/stories/progresscircle.test.js
index 26c9d8e078c..83fe05791dc 100644
--- a/components/progresscircle/stories/progresscircle.test.js
+++ b/components/progresscircle/stories/progresscircle.test.js
@@ -11,6 +11,10 @@ export const ProgressCircleGroup = Variants({
testHeading: "Static white",
staticColor: "white",
},
+ {
+ testHeading: "Static black",
+ staticColor: "black",
+ },
],
stateData: [
{
diff --git a/components/progresscircle/stories/template.js b/components/progresscircle/stories/template.js
index 2e27221f91a..1890e58d4b0 100644
--- a/components/progresscircle/stories/template.js
+++ b/components/progresscircle/stories/template.js
@@ -4,10 +4,9 @@ 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 { capitalize } from "lodash-es";
+
import "../index.css";
-import "../themes/spectrum.css";
-/* Must be imported last */
-import "../themes/express.css";
export const Template = ({
id = getRandomId("progress-circle"),
@@ -18,45 +17,48 @@ export const Template = ({
size = "m",
staticColor,
isIndeterminate = false,
-} = {}) => {
- let sizeClassName = "medium";
- switch (size) {
- case "s":
- sizeClassName = "small";
- break;
- case "l":
- sizeClassName = "large";
- break;
- default:
- sizeClassName = "medium";
- }
+ value,
+}) => {
+
+ let strokeWidth = size === "s" ? 2 : size === "l" ? 4 : 3;
+
+ // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.
+ let radius = `calc(50% - ${strokeWidth / 2}px)`;
+
+ let insideRadius = `calc(50% - ${strokeWidth / 1}px)`;
return html`
({ ...a, [c]: true }), {}),
})}
id=${ifDefined(id)}
style=${styleMap(customStyles)}
data-testid=${ifDefined(testId)}
>
-
-
+
+
- *
- * 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
deleted file mode 100644
index 93464f22940..00000000000
--- a/components/progresscircle/themes/spectrum-two.css
+++ /dev/null
@@ -1,22 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-ProgressCircle {
- /* circle unfilled border color */
- --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200);
-
- --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400);
- --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000);
- }
-}
diff --git a/components/progresscircle/themes/spectrum.css b/components/progresscircle/themes/spectrum.css
deleted file mode 100644
index 2d0e45eece1..00000000000
--- a/components/progresscircle/themes/spectrum.css
+++ /dev/null
@@ -1,26 +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.
- */
-
-/* @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 b4c908b2934..1e94ef08198 100644
--- a/components/radio/CHANGELOG.md
+++ b/components/radio/CHANGELOG.md
@@ -1,5 +1,36 @@
# Change log
+## 11.0.0-next.1
+
+### Major Changes
+
+- [#3555](https://github.com/adobe/spectrum-css/pull/3555) [`0af6461`](https://github.com/adobe/spectrum-css/commit/0af646180cd61e1872cde39bed5436f97d378cc9) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - # Radio S2 Migration
+
+ Updates:
+
+ - High contrast tokens have been modified
+ - Typography tokens modified
+
+ ## New tokens
+
+ `--spectrum-radio-border-width`
+ `--spectrum-radio-text-font-weight`
+ `--spectrum-radio-text-font-style`
+
+ ## Modified tokens
+
+ `--spectrum-radio-emphasized-accent-color`
+ `--spectrum-radio-emphasized-accent-color-hover`
+ `--spectrum-radio-emphasized-accent-color-down`
+ `--spectrum-radio-emphasized-accent-color-focus`
+
+## 11.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+
## 10.1.0
### Minor Changes
diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json
index b94c6dfcf90..7863677a763 100644
--- a/components/radio/dist/metadata.json
+++ b/components/radio/dist/metadata.json
@@ -12,7 +12,6 @@
".spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
".spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
".spectrum-Radio--sizeL",
- ".spectrum-Radio--sizeM",
".spectrum-Radio--sizeS",
".spectrum-Radio--sizeXL",
".spectrum-Radio-button",
@@ -26,10 +25,15 @@
".spectrum-Radio-label:lang(ja)",
".spectrum-Radio-label:lang(ko)",
".spectrum-Radio-label:lang(zh)",
+ ".spectrum-Radio.is-active .spectrum-Radio-button:before",
+ ".spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
+ ".spectrum-Radio.is-active .spectrum-Radio-label",
".spectrum-Radio.is-readOnly .spectrum-Radio-input",
+ ".spectrum-Radio.is-readOnly .spectrum-Radio-input + .spectrum-Radio-button:before",
".spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label",
".spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label",
".spectrum-Radio.is-readOnly .spectrum-Radio-label",
+ ".spectrum-Radio.is-readOnly:hover .spectrum-Radio-input + .spectrum-Radio-button:before",
".spectrum-Radio:active .spectrum-Radio-button:before",
".spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
".spectrum-Radio:active .spectrum-Radio-label",
@@ -44,6 +48,7 @@
".spectrum-Radio:lang(ja)",
".spectrum-Radio:lang(ko)",
".spectrum-Radio:lang(zh)",
+ ".spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button",
"[dir=\"rtl\"] .spectrum-Radio .spectrum-Radio-button:after"
],
"modifiers": [
@@ -86,10 +91,6 @@
"--spectrum-radio-button-border-color-down",
"--spectrum-radio-button-border-color-focus",
"--spectrum-radio-button-border-color-hover",
- "--spectrum-radio-button-checked-border-color-default",
- "--spectrum-radio-button-checked-border-color-down",
- "--spectrum-radio-button-checked-border-color-focus",
- "--spectrum-radio-button-checked-border-color-hover",
"--spectrum-radio-button-control-size",
"--spectrum-radio-button-control-size-extra-large",
"--spectrum-radio-button-control-size-large",
@@ -120,12 +121,15 @@
"--spectrum-radio-neutral-content-color-down",
"--spectrum-radio-neutral-content-color-focus",
"--spectrum-radio-neutral-content-color-hover",
+ "--spectrum-radio-text-font-style",
+ "--spectrum-radio-text-font-weight",
"--spectrum-radio-text-to-control"
],
"global": [
- "--spectrum-accent-color-1000",
- "--spectrum-accent-color-1100",
- "--spectrum-accent-color-900",
+ "--spectrum-accent-content-color-default",
+ "--spectrum-accent-content-color-down",
+ "--spectrum-accent-content-color-hover",
+ "--spectrum-accent-content-color-key-focus",
"--spectrum-animation-duration-100",
"--spectrum-border-width-200",
"--spectrum-cjk-line-height-100",
@@ -137,10 +141,13 @@
"--spectrum-component-height-200",
"--spectrum-component-height-300",
"--spectrum-component-height-75",
+ "--spectrum-component-size-difference-down",
+ "--spectrum-component-size-minimum-perspective-down",
"--spectrum-component-top-to-text-100",
"--spectrum-component-top-to-text-200",
"--spectrum-component-top-to-text-300",
"--spectrum-component-top-to-text-75",
+ "--spectrum-default-font-style",
"--spectrum-disabled-content-color",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
@@ -149,34 +156,20 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
- "--spectrum-gray-50",
- "--spectrum-gray-600",
- "--spectrum-gray-700",
- "--spectrum-gray-800",
+ "--spectrum-gray-25",
"--spectrum-line-height-100",
- "--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-regular-font-weight",
"--spectrum-text-to-control-100",
"--spectrum-text-to-control-200",
"--spectrum-text-to-control-300",
"--spectrum-text-to-control-75"
],
- "system-theme": [
- "--system-radio-button-background-color",
- "--system-radio-button-border-color-default",
- "--system-radio-button-border-color-down",
- "--system-radio-button-border-color-focus",
- "--system-radio-button-border-color-hover"
- ],
"passthroughs": [],
"high-contrast": [
- "--highcontrast-radio-button-background-color",
"--highcontrast-radio-button-border-color-default",
"--highcontrast-radio-button-border-color-down",
"--highcontrast-radio-button-border-color-focus",
diff --git a/components/radio/index.css b/components/radio/index.css
index f531d01f8dd..c3878f77634 100644
--- a/components/radio/index.css
+++ b/components/radio/index.css
@@ -11,8 +11,6 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
/*
* Radio:
* ::before is to style the input circle (selection indicator)
@@ -20,6 +18,8 @@
*/
.spectrum-Radio {
+ --spectrum-radio-button-background-color: var(--spectrum-gray-25);
+
/* 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);
@@ -36,35 +36,22 @@
--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-emphasized-accent-color: var(--spectrum-accent-content-color-default);
+ --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-content-color-hover);
+ --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-content-color-down);
+ --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-content-color-key-focus);
- /* 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-key-focus);
+ /* radio checked/unchecked selection indicator */
+ --spectrum-radio-button-border-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-radio-button-border-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-radio-button-border-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-radio-button-border-color-focus: var(--spectrum-neutral-content-color-key-focus);
--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);
- }
-}
-
-.spectrum-Radio,
-.spectrum-Radio--sizeM {
--spectrum-radio-height: var(--spectrum-component-height-100);
--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
@@ -74,6 +61,16 @@
--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-border-width: var(--spectrum-border-width-200);
+ --spectrum-radio-text-font-weight: var(--spectrum-regular-font-weight);
+ --spectrum-radio-text-font-style: var(--spectrum-default-font-style);
+
+ /* CJK language support all themes */
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
+ }
}
.spectrum-Radio--sizeS {
@@ -112,53 +109,6 @@
--spectrum-radio-font-size: var(--spectrum-font-size-300);
}
-/* windows high contrast mode */
-@media (forced-colors: active) {
- .spectrum-Radio {
- --highcontrast-radio-button-background-color: ButtonFace;
-
- /* high contrast text */
- --highcontrast-radio-neutral-content-color: CanvasText;
- --highcontrast-radio-neutral-content-color-hover: CanvasText;
- --highcontrast-radio-neutral-content-color-down: CanvasText;
- --highcontrast-radio-neutral-content-color-focus: CanvasText;
-
- /* high contrast selector */
- --highcontrast-radio-button-border-color-default: ButtonText;
- --highcontrast-radio-button-border-color-hover: Highlight;
- --highcontrast-radio-button-border-color-down: ButtonText;
- --highcontrast-radio-button-border-color-focus: Highlight;
-
- /* high contrast emphasized selector */
- --highcontrast-radio-emphasized-accent-color: ButtonText;
- --highcontrast-radio-emphasized-accent-color-hover: Highlight;
- --highcontrast-radio-emphasized-accent-color-down: ButtonText;
- --highcontrast-radio-emphasized-accent-color-focus: Highlight;
-
- /* high contrast checked selector */
- --highcontrast-radio-button-checked-border-color-default: Highlight;
- --highcontrast-radio-button-checked-border-color-hover: Highlight;
- --highcontrast-radio-button-checked-border-color-down: Highlight;
- --highcontrast-radio-button-checked-border-color-focus: Highlight;
-
- /* high contrast disabled text */
- --highcontrast-radio-disabled-content-color: GrayText;
-
- /* high contrast disabled selector */
- --highcontrast-radio-disabled-border-color: GrayText;
-
- /* high contrast focus ring */
- --highcontrast-radio-focus-indicator-color: CanvasText;
-
- /* ensure focus ring is visible if user agent has non-accessible system overrides */
- .spectrum-Radio-button {
- &::after {
- forced-color-adjust: none;
- }
- }
- }
-}
-
.spectrum-Radio {
display: inline-flex;
align-items: flex-start;
@@ -176,7 +126,7 @@
/* checked selection indicator hover */
.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
- border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover)));
+ border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-border-color-hover)));
}
.spectrum-Radio-label {
@@ -184,7 +134,14 @@
}
}
- &:active {
+ &:not(.is-readOnly):active {
+ .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button {
+ transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
+ }
+ }
+
+ &:active,
+ &.is-active {
/* selection indicator active */
.spectrum-Radio-button::before {
border-color: var(--highcontrast-radio-button-border-color-down, var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down)));
@@ -192,7 +149,7 @@
/* checked selection indicator active */
.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
- border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down)));
+ border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-border-color-down)));
}
.spectrum-Radio-label {
@@ -218,7 +175,7 @@
/* selected selection indicator is focused state */
.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
- border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus)));
+ border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-border-color-focus)));
}
.spectrum-Radio-label {
@@ -311,7 +268,7 @@
&::before {
/* half of element width minus half of indicator width is checked border width */
border-width: calc((var(--spectrum-radio-button-control-size) / 2) - (var(--spectrum-radio-button-selection-indicator) / 2));
- border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default)));
+ border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-border-color-default)));
}
}
@@ -336,9 +293,8 @@
font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size));
- /* TODO: font weight and style tokens */
- /* font-weight: var(--spectrum-radio-text-font-weight); **** missing token resolves to 400 ****/
- /* font-style: var(--spectrum-radio-text-font-style); **** missing token resolves to normal ****/
+ font-weight: var(--spectrum-radio-text-font-weight);
+ font-style: var(--spectrum-radio-text-font-style);
color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height));
@@ -405,3 +361,58 @@
}
}
}
+
+/* windows high contrast mode */
+@media (forced-colors: active) {
+ .spectrum-Radio {
+ /* high contrast text */
+ --highcontrast-radio-neutral-content-color: CanvasText;
+ --highcontrast-radio-neutral-content-color-hover: CanvasText;
+ --highcontrast-radio-neutral-content-color-down: CanvasText;
+ --highcontrast-radio-neutral-content-color-focus: CanvasText;
+
+ /* high contrast selector */
+ --highcontrast-radio-button-border-color-default: ButtonText;
+ --highcontrast-radio-button-border-color-hover: Highlight;
+ --highcontrast-radio-button-border-color-down: ButtonText;
+ --highcontrast-radio-button-border-color-focus: Highlight;
+
+ /* high contrast emphasized selector */
+ --highcontrast-radio-emphasized-accent-color: Highlight;
+ --highcontrast-radio-emphasized-accent-color-hover: Highlight;
+ --highcontrast-radio-emphasized-accent-color-down: ButtonText;
+ --highcontrast-radio-emphasized-accent-color-focus: Highlight;
+
+ /* high contrast checked selector */
+ --highcontrast-radio-button-checked-border-color-default: Highlight;
+ --highcontrast-radio-button-checked-border-color-hover: Highlight;
+ --highcontrast-radio-button-checked-border-color-down: Highlight;
+ --highcontrast-radio-button-checked-border-color-focus: Highlight;
+
+ /* high contrast disabled text */
+ --highcontrast-radio-disabled-content-color: GrayText;
+
+ /* high contrast disabled selector */
+ --highcontrast-radio-disabled-border-color: GrayText;
+
+ /* high contrast focus ring */
+ --highcontrast-radio-focus-indicator-color: CanvasText;
+
+ /* ensure focus ring is visible if user agent has non-accessible system overrides */
+ .spectrum-Radio-button {
+ &::after {
+ forced-color-adjust: none;
+ }
+ }
+
+ &.is-readOnly {
+ .spectrum-Radio-input + .spectrum-Radio-button::before {
+ border-color: var(--highcontrast-radio-button-border-color-default);
+ }
+
+ &:hover .spectrum-Radio-input + .spectrum-Radio-button::before {
+ border-color: var(--highcontrast-radio-button-border-color-default);
+ }
+ }
+ }
+}
diff --git a/components/radio/package.json b/components/radio/package.json
index 6d4b76d3802..51af9b26191 100644
--- a/components/radio/package.json
+++ b/components/radio/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/radio",
- "version": "10.1.0",
+ "version": "11.0.0-next.1",
"description": "The Spectrum CSS radio component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -37,7 +37,7 @@
}
},
"devDependencies": {
- "@spectrum-css/icon": "9.1.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/radio/stories/radio.stories.js b/components/radio/stories/radio.stories.js
index 1d6ff3d9b16..2a63ba40c3e 100644
--- a/components/radio/stories/radio.stories.js
+++ b/components/radio/stories/radio.stories.js
@@ -1,6 +1,6 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isChecked, isDisabled, isEmphasized, isReadOnly, size } from "@spectrum-css/preview/types";
+import { isActive, isChecked, isDisabled, isEmphasized, isFocused, isHovered, isReadOnly, size } from "@spectrum-css/preview/types";
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
import { RadioGroup } from "./radio.test.js";
@@ -40,6 +40,9 @@ export default {
isChecked,
isDisabled,
isReadOnly,
+ isHovered,
+ isFocused,
+ isActive,
},
args: {
rootClass: "spectrum-Radio",
@@ -49,6 +52,9 @@ export default {
isChecked: false,
isDisabled: false,
isReadOnly: false,
+ isHovered: false,
+ isFocused: false,
+ isActive: false,
},
parameters: {
actions: {
diff --git a/components/radio/stories/radio.test.js b/components/radio/stories/radio.test.js
index 13b743d62b3..a14b5daa761 100644
--- a/components/radio/stories/radio.test.js
+++ b/components/radio/stories/radio.test.js
@@ -18,7 +18,6 @@ export const RadioGroup = Variants({
customStyles: {
"max-width": "220px",
}
-
}
],
stateData: [
@@ -26,13 +25,51 @@ export const RadioGroup = Variants({
testHeading: "Checked",
isChecked: true,
},
+ {
+ testHeading: "Checked + hovered",
+ isChecked: true,
+ },
+ {
+ testHeading: "Hover",
+ isHovered: true,
+ },
{
testHeading: "Disabled",
isDisabled: true,
},
+ {
+ testHeading: "Disabled + checked",
+ isDisabled: true,
+ isChecked: true,
+ },
+ {
+ testHeading: "Disabled + checked + hovered",
+ isDisabled: true,
+ isChecked: true,
+ isHovered: true,
+ },
{
testHeading: "Read-only",
isReadOnly: true,
},
+ {
+ testHeading: "Read-only + checked",
+ isReadOnly: true,
+ isChecked: true,
+ },
+ {
+ testHeading: "Read-only + checked + hovered",
+ isHovered: true,
+ isReadOnly: true,
+ isChecked: true,
+ },
+ {
+ testHeading: "Active",
+ isActive: true
+ },
+ {
+ testHeading: "Focus-visible",
+ isFocused: true,
+ },
]
});
diff --git a/components/radio/stories/template.js b/components/radio/stories/template.js
index 68c3cbf0e96..3a1f613bc08 100644
--- a/components/radio/stories/template.js
+++ b/components/radio/stories/template.js
@@ -5,9 +5,6 @@ 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",
@@ -18,6 +15,9 @@ export const Template = ({
isChecked = false,
isDisabled = false,
isReadOnly = false,
+ isFocused = false,
+ isActive = false,
+ isHovered,
id = getRandomId("radio"),
customClasses = [],
customStyles = {},
@@ -37,7 +37,9 @@ export const Template = ({
[`${rootClass}--size${size?.toUpperCase()}`]:
typeof size !== "undefined",
[`${rootClass}--emphasized`]: isEmphasized,
+ "is-hover": isHovered,
"is-readOnly" : isReadOnly,
+ "is-active" : isActive,
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
style=${styleMap(customStyles)}
@@ -45,7 +47,11 @@ 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-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-button-background-color: var(--spectrum-gray-50);
- }
-}
diff --git a/components/radio/themes/spectrum.css b/components/radio/themes/spectrum.css
deleted file mode 100644
index 33772fcc7c9..00000000000
--- a/components/radio/themes/spectrum.css
+++ /dev/null
@@ -1,22 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-Radio {
- --spectrum-radio-button-background-color: var(--spectrum-gray-75);
- }
-}
diff --git a/components/rating/CHANGELOG.md b/components/rating/CHANGELOG.md
index 53679f085c0..28c8128297a 100644
--- a/components/rating/CHANGELOG.md
+++ b/components/rating/CHANGELOG.md
@@ -1,5 +1,12 @@
# Change log
+## 7.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+
## 6.1.0
### Minor Changes
diff --git a/components/rating/dist/metadata.json b/components/rating/dist/metadata.json
index 75ee43e0895..f0ab77b22a9 100644
--- a/components/rating/dist/metadata.json
+++ b/components/rating/dist/metadata.json
@@ -101,13 +101,6 @@
"--spectrum-neutral-subdued-content-color-key-focus",
"--spectrum-workflow-icon-size-100"
],
- "system-theme": [
- "--system-rating-icon-color-default",
- "--system-rating-icon-color-down",
- "--system-rating-icon-color-hover",
- "--system-rating-icon-color-key-focus",
- "--system-rating-indicator-border-radius"
- ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-rating-emphasized-icon-color-default",
diff --git a/components/rating/index.css b/components/rating/index.css
index 02c76194916..38ee34ef285 100644
--- a/components/rating/index.css
+++ b/components/rating/index.css
@@ -11,12 +11,23 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
.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);
+
+ --spectrum-rating-indicator-border-radius: 2px;
+
/* Icon */
--spectrum-rating-icon-height: var(--spectrum-workflow-icon-size-100);
--spectrum-rating-icon-width: var(--spectrum-workflow-icon-size-100);
+ --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);
+
+
/* Focus ring */
--spectrum-rating-border-radius: var(--spectrum-corner-radius-100);
@@ -27,8 +38,9 @@
/* Spacing (top/bottom edge to icon) */
--spectrum-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100);
- /* Indicator height */
+ /* Indicator */
--spectrum-rating-indicator-height: var(--spectrum-border-width-200);
+ --spectrum-rating-indicator-border-radius: 2px;
/* Colors */
/* selected + emphasized */
diff --git a/components/rating/package.json b/components/rating/package.json
index f0cce6f4f1c..ded9d7c0f77 100644
--- a/components/rating/package.json
+++ b/components/rating/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/rating",
- "version": "6.1.0",
+ "version": "7.0.0-next.0",
"description": "The Spectrum CSS rating component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -37,7 +37,7 @@
}
},
"devDependencies": {
- "@spectrum-css/icon": "9.1.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/rating/stories/template.js b/components/rating/stories/template.js
index 47ea5c5f61a..245694af8fa 100644
--- a/components/rating/stories/template.js
+++ b/components/rating/stories/template.js
@@ -6,9 +6,6 @@ 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
deleted file mode 100644
index 1a0d5c792b2..00000000000
--- a/components/rating/themes/express.css
+++ /dev/null
@@ -1,25 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
-
-@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);
- --spectrum-rating-icon-color-down: var(--spectrum-neutral-content-color-down);
- --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
- }
-}
diff --git a/components/rating/themes/spectrum-two.css b/components/rating/themes/spectrum-two.css
deleted file mode 100644
index 0c2a8df9260..00000000000
--- a/components/rating/themes/spectrum-two.css
+++ /dev/null
@@ -1,23 +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.
- */
-
-@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);
-
- --spectrum-rating-indicator-border-radius: 2px;
- }
-}
diff --git a/components/rating/themes/spectrum.css b/components/rating/themes/spectrum.css
deleted file mode 100644
index c99df8e652f..00000000000
--- a/components/rating/themes/spectrum.css
+++ /dev/null
@@ -1,22 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-Rating {
- --spectrum-rating-indicator-border-radius: var(--spectrum-corner-radius-75);
- }
-}
diff --git a/components/search/CHANGELOG.md b/components/search/CHANGELOG.md
index 6dbab541cfc..5f6054130fd 100644
--- a/components/search/CHANGELOG.md
+++ b/components/search/CHANGELOG.md
@@ -1,5 +1,14 @@
# Change log
+## 9.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+ - @spectrum-css/clearbutton@8.0.0-next.0
+ - @spectrum-css/textfield@9.0.0-next.0
+
## 8.1.1
### Patch Changes
diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json
index b701431ddf2..bda4088c629 100644
--- a/components/search/dist/metadata.json
+++ b/components/search/dist/metadata.json
@@ -25,10 +25,6 @@
".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"
],
@@ -126,7 +122,6 @@
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
"--spectrum-gray-25",
- "--spectrum-gray-300",
"--spectrum-gray-500",
"--spectrum-gray-600",
"--spectrum-gray-800",
@@ -149,28 +144,6 @@
"--spectrum-workflow-icon-size-300",
"--spectrum-workflow-icon-size-75"
],
- "system-theme": [
- "--system-search-background-color",
- "--system-search-background-color-disabled",
- "--system-search-border-color-default",
- "--system-search-border-color-disabled",
- "--system-search-border-color-focus",
- "--system-search-border-color-focus-hover",
- "--system-search-border-color-hover",
- "--system-search-border-color-key-focus",
- "--system-search-border-radius",
- "--system-search-edge-to-visual",
- "--system-search-quiet-background-color-disabled",
- "--system-search-quiet-border-color-disabled",
- "--system-search-size-l-border-radius",
- "--system-search-size-l-edge-to-visual",
- "--system-search-size-m-border-radius",
- "--system-search-size-m-edge-to-visual",
- "--system-search-size-s-border-radius",
- "--system-search-size-s-edge-to-visual",
- "--system-search-size-xl-border-radius",
- "--system-search-size-xl-edge-to-visual"
- ],
"passthroughs": [
"--mod-textfield-background-color",
"--mod-textfield-background-color-disabled",
diff --git a/components/search/index.css b/components/search/index.css
index 3f98f73e145..4565d749d29 100644
--- a/components/search/index.css
+++ b/components/search/index.css
@@ -11,9 +11,9 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
.spectrum-Search {
+ --spectrum-search-background-color: var(--spectrum-gray-25);
+
/* Size / Spacing */
--spectrum-search-inline-size: var(--spectrum-field-width);
--spectrum-search-block-size: var(--spectrum-component-height-100);
@@ -25,6 +25,8 @@
--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);
+ --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
+ --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
/* Focus Indicator */
--spectrum-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
@@ -43,6 +45,12 @@
--spectrum-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover);
--spectrum-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
+ --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);
+
/* Background and Border */
--spectrum-search-border-width: var(--spectrum-border-width-100);
@@ -92,18 +100,21 @@
--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-edge-to-visual: var(--spectrum-component-edge-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-edge-to-visual: var(--spectrum-component-edge-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-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
}
@media (forced-colors: active) {
diff --git a/components/search/package.json b/components/search/package.json
index 43cca290ae0..83a012a7983 100644
--- a/components/search/package.json
+++ b/components/search/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/search",
- "version": "8.1.1",
+ "version": "9.0.0-next.0",
"description": "The Spectrum CSS search component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,9 +25,9 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0",
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
- "@spectrum-css/textfield": ">=8.0.0 <9.0.0",
+ "@spectrum-css/clearbutton": ">=8.0.0-next.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
+ "@spectrum-css/textfield": ">=9.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -45,9 +45,9 @@
}
},
"devDependencies": {
- "@spectrum-css/clearbutton": "7.2.0",
- "@spectrum-css/icon": "9.1.0",
- "@spectrum-css/textfield": "8.1.1",
+ "@spectrum-css/clearbutton": "8.0.0-next.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
+ "@spectrum-css/textfield": "9.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/search/stories/template.js b/components/search/stories/template.js
index 364c8d8fde6..d017e28981f 100644
--- a/components/search/stories/template.js
+++ b/components/search/stories/template.js
@@ -7,9 +7,6 @@ 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-Search",
@@ -37,6 +34,7 @@ export const Template = ({
size,
customClasses: [`${rootClass}-textfield`],
iconName: "Magnify",
+ setName: "workflow",
type: "search",
placeholder: "Search",
name: "search",
diff --git a/components/search/themes/express.css b/components/search/themes/express.css
deleted file mode 100644
index 002ab9cecb6..00000000000
--- a/components/search/themes/express.css
+++ /dev/null
@@ -1,47 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
-
-@container style(--system: express) {
- .spectrum-Search {
- --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--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--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--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);
- }
- }
-}
diff --git a/components/search/themes/spectrum-two.css b/components/search/themes/spectrum-two.css
deleted file mode 100644
index 67bbeedb662..00000000000
--- a/components/search/themes/spectrum-two.css
+++ /dev/null
@@ -1,52 +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.
- */
-
-@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);
-
- --spectrum-search-background-color: var(--spectrum-gray-25);
- --spectrum-search-background-color-disabled: var(--spectrum-gray-25);
- --spectrum-search-border-color-disabled: var(--spectrum-gray-300);
-
- &,
- &.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--sizeS {
- --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
- }
-
- &.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--sizeXL {
- --spectrum-search-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
- }
- }
-
- .spectrum-Search--quiet {
- --spectrum-search-background-color-disabled: transparent;
- --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color);
- }
-}
diff --git a/components/search/themes/spectrum.css b/components/search/themes/spectrum.css
deleted file mode 100644
index c9923294d14..00000000000
--- a/components/search/themes/spectrum.css
+++ /dev/null
@@ -1,24 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-Search {
- --spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color);
- --spectrum-search-background-color: var(--spectrum-gray-50);
- }
-}
diff --git a/components/sidenav/CHANGELOG.md b/components/sidenav/CHANGELOG.md
index 0bea330cd05..963535d1625 100644
--- a/components/sidenav/CHANGELOG.md
+++ b/components/sidenav/CHANGELOG.md
@@ -1,5 +1,12 @@
# Change log
+## 8.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+
## 7.1.0
### Minor Changes
diff --git a/components/sidenav/dist/metadata.json b/components/sidenav/dist/metadata.json
index a0be758aa57..0215529e384 100644
--- a/components/sidenav/dist/metadata.json
+++ b/components/sidenav/dist/metadata.json
@@ -180,15 +180,6 @@
"--spectrum-text-to-visual-100",
"--spectrum-workflow-icon-size-100"
],
- "system-theme": [
- "--system-side-nav-background-hover",
- "--system-side-nav-background-hover-selected",
- "--system-side-nav-background-key-focus",
- "--system-side-nav-background-key-focus-selected",
- "--system-side-nav-item-background-default-selected",
- "--system-side-nav-item-background-down",
- "--system-side-nav-item-background-down-selected"
- ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-sidenav-background-hover",
diff --git a/components/sidenav/index.css b/components/sidenav/index.css
index c0b75855d42..f75a07ca5fc 100644
--- a/components/sidenav/index.css
+++ b/components/sidenav/index.css
@@ -11,8 +11,6 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
@media (forced-colors: active) {
/* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */
.spectrum-SideNav {
@@ -47,6 +45,15 @@
}
.spectrum-SideNav {
+ --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);
+
/* focus indicator */
--spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness);
--spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap);
@@ -78,6 +85,13 @@
/* 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);
diff --git a/components/sidenav/package.json b/components/sidenav/package.json
index f27098c5ce4..c27e5b0c498 100644
--- a/components/sidenav/package.json
+++ b/components/sidenav/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/sidenav",
- "version": "7.1.0",
+ "version": "8.0.0-next.0",
"description": "The Spectrum CSS sidenav component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -37,7 +37,7 @@
}
},
"devDependencies": {
- "@spectrum-css/icon": "9.1.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/sidenav/stories/template.js b/components/sidenav/stories/template.js
index 3aa9960e809..d3a832ab03a 100644
--- a/components/sidenav/stories/template.js
+++ b/components/sidenav/stories/template.js
@@ -7,9 +7,6 @@ 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",
diff --git a/components/sidenav/themes/express.css b/components/sidenav/themes/express.css
deleted file mode 100644
index 9fd550418f2..00000000000
--- a/components/sidenav/themes/express.css
+++ /dev/null
@@ -1,16 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
diff --git a/components/sidenav/themes/spectrum-two.css b/components/sidenav/themes/spectrum-two.css
deleted file mode 100644
index 85869d92dbe..00000000000
--- a/components/sidenav/themes/spectrum-two.css
+++ /dev/null
@@ -1,25 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-SideNav {
- --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);
- }
-}
diff --git a/components/sidenav/themes/spectrum.css b/components/sidenav/themes/spectrum.css
deleted file mode 100644
index 51828a4d8bf..00000000000
--- a/components/sidenav/themes/spectrum.css
+++ /dev/null
@@ -1,29 +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.
- */
-
-/* @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/slider/CHANGELOG.md b/components/slider/CHANGELOG.md
index f8e002908f6..77ee9113a51 100644
--- a/components/slider/CHANGELOG.md
+++ b/components/slider/CHANGELOG.md
@@ -1,20 +1,31 @@
# Change log
+## 7.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies:
+ - @spectrum-css/stepper@8.0.0-next.0
+
## 6.3.0
### Minor Changes
-- [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! - By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the `.js-focus-within` and '[focus-within]` selectors for the focus-within polyfill. As this feature is not used in the SWC consumption, risk to the end user for this removal is low.
+📝 [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the `.js-focus-within` and '[focus-within]` selectors for the focus-within polyfill. As this feature is not used in the SWC consumption, risk to the end user for this removal is low.
## 6.2.0
### Minor Changes
-- [#3611](https://github.com/adobe/spectrum-css/pull/3611) [`8cb98c6`](https://github.com/adobe/spectrum-css/commit/8cb98c6127a91f902f305faeb800e3c787e97e66) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - # Slider: offset variant track fix
+📝 [#3611](https://github.com/adobe/spectrum-css/pull/3611) [`8cb98c6`](https://github.com/adobe/spectrum-css/commit/8cb98c6127a91f902f305faeb800e3c787e97e66) Thanks [@aramos-adobe](https://github.com/aramos-adobe)!
+
+#### Slider: offset variant track fix
- The border radius styles were not being applied to the second instance of the `spectrum-Slider-track` when the offset variant is activated. The reason for this bug is because when the `offset` is selected, the template structure changes as `spectrum-Slider-fill` gets added to the slider.
+The border radius styles were not being applied to the second instance of the `spectrum-Slider-track` when the offset variant is activated. The reason for this bug is because when the `offset` is selected, the template structure changes as `spectrum-Slider-fill` gets added to the slider.
- Adding a sibling combinator `&~.spectrum-Slider-track` to `spectrum-Slider-track` when offset is activated resolved the issue.
+Adding a sibling combinator `&~.spectrum-Slider-track` to `spectrum-Slider-track` when offset is activated resolved the issue.
## 6.1.0
diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json
index 015c2145100..66ce6fecc86 100644
--- a/components/slider/dist/metadata.json
+++ b/components/slider/dist/metadata.json
@@ -83,10 +83,6 @@
".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",
@@ -258,29 +254,6 @@
"--spectrum-spacing-900",
"--spectrum-text-to-visual-75"
],
- "system-theme": [
- "--system-slider-handle-background-color",
- "--system-slider-handle-background-color-disabled",
- "--system-slider-handle-border-color",
- "--system-slider-handle-border-color-down",
- "--system-slider-handle-border-color-hover",
- "--system-slider-handle-border-color-key-focus",
- "--system-slider-handle-border-radius",
- "--system-slider-handle-disabled-background-color",
- "--system-slider-handle-focus-ring-color-key-focus",
- "--system-slider-ramp-handle-background-color",
- "--system-slider-ramp-track-color",
- "--system-slider-ramp-track-color-disabled",
- "--system-slider-size-l-handle-border-radius",
- "--system-slider-size-m-handle-border-radius",
- "--system-slider-size-s-handle-border-radius",
- "--system-slider-size-xl-handle-border-radius",
- "--system-slider-tick-mark-color",
- "--system-slider-ticks-handle-background-color",
- "--system-slider-track-color",
- "--system-slider-track-corner-radius",
- "--system-slider-track-fill-color"
- ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-slider-filled-track-fill-color",
diff --git a/components/slider/index.css b/components/slider/index.css
index d49f584aab0..71f3d14163c 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -11,10 +11,7 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.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);
@@ -43,6 +40,10 @@
--spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100);
/* colors */
+ --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-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);
@@ -51,30 +52,25 @@
--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);
+ --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);
/* 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;
-
- position: relative;
-
- /* Don't let z-index'd child elements float above other things on the page */
- z-index: 0;
- display: block;
- min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size));
-
- user-select: none;
-
- &:dir(rtl),
- &:dir(rtl) {
- --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
- }
-
- &:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp) {
- margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
- }
+ --spectrum-slider-track-corner-radius: 2px;
+ --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500);
}
.spectrum-Slider--sizeS {
@@ -85,6 +81,7 @@
--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-handle-border-radius: var(--spectrum-corner-radius-500);
}
.spectrum-Slider--sizeL {
@@ -95,6 +92,7 @@
--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);
+ --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4);
/* TODO: placeholder value for sideLabel variant value width */
--spectrum-slider-value-inline-size: 18px;
@@ -108,11 +106,32 @@
--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);
+ --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4);
/* TODO: placeholder value for sideLabel variant value width */
--spectrum-slider-value-inline-size: 22px;
}
+.spectrum-Slider {
+ position: relative;
+
+ /* Don't let z-index'd child elements float above other things on the page */
+ z-index: 0;
+ display: block;
+ min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size));
+
+ user-select: none;
+
+ &:dir(rtl),
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
+
+ &:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp) {
+ margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
+ }
+}
+
.spectrum-Slider--sideLabel {
display: flex;
align-items: center;
diff --git a/components/slider/package.json b/components/slider/package.json
index 20cf8622268..d1224060bf4 100644
--- a/components/slider/package.json
+++ b/components/slider/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/slider",
- "version": "6.3.0",
+ "version": "7.0.0-next.0",
"description": "The Spectrum CSS slider component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/stepper": ">=7.0.0 <8.0.0",
+ "@spectrum-css/stepper": ">=8.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -37,7 +37,7 @@
}
},
"devDependencies": {
- "@spectrum-css/stepper": "7.1.3",
+ "@spectrum-css/stepper": "8.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js
index c69a96b487a..905fe770b40 100644
--- a/components/slider/stories/template.js
+++ b/components/slider/stories/template.js
@@ -7,9 +7,6 @@ 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-Slider",
diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css
deleted file mode 100644
index f9f149f4d93..00000000000
--- a/components/slider/themes/express.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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
-
-@container style(--system: express) {
- .spectrum-Slider {
- --spectrum-slider-track-color: var(--spectrum-gray-200);
- --spectrum-slider-track-fill-color: var(--spectrum-gray-600);
- --spectrum-slider-ramp-track-color: var(--spectrum-gray-300);
- --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200);
-
- --spectrum-slider-handle-background-color: var(--spectrum-gray-50);
- --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-50);
- --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-50);
- --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-50);
- --spectrum-slider-handle-border-color: var(--spectrum-gray-800);
- --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50);
-
- --spectrum-slider-tick-mark-color: var(--spectrum-gray-200);
-
- --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900);
- --spectrum-slider-handle-border-color-down: var(--spectrum-gray-900);
- --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-900);
- --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
- }
-}
diff --git a/components/slider/themes/spectrum-two.css b/components/slider/themes/spectrum-two.css
deleted file mode 100644
index b118d77cffd..00000000000
--- a/components/slider/themes/spectrum-two.css
+++ /dev/null
@@ -1,54 +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.
- */
-
-@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);
-
- --spectrum-slider-track-corner-radius: 2px;
-
- &,
- &.spectrum-Slider--sizeM {
- --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500);
- }
-
- &.spectrum-Slider--sizeS {
- --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500);
- }
-
- &.spectrum-Slider--sizeL {
- --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4);
- }
-
- &.spectrum-Slider--sizeXL {
- --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4);
- }
- }
-}
diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css
deleted file mode 100644
index f411427cc8d..00000000000
--- a/components/slider/themes/spectrum.css
+++ /dev/null
@@ -1,45 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-Slider {
- --spectrum-slider-track-color: var(--spectrum-gray-300);
- --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200);
- --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100);
- --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100);
- --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100);
- --spectrum-slider-tick-mark-color: var(--spectrum-gray-300);
- --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75);
-
- &,
- &.spectrum-Slider--sizeM {
- --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
- }
-
- &.spectrum-Slider--sizeS {
- --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
- }
-
- &.spectrum-Slider--sizeL {
- --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
- }
-
- &.spectrum-Slider--sizeXL {
- --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
- }
- }
-}
diff --git a/components/splitview/dist/metadata.json b/components/splitview/dist/metadata.json
index 4902e8e2368..c6925723f7c 100644
--- a/components/splitview/dist/metadata.json
+++ b/components/splitview/dist/metadata.json
@@ -81,11 +81,6 @@
"--spectrum-gray-75",
"--spectrum-gray-800"
],
- "system-theme": [
- "--system-split-view-background-color",
- "--system-split-view-gripper-border-radius",
- "--system-split-view-handle-background-color"
- ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-splitview-handle-background-color",
diff --git a/components/splitview/index.css b/components/splitview/index.css
index 81ca706a34d..990108806d3 100644
--- a/components/splitview/index.css
+++ b/components/splitview/index.css
@@ -11,9 +11,11 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
.spectrum-SplitView {
+ --spectrum-splitview-background-color: var(--spectrum-gray-75);
+ --spectrum-splitview-handle-background-color: var(--spectrum-gray-200);
+ --spectrum-splitview-gripper-border-radius: 2px;
+
--spectrum-splitview-vertical-width: 100%;
--spectrum-splitview-vertical-gripper-width: 50%;
--spectrum-splitview-vertical-gripper-outer-width: 100%;
diff --git a/components/splitview/package.json b/components/splitview/package.json
index 75ca825dd74..aa695ab5dc5 100644
--- a/components/splitview/package.json
+++ b/components/splitview/package.json
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/tokens": ">=16.0.1"
+ "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
"@spectrum-css/tokens": {
diff --git a/components/splitview/stories/template.js b/components/splitview/stories/template.js
index 4fb08b911dd..aacdd00a3e7 100644
--- a/components/splitview/stories/template.js
+++ b/components/splitview/stories/template.js
@@ -3,9 +3,6 @@ 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
deleted file mode 100644
index 9fd550418f2..00000000000
--- a/components/splitview/themes/express.css
+++ /dev/null
@@ -1,16 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
diff --git a/components/splitview/themes/spectrum-two.css b/components/splitview/themes/spectrum-two.css
deleted file mode 100644
index 14ef6131e5a..00000000000
--- a/components/splitview/themes/spectrum-two.css
+++ /dev/null
@@ -1,20 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-SplitView {
- --spectrum-splitview-background-color: var(--spectrum-gray-75);
- --spectrum-splitview-handle-background-color: var(--spectrum-gray-200);
- --spectrum-splitview-gripper-border-radius: 2px;
- }
-}
diff --git a/components/splitview/themes/spectrum.css b/components/splitview/themes/spectrum.css
deleted file mode 100644
index 209e46a4b3b..00000000000
--- a/components/splitview/themes/spectrum.css
+++ /dev/null
@@ -1,24 +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.
- */
-
-/* @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);
- --spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75);
- }
-}
diff --git a/components/statuslight/CHANGELOG.md b/components/statuslight/CHANGELOG.md
index 80e1c921809..82d9ab3f09e 100644
--- a/components/statuslight/CHANGELOG.md
+++ b/components/statuslight/CHANGELOG.md
@@ -1,5 +1,16 @@
# Change log
+## 9.1.1-next.0
+
+### Patch Changes
+
+- [#2352](https://github.com/adobe/spectrum-css/pull/2352) [`dce3669`](https://github.com/adobe/spectrum-css/commit/dce366923562d004c61e8a19da216f6ea6a11d40) Thanks [@pfulton](https://github.com/pfulton)! - Removes references to the accent variant, since the accent status light was deprecated in S2.
+
+ Removed variant:
+
+ `.spectrum-StatusLight--accent`
+ `--spectrum-statuslight-semantic-accent-color`
+
## 9.1.0
### Minor Changes
diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json
index 7c7c6a7587f..13c313b8342 100644
--- a/components/statuslight/dist/metadata.json
+++ b/components/statuslight/dist/metadata.json
@@ -2,10 +2,11 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-StatusLight",
- ".spectrum-StatusLight--accent:before",
".spectrum-StatusLight--blue:before",
+ ".spectrum-StatusLight--brown:before",
".spectrum-StatusLight--celery:before",
".spectrum-StatusLight--chartreuse:before",
+ ".spectrum-StatusLight--cinnamon:before",
".spectrum-StatusLight--cyan:before",
".spectrum-StatusLight--fuchsia:before",
".spectrum-StatusLight--gray:before",
@@ -18,14 +19,16 @@
".spectrum-StatusLight--neutral:before",
".spectrum-StatusLight--notice:before",
".spectrum-StatusLight--orange:before",
+ ".spectrum-StatusLight--pink:before",
".spectrum-StatusLight--positive:before",
".spectrum-StatusLight--purple:before",
".spectrum-StatusLight--red:before",
".spectrum-StatusLight--seafoam:before",
+ ".spectrum-StatusLight--silver:before",
".spectrum-StatusLight--sizeL",
- ".spectrum-StatusLight--sizeM",
".spectrum-StatusLight--sizeS",
".spectrum-StatusLight--sizeXL",
+ ".spectrum-StatusLight--turquoise:before",
".spectrum-StatusLight--yellow:before",
".spectrum-StatusLight:before",
".spectrum-StatusLight:lang(ja)",
@@ -37,14 +40,18 @@
"--mod-statuslight-content-color-default",
"--mod-statuslight-corner-radius",
"--mod-statuslight-dot-size",
+ "--mod-statuslight-font-family",
"--mod-statuslight-font-size",
+ "--mod-statuslight-font-style",
"--mod-statuslight-font-weight",
"--mod-statuslight-height",
"--mod-statuslight-line-height",
"--mod-statuslight-line-height-cjk",
"--mod-statuslight-nonsemantic-blue-color",
+ "--mod-statuslight-nonsemantic-brown-color",
"--mod-statuslight-nonsemantic-celery-color",
"--mod-statuslight-nonsemantic-chartreuse-color",
+ "--mod-statuslight-nonsemantic-cinnamon-color",
"--mod-statuslight-nonsemantic-cyan-color",
"--mod-statuslight-nonsemantic-fuchsia-color",
"--mod-statuslight-nonsemantic-gray-color",
@@ -52,11 +59,13 @@
"--mod-statuslight-nonsemantic-indigo-color",
"--mod-statuslight-nonsemantic-magenta-color",
"--mod-statuslight-nonsemantic-orange-color",
+ "--mod-statuslight-nonsemantic-pink-color",
"--mod-statuslight-nonsemantic-purple-color",
"--mod-statuslight-nonsemantic-red-color",
"--mod-statuslight-nonsemantic-seafoam-color",
+ "--mod-statuslight-nonsemantic-silver-color",
+ "--mod-statuslight-nonsemantic-turquoise-color",
"--mod-statuslight-nonsemantic-yellow-color",
- "--mod-statuslight-semantic-accent-color",
"--mod-statuslight-semantic-info-color",
"--mod-statuslight-semantic-negative-color",
"--mod-statuslight-semantic-neutral-color",
@@ -73,6 +82,10 @@
"--spectrum-status-light-dot-size-large",
"--spectrum-status-light-dot-size-medium",
"--spectrum-status-light-dot-size-small",
+ "--spectrum-status-light-text-to-visual-100",
+ "--spectrum-status-light-text-to-visual-200",
+ "--spectrum-status-light-text-to-visual-300",
+ "--spectrum-status-light-text-to-visual-75",
"--spectrum-status-light-top-to-dot-extra-large",
"--spectrum-status-light-top-to-dot-large",
"--spectrum-status-light-top-to-dot-medium",
@@ -81,14 +94,18 @@
"--spectrum-statuslight-content-color-default",
"--spectrum-statuslight-corner-radius",
"--spectrum-statuslight-dot-size",
+ "--spectrum-statuslight-font-family",
"--spectrum-statuslight-font-size",
+ "--spectrum-statuslight-font-style",
"--spectrum-statuslight-font-weight",
"--spectrum-statuslight-height",
"--spectrum-statuslight-line-height",
"--spectrum-statuslight-line-height-cjk",
"--spectrum-statuslight-nonsemantic-blue-color",
+ "--spectrum-statuslight-nonsemantic-brown-color",
"--spectrum-statuslight-nonsemantic-celery-color",
"--spectrum-statuslight-nonsemantic-chartreuse-color",
+ "--spectrum-statuslight-nonsemantic-cinnamon-color",
"--spectrum-statuslight-nonsemantic-cyan-color",
"--spectrum-statuslight-nonsemantic-fuchsia-color",
"--spectrum-statuslight-nonsemantic-gray-color",
@@ -96,11 +113,13 @@
"--spectrum-statuslight-nonsemantic-indigo-color",
"--spectrum-statuslight-nonsemantic-magenta-color",
"--spectrum-statuslight-nonsemantic-orange-color",
+ "--spectrum-statuslight-nonsemantic-pink-color",
"--spectrum-statuslight-nonsemantic-purple-color",
"--spectrum-statuslight-nonsemantic-red-color",
"--spectrum-statuslight-nonsemantic-seafoam-color",
+ "--spectrum-statuslight-nonsemantic-silver-color",
+ "--spectrum-statuslight-nonsemantic-turquoise-color",
"--spectrum-statuslight-nonsemantic-yellow-color",
- "--spectrum-statuslight-semantic-accent-color",
"--spectrum-statuslight-semantic-info-color",
"--spectrum-statuslight-semantic-negative-color",
"--spectrum-statuslight-semantic-neutral-color",
@@ -114,11 +133,12 @@
"--spectrum-statuslight-subdued-content-color-default"
],
"global": [
- "--spectrum-accent-visual-color",
"--spectrum-blue-visual-color",
"--spectrum-border-width-100",
+ "--spectrum-brown-visual-color",
"--spectrum-celery-visual-color",
"--spectrum-chartreuse-visual-color",
+ "--spectrum-cinnamon-visual-color",
"--spectrum-cjk-line-height-100",
"--spectrum-component-bottom-to-text-100",
"--spectrum-component-bottom-to-text-200",
@@ -132,12 +152,16 @@
"--spectrum-component-top-to-text-200",
"--spectrum-component-top-to-text-300",
"--spectrum-component-top-to-text-75",
+ "--spectrum-corner-radius-full",
"--spectrum-cyan-visual-color",
+ "--spectrum-default-font-family",
+ "--spectrum-default-font-style",
"--spectrum-font-size-100",
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
"--spectrum-fuchsia-visual-color",
+ "--spectrum-gray-600",
"--spectrum-gray-visual-color",
"--spectrum-green-visual-color",
"--spectrum-indigo-visual-color",
@@ -150,17 +174,16 @@
"--spectrum-neutral-visual-color",
"--spectrum-notice-visual-color",
"--spectrum-orange-visual-color",
+ "--spectrum-pink-visual-color",
"--spectrum-positive-visual-color",
"--spectrum-purple-visual-color",
"--spectrum-red-visual-color",
+ "--spectrum-regular-font-weight",
"--spectrum-seafoam-visual-color",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-300",
- "--spectrum-text-to-visual-75",
+ "--spectrum-silver-visual-color",
+ "--spectrum-turquoise-visual-color",
"--spectrum-yellow-visual-color"
],
- "system-theme": [],
"passthroughs": [],
"high-contrast": [
"--highcontrast-statuslight-content-color-default",
diff --git a/components/statuslight/index.css b/components/statuslight/index.css
index aed7e351d88..db4a4f57e4d 100644
--- a/components/statuslight/index.css
+++ b/components/statuslight/index.css
@@ -11,17 +11,57 @@
* governing permissions and limitations under the License.
*/
-.spectrum-StatusLight,
-.spectrum-StatusLight--sizeM {
+.spectrum-StatusLight {
+ /* Static tokens */
+ --spectrum-statuslight-corner-radius: var(--spectrum-corner-radius-full);
+ --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);
+ /* Font */
+ --spectrum-statuslight-font-family: var(--spectrum-default-font-family);
+ --spectrum-statuslight-font-weight: var(--spectrum-regular-font-weight);
+ --spectrum-statuslight-font-style: var(--spectrum-default-font-style);
--spectrum-statuslight-font-size: var(--spectrum-font-size-100);
- --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
+ /* Space */
+ --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-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-gray-600);
+ --spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-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-nonsemantic-pink-color: var(--spectrum-pink-visual-color);
+ --spectrum-statuslight-nonsemantic-turquoise-color: var(--spectrum-turquoise-visual-color);
+ --spectrum-statuslight-nonsemantic-cinnamon-color: var(--spectrum-cinnamon-visual-color);
+ --spectrum-statuslight-nonsemantic-brown-color: var(--spectrum-brown-visual-color);
+ --spectrum-statuslight-nonsemantic-silver-color: var(--spectrum-silver-visual-color);
}
.spectrum-StatusLight--sizeS {
@@ -30,7 +70,7 @@
--spectrum-statuslight-font-size: var(--spectrum-font-size-75);
- --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75);
+ --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-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);
@@ -42,7 +82,7 @@
--spectrum-statuslight-font-size: var(--spectrum-font-size-200);
- --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200);
+ --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-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);
@@ -54,7 +94,7 @@
--spectrum-statuslight-font-size: var(--spectrum-font-size-300);
- --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300);
+ --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-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);
@@ -71,7 +111,6 @@
--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);
@@ -104,6 +143,8 @@
font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size));
font-weight: var(--mod-statuslight-font-weight, var(--spectrum-statuslight-font-weight));
+ font-family: var(--mod-statuslight-font-family, var(--spectrum-statuslight-font-family));
+ font-style: var(--mod-statuslight-font-style, var(--spectrum-statuslight-font-style));
line-height: var(--mod-statuslight-line-height, var(--spectrum-statuslight-line-height));
@@ -118,7 +159,6 @@
/* 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;
@@ -126,7 +166,6 @@
inline-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius));
-
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));
}
@@ -134,8 +173,6 @@
/* Semantic Colors */
.spectrum-StatusLight--neutral {
- font-style: italic;
-
color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default)));
&::before {
@@ -143,10 +180,6 @@
}
}
-.spectrum-StatusLight--accent::before {
- background-color: var(--mod-statuslight-semantic-accent-color, var(--spectrum-statuslight-semantic-accent-color));
-}
-
.spectrum-StatusLight--info::before {
background-color: var(--mod-statuslight-semantic-info-color, var(--spectrum-statuslight-semantic-info-color));
}
@@ -220,11 +253,30 @@
background-color: var(--mod-statuslight-nonsemantic-magenta-color, var(--spectrum-statuslight-nonsemantic-magenta-color));
}
+.spectrum-StatusLight--pink::before {
+ background-color: var(--mod-statuslight-nonsemantic-pink-color, var(--spectrum-statuslight-nonsemantic-pink-color));
+}
+
+.spectrum-StatusLight--turquoise::before {
+ background-color: var(--mod-statuslight-nonsemantic-turquoise-color, var(--spectrum-statuslight-nonsemantic-turquoise-color));
+}
+
+.spectrum-StatusLight--cinnamon::before {
+ background-color: var(--mod-statuslight-nonsemantic-cinnamon-color, var(--spectrum-statuslight-nonsemantic-cinnamon-color));
+}
+
+.spectrum-StatusLight--brown::before {
+ background-color: var(--mod-statuslight-nonsemantic-brown-color, var(--spectrum-statuslight-nonsemantic-brown-color));
+}
+
+.spectrum-StatusLight--silver::before {
+ background-color: var(--mod-statuslight-nonsemantic-silver-color, var(--spectrum-statuslight-nonsemantic-silver-color));
+}
+
@media (forced-colors: active) {
.spectrum-StatusLight {
--highcontrast-statuslight-content-color-default: CanvasText;
--highcontrast-statuslight-subdued-content-color-default: CanvasText;
-
forced-color-adjust: none;
/* Dot */
diff --git a/components/statuslight/package.json b/components/statuslight/package.json
index 0b297a7d754..41c5742600a 100644
--- a/components/statuslight/package.json
+++ b/components/statuslight/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/statuslight",
- "version": "9.1.0",
+ "version": "9.1.1-next.0",
"description": "The Spectrum CSS statuslight component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/tokens": ">=16.0.1"
+ "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
"@spectrum-css/tokens": {
diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js
index b385bcc9da3..567bea4c55d 100644
--- a/components/statuslight/stories/statuslight.stories.js
+++ b/components/statuslight/stories/statuslight.stories.js
@@ -33,26 +33,30 @@ export default {
category: "Component",
},
options: [
- "accent",
"info",
"neutral",
"positive",
"notice",
"negative",
- "gray",
- "red",
- "orange",
"yellow",
"chartreuse",
"celery",
- "green",
"seafoam",
"cyan",
- "blue",
"indigo",
"purple",
"fuchsia",
"magenta",
+ "gray",
+ "red",
+ "orange",
+ "green",
+ "blue",
+ "pink",
+ "turquoise",
+ "cinnamon",
+ "brown",
+ "silver",
],
control: "select",
},
@@ -72,6 +76,7 @@ export default {
packageJson,
metadata,
},
+ tags: ["migrated"],
};
/**
diff --git a/components/statuslight/stories/statuslight.test.js b/components/statuslight/stories/statuslight.test.js
index 9cfab9c3094..7fc72a9ce6b 100644
--- a/components/statuslight/stories/statuslight.test.js
+++ b/components/statuslight/stories/statuslight.test.js
@@ -4,7 +4,7 @@ import { Template } from "./template.js";
export const StatusLightGroup = Variants({
Template,
testData: [
- ...["accent", "info", "positive", "negative", "notice", "neutral"].map((variant) => ({
+ ...["info", "positive", "negative", "notice", "neutral"].map((variant) => ({
testHeading: variant.charAt(0).toUpperCase() + variant.slice(1),
variant,
})),
diff --git a/components/statuslight/stories/template.js b/components/statuslight/stories/template.js
index 2faf35797c8..be01af383ba 100644
--- a/components/statuslight/stories/template.js
+++ b/components/statuslight/stories/template.js
@@ -27,12 +27,10 @@ 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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
diff --git a/components/steplist/themes/spectrum-two.css b/components/steplist/themes/spectrum-two.css
deleted file mode 100644
index 649e9fb4d3a..00000000000
--- a/components/steplist/themes/spectrum-two.css
+++ /dev/null
@@ -1,19 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-Steplist {
- --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200);
- --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200);
- }
-}
diff --git a/components/steplist/themes/spectrum.css b/components/steplist/themes/spectrum.css
deleted file mode 100644
index bfe1e5f6f8c..00000000000
--- a/components/steplist/themes/spectrum.css
+++ /dev/null
@@ -1,23 +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.
- */
-
-/* @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 9de6b73a1cd..e631255ae5b 100644
--- a/components/stepper/CHANGELOG.md
+++ b/components/stepper/CHANGELOG.md
@@ -1,11 +1,23 @@
# Change log
+## 8.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+ - @spectrum-css/actionbutton@8.0.0-next.0
+ - @spectrum-css/infieldbutton@7.0.0-next.0
+ - @spectrum-css/textfield@9.0.0-next.0
+
## 7.1.3
### Patch Changes
-- [#3621](https://github.com/adobe/spectrum-css/pull/3621) [`3aec28a`](https://github.com/adobe/spectrum-css/commit/3aec28aac60bdf32a585fa8ff38559d80b57ff86) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - - Updates `--spectrum-stepper-border-color-focus-hover` from `gray-800` to `gray-900`.
- - Updates `--spectrum-stepper-buttons-border-color-keyboard-focus` from `gray-900` to `gray-800` to match the rest of the border color on keyboardFocus.
+📝 [#3621](https://github.com/adobe/spectrum-css/pull/3621) [`3aec28a`](https://github.com/adobe/spectrum-css/commit/3aec28aac60bdf32a585fa8ff38559d80b57ff86) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)!
+
+- Updates `--spectrum-stepper-border-color-focus-hover` from `gray-800` to `gray-900`.
+- Updates `--spectrum-stepper-buttons-border-color-keyboard-focus` from `gray-900` to `gray-800` to match the rest of the border color on keyboardFocus.
## 7.1.2
diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json
index cfea6e878d6..42b3c76d4e8 100644
--- a/components/stepper/dist/metadata.json
+++ b/components/stepper/dist/metadata.json
@@ -143,31 +143,6 @@
"--spectrum-negative-border-color-key-focus",
"--spectrum-text-field-minimum-width-multiplier"
],
- "system-theme": [
- "--system-stepper-border-color-default",
- "--system-stepper-border-color-disabled",
- "--system-stepper-border-color-focus",
- "--system-stepper-border-color-focus-hover",
- "--system-stepper-border-color-focus-hover-invalid",
- "--system-stepper-border-color-focus-invalid",
- "--system-stepper-border-color-hover",
- "--system-stepper-border-color-invalid",
- "--system-stepper-border-color-keyboard-focus",
- "--system-stepper-border-color-keyboard-focus-invalid",
- "--system-stepper-border-width",
- "--system-stepper-button-border-width",
- "--system-stepper-button-border-width-disabled",
- "--system-stepper-buttons-background-color",
- "--system-stepper-buttons-background-color-disabled",
- "--system-stepper-buttons-border-color",
- "--system-stepper-buttons-border-color-focus",
- "--system-stepper-buttons-border-color-hover",
- "--system-stepper-buttons-border-color-keyboard-focus",
- "--system-stepper-buttons-border-style",
- "--system-stepper-buttons-border-width",
- "--system-stepper-quiet-button-edge-to-fill",
- "--system-stepper-quiet-buttons-border-style"
- ],
"passthroughs": [
"--mod-infield-button-border-block-end-width",
"--mod-infield-button-border-color",
diff --git a/components/stepper/index.css b/components/stepper/index.css
index f3c9682c07d..bfc3ca2bfc4 100644
--- a/components/stepper/index.css
+++ b/components/stepper/index.css
@@ -11,68 +11,36 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
-/* --- High contrast settings --- */
-@media (forced-colors: active) {
- .spectrum-Stepper {
- --highcontrast-stepper-border-color: CanvasText;
- --highcontrast-stepper-border-color-hover: Highlight;
- --highcontrast-stepper-border-color-focus: Highlight;
- --highcontrast-stepper-border-color-focus-hover: Highlight;
- --highcontrast-stepper-border-color-keyboard-focus: CanvasText;
- --highcontrast-stepper-focus-indicator-color: Highlight;
-
- &.is-invalid {
- --highcontrast-stepper-border-color: Highlight;
- --highcontrast-stepper-border-color-hover: Highlight;
- --highcontrast-stepper-border-color-focus: Highlight;
- --highcontrast-stepper-border-color-focus-hover: Highlight;
- --highcontrast-stepper-border-color-keyboard-focus: Highlight;
- }
-
- &.is-disabled {
- --highcontrast-stepper-border-color: GrayText;
- --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
- }
-
- &:not(.is-disabled) {
- &:hover {
- --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover);
- }
-
- &.is-focused,
- &:focus {
- --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus);
-
- &:hover {
- --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover);
- }
- }
-
- &.is-keyboardFocused,
- &:focus-visible {
- --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus);
- }
- }
- }
-
- /* @passthrough start */
- .spectrum-Stepper-input {
- --highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color);
- }
- /* @passthrough end */
-
- /* @passthrough start */
- .spectrum-Stepper-button {
- --highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color);
- --highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color);
- }
- /* @passthrough end */
-}
-
/* --- Component-level definitions --- */
.spectrum-Stepper {
+ --spectrum-stepper-border-width: var(--spectrum-border-width-100);
+ --spectrum-stepper-border-color-default: 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-800);
+
+ --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-100);
+ --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-width: var(--spectrum-border-width-100);
+
+ /** Invalid **/
+ --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);
+
+ /** Disabled **/
+ --spectrum-stepper-border-color-disabled: var(--spectrum-gray-300);
+ --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-200);
+ --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
+
--spectrum-stepper-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-default)));
--spectrum-stepper-border-radius: var(--mod-stepper-border-radius, var(--spectrum-corner-radius-100));
@@ -136,6 +104,9 @@
}
&.spectrum-Stepper--quiet {
+ --spectrum-stepper-buttons-border-style: none;
+ --spectrum-stepper-button-edge-to-fill: 0;
+
--mod-stepper-buttons-background-color: transparent;
/* quiet hover */
@@ -156,6 +127,64 @@
}
}
+/* --- High contrast settings --- */
+@media (forced-colors: active) {
+ .spectrum-Stepper {
+ --highcontrast-stepper-border-color: CanvasText;
+ --highcontrast-stepper-border-color-hover: Highlight;
+ --highcontrast-stepper-border-color-focus: Highlight;
+ --highcontrast-stepper-border-color-focus-hover: Highlight;
+ --highcontrast-stepper-border-color-keyboard-focus: CanvasText;
+ --highcontrast-stepper-focus-indicator-color: Highlight;
+
+ &.is-invalid {
+ --highcontrast-stepper-border-color: Highlight;
+ --highcontrast-stepper-border-color-hover: Highlight;
+ --highcontrast-stepper-border-color-focus: Highlight;
+ --highcontrast-stepper-border-color-focus-hover: Highlight;
+ --highcontrast-stepper-border-color-keyboard-focus: Highlight;
+ }
+
+ &.is-disabled {
+ --highcontrast-stepper-border-color: GrayText;
+ --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
+ }
+
+ &:not(.is-disabled) {
+ &:hover {
+ --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover);
+ }
+
+ &.is-focused,
+ &:focus {
+ --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus);
+
+ &:hover {
+ --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover);
+ }
+ }
+
+ &.is-keyboardFocused,
+ &:focus-visible {
+ --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus);
+ }
+ }
+ }
+
+ /* @passthrough start */
+ .spectrum-Stepper-input {
+ --highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color);
+ }
+ /* @passthrough end */
+
+ /* @passthrough start */
+ .spectrum-Stepper-button {
+ --highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color);
+ --highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color);
+ }
+ /* @passthrough end */
+}
+
/* --- Component-level passthroughs for nested components --- */
/* @passthrough start -- MODS for sub components */
.spectrum-Stepper {
@@ -225,6 +254,7 @@
}
&.spectrum-Stepper--quiet {
+ /* @passthrough start */
--mod-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width));
--mod-infield-button-border-color: var(--spectrum-stepper-border-color);
--mod-infield-button-border-color-quiet: var(--spectrum-stepper-border-color);
@@ -239,6 +269,7 @@
--mod-textfield-focus-indicator-color: transparent;
--mod-textfield-background-color: transparent;
--mod-textfield-border-color-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
+ /* @passthrough end */
&:not(.is-disabled) {
&:hover {
diff --git a/components/stepper/package.json b/components/stepper/package.json
index dd24240a0ca..8b43991f90f 100644
--- a/components/stepper/package.json
+++ b/components/stepper/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/stepper",
- "version": "7.1.3",
+ "version": "8.0.0-next.0",
"description": "The Spectrum CSS stepper component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,10 +25,10 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0",
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
- "@spectrum-css/infieldbutton": ">=6.0.0 <7.0.0",
- "@spectrum-css/textfield": ">=8.0.0 <9.0.0",
+ "@spectrum-css/actionbutton": ">=8.0.0-next.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
+ "@spectrum-css/infieldbutton": ">=7.0.0-next.0",
+ "@spectrum-css/textfield": ">=9.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -49,10 +49,10 @@
}
},
"devDependencies": {
- "@spectrum-css/actionbutton": "7.1.2",
- "@spectrum-css/icon": "9.1.0",
- "@spectrum-css/infieldbutton": "6.1.1",
- "@spectrum-css/textfield": "8.1.1",
+ "@spectrum-css/actionbutton": "8.0.0-next.1",
+ "@spectrum-css/icon": "10.0.0-next.0",
+ "@spectrum-css/infieldbutton": "7.0.0-next.0",
+ "@spectrum-css/textfield": "9.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js
index fbb818b72f3..fb14155af87 100644
--- a/components/stepper/stories/template.js
+++ b/components/stepper/stories/template.js
@@ -8,9 +8,6 @@ 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-Stepper",
diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css
deleted file mode 100644
index 724f4e973ff..00000000000
--- a/components/stepper/themes/express.css
+++ /dev/null
@@ -1,53 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
-
-@container style(--system: express) {
- .spectrum-Stepper {
- --spectrum-stepper-border-width: var(--spectrum-border-width-200);
- --spectrum-stepper-border-color-default: var(--spectrum-gray-400);
- --spectrum-stepper-border-color-hover: var(--spectrum-gray-500);
- --spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
- --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900);
- --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
- --spectrum-stepper-border-color-disabled: var(--spectrum-disabled-background-color);
-
- --spectrum-stepper-buttons-border-style: solid;
- --spectrum-stepper-buttons-border-width: var(--spectrum-border-width-200);
- --spectrum-stepper-buttons-border-color: transparent;
- --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
- --spectrum-stepper-buttons-border-color-hover: transparent;
- --spectrum-stepper-buttons-border-color-focus: transparent;
- --spectrum-stepper-buttons-border-color-keyboard-focus: transparent;
-
- --spectrum-stepper-button-border-width: 0;
-
- /** Invalid **/
- --spectrum-stepper-border-color-invalid: transparent;
- --spectrum-stepper-border-color-focus-invalid: transparent;
- --spectrum-stepper-border-color-focus-hover-invalid: transparent;
- --spectrum-stepper-border-color-keyboard-focus-invalid: transparent;
-
- /** Disabled **/
- --spectrum-stepper-button-border-width-disabled: 0;
- --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-disabled-background-color);
- }
-
- .spectrum-Stepper--quiet {
- --spectrum-stepper-buttons-border-style: none;
- --spectrum-stepper-button-edge-to-fill: 0;
- }
-}
diff --git a/components/stepper/themes/spectrum-two.css b/components/stepper/themes/spectrum-two.css
deleted file mode 100644
index 18c580ff127..00000000000
--- a/components/stepper/themes/spectrum-two.css
+++ /dev/null
@@ -1,49 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-Stepper {
- --spectrum-stepper-border-width: var(--spectrum-border-width-100);
- --spectrum-stepper-border-color-default: 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-900);
- --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-800);
-
- --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-100);
- --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-800);
-
- --spectrum-stepper-button-border-width: var(--spectrum-border-width-100);
-
- /** Invalid **/
- --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);
-
- /** Disabled **/
- --spectrum-stepper-border-color-disabled: var(--spectrum-gray-300);
- --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-200);
- --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
- }
-
- .spectrum-Stepper--quiet {
- --spectrum-stepper-buttons-border-style: none;
- --spectrum-stepper-button-edge-to-fill: 0;
- }
-}
diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css
deleted file mode 100644
index 1b904f9f952..00000000000
--- a/components/stepper/themes/spectrum.css
+++ /dev/null
@@ -1,25 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-Stepper {
- --spectrum-stepper-border-color-disabled: transparent;
- --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-100);
- --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
- --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-100);
- }
-}
diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json
index 896cc7acc7c..e3affcc83cb 100644
--- a/components/swatch/dist/metadata.json
+++ b/components/swatch/dist/metadata.json
@@ -23,7 +23,6 @@
".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",
@@ -73,13 +72,11 @@
"component": [
"--spectrum-swatch-border-color",
"--spectrum-swatch-border-color-light",
- "--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-opacity",
"--spectrum-swatch-disabled-icon-color",
"--spectrum-swatch-disabled-icon-size",
"--spectrum-swatch-focus-indicator-border-radius",
@@ -102,14 +99,12 @@
],
"global": [
"--spectrum-animation-duration-100",
- "--spectrum-black-rgb",
"--spectrum-border-width-100",
"--spectrum-border-width-200",
- "--spectrum-corner-radius-75",
+ "--spectrum-corner-radius-100",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
- "--spectrum-gray-1000-rgb",
"--spectrum-gray-25",
"--spectrum-gray-800",
"--spectrum-gray-900",
@@ -121,11 +116,6 @@
"--spectrum-workflow-icon-size-50",
"--spectrum-workflow-icon-size-75"
],
- "system-theme": [
- "--system-swatch-border-color",
- "--system-swatch-border-radius",
- "--system-swatch-inner-border-color-selected"
- ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-swatch-background-color-selected",
diff --git a/components/swatch/index.css b/components/swatch/index.css
index b6e636906e6..f0f03dbaac9 100644
--- a/components/swatch/index.css
+++ b/components/swatch/index.css
@@ -11,7 +11,48 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
+ /* @note: default sizing for swatch is small */
+.spectrum-Swatch {
+ /* Placeholder tokens */
+ --spectrum-swatch-focus-indicator-border-radius: var(--mod-swatch-focus-indicator-border-radius, 8px);
+ --spectrum-swatch-icon-border-color: var(--mod-swatch-icon-border-color, rgb(0 0 0 / 51%));
+
+ /* Size */
+ --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-small));
+ --spectrum-swatch-border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-100));
+ --spectrum-swatch-border-thickness: var(--mod-swatch-border-thickness, var(--spectrum-border-width-100));
+ --spectrum-swatch-border-thickness-selected: var(--mod-swatch-border-thickness-selected, var(--spectrum-border-width-200));
+ --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-75));
+ --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-small));
+ --spectrum-swatch-focus-indicator-thickness: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
+ --spectrum-swatch-focus-indicator-gap: var(--mod-swatch-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
+
+ /* Color */
+ --spectrum-swatch-border-color-selected: var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-gray-900)));
+ --spectrum-swatch-inner-border-color-selected: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-gray-25)));
+ --spectrum-swatch-disabled-icon-color: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-white)));
+ --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800);
+ --spectrum-swatch-slash-icon-color: var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-red-900)));
+ --spectrum-swatch-focus-indicator-color: var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color)));
+}
+
+.spectrum-Swatch--sizeXS {
+ --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-extra-small));
+ --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-50));
+ --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-extra-small));
+}
+
+.spectrum-Swatch--sizeM {
+ --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-medium));
+ --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-100));
+ --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-medium));
+}
+
+.spectrum-Swatch--sizeL {
+ --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-large));
+ --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-200));
+ --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-large));
+}
/* Windows high contrast mode */
@media (forced-colors: active) {
@@ -26,54 +67,17 @@
.spectrum-Swatch-fill {
forced-color-adjust: none;
}
- }
- .spectrum-Swatch[disabled],
- .spectrum-Swatch.is-disabled {
- --highcontrast-swatch-border-color: GrayText;
+ &[disabled],
+ &.is-disabled {
+ --highcontrast-swatch-border-color: GrayText;
+ }
}
}
-.spectrum-Swatch,
-.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--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--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);
-}
-
.spectrum-Swatch {
- --spectrum-swatch-focus-indicator-border-radius: 8px;
- --spectrum-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-disabled-icon-border-opacity));
- --spectrum-swatch-disabled-icon-color: var(--spectrum-white);
- --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-selected: var(--spectrum-gray-900);
- --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);
-
- inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
- block-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
+ inline-size: var(--spectrum-swatch-size);
+ block-size: var(--spectrum-swatch-size);
display: flex;
align-items: center;
@@ -88,24 +92,24 @@
user-select: none;
.spectrum-Swatch-disabledIcon {
- inline-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-swatch-disabled-icon-size));
- block-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-swatch-disabled-icon-size));
+ inline-size: var(--spectrum-swatch-disabled-icon-size);
+ block-size: var(--spectrum-swatch-disabled-icon-size);
}
&,
&::before {
- border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
+ border-radius: var(--spectrum-swatch-border-radius);
}
&.is-selected {
- background: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected)));
+ background: var(--spectrum-swatch-inner-border-color-selected);
.spectrum-Swatch-fill {
clip-path: polygon(
- calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2),
- calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2),
- calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2),
- calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)
+ calc(var(--spectrum-swatch-border-thickness-selected) * 2) calc(var(--spectrum-swatch-border-thickness-selected) * 2),
+ calc(100% - var(--spectrum-swatch-border-thickness-selected) * 2) calc(var(--spectrum-swatch-border-thickness-selected) * 2),
+ calc(100% - var(--spectrum-swatch-border-thickness-selected) * 2) calc(100% - var(--spectrum-swatch-border-thickness-selected) * 2),
+ calc(var(--spectrum-swatch-border-thickness-selected) * 2) calc(100% - var(--spectrum-swatch-border-thickness-selected) * 2)
);
/* no border radius when selected */
@@ -147,12 +151,12 @@
background-image: none;
&::after {
- inline-size: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness));
+ inline-size: var(--spectrum-swatch-slash-thickness);
content: "";
position: absolute;
transform: rotate(-45deg);
block-size: 200%; /* just needs to be bigger than a swatch */
- background: var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-swatch-slash-icon-color)));
+ background: var(--spectrum-swatch-slash-icon-color);
}
}
@@ -174,9 +178,9 @@
position: absolute;
inset: 0;
- border-width: var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected));
+ border-width: var(--spectrum-swatch-border-thickness-selected);
border-style: solid;
- border-color: var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-swatch-border-color-selected)));
+ border-color: var(--spectrum-swatch-border-color-selected);
opacity: 0;
@@ -187,14 +191,14 @@
&::after {
content: "";
position: absolute;
- inset: calc(-2 * var(--mod-swatch-focus-indicator-gap, var(--spectrum-swatch-focus-indicator-gap)));
+ inset: calc(-2 * var(--spectrum-swatch-focus-indicator-gap));
opacity: 0;
- border-width: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-swatch-focus-indicator-thickness));
+ border-width: var(--spectrum-swatch-focus-indicator-thickness);
border-style: solid;
- border-color: var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color)));
- border-radius: var(--mod-swatch-focus-indicator-border-radius, var(--spectrum-swatch-focus-indicator-border-radius));
+ border-color: var(--spectrum-swatch-focus-indicator-color);
+ border-radius: var(--spectrum-swatch-focus-indicator-border-radius);
transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
}
@@ -227,6 +231,8 @@
position: absolute;
inset: 0;
z-index: 0;
+
+ /* Undefined variable allows custom stylesheet or JS to pass the value to this element */
background: var(--spectrum-picked-color, transparent);
/* Swatch border */
@@ -248,7 +254,7 @@
.spectrum-Swatch--lightBorder {
.spectrum-Swatch-fill {
&::before {
- box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--mod-swatch-border-color-light, var(--spectrum-swatch-border-color-light));
+ box-shadow: inset 0 0 0 var(--spectrum-swatch-border-thickness) var(--mod-swatch-border-color-light, var(--spectrum-swatch-border-color-light));
}
}
}
@@ -256,6 +262,8 @@
.spectrum-Swatch-mixedValueIcon {
display: none;
pointer-events: none;
+
+ /* Undefined variable allows custom stylesheet or JS to pass the value to this element */
color: var(--spectrum-picked-color, transparent);
}
@@ -266,22 +274,22 @@
display: none;
pointer-events: none;
- color: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
- stroke: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
+ color: var(--spectrum-swatch-disabled-icon-color);
+ stroke: var(--spectrum-swatch-disabled-icon-color);
/* Icon fill color */
path:first-child {
- fill: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
+ fill: var(--spectrum-swatch-disabled-icon-color);
}
/* Icon outline color - does not need a highcontrast token because the icon fill color provides contrast. */
path:last-child {
- fill: var(--mod-swatch-icon-border-color, var(--spectrum-swatch-icon-border-color));
+ fill: var(--spectrum-swatch-icon-border-color);
}
}
.spectrum-Swatch--rectangle {
- inline-size: calc(var(--mod-swatch-size, var(--spectrum-swatch-size)) * 2);
+ inline-size: calc(var(--spectrum-swatch-size) * 2);
}
/* Variant: Rounding - None */
@@ -311,7 +319,7 @@
}
&.is-selected .spectrum-Swatch-fill {
- clip-path: circle(calc(50% - (var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)) at 50% 50%);
+ clip-path: circle(calc(50% - (var(--spectrum-swatch-border-thickness-selected) * 2)) at 50% 50%);
}
}
}
diff --git a/components/swatch/stories/template.js b/components/swatch/stories/template.js
index f3658577a3f..bcf81178f6d 100644
--- a/components/swatch/stories/template.js
+++ b/components/swatch/stories/template.js
@@ -9,9 +9,6 @@ import { when } from "lit/directives/when.js";
import { capitalize, lowerCase } from "lodash-es";
import "../index.css";
-import "../themes/spectrum.css";
-/* Must be imported last */
-import "../themes/express.css";
export const Template = ({
rootClass = "spectrum-Swatch",
@@ -109,7 +106,12 @@ export const Template = ({
...(isMixedValue ? [Icon({
customClasses: [`${rootClass}-mixedValueIcon`],
setName: "ui",
- iconName: "Dash",
+ iconName: "Dash" + ({
+ xs: "75",
+ s: "75",
+ m: "100",
+ l: "200",
+ }[size] || "100"),
useRef: false,
}, context)] : []),
]
diff --git a/components/swatch/themes/express.css b/components/swatch/themes/express.css
deleted file mode 100644
index 9fd550418f2..00000000000
--- a/components/swatch/themes/express.css
+++ /dev/null
@@ -1,16 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
diff --git a/components/swatch/themes/spectrum-two.css b/components/swatch/themes/spectrum-two.css
deleted file mode 100644
index ee21266473f..00000000000
--- a/components/swatch/themes/spectrum-two.css
+++ /dev/null
@@ -1,21 +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.
- */
-
-@container style(--system: spectrum) {
- /* Swatch tokens */
- .spectrum-Swatch {
- --spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity));
- --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25);
- --spectrum-swatch-border-radius: var(--spectrum-corner-radius-75);
- }
-}
diff --git a/components/swatch/themes/spectrum.css b/components/swatch/themes/spectrum.css
deleted file mode 100644
index 3661de0250e..00000000000
--- a/components/swatch/themes/spectrum.css
+++ /dev/null
@@ -1,24 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-Swatch {
- --spectrum-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-swatch-border-color-opacity));
- --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50);
- --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100);
- }
-}
diff --git a/components/swatchgroup/dist/metadata.json b/components/swatchgroup/dist/metadata.json
index 74adf019d54..24e3423ca5d 100644
--- a/components/swatchgroup/dist/metadata.json
+++ b/components/swatchgroup/dist/metadata.json
@@ -16,7 +16,6 @@
"--spectrum-spacing-50",
"--spectrum-spacing-75"
],
- "system-theme": [],
"passthroughs": [],
"high-contrast": []
}
diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json
index 00a47cdd798..57a281d35df 100644
--- a/components/switch/dist/metadata.json
+++ b/components/switch/dist/metadata.json
@@ -2,86 +2,66 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-Switch",
+ ".spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch",
+ ".spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before",
".spectrum-Switch .spectrum-Switch-input:disabled ~ .spectrum-Switch-label",
".spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch",
".spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before",
- ".spectrum-Switch .spectrum-Switch-input:disabled:not(:checked) + .spectrum-Switch-switch",
- ".spectrum-Switch .spectrum-Switch-input:disabled:not(:checked) + .spectrum-Switch-switch:before",
- ".spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after",
- ".spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before",
- ".spectrum-Switch .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label",
- ".spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch",
- ".spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before",
- ".spectrum-Switch .spectrum-Switch-input:not(:checked) + .spectrum-Switch-switch",
+ ".spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch",
+ ".spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before",
".spectrum-Switch .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label",
".spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch",
".spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before",
- ".spectrum-Switch .spectrum-Switch-input[disabled]:not(:checked) + .spectrum-Switch-switch",
- ".spectrum-Switch .spectrum-Switch-input[disabled]:not(:checked) + .spectrum-Switch-switch:before",
- ".spectrum-Switch .spectrum-Switch-switch",
- ".spectrum-Switch .spectrum-Switch-switch:before",
".spectrum-Switch--disabled",
+ ".spectrum-Switch--emphasized",
".spectrum-Switch--sizeL",
- ".spectrum-Switch--sizeM",
".spectrum-Switch--sizeS",
".spectrum-Switch--sizeXL",
".spectrum-Switch-input",
".spectrum-Switch-input:checked + .spectrum-Switch-switch",
".spectrum-Switch-input:checked + .spectrum-Switch-switch:before",
- ".spectrum-Switch-input:checked + .spectrum-Switch-switch:dir(rtl):before",
+ ".spectrum-Switch-input:checked + .spectrum-Switch-switch:before:dir(rtl)",
+ ".spectrum-Switch-input:checked:focus-visible + .spectrum-Switch-switch",
".spectrum-Switch-input:disabled",
- ".spectrum-Switch-input:disabled + .spectrum-Switch-switch",
- ".spectrum-Switch-input:disabled + .spectrum-Switch-switch:before",
- ".spectrum-Switch-input:disabled ~ .spectrum-Switch-label",
- ".spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch",
- ".spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before",
+ ".spectrum-Switch-input:focus-visible + .spectrum-Switch-switch",
".spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after",
+ ".spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before",
+ ".spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label",
".spectrum-Switch-input[disabled]",
- ".spectrum-Switch-input[disabled] + .spectrum-Switch-switch",
- ".spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before",
- ".spectrum-Switch-input[disabled] ~ .spectrum-Switch-label",
- ".spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch",
- ".spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before",
".spectrum-Switch-label",
+ ".spectrum-Switch-label:lang(ja)",
+ ".spectrum-Switch-label:lang(ko)",
+ ".spectrum-Switch-label:lang(zh)",
".spectrum-Switch-switch",
".spectrum-Switch-switch:after",
".spectrum-Switch-switch:before",
- ".spectrum-Switch.spectrum-Switch--emphasized",
- ".spectrum-Switch:active .spectrum-Switch-input + .spectrum-Switch-switch:before",
- ".spectrum-Switch:active .spectrum-Switch-input ~ .spectrum-Switch-label",
- ".spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch",
- ".spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before",
- ".spectrum-Switch:hover .spectrum-Switch-input + .spectrum-Switch-switch:before",
- ".spectrum-Switch:hover .spectrum-Switch-input ~ .spectrum-Switch-label",
- ".spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch",
- ".spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before",
+ ".spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch",
+ ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled) + .spectrum-Switch-switch:before",
+ ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before",
+ ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl)",
+ ".spectrum-Switch:active .spectrum-Switch-switch",
+ ".spectrum-Switch:active .spectrum-Switch-switch:before",
+ ".spectrum-Switch:active ~ .spectrum-Switch-label",
+ ".spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch",
+ ".spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch:before",
".spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch",
".spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before",
".spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label",
".spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch",
".spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before",
- ".spectrum-Switch:hover .spectrum-Switch-input:disabled:checked ~ .spectrum-Switch-label",
- ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after",
- ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before",
- ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label",
- ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch",
- ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before",
- ".spectrum-Switch:hover .spectrum-Switch-input:not(:checked) + .spectrum-Switch-switch",
".spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch",
".spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before",
".spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label",
".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch",
".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before",
- ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label",
- "[dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before"
+ ".spectrum-Switch:hover .spectrum-Switch-switch",
+ ".spectrum-Switch:hover .spectrum-Switch-switch:before",
+ ".spectrum-Switch:hover ~ .spectrum-Switch-label",
+ "[dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before",
+ "[dir=\"rtl\"] .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before"
],
"modifiers": [
"--mod-animation-duration-100",
- "--mod-animation-duration-200",
- "--mod-border-width-200",
- "--mod-focus-indicator-gap",
- "--mod-focus-indicator-thickness",
- "--mod-line-height-100",
"--mod-switch-background-color",
"--mod-switch-background-color-disabled",
"--mod-switch-background-color-selected-default",
@@ -89,28 +69,42 @@
"--mod-switch-background-color-selected-down",
"--mod-switch-background-color-selected-focus",
"--mod-switch-background-color-selected-hover",
+ "--mod-switch-border-color-default",
+ "--mod-switch-border-color-disabled",
+ "--mod-switch-border-color-down",
+ "--mod-switch-border-color-focus",
+ "--mod-switch-border-color-hover",
+ "--mod-switch-border-color-selected-default",
+ "--mod-switch-border-color-selected-down",
+ "--mod-switch-border-color-selected-focus",
+ "--mod-switch-border-color-selected-hover",
+ "--mod-switch-border-radius",
+ "--mod-switch-border-width",
+ "--mod-switch-cjk-line-height",
"--mod-switch-control-height",
"--mod-switch-control-label-spacing",
"--mod-switch-control-width",
"--mod-switch-focus-indicator-color",
+ "--mod-switch-focus-indicator-gap",
"--mod-switch-focus-indicator-thickness",
"--mod-switch-font-size",
- "--mod-switch-handle-background-color",
- "--mod-switch-handle-border-color-default",
- "--mod-switch-handle-border-color-disabled",
- "--mod-switch-handle-border-color-down",
- "--mod-switch-handle-border-color-focus",
- "--mod-switch-handle-border-color-hover",
- "--mod-switch-handle-border-color-selected-default",
- "--mod-switch-handle-border-color-selected-down",
- "--mod-switch-handle-border-color-selected-focus",
- "--mod-switch-handle-border-color-selected-hover",
+ "--mod-switch-handle-background-color-default",
+ "--mod-switch-handle-background-color-disabled",
+ "--mod-switch-handle-background-color-down",
+ "--mod-switch-handle-background-color-focus",
+ "--mod-switch-handle-background-color-hover",
+ "--mod-switch-handle-background-color-selected",
+ "--mod-switch-handle-background-color-selected-disabled",
+ "--mod-switch-handle-selected-size",
+ "--mod-switch-handle-size",
"--mod-switch-height",
- "--mod-switch-label-color-default",
+ "--mod-switch-label-color",
"--mod-switch-label-color-disabled",
"--mod-switch-label-color-down",
"--mod-switch-label-color-focus",
"--mod-switch-label-color-hover",
+ "--mod-switch-line-height",
+ "--mod-switch-spacing-bottom-to-label",
"--mod-switch-spacing-top-to-control",
"--mod-switch-spacing-top-to-label"
],
@@ -122,6 +116,18 @@
"--spectrum-switch-background-color-selected-down",
"--spectrum-switch-background-color-selected-focus",
"--spectrum-switch-background-color-selected-hover",
+ "--spectrum-switch-border-color-default",
+ "--spectrum-switch-border-color-disabled",
+ "--spectrum-switch-border-color-down",
+ "--spectrum-switch-border-color-focus",
+ "--spectrum-switch-border-color-hover",
+ "--spectrum-switch-border-color-selected-default",
+ "--spectrum-switch-border-color-selected-down",
+ "--spectrum-switch-border-color-selected-focus",
+ "--spectrum-switch-border-color-selected-hover",
+ "--spectrum-switch-border-radius",
+ "--spectrum-switch-border-width",
+ "--spectrum-switch-cjk-line-height",
"--spectrum-switch-control-height",
"--spectrum-switch-control-height-extra-large",
"--spectrum-switch-control-height-large",
@@ -134,24 +140,34 @@
"--spectrum-switch-control-width-medium",
"--spectrum-switch-control-width-small",
"--spectrum-switch-focus-indicator-color",
+ "--spectrum-switch-focus-indicator-gap",
"--spectrum-switch-focus-indicator-thickness",
"--spectrum-switch-font-size",
- "--spectrum-switch-handle-background-color",
- "--spectrum-switch-handle-border-color-default",
- "--spectrum-switch-handle-border-color-disabled",
- "--spectrum-switch-handle-border-color-down",
- "--spectrum-switch-handle-border-color-focus",
- "--spectrum-switch-handle-border-color-hover",
- "--spectrum-switch-handle-border-color-selected-default",
- "--spectrum-switch-handle-border-color-selected-down",
- "--spectrum-switch-handle-border-color-selected-focus",
- "--spectrum-switch-handle-border-color-selected-hover",
+ "--spectrum-switch-handle-background-color-default",
+ "--spectrum-switch-handle-background-color-disabled",
+ "--spectrum-switch-handle-background-color-down",
+ "--spectrum-switch-handle-background-color-focus",
+ "--spectrum-switch-handle-background-color-hover",
+ "--spectrum-switch-handle-background-color-selected",
+ "--spectrum-switch-handle-background-color-selected-disabled",
+ "--spectrum-switch-handle-selected-size",
+ "--spectrum-switch-handle-selected-size-extra-large",
+ "--spectrum-switch-handle-selected-size-large",
+ "--spectrum-switch-handle-selected-size-medium",
+ "--spectrum-switch-handle-selected-size-small",
+ "--spectrum-switch-handle-size",
+ "--spectrum-switch-handle-size-extra-large",
+ "--spectrum-switch-handle-size-large",
+ "--spectrum-switch-handle-size-medium",
+ "--spectrum-switch-handle-size-small",
"--spectrum-switch-label-color-default",
"--spectrum-switch-label-color-disabled",
"--spectrum-switch-label-color-down",
"--spectrum-switch-label-color-focus",
"--spectrum-switch-label-color-hover",
+ "--spectrum-switch-line-height",
"--spectrum-switch-min-height",
+ "--spectrum-switch-spacing-bottom-to-label",
"--spectrum-switch-spacing-top-to-control",
"--spectrum-switch-spacing-top-to-label",
"--spectrum-switch-top-to-control-extra-large",
@@ -160,20 +176,29 @@
"--spectrum-switch-top-to-control-small"
],
"global": [
- "--spectrum-accent-color-1000",
- "--spectrum-accent-color-1100",
- "--spectrum-accent-color-900",
+ "--spectrum-accent-background-color-default",
+ "--spectrum-accent-background-color-down",
+ "--spectrum-accent-background-color-hover",
+ "--spectrum-accent-background-color-key-focus",
"--spectrum-animation-duration-100",
"--spectrum-animation-duration-200",
"--spectrum-border-width-200",
+ "--spectrum-cjk-line-height-100",
+ "--spectrum-component-bottom-to-text-100",
+ "--spectrum-component-bottom-to-text-200",
+ "--spectrum-component-bottom-to-text-300",
+ "--spectrum-component-bottom-to-text-75",
"--spectrum-component-height-100",
"--spectrum-component-height-200",
"--spectrum-component-height-300",
"--spectrum-component-height-75",
+ "--spectrum-component-size-difference-down",
+ "--spectrum-component-size-minimum-perspective-down",
"--spectrum-component-top-to-text-100",
"--spectrum-component-top-to-text-200",
"--spectrum-component-top-to-text-300",
"--spectrum-component-top-to-text-75",
+ "--spectrum-corner-radius-full",
"--spectrum-disabled-content-color",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
@@ -182,17 +207,12 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
- "--spectrum-gray-200",
- "--spectrum-gray-50",
- "--spectrum-gray-600",
- "--spectrum-gray-700",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
+ "--spectrum-gray-25",
"--spectrum-line-height-100",
- "--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-background-color-default",
+ "--spectrum-neutral-background-color-down",
+ "--spectrum-neutral-background-color-hover",
+ "--spectrum-neutral-background-color-key-focus",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
"--spectrum-neutral-content-color-hover",
@@ -202,38 +222,32 @@
"--spectrum-text-to-control-300",
"--spectrum-text-to-control-75"
],
- "system-theme": [
- "--system-switch-background-color",
- "--system-switch-background-color-disabled",
- "--system-switch-handle-background-color",
- "--system-switch-handle-border-color-default",
- "--system-switch-handle-border-color-down",
- "--system-switch-handle-border-color-focus",
- "--system-switch-handle-border-color-hover",
- "--system-switch-handle-border-color-selected-default",
- "--system-switch-handle-border-color-selected-down",
- "--system-switch-handle-border-color-selected-focus",
- "--system-switch-handle-border-color-selected-hover"
- ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-switch-background-color",
+ "--highcontrast-switch-background-color-disabled",
"--highcontrast-switch-background-color-selected-default",
"--highcontrast-switch-background-color-selected-disabled",
"--highcontrast-switch-background-color-selected-down",
"--highcontrast-switch-background-color-selected-focus",
"--highcontrast-switch-background-color-selected-hover",
+ "--highcontrast-switch-border-color-default",
+ "--highcontrast-switch-border-color-disabled",
+ "--highcontrast-switch-border-color-down",
+ "--highcontrast-switch-border-color-focus",
+ "--highcontrast-switch-border-color-hover",
+ "--highcontrast-switch-border-color-selected-default",
+ "--highcontrast-switch-border-color-selected-down",
+ "--highcontrast-switch-border-color-selected-focus",
+ "--highcontrast-switch-border-color-selected-hover",
"--highcontrast-switch-focus-indicator-color",
- "--highcontrast-switch-handle-background-color",
- "--highcontrast-switch-handle-border-color-default",
- "--highcontrast-switch-handle-border-color-disabled",
- "--highcontrast-switch-handle-border-color-down",
- "--highcontrast-switch-handle-border-color-focus",
- "--highcontrast-switch-handle-border-color-hover",
- "--highcontrast-switch-handle-border-color-selected-default",
- "--highcontrast-switch-handle-border-color-selected-down",
- "--highcontrast-switch-handle-border-color-selected-focus",
- "--highcontrast-switch-handle-border-color-selected-hover",
+ "--highcontrast-switch-handle-background-color-default",
+ "--highcontrast-switch-handle-background-color-disabled",
+ "--highcontrast-switch-handle-background-color-down",
+ "--highcontrast-switch-handle-background-color-focus",
+ "--highcontrast-switch-handle-background-color-hover",
+ "--highcontrast-switch-handle-background-color-selected",
+ "--highcontrast-switch-handle-background-color-selected-disabled",
"--highcontrast-switch-label-color-default",
"--highcontrast-switch-label-color-disabled",
"--highcontrast-switch-label-color-down",
diff --git a/components/switch/index.css b/components/switch/index.css
index 763ad359ab8..2e0a88fe4f1 100644
--- a/components/switch/index.css
+++ b/components/switch/index.css
@@ -11,8 +11,6 @@
* governing permissions and limitations under the License.
*/
-@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);
@@ -20,49 +18,74 @@
--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-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-border-width: var(--spectrum-border-width-200);
+
+ --spectrum-switch-border-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-switch-border-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-switch-border-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-switch-border-color-focus: var(--spectrum-neutral-content-color-key-focus);
+ --spectrum-switch-border-color-disabled: var(--spectrum-disabled-content-color);
+
+ --spectrum-switch-border-color-selected-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-switch-border-color-selected-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-switch-border-color-selected-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-switch-border-color-selected-focus: var(--spectrum-neutral-content-color-key-focus);
+
+ --spectrum-switch-background-color: var(--spectrum-gray-25);
+ --spectrum-switch-background-color-disabled: var(--spectrum-gray-25);
+
+ --spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-default);
+ --spectrum-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-hover);
+ --spectrum-switch-background-color-selected-down: var(--spectrum-neutral-background-color-down);
+ --spectrum-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-key-focus);
--spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color);
- --spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
+ --spectrum-switch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
--spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color);
- --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color);
-}
+ --spectrum-switch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-.spectrum-Switch--disabled {
- --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color);
-}
+ --spectrum-switch-handle-background-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-switch-handle-background-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-switch-handle-background-color-down: var(--spectrum-neutral-content-color-down);
+ --spectrum-switch-handle-background-color-focus: var(--spectrum-neutral-content-color-key-focus);
+ --spectrum-switch-handle-background-color-disabled: 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-handle-background-color-selected: var(--spectrum-gray-25);
+ --spectrum-switch-handle-background-color-selected-disabled: var(--spectrum-gray-25);
+
+ --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-medium);
+ --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-medium);
-.spectrum-Switch,
-.spectrum-Switch--sizeM {
+ /* Default size - medium */
--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-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
--spectrum-switch-font-size: var(--spectrum-font-size-100);
+ --spectrum-switch-line-height: var(--spectrum-line-height-100);
+ --spectrum-switch-cjk-line-height: var(--spectrum-cjk-line-height-100);
+
+ --spectrum-switch-border-radius: var(--spectrum-corner-radius-full);
+}
+
+.spectrum-Switch--disabled {
+ --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color);
+}
+
+.spectrum-Switch--emphasized {
+ --spectrum-switch-background-color-selected-default: var(--spectrum-accent-background-color-default);
+ --spectrum-switch-background-color-selected-hover: var(--spectrum-accent-background-color-hover);
+ --spectrum-switch-background-color-selected-down: var(--spectrum-accent-background-color-down);
+ --spectrum-switch-background-color-selected-focus: var(--spectrum-accent-background-color-key-focus);
+
+ --spectrum-switch-border-color-selected-default: var(--spectrum-accent-background-color-default);
+ --spectrum-switch-border-color-selected-hover: var(--spectrum-accent-background-color-hover);
+ --spectrum-switch-border-color-selected-down: var(--spectrum-accent-background-color-down);
+ --spectrum-switch-border-color-selected-focus: var(--spectrum-accent-background-color-key-focus);
}
.spectrum-Switch--sizeS {
@@ -72,6 +95,10 @@
--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-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75);
+
+ --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-small);
+ --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-small);
--spectrum-switch-font-size: var(--spectrum-font-size-75);
}
@@ -83,6 +110,10 @@
--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-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200);
+
+ --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-large);
+ --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-large);
--spectrum-switch-font-size: var(--spectrum-font-size-200);
}
@@ -94,6 +125,10 @@
--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-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300);
+
+ --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-extra-large);
+ --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-extra-large);
--spectrum-switch-font-size: var(--spectrum-font-size-300);
}
@@ -108,13 +143,8 @@
}
.spectrum-Switch-input {
- /* Remove the margin for input in Firefox and Safari. */
margin: 0;
-
- /* Add the correct box sizing for [type="checkbox"] in IE 10-. */
box-sizing: border-box;
-
- /* Remove the padding for [type="checkbox"] in IE 10-. */
padding: 0;
position: absolute;
@@ -127,36 +157,38 @@
cursor: pointer;
- &:checked + .spectrum-Switch-switch {
- &::before {
- transform: translateX(calc(var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%));
- }
-
- &:dir(rtl)::before {
- transform: translateX(calc(-1 * (var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%)));
- }
- }
-
&:disabled,
&[disabled] {
cursor: default;
}
-
- &:focus-visible + .spectrum-Switch-switch {
- &::after {
- margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1);
- }
- }
}
.spectrum-Switch-label {
- color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default)));
+ color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color, var(--spectrum-switch-label-color-default)));
margin-inline: var(--mod-switch-control-label-spacing, var(--spectrum-switch-control-label-spacing));
margin-block-start: var(--mod-switch-spacing-top-to-label, var(--spectrum-switch-spacing-top-to-label));
- margin-block-end: 0;
+ margin-block-end: var(--mod-switch-spacing-bottom-to-label, var(--spectrum-switch-spacing-bottom-to-label));
font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size));
- line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
- transition: color var(--mod-animation-duration-200, var(--spectrum-animation-duration-200)) ease-in-out;
+ line-height: var(--mod-switch-line-height, var(--spectrum-switch-line-height));
+ transition: color var(--spectrum-animation-duration-200) ease-in-out;
+
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ line-height: var(--mod-switch-cjk-line-height, var(--spectrum-switch-cjk-line-height));
+ }
+
+ .spectrum-Switch:hover ~ & {
+ color: var(--highcontrast-switch-label-color-hover, var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover)));
+ }
+
+ .spectrum-Switch:active ~ & {
+ color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down)));
+ }
+
+ .spectrum-Switch-input:focus-visible ~ & {
+ color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus)));
+ }
}
.spectrum-Switch-switch {
@@ -186,191 +218,148 @@
inset-inline-start: 0;
inset-inline-end: 0;
- border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2);
+ background-color: var(--highcontrast-switch-background-color, var(--mod-switch-background-color, var(--spectrum-switch-background-color)));
+ border-radius: var(--mod-switch-border-radius, var(--spectrum-switch-border-radius));
+ border-width: var(--mod-switch-border-width, var(--spectrum-switch-border-width));
+ border-color: var(--highcontrast-switch-border-color-default, var(--mod-switch-border-color-default, var(--spectrum-switch-border-color-default)));
+ border-style: solid;
- &::before {
- display: block;
- position: absolute;
- content: "";
- box-sizing: border-box;
+ .spectrum-Switch:hover & {
+ border-color: var(--highcontrast-switch-border-color-hover, var(--mod-switch-border-color-hover, var(--spectrum-switch-border-color-hover)));
}
- /* :before is used for the handle of the switch */
- &::before {
- transition:
- background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
- border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
- transform var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
- box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
+ .spectrum-Switch:active & {
+ border-color: var(--highcontrast-switch-border-color-down, var(--mod-switch-border-color-down, var(--spectrum-switch-border-color-down)));
+ }
- inline-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height));
- block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height));
+ .spectrum-Switch-input:focus-visible + & {
+ border-color: var(--highcontrast-switch-border-color-focus, var(--mod-switch-border-color-focus, var(--spectrum-switch-border-color-focus)));
+ }
- inset-block-start: 0;
- inset-inline-start: 0;
+ .spectrum-Switch-input:checked + & {
+ background-color: var(--highcontrast-switch-background-color-selected-default, var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default)));
+ border-color: var(--highcontrast-switch-border-color-selected-default, var(--mod-switch-border-color-selected-default, var(--spectrum-switch-border-color-selected-default)));
+
+ .spectrum-Switch:hover & {
+ background-color: var(--highcontrast-switch-background-color-selected-hover, var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover)));
+ border-color: var(--highcontrast-switch-border-color-selected-hover, var(--mod-switch-border-color-selected-hover, var(--spectrum-switch-border-color-selected-hover)));
+ }
- border-width: var(--mod-border-width-200, var(--spectrum-border-width-200));
- border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2);
- border-style: solid;
+ .spectrum-Switch:active & {
+ background-color: var(--highcontrast-switch-background-color-selected-down, var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down)));
+ border-color: var(--highcontrast-switch-border-color-selected-down, var(--mod-switch-border-color-selected-down, var(--spectrum-switch-border-color-selected-down)));
+ }
}
- /* :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: "";
+ .spectrum-Switch-input:checked:focus-visible + & {
+ background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus)));
+ border-color: var(--highcontrast-switch-border-color-selected-focus, var(--mod-switch-border-color-selected-focus, var(--spectrum-switch-border-color-selected-focus)));
+ }
+
+ /* :before is used for the handle of the switch */
+ &::before {
display: block;
position: absolute;
- inset-inline-start: 0;
- inset-inline-end: 0;
- inset-block-end: 0;
- inset-block-start: 0;
- margin: 0;
+ content: "";
+ box-sizing: border-box;
- transition:
- opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
- margin var(--spectrum-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
- }
-}
+ transition: background var(--spectrum-animation-duration-100) ease-in-out,
+ border var(--spectrum-animation-duration-100) ease-in-out,
+ transform var(--spectrum-animation-duration-100) ease-in-out,
+ box-shadow var(--spectrum-animation-duration-100) ease-in-out;
-.spectrum-Switch {
- .spectrum-Switch-switch {
- background-color: var(--highcontrast-switch-background-color, var(--mod-switch-background-color, var(--spectrum-switch-background-color)));
+ inline-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size));
+ block-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size));
- &::before {
- background-color: var(--highcontrast-switch-handle-background-color, var(--mod-switch-handle-background-color, var(--spectrum-switch-handle-background-color)));
- border-color: var(--highcontrast-switch-handle-border-color-default, var(--mod-switch-handle-border-color-default, var(--spectrum-switch-handle-border-color-default)));
- }
- }
-}
+ inset-block-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-handle-size, var(--spectrum-switch-handle-size))) * 0.25);
+ inset-inline-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-handle-size, var(--spectrum-switch-handle-size))) * 0.25);
-.spectrum-Switch:hover {
- .spectrum-Switch-input {
- & + .spectrum-Switch-switch {
- &::before {
- border-color: var(--highcontrast-switch-handle-border-color-hover, var(--mod-switch-handle-border-color-hover, var(--spectrum-switch-handle-border-color-hover)));
- box-shadow: none;
- }
- }
+ background-color: var(--highcontrast-switch-handle-background-color-default, var(--mod-switch-handle-background-color-default, var(--spectrum-switch-handle-background-color-default)));
+ border-radius: var(--mod-switch-border-radius, var(--spectrum-switch-border-radius));
- & ~ .spectrum-Switch-label {
- color: var(--highcontrast-switch-label-color-hover, var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover)));
+ .spectrum-Switch:hover & {
+ background-color: var(--highcontrast-switch-handle-background-color-hover, var(--mod-switch-handle-background-color-hover, var(--spectrum-switch-handle-background-color-hover)));
}
- /* selected, not emphasized */
- &:checked:enabled + .spectrum-Switch-switch {
- background-color: var(--highcontrast-switch-background-color-selected-hover, var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover)));
+ .spectrum-Switch:active & {
+ background-color: var(--highcontrast-switch-handle-background-color-down, var(--mod-switch-handle-background-color-down, var(--spectrum-switch-handle-background-color-down)));
+ }
- &::before {
- border-color: var(--highcontrast-switch-handle-border-color-selected-hover, var(--mod-switch-handle-border-color-selected-hover, var(--spectrum-switch-handle-border-color-selected-hover)));
- }
+ .spectrum-Switch-input:focus-visible + & {
+ background-color: var(--highcontrast-switch-handle-background-color-focus, var(--mod-switch-handle-background-color-focus, var(--spectrum-switch-handle-background-color-focus)));
}
- &:disabled,
- &[disabled] {
- & + .spectrum-Switch-switch {
- background-color: var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled));
- }
+ /* Handle size changes when selected/checked */
+ .spectrum-Switch-input:checked + & {
+ background-color: var(--highcontrast-switch-handle-background-color-selected, var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected)));
- & + .spectrum-Switch-switch::before {
- border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled)));
- }
+ inline-size: var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size));
+ block-size: var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size));
- & ~ .spectrum-Switch-label {
- color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled)));
- }
+ inset-block-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-border-width, var(--spectrum-switch-border-width)) - var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size))) * 0.25);
+ inset-inline-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-border-width, var(--spectrum-switch-border-width)) - var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size))) * 0.25);
- /* disabled + selected, not emphasized */
- &:checked + .spectrum-Switch-switch {
- background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled)));
- }
+ transform: translateX(calc(100% + (var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25)));
- &:checked + .spectrum-Switch-switch::before {
- border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled)));
+ &:dir(rtl) {
+ transform: translateX(calc(-1 * (100% + (var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25))));
}
- &:checked ~ .spectrum-Switch-label {
- color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled)));
+ .spectrum-Switch:hover & {
+ background-color: var(--highcontrast-switch-handle-background-color-selected, var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected)));
}
}
- }
-}
-.spectrum-Switch:active {
- .spectrum-Switch-input {
- & + .spectrum-Switch-switch {
- &::before {
- border-color: var(--highcontrast-switch-handle-border-color-down, var(--mod-switch-handle-border-color-down, var(--spectrum-switch-handle-border-color-down)));
- }
+ .spectrum-Switch:active .spectrum-Switch-input:not(:disabled) + & {
+ transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
}
- & ~ .spectrum-Switch-label {
- color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down)));
- }
-
- /* selected, not emphasized */
- &:checked:enabled + .spectrum-Switch-switch {
- background-color: var(--highcontrast-switch-background-color-selected-down, var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down)));
+ .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + & {
+ /* Add down state without overriding translateX */
+ transform: translateX(calc(100% + (var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25))) perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
- &::before {
- border-color: var(--highcontrast-switch-handle-border-color-selected-down, var(--mod-switch-handle-border-color-selected-down, var(--spectrum-switch-handle-border-color-selected-down)));
+ &:dir(rtl) {
+ /* Add down state without overriding translateX */
+ transform: translateX(calc(-1 * (100% + (var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25)))) perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
}
}
}
-}
-/* key focus */
-/* :after is the focus ring */
-/* :before is used for the handle of the switch */
-.spectrum-Switch,
-.spectrum-Switch:hover {
- .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)));
- }
-
- &::before {
- border-color: var(--highcontrast-switch-handle-border-color-focus, var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus)));
- }
- }
-
- /* selected, not emphasized key focus */
- &:checked {
- & + .spectrum-Switch-switch {
- background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus)));
- }
-
- & + .spectrum-Switch-switch::before {
- border-color: var(--highcontrast-switch-handle-border-color-selected-focus, var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus)));
- }
- }
-
- & ~ .spectrum-Switch-label {
- color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus)));
- }
- }
-}
+ /* :after is used for the track of the switch and the focus */
+ &::after {
+ border-radius: var(--mod-switch-border-radius, var(--spectrum-switch-border-radius));
+ content: "";
+ display: block;
+ position: absolute;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ inset-block-end: 0;
+ inset-block-start: 0;
+ margin: 0;
-/* when checked, after transition or set manually */
-.spectrum-Switch-input {
- /* selected, not emphasized */
- &:checked + .spectrum-Switch-switch {
- background-color: var(--highcontrast-switch-background-color-selected-default, var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default)));
+ transition:
+ opacity var(--spectrum-animation-duration-100) ease-out,
+ outline-offset var(--spectrum-animation-duration-100) ease-out,
+ border var(--spectrum-animation-duration-100) ease-in-out;
- &::before {
- border-color: var(--highcontrast-switch-handle-border-color-selected-default, var(--mod-switch-handle-border-color-selected-default, var(--spectrum-switch-handle-border-color-selected-default)));
+ .spectrum-Switch-input:focus-visible + & {
+ outline: var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) solid var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color)));
+ outline-offset: calc(var(--mod-switch-focus-indicator-gap, var(--spectrum-switch-focus-indicator-gap)) + var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)));
}
}
}
/* disabled */
-.spectrum-Switch-input:disabled,
-.spectrum-Switch-input[disabled] {
+.spectrum-Switch .spectrum-Switch-input:disabled,
+.spectrum-Switch .spectrum-Switch-input[disabled],
+.spectrum-Switch:hover .spectrum-Switch-input:disabled,
+.spectrum-Switch:hover .spectrum-Switch-input[disabled] {
& + .spectrum-Switch-switch {
- background-color: var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled));
+ background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled)));
+ border-color: var(--highcontrast-switch-border-color-disabled, var(--mod-switch-border-color-disabled, var(--spectrum-switch-border-color-disabled)));
&::before {
- border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled)));
+ background-color: var(--highcontrast-switch-handle-background-color-disabled, var(--mod-switch-handle-background-color-disabled, var(--spectrum-switch-handle-background-color-disabled)));
}
}
@@ -378,12 +367,11 @@
color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled)));
}
- /* disabled + selected, not emphasized */
&:checked + .spectrum-Switch-switch {
background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled)));
&::before {
- border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled)));
+ background-color: var(--highcontrast-switch-handle-background-color-selected-disabled, var(--mod-switch-handle-background-color-selected-disabled, var(--spectrum-switch-handle-background-color-selected-disabled)));
}
}
@@ -401,83 +389,36 @@
--highcontrast-switch-label-color-focus: ButtonText;
--highcontrast-switch-label-color-disabled: GrayText;
- --highcontrast-switch-handle-background-color: ButtonFace;
+ --highcontrast-switch-background-color: transparent;
+
+ --highcontrast-switch-border-color-default: ButtonText;
+ --highcontrast-switch-border-color-hover: Highlight;
+ --highcontrast-switch-border-color-down: ButtonText;
+ --highcontrast-switch-border-color-focus: ButtonText;
+ --highcontrast-switch-border-color-disabled: GrayText;
+
+ --highcontrast-switch-border-color-selected-default: Highlight;
+ --highcontrast-switch-border-color-selected-hover: Highlight;
+ --highcontrast-switch-border-color-selected-down: Highlight;
+ --highcontrast-switch-border-color-selected-focus: Highlight;
+
+ --highcontrast-switch-handle-background-color-default: ButtonText;
+ --highcontrast-switch-handle-background-color-hover: Highlight;
+ --highcontrast-switch-handle-background-color-down: ButtonText;
+ --highcontrast-switch-handle-background-color-focus: ButtonText;
+ --highcontrast-switch-handle-background-color-disabled: GrayText;
- --highcontrast-switch-handle-border-color-default: ButtonText;
- --highcontrast-switch-handle-border-color-hover: Highlight;
- --highcontrast-switch-handle-border-color-down: Highlight;
- --highcontrast-switch-handle-border-color-focus: Highlight;
- --highcontrast-switch-handle-border-color-disabled: Highlight;
+ --highcontrast-switch-handle-background-color-selected: HighlightText;
+ --highcontrast-switch-handle-background-color-selected-disabled: ButtonFace;
- --highcontrast-switch-handle-border-color-selected-default: Highlight;
- --highcontrast-switch-handle-border-color-selected-hover: Highlight;
- --highcontrast-switch-handle-border-color-selected-down: Highlight;
- --highcontrast-switch-handle-border-color-selected-focus: Highlight;
+ --highcontrast-switch-background-color-disabled: ButtonFace;
- --highcontrast-switch-background-color: ButtonFace;
--highcontrast-switch-background-color-selected-default: Highlight;
--highcontrast-switch-background-color-selected-hover: Highlight;
--highcontrast-switch-background-color-selected-down: Highlight;
--highcontrast-switch-background-color-selected-focus: Highlight;
- --highcontrast-switch-background-color-selected-disabled: Highlight;
+ --highcontrast-switch-background-color-selected-disabled: GrayText;
--highcontrast-switch-focus-indicator-color: ButtonText;
-
- forced-color-adjust: none;
-
- .spectrum-Switch-input {
- &:not(:checked) + .spectrum-Switch-switch {
- box-shadow: inset 0 0 0 1px ButtonText;
- }
- }
-
- &:hover .spectrum-Switch-input {
- &:not(:checked) + .spectrum-Switch-switch {
- box-shadow: inset 0 0 0 1px Highlight;
- }
-
- &:disabled,
- &[disabled] {
- &:checked + .spectrum-Switch-switch {
- box-shadow: inset 0 0 0 1px GrayText;
- background-color: GrayText;
- }
-
- &:checked + .spectrum-Switch-switch::before {
- border-color: GrayText;
- background-color: ButtonFace;
- }
- }
- }
-
- /* over-writes for disabled button */
- .spectrum-Switch-input {
- &:disabled,
- &[disabled] {
- &:not(:checked) + .spectrum-Switch-switch {
- box-shadow: inset 0 0 0 1px GrayText;
- background-color: ButtonFace;
- }
-
- &:not(:checked) + .spectrum-Switch-switch::before {
- border-color: GrayText;
- background-color: ButtonFace;
- }
-
- &:checked + .spectrum-Switch-switch {
- box-shadow: inset 0 0 0 1px GrayText;
- background-color: GrayText;
- }
-
- &:checked + .spectrum-Switch-switch::before {
- border-color: GrayText;
- background-color: ButtonFace;
- }
-
- & ~ .spectrum-Switch-label {
- color: GrayText;
- }
- }
- }
}
}
diff --git a/components/switch/package.json b/components/switch/package.json
index 9194bda53b3..cce19a21972 100644
--- a/components/switch/package.json
+++ b/components/switch/package.json
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/tokens": ">=16.0.1"
+ "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
"@spectrum-css/tokens": {
diff --git a/components/switch/stories/switch.stories.js b/components/switch/stories/switch.stories.js
index 5286b307882..cc38ca06286 100644
--- a/components/switch/stories/switch.stories.js
+++ b/components/switch/stories/switch.stories.js
@@ -46,6 +46,7 @@ export default {
packageJson,
metadata,
},
+ tags: ["migrated"],
};
export const Default = SwitchGroup.bind({});
diff --git a/components/switch/stories/template.js b/components/switch/stories/template.js
index 5e67a3cc8b3..4f0877d5c86 100644
--- a/components/switch/stories/template.js
+++ b/components/switch/stories/template.js
@@ -6,9 +6,6 @@ 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
deleted file mode 100644
index ac5198ba733..00000000000
--- a/components/switch/themes/express.css
+++ /dev/null
@@ -1,30 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
-
-@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);
- --spectrum-switch-handle-border-color-down: var(--spectrum-gray-900);
- --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-900);
-
- --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-800);
- --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-900);
- --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900);
- --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-900);
- }
-}
diff --git a/components/switch/themes/spectrum-two.css b/components/switch/themes/spectrum-two.css
deleted file mode 100644
index c2ed1a192a4..00000000000
--- a/components/switch/themes/spectrum-two.css
+++ /dev/null
@@ -1,30 +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.
- */
-
-@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-background-color: var(--spectrum-gray-200);
- --spectrum-switch-background-color-disabled: var(--spectrum-gray-200);
- --spectrum-switch-handle-background-color: var(--spectrum-gray-50);
- }
-}
diff --git a/components/switch/themes/spectrum.css b/components/switch/themes/spectrum.css
deleted file mode 100644
index 8b32e03d8f3..00000000000
--- a/components/switch/themes/spectrum.css
+++ /dev/null
@@ -1,24 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-Switch {
- --spectrum-switch-background-color: var(--spectrum-gray-300);
- --spectrum-switch-background-color-disabled: var(--spectrum-gray-300);
- --spectrum-switch-handle-background-color: var(--spectrum-gray-75);
- }
-}
diff --git a/components/table/CHANGELOG.md b/components/table/CHANGELOG.md
index 89ee038a1f7..0115d4b302c 100644
--- a/components/table/CHANGELOG.md
+++ b/components/table/CHANGELOG.md
@@ -1,5 +1,14 @@
# Change log
+## 9.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+ - @spectrum-css/button@15.0.0-next.0
+ - @spectrum-css/checkbox@11.0.0-next.0
+
## 8.1.0
### Minor Changes
diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json
index e319678fb13..26a601ce86e 100644
--- a/components/table/dist/metadata.json
+++ b/components/table/dist/metadata.json
@@ -435,18 +435,6 @@
"--spectrum-transparent-white-100",
"--spectrum-transparent-white-25"
],
- "system-theme": [
- "--system-table-border-color",
- "--system-table-divider-color",
- "--system-table-header-background-color",
- "--system-table-icon-color-focus",
- "--system-table-icon-color-focus-hover",
- "--system-table-quiet-header-background-color",
- "--system-table-quiet-row-background-color",
- "--system-table-row-background-color",
- "--system-table-section-header-background-color",
- "--system-table-summary-row-background-color"
- ],
"passthroughs": ["--mod-checkbox-spacing", "--mod-thumbnail-size"],
"high-contrast": [
"--highcontrast-table-border-color",
diff --git a/components/table/index.css b/components/table/index.css
index 830e1528ff4..7ffbacf046a 100644
--- a/components/table/index.css
+++ b/components/table/index.css
@@ -11,7 +11,21 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
+.spectrum-Table {
+ --spectrum-table-header-background-color: var(--spectrum-transparent-white-25);
+ --spectrum-table-border-color: var(--spectrum-gray-200);
+ --spectrum-table-divider-color: var(--spectrum-gray-200);
+ --spectrum-table-row-background-color: var(--spectrum-gray-25);
+ --spectrum-table-summary-row-background-color: var(--spectrum-gray-100);
+ --spectrum-table-section-header-background-color: var(--spectrum-gray-100);
+ --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+ --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover);
+}
+
+.spectrum-Table--quiet {
+ --spectrum-table-header-background-color: var(--spectrum-transparent-white-25);
+ --spectrum-table-row-background-color: var(--spectrum-transparent-white-25);
+}
/********* HIGH CONTRAST *********/
@media (forced-colors: active) {
diff --git a/components/table/package.json b/components/table/package.json
index b1408beb437..699049b5771 100644
--- a/components/table/package.json
+++ b/components/table/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/table",
- "version": "8.1.0",
+ "version": "9.0.0-next.0",
"description": "The Spectrum CSS table component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,9 +25,9 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/button": ">=14.0.0 <15.0.0",
- "@spectrum-css/checkbox": ">=10.0.0 <11.0.0",
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
+ "@spectrum-css/button": ">=15.0.0-next.0",
+ "@spectrum-css/checkbox": ">=11.0.0-next.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
"@spectrum-css/thumbnail": ">=8.0.0 <9.0.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
@@ -49,9 +49,9 @@
}
},
"devDependencies": {
- "@spectrum-css/button": "14.1.3",
- "@spectrum-css/checkbox": "10.1.2",
- "@spectrum-css/icon": "9.1.0",
+ "@spectrum-css/button": "15.0.0-next.0",
+ "@spectrum-css/checkbox": "11.0.0-next.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
"@spectrum-css/thumbnail": "8.1.0",
"@spectrum-css/tokens": "16.0.1"
},
diff --git a/components/table/stories/template.js b/components/table/stories/template.js
index 662a6e3206b..8487cca716d 100644
--- a/components/table/stories/template.js
+++ b/components/table/stories/template.js
@@ -9,9 +9,6 @@ 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
deleted file mode 100644
index 9fd550418f2..00000000000
--- a/components/table/themes/express.css
+++ /dev/null
@@ -1,16 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
diff --git a/components/table/themes/spectrum-two.css b/components/table/themes/spectrum-two.css
deleted file mode 100644
index 1c0a4684070..00000000000
--- a/components/table/themes/spectrum-two.css
+++ /dev/null
@@ -1,30 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-Table {
- --spectrum-table-header-background-color: var(--spectrum-transparent-white-25);
- --spectrum-table-border-color: var(--spectrum-gray-200);
- --spectrum-table-divider-color: var(--spectrum-gray-200);
- --spectrum-table-row-background-color: var(--spectrum-gray-25);
- --spectrum-table-summary-row-background-color: var(--spectrum-gray-100);
- --spectrum-table-section-header-background-color: var(--spectrum-gray-100);
- --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
- --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover);
- }
-
- .spectrum-Table--quiet {
- --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
deleted file mode 100644
index a40d7fabde2..00000000000
--- a/components/table/themes/spectrum.css
+++ /dev/null
@@ -1,34 +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.
- */
-
-/* @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-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-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
- --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-down);
- }
-
- .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 b455ff61976..32416dcc9fc 100644
--- a/components/tabs/CHANGELOG.md
+++ b/components/tabs/CHANGELOG.md
@@ -1,5 +1,14 @@
# Change log
+## 7.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+ - @spectrum-css/menu@10.0.0-next.0
+ - @spectrum-css/picker@10.0.0-next.0
+
## 7.0.0
### Patch Changes
diff --git a/components/tabs/dist/metadata.json b/components/tabs/dist/metadata.json
index 544295ef045..37e3c7b1a37 100644
--- a/components/tabs/dist/metadata.json
+++ b/components/tabs/dist/metadata.json
@@ -206,10 +206,6 @@
"--spectrum-workflow-icon-size-50",
"--spectrum-workflow-icon-size-75"
],
- "system-theme": [
- "--system-tabs-divider-background-color",
- "--system-tabs-font-weight"
- ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-tabs-color",
diff --git a/components/tabs/index.css b/components/tabs/index.css
index 6727243f384..c2a430f3d7c 100644
--- a/components/tabs/index.css
+++ b/components/tabs/index.css
@@ -11,9 +11,10 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
.spectrum-Tabs {
+ --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight);
+ --spectrum-tabs-divider-background-color: var(--spectrum-gray-200);
+
/* 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);
diff --git a/components/tabs/package.json b/components/tabs/package.json
index 59981c78bc7..f9b2025cbdd 100644
--- a/components/tabs/package.json
+++ b/components/tabs/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/tabs",
- "version": "6.1.1",
+ "version": "7.0.0-next.0",
"description": "The Spectrum CSS tabs component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,9 +25,9 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
- "@spectrum-css/menu": ">=9.0.0 <10.0.0",
- "@spectrum-css/picker": ">=9.0.0 <10.0.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
+ "@spectrum-css/menu": ">=10.0.0-next.0",
+ "@spectrum-css/picker": ">=10.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -45,9 +45,9 @@
}
},
"devDependencies": {
- "@spectrum-css/icon": "9.1.0",
- "@spectrum-css/menu": "9.2.0",
- "@spectrum-css/picker": "9.1.4",
+ "@spectrum-css/icon": "10.0.0-next.0",
+ "@spectrum-css/menu": "10.0.0-next.1",
+ "@spectrum-css/picker": "10.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/tabs/stories/template.js b/components/tabs/stories/template.js
index 716f45ea2e5..387683f1ae9 100644
--- a/components/tabs/stories/template.js
+++ b/components/tabs/stories/template.js
@@ -10,9 +10,6 @@ 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
deleted file mode 100644
index 83b105f4ac8..00000000000
--- a/components/tabs/themes/express.css
+++ /dev/null
@@ -1,22 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
-
-@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
deleted file mode 100644
index 71d71c3c719..00000000000
--- a/components/tabs/themes/spectrum-two.css
+++ /dev/null
@@ -1,19 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-Tabs {
- --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-tabs-divider-background-color: var(--spectrum-gray-200);
- }
-}
diff --git a/components/tabs/themes/spectrum.css b/components/tabs/themes/spectrum.css
deleted file mode 100644
index 97cb90cac5b..00000000000
--- a/components/tabs/themes/spectrum.css
+++ /dev/null
@@ -1,23 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-Tabs {
- --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-tabs-divider-background-color: var(--spectrum-gray-300);
- }
-}
diff --git a/components/tag/CHANGELOG.md b/components/tag/CHANGELOG.md
index 110b17857a1..d9aef275452 100644
--- a/components/tag/CHANGELOG.md
+++ b/components/tag/CHANGELOG.md
@@ -1,5 +1,13 @@
# Change log
+## 11.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+ - @spectrum-css/clearbutton@8.0.0-next.0
+
## 10.1.0
### Minor Changes
diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json
index 10a87e4aa2c..58ce63ea185 100644
--- a/components/tag/dist/metadata.json
+++ b/components/tag/dist/metadata.json
@@ -217,12 +217,6 @@
"--spectrum-border-width-100",
"--spectrum-clearbutton-fill-background-color",
"--spectrum-clearbutton-fill-size",
- "--spectrum-component-edge-to-text-100",
- "--spectrum-component-edge-to-text-200",
- "--spectrum-component-edge-to-text-75",
- "--spectrum-component-edge-to-visual-100",
- "--spectrum-component-edge-to-visual-200",
- "--spectrum-component-edge-to-visual-75",
"--spectrum-component-height-100",
"--spectrum-component-height-200",
"--spectrum-component-height-75",
@@ -233,7 +227,6 @@
"--spectrum-component-top-to-workflow-icon-200",
"--spectrum-component-top-to-workflow-icon-75",
"--spectrum-corner-radius-100",
- "--spectrum-disabled-background-color",
"--spectrum-disabled-content-color",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
@@ -263,10 +256,6 @@
"--spectrum-neutral-background-color-selected-down",
"--spectrum-neutral-background-color-selected-hover",
"--spectrum-neutral-background-color-selected-key-focus",
- "--spectrum-neutral-subdued-background-color-default",
- "--spectrum-neutral-subdued-background-color-down",
- "--spectrum-neutral-subdued-background-color-hover",
- "--spectrum-neutral-subdued-background-color-key-focus",
"--spectrum-neutral-subdued-content-color-default",
"--spectrum-neutral-subdued-content-color-down",
"--spectrum-neutral-subdued-content-color-hover",
@@ -280,39 +269,6 @@
"--spectrum-workflow-icon-size-200",
"--spectrum-workflow-icon-size-75"
],
- "system-theme": [
- "--system-tag-background-color",
- "--system-tag-background-color-active",
- "--system-tag-background-color-disabled",
- "--system-tag-background-color-focus",
- "--system-tag-background-color-hover",
- "--system-tag-border-color",
- "--system-tag-border-color-active",
- "--system-tag-border-color-disabled",
- "--system-tag-border-color-focus",
- "--system-tag-border-color-hover",
- "--system-tag-border-color-selected",
- "--system-tag-border-color-selected-active",
- "--system-tag-border-color-selected-focus",
- "--system-tag-border-color-selected-hover",
- "--system-tag-content-color",
- "--system-tag-content-color-active",
- "--system-tag-content-color-focus",
- "--system-tag-content-color-hover",
- "--system-tag-content-color-selected",
- "--system-tag-size-large-clear-button-spacing-inline-end",
- "--system-tag-size-large-corner-radius",
- "--system-tag-size-large-label-spacing-inline-end",
- "--system-tag-size-large-spacing-inline-start",
- "--system-tag-size-medium-clear-button-spacing-inline-end",
- "--system-tag-size-medium-corner-radius",
- "--system-tag-size-medium-label-spacing-inline-end",
- "--system-tag-size-medium-spacing-inline-start",
- "--system-tag-size-small-clear-button-spacing-inline-end",
- "--system-tag-size-small-corner-radius",
- "--system-tag-size-small-label-spacing-inline-end",
- "--system-tag-size-small-spacing-inline-start"
- ],
"passthroughs": [
"--mod-avatar-opacity-disabled",
"--mod-clear-button-width",
diff --git a/components/tag/index.css b/components/tag/index.css
index 9385b432e60..285a9cabeea 100644
--- a/components/tag/index.css
+++ b/components/tag/index.css
@@ -11,8 +11,6 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
.spectrum-Tag {
/* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */
--spectrum-avatar-opacity-disabled: 0.3;
@@ -20,6 +18,30 @@
--spectrum-tag-animation-duration: var(--spectrum-animation-duration-100);
--spectrum-tag-border-width: var(--spectrum-border-width-100);
+ /* background color */
+ --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);
+
+ /* 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);
+
+ /* border color */
+ --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);
+
+ /* 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);
+ --spectrum-tag-content-color-selected: var(--spectrum-gray-25);
+
/* focus ring */
--spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
--spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap);
@@ -199,10 +221,11 @@
/* clear button */
.spectrum-Tag-clearButton {
- /* width of fill neutralized to ensure correct inline spacing within tag */
+ /* @passthrough start -- 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;
+ /* @passthrough end */
box-sizing: border-box;
diff --git a/components/tag/package.json b/components/tag/package.json
index 838b243cbec..1fbf1c5afdb 100644
--- a/components/tag/package.json
+++ b/components/tag/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/tag",
- "version": "10.1.0",
+ "version": "11.0.0-next.0",
"description": "The Spectrum CSS tags component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -26,8 +26,8 @@
"main": "dist/index.css",
"peerDependencies": {
"@spectrum-css/avatar": ">=9.0.0 <10.0.0",
- "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0",
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
+ "@spectrum-css/clearbutton": ">=8.0.0-next.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -46,8 +46,8 @@
},
"devDependencies": {
"@spectrum-css/avatar": "9.1.0",
- "@spectrum-css/clearbutton": "7.2.0",
- "@spectrum-css/icon": "9.1.0",
+ "@spectrum-css/clearbutton": "8.0.0-next.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js
index 90c72435bae..ee4b244dd43 100644
--- a/components/tag/stories/template.js
+++ b/components/tag/stories/template.js
@@ -9,9 +9,6 @@ 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-Tag",
diff --git a/components/tag/themes/express.css b/components/tag/themes/express.css
deleted file mode 100644
index 7c2c2e67303..00000000000
--- a/components/tag/themes/express.css
+++ /dev/null
@@ -1,64 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
-
-@container style(--system: express) {
- .spectrum-Tag {
- /* border */
- --spectrum-tag-background-color: transparent;
- --spectrum-tag-background-color-hover: var(--spectrum-gray-300);
- --spectrum-tag-background-color-active: var(--spectrum-gray-400);
- --spectrum-tag-background-color-focus: var(--spectrum-gray-300);
-
- /* express has pill style full corner radius */
- --spectrum-tag-size-small-corner-radius: var(--spectrum-component-height-75);
- --spectrum-tag-size-medium-corner-radius: var(--spectrum-component-height-100);
- --spectrum-tag-size-large-corner-radius: var(--spectrum-component-height-200);
-
- /* background */
- --spectrum-tag-border-color: var(--spectrum-gray-300);
- --spectrum-tag-border-color-hover: var(--spectrum-gray-400);
- --spectrum-tag-border-color-active: var(--spectrum-gray-500);
- --spectrum-tag-border-color-focus: var(--spectrum-gray-400);
-
- /* content color */
- --spectrum-tag-content-color: var(--spectrum-neutral-content-color-default);
- --spectrum-tag-content-color-hover: var(--spectrum-neutral-content-color-hover);
- --spectrum-tag-content-color-active: var(--spectrum-neutral-content-color-down);
- --spectrum-tag-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
- /* selected */
- --spectrum-tag-border-color-selected: var(--spectrum-neutral-background-color-default);
- --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-background-color-hover);
- --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-background-color-down);
- --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-background-color-key-focus);
-
- /* disabled */
- --spectrum-tag-border-color-disabled: var(--spectrum-disabled-border-color);
- --spectrum-tag-background-color-disabled: transparent;
-
- /* tokens based on theme and t-shirt size */
- --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-75);
- --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-75);
- --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-75);
- --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-100);
- --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-100);
- --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-100);
- --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-200);
- --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-200);
- --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-200);
- }
-}
diff --git a/components/tag/themes/spectrum-two.css b/components/tag/themes/spectrum-two.css
deleted file mode 100644
index f9c51730f48..00000000000
--- a/components/tag/themes/spectrum-two.css
+++ /dev/null
@@ -1,56 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-Tag {
- --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);
-
- --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);
-
- --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);
-
- --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);
- --spectrum-tag-content-color-selected: var(--spectrum-gray-25);
-
- --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);
- }
-}
diff --git a/components/tag/themes/spectrum.css b/components/tag/themes/spectrum.css
deleted file mode 100644
index 171968e1f50..00000000000
--- a/components/tag/themes/spectrum.css
+++ /dev/null
@@ -1,27 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@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);
-
- --spectrum-tag-content-color-selected: var(--spectrum-gray-50);
- }
-}
diff --git a/components/taggroup/CHANGELOG.md b/components/taggroup/CHANGELOG.md
index 42011c018da..1682f528285 100644
--- a/components/taggroup/CHANGELOG.md
+++ b/components/taggroup/CHANGELOG.md
@@ -1,5 +1,12 @@
# Change log
+## 8.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies []:
+ - @spectrum-css/tag@11.0.0-next.0
+
## 7.1.0
### Minor Changes
diff --git a/components/taggroup/dist/metadata.json b/components/taggroup/dist/metadata.json
index 10ed81256ff..b9eeaede1e8 100644
--- a/components/taggroup/dist/metadata.json
+++ b/components/taggroup/dist/metadata.json
@@ -10,7 +10,6 @@
"--spectrum-tag-group-item-margin-inline"
],
"global": ["--spectrum-spacing-75"],
- "system-theme": [],
"passthroughs": [],
"high-contrast": []
}
diff --git a/components/taggroup/package.json b/components/taggroup/package.json
index 1db26f49132..756c6d58c11 100644
--- a/components/taggroup/package.json
+++ b/components/taggroup/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/taggroup",
- "version": "7.1.0",
+ "version": "8.0.0-next.0",
"description": "The Spectrum CSS tag group component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/tag": ">=10.0.0 <11.0.0",
+ "@spectrum-css/tag": ">=11.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -37,7 +37,7 @@
}
},
"devDependencies": {
- "@spectrum-css/tag": "10.1.0",
+ "@spectrum-css/tag": "11.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/textfield/CHANGELOG.md b/components/textfield/CHANGELOG.md
index 699a7e33a21..451fb8aeb03 100644
--- a/components/textfield/CHANGELOG.md
+++ b/components/textfield/CHANGELOG.md
@@ -8,6 +8,13 @@
- Updated border color on keyboard focus state for textfield in spectrum-two theme.
+## 9.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies []:
+ - @spectrum-css/helptext@8.0.0-next.0
+
## 8.1.0
### Minor Changes
diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json
index 7e36cb740e0..ea7001c7db6 100644
--- a/components/textfield/dist/metadata.json
+++ b/components/textfield/dist/metadata.json
@@ -88,9 +88,6 @@
".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon",
".spectrum-Textfield.spectrum-Textfield--quiet",
".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon",
- ".spectrum-Textfield.spectrum-Textfield--sizeL",
- ".spectrum-Textfield.spectrum-Textfield--sizeS",
- ".spectrum-Textfield.spectrum-Textfield--sizeXL",
".spectrum-Textfield:hover .spectrum-Textfield-input",
".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder"
],
@@ -331,22 +328,6 @@
"--spectrum-workflow-icon-size-300",
"--spectrum-workflow-icon-size-75"
],
- "system-theme": [
- "--system-textfield-background-color",
- "--system-textfield-background-color-disabled",
- "--system-textfield-border-color",
- "--system-textfield-border-color-disabled",
- "--system-textfield-border-color-focus",
- "--system-textfield-border-color-focus-hover",
- "--system-textfield-border-color-hover",
- "--system-textfield-border-color-keyboard-focus",
- "--system-textfield-border-width",
- "--system-textfield-icon-spacing-block-invalid",
- "--system-textfield-quiet-border-color-disabled",
- "--system-textfield-size-l-icon-spacing-block-invalid",
- "--system-textfield-size-s-icon-spacing-block-invalid",
- "--system-textfield-size-xl-icon-spacing-block-invalid"
- ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-textfield-border-color",
diff --git a/components/textfield/index.css b/components/textfield/index.css
index 329672d06a4..6a382d1804c 100644
--- a/components/textfield/index.css
+++ b/components/textfield/index.css
@@ -11,9 +11,19 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
.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-800);
+
+ --spectrum-textfield-border-width: var(--spectrum-border-width-100);
+
+ --spectrum-textfield-background-color: var(--mod-textfield-background-color, var(--spectrum-gray-25));
+ --spectrum-textfield-background-color-disabled: var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25));
+ --spectrum-textfield-border-color-disabled: var(--mod-textfield-border-color-disabled, var(--spectrum-gray-300));
+
/* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */
/* disallow mod for max compatibility */
--spectrum-textfield-input-line-height: var(--spectrum-textfield-height);
@@ -100,6 +110,7 @@
--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-valid: var(--spectrum-field-top-to-validation-icon-medium);
+ --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100);
--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);
@@ -109,6 +120,10 @@
/* Text Area / Multiline size medium */
--spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100);
+
+ &.spectrum-Textfield--quiet {
+ --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300);
+ }
}
/********* Text field t-shirt sizes *********/
@@ -123,6 +138,7 @@
--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-valid: var(--spectrum-field-top-to-validation-icon-small);
+ --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75);
--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);
@@ -145,6 +161,7 @@
--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-valid: var(--spectrum-field-top-to-validation-icon-large);
+ --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200);
--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);
@@ -167,6 +184,7 @@
--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-valid: var(--spectrum-field-top-to-validation-icon-extra-large);
+ --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300);
--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);
@@ -314,7 +332,7 @@
vertical-align: top; /* used to align them correctly in forms. */
outline: none;
- background-color: var(--mod-textfield-background-color, var(--spectrum-textfield-background-color));
+ background-color: var(--spectrum-textfield-background-color);
border-width: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width));
border-style: solid;
border-color: var(--highcontrast-textfield-border-color, var(--mod-textfield-border-color, var(--spectrum-textfield-border-color)));
@@ -461,8 +479,8 @@
.spectrum-Textfield.is-disabled &,
.spectrum-Textfield.is-disabled:hover &,
&:disabled {
- background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled));
- border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled));
+ background-color: var(--spectrum-textfield-background-color-disabled);
+ border-color: var(--spectrum-textfield-border-color-disabled);
color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
/* Disable the resize functionality when disabled */
@@ -498,7 +516,7 @@
.spectrum-Textfield--quiet.is-disabled:hover &,
&:disabled {
background-color: transparent;
- border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled));
+ border-color: var(--spectrum-textfield-border-color-disabled);
color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)));
&::placeholder {
diff --git a/components/textfield/package.json b/components/textfield/package.json
index 97a92cfdadf..76834d6a43a 100644
--- a/components/textfield/package.json
+++ b/components/textfield/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/textfield",
- "version": "8.1.1",
+ "version": "9.0.0-next.0",
"description": "The Spectrum CSS textfield component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/helptext": ">=7.0.0 <8.0.0",
+ "@spectrum-css/helptext": ">=8.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -37,7 +37,7 @@
}
},
"devDependencies": {
- "@spectrum-css/helptext": "7.1.0",
+ "@spectrum-css/helptext": "8.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js
index 5f20b0abb86..e255eeae0ee 100644
--- a/components/textfield/stories/template.js
+++ b/components/textfield/stories/template.js
@@ -1,8 +1,8 @@
import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js";
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
+import { Template as InfieldProgressCircle } from "@spectrum-css/infieldprogresscircle/stories/template.js";
import { Container, getRandomId } from "@spectrum-css/preview/decorators";
-import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
@@ -10,9 +10,6 @@ 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
@@ -21,7 +18,7 @@ import "../themes/express.css";
* @property {string[]} [customClasses=[]]
* @property {string[]} [customInputClasses=[]]
* @property {string[]} [customIconClasses=[]]
- * @property {string[]} [customProgressCircleClasses=[]]
+ * @property {string[]} [customInfieldProgressCircleClasses=[]]
* @property {Record} [customStyles={}]
* @property {boolean} [isInvalid=false]
* @property {boolean} [isValid=false]
@@ -61,7 +58,7 @@ export const Template = ({
customClasses = [],
customInputClasses = [],
customIconClasses = [],
- customProgressCircleClasses = [],
+ customInfieldProgressCircleClasses = [],
isInvalid = false,
isValid = false,
multiline = false,
@@ -78,7 +75,7 @@ export const Template = ({
labelText,
characterCount,
iconName,
- iconSet,
+ iconSet = "workflow",
pattern,
placeholder,
name,
@@ -199,10 +196,10 @@ export const Template = ({
})}
/>`
)}
- ${when(isLoading, () => ProgressCircle({
+ ${when(isLoading, () => InfieldProgressCircle({
isIndeterminate: true,
- size: "s",
- customClasses: customProgressCircleClasses,
+ size: size,
+ customClasses: customInfieldProgressCircleClasses,
}, context))}
${when(helpText, () =>
HelpText({
diff --git a/components/textfield/themes/express.css b/components/textfield/themes/express.css
deleted file mode 100644
index 31de0c5779a..00000000000
--- a/components/textfield/themes/express.css
+++ /dev/null
@@ -1,28 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
-
-@container style(--system: express) {
- .spectrum-Textfield {
- --spectrum-textfield-border-color: var(--spectrum-gray-400);
- --spectrum-textfield-border-color-hover: var(--spectrum-gray-500);
- --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-200);
- }
-}
diff --git a/components/textfield/themes/spectrum-two.css b/components/textfield/themes/spectrum-two.css
deleted file mode 100644
index 9d0f61284f3..00000000000
--- a/components/textfield/themes/spectrum-two.css
+++ /dev/null
@@ -1,46 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-Textfield {
- --spectrum-textfield-background-color: var(--spectrum-gray-25);
- --spectrum-textfield-background-color-disabled: var(--spectrum-gray-25);
-
- --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-800);
- --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300);
-
- --spectrum-textfield-border-width: var(--spectrum-border-width-100);
-
- --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100);
-
- &.spectrum-Textfield--sizeS {
- --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75);
- }
-
- &.spectrum-Textfield--sizeL {
- --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200);
- }
-
- &.spectrum-Textfield--sizeXL {
- --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300);
- }
-
- &.spectrum-Textfield--quiet {
- --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300);
- }
- }
-}
diff --git a/components/textfield/themes/spectrum.css b/components/textfield/themes/spectrum.css
deleted file mode 100644
index 1a097e31eac..00000000000
--- a/components/textfield/themes/spectrum.css
+++ /dev/null
@@ -1,45 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-Textfield {
- --spectrum-textfield-background-color: var(--spectrum-gray-50);
- --spectrum-textfield-background-color-disabled: var(--spectrum-disabled-background-color);
-
- --spectrum-textfield-border-color-disabled: var(--spectrum-gray-200);
-
- --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
-
- --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium);
-
- &.spectrum-Textfield--sizeS {
- --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small);
- }
-
- &.spectrum-Textfield--sizeL {
- --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large);
- }
-
- &.spectrum-Textfield--sizeXL {
- --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large);
- }
-
- &.spectrum-Textfield--quiet {
- --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300);
- }
- }
-}
diff --git a/components/thumbnail/dist/metadata.json b/components/thumbnail/dist/metadata.json
index 067259ff6a1..2a5fa051ef2 100644
--- a/components/thumbnail/dist/metadata.json
+++ b/components/thumbnail/dist/metadata.json
@@ -49,10 +49,10 @@
"--spectrum-thumbnail-border-color-selected",
"--spectrum-thumbnail-border-opacity",
"--spectrum-thumbnail-border-radius",
- "--spectrum-thumbnail-border-radius-default",
"--spectrum-thumbnail-border-width",
"--spectrum-thumbnail-border-width-selected",
"--spectrum-thumbnail-color-opacity-disabled",
+ "--spectrum-thumbnail-corner-radius",
"--spectrum-thumbnail-focus-indicator-color",
"--spectrum-thumbnail-focus-indicator-gap",
"--spectrum-thumbnail-focus-indicator-thickness",
@@ -60,6 +60,7 @@
"--spectrum-thumbnail-layer-border-color-outer",
"--spectrum-thumbnail-layer-border-width-inner",
"--spectrum-thumbnail-layer-border-width-outer",
+ "--spectrum-thumbnail-opacity-checkerboard-square-size",
"--spectrum-thumbnail-opacity-disabled",
"--spectrum-thumbnail-size",
"--spectrum-thumbnail-size-100",
@@ -73,8 +74,7 @@
"--spectrum-thumbnail-size-700",
"--spectrum-thumbnail-size-75",
"--spectrum-thumbnail-size-800",
- "--spectrum-thumbnail-size-900",
- "--spectrum-thumbnail-sized-size"
+ "--spectrum-thumbnail-size-900"
],
"global": [
"--spectrum-accent-color-800",
@@ -88,8 +88,7 @@
"--spectrum-gray-800-rgb",
"--spectrum-white"
],
- "system-theme": ["--system-thumbnail-border-radius"],
- "passthroughs": [],
+ "passthroughs": ["--mod-opacity-checkerboard-size"],
"high-contrast": [
"--highcontrast-thumbnail-border-color",
"--highcontrast-thumbnail-border-color-selected",
diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css
index 62e44665518..3f2ab89f941 100644
--- a/components/thumbnail/index.css
+++ b/components/thumbnail/index.css
@@ -11,76 +11,81 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
+.spectrum-Thumbnail {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500);
-.spectrum-Thumbnail,
-.spectrum-Thumbnail--size500 {
- --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500);
+ --spectrum-thumbnail-border-radius: var(--spectrum-thumbnail-corner-radius);
+ --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(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-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);
+
+ /* @passthrough -- custom sizing for opacity checkerboard */
+ --mod-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square-size);
}
.spectrum-Thumbnail--size50 {
- --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-50);
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50);
}
.spectrum-Thumbnail--size75 {
- --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-75);
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75);
}
.spectrum-Thumbnail--size100 {
- --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-100);
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100);
}
.spectrum-Thumbnail--size200 {
- --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-200);
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200);
}
.spectrum-Thumbnail--size300 {
- --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-300);
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300);
}
.spectrum-Thumbnail--size400 {
- --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-400);
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400);
+}
+
+.spectrum-Thumbnail--size500 {
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500);
}
.spectrum-Thumbnail--size600 {
- --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-600);
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600);
}
.spectrum-Thumbnail--size700 {
- --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-700);
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700);
}
.spectrum-Thumbnail--size800 {
- --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-800);
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800);
}
.spectrum-Thumbnail--size900 {
- --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-900);
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900);
}
.spectrum-Thumbnail--size1000 {
- --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-1000);
+ --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000);
}
.spectrum-Thumbnail {
- --spectrum-thumbnail-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-sized-size));
-
- /* @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: var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity))));
- --spectrum-thumbnail-border-color-selected: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-accent-color-800)));
- --spectrum-thumbnail-border-width: var(--mod-thumbnail-border-width, var(--spectrum-border-width-100));
- --spectrum-thumbnail-border-width-selected: var(--mod-thumbnail-border-width-selected, var(--spectrum-border-width-200));
- --spectrum-thumbnail-border-radius-default: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
-
- --spectrum-thumbnail-layer-border-color-inner: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-white)));
- --spectrum-thumbnail-layer-border-color-outer: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-gray-500)));
- --spectrum-thumbnail-layer-border-width-inner: var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-border-width-400));
- --spectrum-thumbnail-layer-border-width-outer: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-border-width-100));
-
- --spectrum-thumbnail-focus-indicator-thickness: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
- --spectrum-thumbnail-focus-indicator-gap: var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
- --spectrum-thumbnail-focus-indicator-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-focus-indicator-color)));
-
--spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled);
position: relative;
@@ -88,11 +93,13 @@
padding: 0;
display: block;
- inline-size: var(--spectrum-thumbnail-size);
- block-size: var(--spectrum-thumbnail-size);
+ inline-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size));
+ block-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size));
- border-radius: var(--spectrum-thumbnail-border-radius-default);
+ 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;
@@ -102,8 +109,8 @@
position: absolute;
inline-size: 100%;
block-size: 100%;
- border-radius: var(--spectrum-thumbnail-border-radius-default);
- box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width) var(--spectrum-thumbnail-border-color);
+ border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
+ box-shadow: inset 0 0 0 var(--mod-thumbnail-border-width, var(--spectrum-thumbnail-border-width)) var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, var(--spectrum-thumbnail-border-color)));
}
&.is-disabled {
@@ -116,27 +123,24 @@
&::after {
content: "";
border-style: solid;
- border-width: var(--spectrum-thumbnail-focus-indicator-thickness);
- border-color: var(--spectrum-thumbnail-focus-indicator-color);
- border-radius: var(--spectrum-thumbnail-border-radius-default);
+ border-width: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness));
+ border-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-thumbnail-focus-indicator-color)));
+ border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
position: absolute;
- inset-inline-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
- inset-inline-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
- inset-block-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
- inset-block-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
+ inset: calc((var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness))) * -1);
}
.spectrum-Thumbnail-image-wrapper {
overflow: hidden;
- border-radius: var(--spectrum-thumbnail-border-radius-default);
+ border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
}
}
}
.spectrum-Thumbnail-layer {
border-style: solid;
- border-width: var(--spectrum-thumbnail-layer-border-width-outer);
- border-color: var(--spectrum-thumbnail-layer-border-color-outer);
+ border-width: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer));
+ border-color: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-thumbnail-layer-border-color-outer)));
box-sizing: border-box;
display: flex;
@@ -149,9 +153,9 @@
&.is-selected {
outline-style: solid;
- outline-color: var(--spectrum-thumbnail-border-color-selected);
- outline-width: var(--spectrum-thumbnail-border-width-selected);
- outline-offset: calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner));
+ outline-color: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-thumbnail-border-color-selected)));
+ outline-width: var(--mod-thumbnail-border-width-selected, var(--spectrum-thumbnail-border-width-selected));
+ outline-offset: calc(var(--mod-thumbnail-border-width-selected, var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)));
}
}
@@ -160,11 +164,11 @@
align-items: center;
justify-content: center;
- inline-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2);
- block-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2);
+ inline-size: calc(var(--spectrum-thumbnail-size) - ((var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)))) * 2);
+ block-size: calc(var(--spectrum-thumbnail-size) - ((var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)))) * 2);
outline-style: solid;
- outline-color: var(--spectrum-thumbnail-layer-border-color-inner);
- outline-width: calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer));
+ 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)));
}
.spectrum-Thumbnail-image-wrapper {
@@ -177,8 +181,8 @@
.spectrum-Thumbnail-image {
position: relative;
- max-inline-size: 100%;
max-block-size: 100%;
+ max-inline-size: 100%;
z-index: 1;
}
@@ -202,7 +206,7 @@
inline-size: 100%;
background-size: cover;
background-position: center center;
- border-radius: var(--spectrum-thumbnail-border-radius-default);
+ border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
}
/* Windows High Contrast Mode */
diff --git a/components/thumbnail/stories/template.js b/components/thumbnail/stories/template.js
index aa476ea722b..2b40d8e1015 100644
--- a/components/thumbnail/stories/template.js
+++ b/components/thumbnail/stories/template.js
@@ -7,9 +7,6 @@ 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-Thumbnail",
diff --git a/components/thumbnail/stories/thumbnail.stories.js b/components/thumbnail/stories/thumbnail.stories.js
index cf32fab1dbb..aea3b4ece7d 100644
--- a/components/thumbnail/stories/thumbnail.stories.js
+++ b/components/thumbnail/stories/thumbnail.stories.js
@@ -95,6 +95,7 @@ export default {
packageJson,
metadata,
},
+ tags: ["migrated"],
};
// @todo combine variants into one snapshot
diff --git a/components/thumbnail/themes/express.css b/components/thumbnail/themes/express.css
deleted file mode 100644
index 9fd550418f2..00000000000
--- a/components/thumbnail/themes/express.css
+++ /dev/null
@@ -1,16 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
diff --git a/components/thumbnail/themes/spectrum-two.css b/components/thumbnail/themes/spectrum-two.css
deleted file mode 100644
index 4cd647afd85..00000000000
--- a/components/thumbnail/themes/spectrum-two.css
+++ /dev/null
@@ -1,18 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-Thumbnail {
- --spectrum-thumbnail-border-radius: 2px;
- }
-}
diff --git a/components/thumbnail/themes/spectrum.css b/components/thumbnail/themes/spectrum.css
deleted file mode 100644
index b1abf324653..00000000000
--- a/components/thumbnail/themes/spectrum.css
+++ /dev/null
@@ -1,22 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-Thumbnail {
- --spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75);
- }
-}
diff --git a/components/toast/CHANGELOG.md b/components/toast/CHANGELOG.md
index 7b5fa2d863b..c77f3aea285 100644
--- a/components/toast/CHANGELOG.md
+++ b/components/toast/CHANGELOG.md
@@ -1,5 +1,14 @@
# Change log
+## 12.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+ - @spectrum-css/button@15.0.0-next.0
+ - @spectrum-css/closebutton@7.0.0-next.0
+
## 11.1.0
### Minor Changes
diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json
index 8721a98ef8a..853a11f961a 100644
--- a/components/toast/dist/metadata.json
+++ b/components/toast/dist/metadata.json
@@ -99,10 +99,6 @@
"--spectrum-transparent-white-400",
"--spectrum-white"
],
- "system-theme": [
- "--system-toast-background-color-default",
- "--system-toast-divider-color"
- ],
"passthroughs": [],
"high-contrast": ["--highcontrast-toast-border-color"]
}
diff --git a/components/toast/index.css b/components/toast/index.css
index 8b3793de9af..b8156dc08b9 100644
--- a/components/toast/index.css
+++ b/components/toast/index.css
@@ -11,9 +11,10 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
.spectrum-Toast {
+ --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
+ --spectrum-toast-divider-color: var(--spectrum-transparent-white-400);
+
/* Hardcoded variables */
--spectrum-toast-font-weight: var(--spectrum-regular-font-weight);
diff --git a/components/toast/package.json b/components/toast/package.json
index 3494679f390..b6c13cf0776 100644
--- a/components/toast/package.json
+++ b/components/toast/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/toast",
- "version": "11.1.0",
+ "version": "12.0.0-next.0",
"description": "The Spectrum CSS toast component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,9 +25,9 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/button": ">=14.0.0 <15.0.0",
- "@spectrum-css/closebutton": ">=6.0.0 <7.0.0",
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
+ "@spectrum-css/button": ">=15.0.0-next.0",
+ "@spectrum-css/closebutton": ">=7.0.0-next.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -45,9 +45,9 @@
}
},
"devDependencies": {
- "@spectrum-css/button": "14.1.3",
- "@spectrum-css/closebutton": "6.1.0",
- "@spectrum-css/icon": "9.1.0",
+ "@spectrum-css/button": "15.0.0-next.0",
+ "@spectrum-css/closebutton": "7.0.0-next.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/toast/stories/template.js b/components/toast/stories/template.js
index 89d459dbf0a..6bf43215408 100644
--- a/components/toast/stories/template.js
+++ b/components/toast/stories/template.js
@@ -9,9 +9,6 @@ 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-Toast",
diff --git a/components/toast/themes/express.css b/components/toast/themes/express.css
deleted file mode 100644
index 2de113b03ed..00000000000
--- a/components/toast/themes/express.css
+++ /dev/null
@@ -1,22 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
-
-@container style(--system: express) {
- .spectrum-Toast {
- --spectrum-toast-background-color-default: var(--spectrum-neutral-background-color-default);
- }
-}
diff --git a/components/toast/themes/spectrum-two.css b/components/toast/themes/spectrum-two.css
deleted file mode 100644
index 1097d457299..00000000000
--- a/components/toast/themes/spectrum-two.css
+++ /dev/null
@@ -1,19 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-Toast {
- --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
- --spectrum-toast-divider-color: var(--spectrum-transparent-white-400);
- }
-}
diff --git a/components/toast/themes/spectrum.css b/components/toast/themes/spectrum.css
deleted file mode 100644
index 3f6e05c5d78..00000000000
--- a/components/toast/themes/spectrum.css
+++ /dev/null
@@ -1,22 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-Toast {
- --spectrum-toast-divider-color: var(--spectrum-transparent-white-300);
- }
-}
diff --git a/components/tooltip/CHANGELOG.md b/components/tooltip/CHANGELOG.md
index 6a20990e026..c7088f007b8 100644
--- a/components/tooltip/CHANGELOG.md
+++ b/components/tooltip/CHANGELOG.md
@@ -1,5 +1,12 @@
# Change log
+## 8.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+
## 7.1.0
### Minor Changes
diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json
index 7f6d6d0b94d..008df5e0cbe 100644
--- a/components/tooltip/dist/metadata.json
+++ b/components/tooltip/dist/metadata.json
@@ -35,8 +35,6 @@
".spectrum-Tooltip--end-top.is-open:dir(rtl)",
".spectrum-Tooltip--end.is-open",
".spectrum-Tooltip--end.is-open:dir(rtl)",
- ".spectrum-Tooltip--info",
- ".spectrum-Tooltip--info .spectrum-Tooltip-tip",
".spectrum-Tooltip--left",
".spectrum-Tooltip--left .spectrum-Tooltip-tip",
".spectrum-Tooltip--left .spectrum-Tooltip-tip:dir(rtl)",
@@ -49,10 +47,6 @@
".spectrum-Tooltip--left-top .spectrum-Tooltip-tip:dir(rtl)",
".spectrum-Tooltip--left-top.is-open",
".spectrum-Tooltip--left.is-open",
- ".spectrum-Tooltip--negative",
- ".spectrum-Tooltip--negative .spectrum-Tooltip-tip",
- ".spectrum-Tooltip--positive",
- ".spectrum-Tooltip--positive .spectrum-Tooltip-tip",
".spectrum-Tooltip--right",
".spectrum-Tooltip--right .spectrum-Tooltip-tip",
".spectrum-Tooltip--right .spectrum-Tooltip-tip:dir(rtl)",
@@ -99,7 +93,6 @@
".spectrum-Tooltip--top.is-open",
".spectrum-Tooltip-label",
".spectrum-Tooltip-tip",
- ".spectrum-Tooltip-typeIcon",
".spectrum-Tooltip.is-open",
".spectrum-Tooltip:lang(ja)",
".spectrum-Tooltip:lang(ko)",
@@ -309,20 +302,12 @@
"--mod-overlay-animation-duration-opened",
"--mod-tooltip-animation-distance",
"--mod-tooltip-background-color-default",
- "--mod-tooltip-background-color-informative",
- "--mod-tooltip-background-color-negative",
- "--mod-tooltip-background-color-positive",
"--mod-tooltip-border-radius",
"--mod-tooltip-cjk-line-height",
"--mod-tooltip-content-color",
"--mod-tooltip-font-size",
"--mod-tooltip-font-weight",
"--mod-tooltip-height",
- "--mod-tooltip-icon-height",
- "--mod-tooltip-icon-spacing-block-start",
- "--mod-tooltip-icon-spacing-inline-end",
- "--mod-tooltip-icon-spacing-inline-start",
- "--mod-tooltip-icon-width",
"--mod-tooltip-line-height",
"--mod-tooltip-margin",
"--mod-tooltip-max-inline-size",
@@ -332,6 +317,7 @@
"--mod-tooltip-spacing-inline",
"--mod-tooltip-tip-antialiasing-inset",
"--mod-tooltip-tip-block-size",
+ "--mod-tooltip-tip-corner-radius",
"--mod-tooltip-tip-height-percentage",
"--mod-tooltip-tip-square-size"
],
@@ -340,20 +326,12 @@
"--spectrum-tooltip-animation-duration",
"--spectrum-tooltip-backgound-color-default-neutral",
"--spectrum-tooltip-background-color-default",
- "--spectrum-tooltip-background-color-informative",
- "--spectrum-tooltip-background-color-negative",
- "--spectrum-tooltip-background-color-positive",
"--spectrum-tooltip-border-radius",
"--spectrum-tooltip-cjk-line-height",
"--spectrum-tooltip-content-color",
"--spectrum-tooltip-font-size",
"--spectrum-tooltip-font-weight",
"--spectrum-tooltip-height",
- "--spectrum-tooltip-icon-height",
- "--spectrum-tooltip-icon-spacing-block-start",
- "--spectrum-tooltip-icon-spacing-inline-end",
- "--spectrum-tooltip-icon-spacing-inline-start",
- "--spectrum-tooltip-icon-width",
"--spectrum-tooltip-line-height",
"--spectrum-tooltip-margin",
"--spectrum-tooltip-max-inline-size",
@@ -364,11 +342,10 @@
"--spectrum-tooltip-spacing-inline",
"--spectrum-tooltip-tip-antialiasing-inset",
"--spectrum-tooltip-tip-block-size",
+ "--spectrum-tooltip-tip-corner-radius",
"--spectrum-tooltip-tip-height",
"--spectrum-tooltip-tip-height-percentage",
- "--spectrum-tooltip-tip-inline-size",
- "--spectrum-tooltip-tip-square-size",
- "--spectrum-tooltip-tip-width"
+ "--spectrum-tooltip-tip-square-size"
],
"global": [
"--spectrum-animation-duration-0",
@@ -378,25 +355,17 @@
"--spectrum-component-edge-to-text-75",
"--spectrum-component-height-75",
"--spectrum-component-top-to-text-75",
- "--spectrum-component-top-to-workflow-icon-75",
- "--spectrum-corner-radius-100",
+ "--spectrum-corner-radius-400",
"--spectrum-font-size-75",
- "--spectrum-informative-background-color-default",
- "--spectrum-line-height-100",
- "--spectrum-negative-background-color-default",
+ "--spectrum-gray-25",
+ "--spectrum-neutral-background-color-default",
"--spectrum-neutral-subdued-background-color-default",
- "--spectrum-positive-background-color-default",
"--spectrum-regular-font-weight",
- "--spectrum-text-to-visual-75",
- "--spectrum-white",
- "--spectrum-workflow-icon-size-50"
+ "--spectrum-spacing-75"
],
- "system-theme": ["--system-tooltip-backgound-color-default-neutral"],
"passthroughs": [],
"high-contrast": [
"--highcontrast-tooltip-background-color-default",
- "--highcontrast-tooltip-background-color-informative",
- "--highcontrast-tooltip-background-color-negative",
- "--highcontrast-tooltip-background-color-positive"
+ "--highcontrast-tooltip-border-width"
]
}
diff --git a/components/tooltip/index.css b/components/tooltip/index.css
index f488b9cbf49..2a7787b7aec 100644
--- a/components/tooltip/index.css
+++ b/components/tooltip/index.css
@@ -11,24 +11,25 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
@import "@spectrum-css/commons/overlay.css";
.spectrum-Tooltip {
+ --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default);
+
--spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100);
+ --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
/* override if additional spacing to source is required */
--spectrum-tooltip-margin: 0px;
--spectrum-tooltip-height: var(--spectrum-component-height-75);
--spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width);
- --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100);
-
- --spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50);
- --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50);
+ --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-400);
--spectrum-tooltip-font-size: var(--spectrum-font-size-75);
- --spectrum-tooltip-line-height: var(--spectrum-line-height-100);
+
+ /* @todo set line-height using font size specific line-height tokens when they are finalized along with the new variable font. */
+ --spectrum-tooltip-line-height: 1.2;
--spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
--spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight);
@@ -39,53 +40,23 @@
--spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75);
--spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75);
- /* icon spacing */
- --spectrum-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75);
- --spectrum-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
- --spectrum-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);
-
- /* colors */
- --spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default);
- --spectrum-tooltip-background-color-positive: var(--spectrum-positive-background-color-default);
- --spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default);
-
- --spectrum-tooltip-content-color: var(--spectrum-white);
+ --spectrum-tooltip-content-color: var(--spectrum-gray-25);
+ --spectrum-tooltip-background-color-default: var(--spectrum-neutral-background-color-default);
/* tip */
- --spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
--spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
- /* Width and height of square element used to render the tip triangle. */
- --spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size);
-
/* Percentage value of height divided by width, for calculating clip-path within a square tip. */
- --spectrum-tooltip-tip-height-percentage: 50%;
+ --spectrum-tooltip-tip-height-percentage: 100%;
/* Tip inset from container edges for clip-paths calculation, to fix hairline gap in Chrome cause by antialiasing. */
--spectrum-tooltip-tip-antialiasing-inset: 0.5px;
/* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */
- --spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);
+ --spectrum-tooltip-pointer-corner-spacing: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius));
- /* neutral background changes per theme */
- --spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral);
+ --highcontrast-tooltip-border-width: 0px;
}
-
-@media (forced-colors: active) {
- .spectrum-Tooltip {
- border: 1px solid transparent;
- }
-
- .spectrum-Tooltip-tip {
- --highcontrast-tooltip-background-color-default: CanvasText;
- --highcontrast-tooltip-background-color-informative: CanvasText;
- --highcontrast-tooltip-background-color-positive: CanvasText;
- --highcontrast-tooltip-background-color-negative: CanvasText;
-
- forced-color-adjust: none;
- }
-}
-
.spectrum-Tooltip {
@extend %spectrum-overlay;
@@ -131,19 +102,6 @@
}
}
-/****** Variants ******/
-.spectrum-Tooltip--info {
- background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
-}
-
-.spectrum-Tooltip--positive {
- background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive)));
-}
-
-.spectrum-Tooltip--negative {
- background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
-}
-
.spectrum-Tooltip.is-open {
@extend %spectrum-overlay--open;
}
@@ -155,27 +113,17 @@
block-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size));
inline-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size));
- inset-block-start: 100%;
+ inset-block-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width));
/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
- left: 50%;
- transform: translateX(-50%);
+ left: calc(50% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))));
+ transform: rotate(-45deg);
background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default)));
/* Default: Pointing down ▽ */
- clip-path: polygon(0 calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 50% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 100% calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))));
-
- .spectrum-Tooltip--info & {
- background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
- }
+ clip-path: polygon(0 0, 100% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 0 100%);
- .spectrum-Tooltip--positive & {
- background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive)));
- }
-
- .spectrum-Tooltip--negative & {
- background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
- }
+ border-radius: 0 0 0 var(--mod-tooltip-tip-corner-radius, var(--spectrum-tooltip-tip-corner-radius));
/*** Tip Placement ***/
/* tip is horizontal at bottom pointing down ▽ */
@@ -184,7 +132,8 @@
.spectrum-Tooltip--top-right &,
.spectrum-Tooltip--top-start &,
.spectrum-Tooltip--top-end & {
- inset-block-start: 100%;
+ inset-block-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width));
+ transform: rotate(-45deg);
}
/* tip is horizontal at top pointing up △ */
@@ -193,20 +142,8 @@
.spectrum-Tooltip--bottom-right &,
.spectrum-Tooltip--bottom-start &,
.spectrum-Tooltip--bottom-end & {
- clip-path: polygon(50% calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))), 0 calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 100% calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))));
- inset-block: auto 100%;
- }
-
- /* tip is horizontal and at the edge */
- .spectrum-Tooltip--top-left &,
- .spectrum-Tooltip--bottom-left &,
- .spectrum-Tooltip--top-right &,
- .spectrum-Tooltip--bottom-right &,
- .spectrum-Tooltip--top-start &,
- .spectrum-Tooltip--bottom-start &,
- .spectrum-Tooltip--top-end &,
- .spectrum-Tooltip--bottom-end & {
- transform: none;
+ inset-block: auto calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width));
+ transform: rotate(135deg);
}
/* tip is horizontal at left △ ▽ */
@@ -256,8 +193,7 @@
.spectrum-Tooltip--end &,
.spectrum-Tooltip--end-top &,
.spectrum-Tooltip--end-bottom & {
- inset-block-start: 50%;
- transform: translateY(-50%);
+ inset-block-start: calc(50% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))));
}
/* tip is vertical and at edge */
@@ -269,7 +205,6 @@
.spectrum-Tooltip--start-bottom &,
.spectrum-Tooltip--end-top &,
.spectrum-Tooltip--end-bottom & {
- transform: none;
inset-block-start: auto;
}
@@ -280,8 +215,8 @@
.spectrum-Tooltip--end &,
.spectrum-Tooltip--end-top &,
.spectrum-Tooltip--end-bottom & {
- clip-path: polygon(calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0);
- inset-inline: auto 100%;
+ inset-inline: auto calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width));
+ transform: rotate(45deg);
}
/* tip is vertical pointing ▷ right or end, for LTR. */
@@ -291,8 +226,8 @@
.spectrum-Tooltip--start &,
.spectrum-Tooltip--start-top &,
.spectrum-Tooltip--start-bottom & {
- clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%);
- inset-inline-start: 100%;
+ inset-inline-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width));
+ transform: rotate(-135deg);
}
/* tip is vertical at top ◁ ▷ */
@@ -319,9 +254,9 @@
.spectrum-Tooltip--end-top &,
.spectrum-Tooltip--end-bottom & {
&:dir(rtl) {
- clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%);
+ transform: rotate(-135deg);
right: auto;
- left: 100%;
+ left: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width));
}
}
@@ -333,25 +268,13 @@
.spectrum-Tooltip--start-top &,
.spectrum-Tooltip--start-bottom & {
&:dir(rtl) {
- clip-path: polygon(var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0);
+ transform: rotate(45deg);
left: auto;
- right: 100%;
+ right: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width));
}
}
}
-/****** Icon ******/
-.spectrum-Tooltip-typeIcon {
- /* subtract tooltip padding from icon start margin */
- margin-inline-start: calc(var(--mod-tooltip-icon-spacing-inline-start, var(--spectrum-tooltip-icon-spacing-inline-start)) - var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline)));
- margin-inline-end: var(--mod-tooltip-icon-spacing-inline-end, var(--spectrum-tooltip-icon-spacing-inline-end));
- margin-block-start: var(--mod-tooltip-icon-spacing-block-start, var(--spectrum-tooltip-icon-spacing-block-start));
- inline-size: var(--mod-tooltip-icon-width, var(--spectrum-tooltip-icon-width));
- block-size: var(--mod-tooltip-icon-height, var(--spectrum-tooltip-icon-height));
- align-self: flex-start;
- flex-shrink: 0;
-}
-
/****** Label ******/
.spectrum-Tooltip-label {
/* Make sure line height is correct to prevent problems in Windows */
@@ -649,3 +572,15 @@
}
}
}
+
+@media (forced-colors: active) {
+ .spectrum-Tooltip {
+ --highcontrast-tooltip-border-width: 1px;
+
+ border: var(--highcontrast-tooltip-border-width) solid CanvasText;
+ }
+
+ .spectrum-Tooltip-tip {
+ --highcontrast-tooltip-background-color-default: CanvasText;
+ }
+}
diff --git a/components/tooltip/package.json b/components/tooltip/package.json
index 379ecb22fc4..5b43715d76e 100644
--- a/components/tooltip/package.json
+++ b/components/tooltip/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/tooltip",
- "version": "7.1.0",
+ "version": "8.0.0-next.0",
"description": "The Spectrum CSS tooltip component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -38,7 +38,7 @@
},
"devDependencies": {
"@spectrum-css/commons": "11.0.0",
- "@spectrum-css/icon": "9.1.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/tooltip/stories/template.js b/components/tooltip/stories/template.js
index 5c5c260f4d6..61cf2ce81b2 100644
--- a/components/tooltip/stories/template.js
+++ b/components/tooltip/stories/template.js
@@ -7,15 +7,12 @@ 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-Tooltip",
label,
- variant = "neutral",
placement,
+ variant = "neutral",
isOpen = true,
isFocused = false,
showOnHover = false,
@@ -45,8 +42,6 @@ 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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
-
-@container style(--system: express) {
- .spectrum-Tooltip {
- --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default);
- }
-}
diff --git a/components/tooltip/themes/spectrum-two.css b/components/tooltip/themes/spectrum-two.css
deleted file mode 100644
index 42b423e3448..00000000000
--- a/components/tooltip/themes/spectrum-two.css
+++ /dev/null
@@ -1,18 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-Tooltip {
- --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default);
- }
-}
diff --git a/components/tooltip/themes/spectrum.css b/components/tooltip/themes/spectrum.css
deleted file mode 100644
index 3d81bc564b5..00000000000
--- a/components/tooltip/themes/spectrum.css
+++ /dev/null
@@ -1,16 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
diff --git a/components/tray/CHANGELOG.md b/components/tray/CHANGELOG.md
index 2237276890d..c47c91ac961 100644
--- a/components/tray/CHANGELOG.md
+++ b/components/tray/CHANGELOG.md
@@ -1,5 +1,28 @@
# Change log
+## 6.0.0-next.2
+
+### Patch Changes
+
+- Updated dependencies [[`cb1b957`](https://github.com/adobe/spectrum-css/commit/cb1b957c05ecf02d3f473de09a8bfd5f2b5d42bf)]:
+ - @spectrum-css/modal@7.1.1-next.0
+
+## 6.0.0-next.1
+
+### Patch Changes
+
+- Updated dependencies [[`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914)]:
+ - @spectrum-css/divider@6.0.0-next.0
+
+## 6.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+ - @spectrum-css/button@15.0.0-next.0
+ - @spectrum-css/dialog@13.0.0-next.0
+
## 5.1.0
### Minor Changes
diff --git a/components/tray/dist/metadata.json b/components/tray/dist/metadata.json
index 2d510b6a7aa..db6c152c441 100644
--- a/components/tray/dist/metadata.json
+++ b/components/tray/dist/metadata.json
@@ -36,7 +36,6 @@
"--spectrum-background-layer-2-color",
"--spectrum-corner-radius-100"
],
- "system-theme": [],
"passthroughs": ["--mod-modal-max-width"],
"high-contrast": ["--highcontrast-tray-background-color"]
}
diff --git a/components/tray/package.json b/components/tray/package.json
index c791e2b82f9..7bc62cc5102 100644
--- a/components/tray/package.json
+++ b/components/tray/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/tray",
- "version": "5.1.0",
+ "version": "6.0.0-next.2",
"description": "The Spectrum CSS tray component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,11 +25,11 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/button": ">=14.0.0 <15.0.0",
- "@spectrum-css/dialog": ">=12.0.0 <13.0.0",
- "@spectrum-css/divider": ">=5.0.0 <6.0.0",
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
- "@spectrum-css/modal": ">=7.0.0 <8.0.0",
+ "@spectrum-css/button": ">=15.0.0-next.0",
+ "@spectrum-css/dialog": ">=13.0.0-next.0",
+ "@spectrum-css/divider": ">=6.0.0-next.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
+ "@spectrum-css/modal": ">=7.1.1-next.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
@@ -53,11 +53,11 @@
}
},
"devDependencies": {
- "@spectrum-css/button": "14.1.3",
- "@spectrum-css/dialog": "12.1.0",
- "@spectrum-css/divider": "5.1.0",
- "@spectrum-css/icon": "9.1.0",
- "@spectrum-css/modal": "7.1.0",
+ "@spectrum-css/button": "15.0.0-next.0",
+ "@spectrum-css/dialog": "13.0.0-next.2",
+ "@spectrum-css/divider": "6.0.0-next.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
+ "@spectrum-css/modal": "7.1.1-next.0",
"@spectrum-css/tokens": "16.0.1"
},
"keywords": [
diff --git a/components/treeview/CHANGELOG.md b/components/treeview/CHANGELOG.md
index 50df5078888..2134a9069dc 100644
--- a/components/treeview/CHANGELOG.md
+++ b/components/treeview/CHANGELOG.md
@@ -1,5 +1,12 @@
# Change log
+## 13.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
+ - @spectrum-css/icon@10.0.0-next.0
+
## 12.1.0
### Minor Changes
@@ -215,6 +222,7 @@ Output for all component CSS files is now being run through a lightweight optimi
### 🛑 BREAKING CHANGE
- Removes component-builder & component-builder-simple for script leveraging postcss
+
- Imports added to index.css and themes/express.css
## 9.2.6
diff --git a/components/treeview/dist/metadata.json b/components/treeview/dist/metadata.json
index 0e5af238587..7456a1853f8 100644
--- a/components/treeview/dist/metadata.json
+++ b/components/treeview/dist/metadata.json
@@ -4,7 +4,6 @@
".spectrum-TreeView",
".spectrum-TreeView .spectrum-TreeView",
".spectrum-TreeView--sizeL",
- ".spectrum-TreeView--sizeM",
".spectrum-TreeView--sizeS",
".spectrum-TreeView--sizeXL",
".spectrum-TreeView--thumbnail .spectrum-TreeView-itemThumbnail",
@@ -168,10 +167,6 @@
"--spectrum-neutral-content-color-default",
"--spectrum-text-to-visual-75"
],
- "system-theme": [
- "--system-tree-view-item-background-color-focus",
- "--system-tree-view-item-background-color-hover"
- ],
"passthroughs": [],
"high-contrast": [
"--highcontrast-treeview-heading-color",
diff --git a/components/treeview/index.css b/components/treeview/index.css
index 2c55ebea3be..20e3fd46ea6 100644
--- a/components/treeview/index.css
+++ b/components/treeview/index.css
@@ -11,8 +11,6 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
@media (forced-colors: active) {
.spectrum-TreeView {
--highcontrast-treeview-item-background-color-selected: Highlight;
@@ -54,8 +52,39 @@
}
}
-.spectrum-TreeView,
-.spectrum-TreeView--sizeM {
+.spectrum-TreeView {
+ --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100);
+
+ --spectrum-treeview-item-border-size: var(--mod-treeview-item-border-size, var(--spectrum-border-width-200));
+ --spectrum-treeview-item-border-size-selected: var(--mod-treeview-item-border-size-selected, 1px);
+ --spectrum-treeview-item-border-radius: var(--mod-treeview-item-border-radius, 0px);
+
+ --spectrum-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-blue-800)));
+ --spectrum-treeview-item-border-color-focus: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-blue-700)));
+
+ --spectrum-treeview-item-border-color-quiet-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent));
+
+ --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100);
+ --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100);
+
+ --spectrum-treeview-item-icon-gap: var(--mod-treeview-item-icon-gap, var(--spectrum-text-to-visual-75));
+ --spectrum-treeview-item-icon-color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-gray-700)));
+ --spectrum-treeview-item-icon-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-gray-900)));
+ --spectrum-treeview-item-icon-color-focus: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-gray-900)));
+ --spectrum-treeview-item-icon-color-selected: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-gray-900)));
+ --spectrum-treeview-item-icon-color-disabled: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-disabled-content-color)));
+
+ --spectrum-treeview-item-text-color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-neutral-content-color-default)));
+ --spectrum-treeview-item-text-color-selected: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-gray-900)));
+ --spectrum-treeview-item-text-color-disabled: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-gray-500)));
+ --spectrum-treeview-item-text-color-focus: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-gray-900)));
+ --spectrum-treeview-item-text-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-gray-900)));
+
+ --spectrum-treeview-indicator-animation-duration: var(--mod-treeview-indicator-animation-duration, var(--spectrum-animation-duration-100));
+
+ --spectrum-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-sized-min-block-size));
+
--spectrum-treeview-font-size: var(--mod-treeview-font-size, var(--spectrum-font-size-100));
--spectrum-treeview-item-sized-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-component-height-100));
diff --git a/components/treeview/package.json b/components/treeview/package.json
index fb3c89534d4..d0b448f2604 100644
--- a/components/treeview/package.json
+++ b/components/treeview/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/treeview",
- "version": "12.1.0",
+ "version": "13.0.0-next.0",
"description": "The Spectrum CSS Tree view component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/icon": ">=9.0.0 <10.0.0",
+ "@spectrum-css/icon": ">=10.0.0-next.0",
"@spectrum-css/thumbnail": ">=8.0.0 <9.0.0",
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
@@ -41,7 +41,7 @@
}
},
"devDependencies": {
- "@spectrum-css/icon": "9.1.0",
+ "@spectrum-css/icon": "10.0.0-next.0",
"@spectrum-css/thumbnail": "8.1.0",
"@spectrum-css/tokens": "16.0.1"
},
diff --git a/components/treeview/stories/template.js b/components/treeview/stories/template.js
index df31e3ed464..7114a75a1ac 100644
--- a/components/treeview/stories/template.js
+++ b/components/treeview/stories/template.js
@@ -9,9 +9,6 @@ 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 TreeViewItem = ({
rootClass = "spectrum-TreeView",
@@ -25,7 +22,7 @@ export const TreeViewItem = ({
isOpen,
isDropTarget,
icon,
- iconSet,
+ iconSet = "workflow",
thumbnail,
items,
variant,
diff --git a/components/treeview/themes/express.css b/components/treeview/themes/express.css
deleted file mode 100644
index 9fd550418f2..00000000000
--- a/components/treeview/themes/express.css
+++ /dev/null
@@ -1,16 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
diff --git a/components/treeview/themes/spectrum-two.css b/components/treeview/themes/spectrum-two.css
deleted file mode 100644
index 215290b3b6e..00000000000
--- a/components/treeview/themes/spectrum-two.css
+++ /dev/null
@@ -1,19 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-TreeView {
- --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100);
- --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100);
- }
-}
diff --git a/components/treeview/themes/spectrum.css b/components/treeview/themes/spectrum.css
deleted file mode 100644
index 7698b2b4c3e..00000000000
--- a/components/treeview/themes/spectrum.css
+++ /dev/null
@@ -1,23 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-TreeView {
- --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200);
- --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200);
- }
-}
diff --git a/components/typography/dist/metadata.json b/components/typography/dist/metadata.json
index 5d45be326da..3ef566f741d 100644
--- a/components/typography/dist/metadata.json
+++ b/components/typography/dist/metadata.json
@@ -751,7 +751,6 @@
"--spectrum-sans-font-family-stack",
"--spectrum-serif-font-family-stack"
],
- "system-theme": [],
"passthroughs": [],
"high-contrast": [
"--highcontrast-body-font-color",
diff --git a/components/typography/package.json b/components/typography/package.json
index b14835ead75..d420b5bf827 100644
--- a/components/typography/package.json
+++ b/components/typography/package.json
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/tokens": ">=16.0.1"
+ "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
"@spectrum-css/tokens": {
diff --git a/components/typography/stories/typography.stories.js b/components/typography/stories/typography.stories.js
index 044a76bc5b6..2eb198a216a 100644
--- a/components/typography/stories/typography.stories.js
+++ b/components/typography/stories/typography.stories.js
@@ -4,16 +4,16 @@ import { size } from "@spectrum-css/preview/types";
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
import {
- DocsBodyVariants,
- DocsCodeVariants,
- DocsDetailVariants,
- DocsHeadingBodyPairing,
- DocsHeadingVariants,
- DocsInternationalizedBodyVariants,
- DocsInternationalizedCodeVariants,
- DocsInternationalizedDetailVariants,
- DocsInternationalizedHeadingBodyPairing,
- DocsInternationalizedHeadingVariants, Template
+ DocsBodyVariants,
+ DocsCodeVariants,
+ DocsDetailVariants,
+ DocsHeadingBodyPairing,
+ DocsHeadingVariants,
+ DocsInternationalizedBodyVariants,
+ DocsInternationalizedCodeVariants,
+ DocsInternationalizedDetailVariants,
+ DocsInternationalizedHeadingBodyPairing,
+ DocsInternationalizedHeadingVariants, Template
} from "./template.js";
import { TypographyGroup } from "./typography.test.js";
diff --git a/components/underlay/dist/metadata.json b/components/underlay/dist/metadata.json
index 6b35fb4f7f0..21a3e4aa1d0 100644
--- a/components/underlay/dist/metadata.json
+++ b/components/underlay/dist/metadata.json
@@ -30,7 +30,6 @@
"--spectrum-black-rgb",
"--spectrum-overlay-opacity"
],
- "system-theme": [],
"passthroughs": [],
"high-contrast": []
}
diff --git a/components/underlay/package.json b/components/underlay/package.json
index aeffe00205c..7b6c78a236b 100644
--- a/components/underlay/package.json
+++ b/components/underlay/package.json
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/tokens": ">=16.0.1"
+ "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
"@spectrum-css/tokens": {
diff --git a/components/well/dist/metadata.json b/components/well/dist/metadata.json
index 3587fa73f7a..c9fdd7f6da1 100644
--- a/components/well/dist/metadata.json
+++ b/components/well/dist/metadata.json
@@ -27,7 +27,6 @@
"--spectrum-gray-1000-rgb",
"--spectrum-gray-800-rgb"
],
- "system-theme": ["--system-well-border-color"],
"passthroughs": [],
"high-contrast": []
}
diff --git a/components/well/index.css b/components/well/index.css
index 26abcff0032..1aabb0c2b55 100644
--- a/components/well/index.css
+++ b/components/well/index.css
@@ -11,9 +11,9 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
.spectrum-Well {
+ --spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), 0.05);
+
--spectrum-well-border-width: var(--spectrum-border-width-100);
--spectrum-well-content-color: var(--spectrum-body-color);
--spectrum-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02);
diff --git a/components/well/package.json b/components/well/package.json
index f13f53473ae..98f5443072e 100644
--- a/components/well/package.json
+++ b/components/well/package.json
@@ -25,7 +25,7 @@
},
"main": "dist/index.css",
"peerDependencies": {
- "@spectrum-css/tokens": ">=16.0.1"
+ "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
},
"peerDependenciesMeta": {
"@spectrum-css/tokens": {
diff --git a/components/well/stories/template.js b/components/well/stories/template.js
index c9645cfdcdb..5e8210305d1 100644
--- a/components/well/stories/template.js
+++ b/components/well/stories/template.js
@@ -5,9 +5,6 @@ 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-Well",
diff --git a/components/well/themes/express.css b/components/well/themes/express.css
deleted file mode 100644
index 9fd550418f2..00000000000
--- a/components/well/themes/express.css
+++ /dev/null
@@ -1,16 +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.
- */
-
-/* @combine .spectrum.spectrum--express */
-
-@import "./spectrum.css";
diff --git a/components/well/themes/spectrum-two.css b/components/well/themes/spectrum-two.css
deleted file mode 100644
index f4a2ef0983e..00000000000
--- a/components/well/themes/spectrum-two.css
+++ /dev/null
@@ -1,18 +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.
- */
-
-@container style(--system: spectrum) {
- .spectrum-Well {
- --spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), 0.05);
- }
-}
diff --git a/components/well/themes/spectrum.css b/components/well/themes/spectrum.css
deleted file mode 100644
index 5cfe7120396..00000000000
--- a/components/well/themes/spectrum.css
+++ /dev/null
@@ -1,22 +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.
- */
-
-/* @combine .spectrum.spectrum--legacy */
-
-@import "./spectrum-two.css";
-
-@container style(--system: legacy) {
- .spectrum-Well {
- --spectrum-well-border-color: rgba(var(--spectrum-gray-900-rgb), 0.05);
- }
-}
diff --git a/package.json b/package.json
index f594da0847e..1e3ad03e856 100644
--- a/package.json
+++ b/package.json
@@ -72,8 +72,6 @@
"@commitlint/config-conventional": "^19.6.0",
"@csstools/postcss-bundler": "^2.0.6",
"@nx/devkit": "^19.8.2",
- "@spectrum-tools/postcss-add-theming-layer": "1.0.2",
- "@spectrum-tools/postcss-property-rollup": "0.0.1",
"@spectrum-tools/postcss-rgb-mapping": "1.0.0",
"@yarnpkg/types": "^4.0.0",
"at-rule-packer": "^0.4.2",
diff --git a/plugins/postcss-add-theming-layer/CHANGELOG.md b/plugins/postcss-add-theming-layer/CHANGELOG.md
deleted file mode 100644
index 761d4dfbac9..00000000000
--- a/plugins/postcss-add-theming-layer/CHANGELOG.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Change Log
-
-## 1.0.2
-
-### Patch Changes
-
-- [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! - Minor dependency updates to align with the larger project.
-
-## 1.0.1
-
-### Patch Changes
-
-📝 [#3541](https://github.com/adobe/spectrum-css/pull/3541) [`1a3245c`](https://github.com/adobe/spectrum-css/commit/1a3245c3a660bc52ed260f18b6cceab5ee81541d) Thanks [@castastrophe](https://github.com/castastrophe)!
-
-- Dependency alignment across the project.
-
- Set component peerDependencies as optional to reduce console warnings on downstream projects.
-
-## 1.0.0
-
-### Major Changes
-
-📝 [#3502](https://github.com/adobe/spectrum-css/pull/3502) [`562396e`](https://github.com/adobe/spectrum-css/commit/562396eaf21769341f78ea3761393b65f00e751b) Thanks [@castastrophe](https://github.com/castastrophe)!
-
-- The PostCSS plugin previously published as `postcss-splitinator`. This new package creates a polyfill for style queries by creating a layer of `--system` prefixed custom properties to be loaded by attaching a unique selector. This allows the toggling of component-level property definitions by theme or context. There are many options available to customize the output that are documented in the package [README](plugins/postcss-add-theming-layer/README.md).
diff --git a/plugins/postcss-add-theming-layer/README.md b/plugins/postcss-add-theming-layer/README.md
deleted file mode 100644
index 610310f5662..00000000000
--- a/plugins/postcss-add-theming-layer/README.md
+++ /dev/null
@@ -1,115 +0,0 @@
-# postcss-add-theming-layer
-
-> Leveraging style container queries to create an abstraction layer for supporting multiple theming systems.
-
-## Installation
-
-Add the dependency to your project:
-
-```sh
-npm install postcss-add-theming-layer
-```
-
-or
-
-```sh
-yarn add -DW postcss-add-theming-layer
-```
-
-Use the plugin in your PostCSS configuration:
-
-```js
-module.exports = {
- plugins: {
- "postcss-add-theming-layer": {},
- },
-};
-```
-
-or as part of your CLI command:
-
-```sh
-postcss -u postcss-add-theming-layer -o dist/index.css src/index.css
-```
-
-## Options
-
-### `selectorPrefix` [string]
-
-This optional input will prefix the new theming layer selector with the provided string. This can be useful if you want to namespace the injected selectors for the new theming layer to avoid conflicts.
-
-### `skipMapping` [boolean=false]
-
-Skip the mapping of the variables to the system variables. This can be useful if you only want to extract the variables and not map them to the system variables.
-
-### `preserveVariables` [boolean=true]
-
-When used with `skipMapping`, this option will preserve the variables defined inside the container query in the output by injecting them to the root selector.
-
-### `referencesOnly` [boolean=false]
-
-This option will only output those variables that are referencing the newly created system variables and not the system variables themselves. This can be used as a bridge between an old and new implementation for the component.
-
-### `stripLocalSelectors` [boolean=false]
-
-This option will remove the local selectors (those that map to system variables) from the output leaving only the system definitions.
-
-### `processIdentifier` [(identifierValue: string, identifierName: string) => string]`
-
-Customize the selectors that variables are placed in. Passed the value and key of the variable that was passed to the container, i.e. `identifierValue = spectrum` and `identifierName = system` for the example below. By default, `identifierName` is used as-is.
-
-## Usage
-
-This plugin turns this:
-
-```css
-@container style(--system: legacy) {
- .component {
- --background-color: blue;
- }
- .component.is-selected {
- --background-color: darkblue;
- }
- .component .icon {
- --color: gray;
- }
-}
-
-@container style(--system: modern) {
- .component {
- --background-color: purple;
- }
- .component.is-selected {
- --background-color: darkpurple;
- }
- .component .icon {
- --color: white;
- }
-}
-```
-
-Into this:
-
-```css
-.legacy {
- --system-component-background-color: blue;
- --system-component-selected-background-color: darkblue;
-}
-
-.modern {
- --system-component-background-color: purple;
- --system-component-selected-background-color: darkpurple;
-}
-
-.component {
- --background-color: var(--system-component-background-color);
-}
-
-.component.is-selected {
- --background-color: var(--system-component-selected-background-color);
-}
-```
-
-## Usage notes
-
-This plugin will ignore any underscore-prefixed variables, as they are considered private and not part of the theming layer.
diff --git a/plugins/postcss-add-theming-layer/expected/basic.css b/plugins/postcss-add-theming-layer/expected/basic.css
deleted file mode 100644
index 711a906a74d..00000000000
--- a/plugins/postcss-add-theming-layer/expected/basic.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.legacy {
- --system-component-background-color: blue;
- --system-component-selected-background-color: darkblue;
- --system-component-icon-color: gray;
- --system-where-component-background-color: blue;
- --system-component-where-selected-background-color: darkblue;
- --system-component-has-icon-color: gray
-}
-
-.modern {
- --system-component-background-color: purple;
- --system-component-selected-background-color: indigo;
- --system-component-icon-color: white;
- --system-where-component-background-color: indigo;
- --system-component-where-selected-background-color: darkpurple;
- --system-component-has-icon-color: white
-}
-
-.component {
- --background-color: var(--system-component-background-color)
-}
-
-.component.is-selected {
- --background-color: var(--system-component-selected-background-color)
-}
-
-.component .icon {
- --color: var(--system-component-icon-color)
-}
-
-:where(.component) {
- --background-color: var(--system-where-component-background-color)
-}
-
-.component:where(:selected,.is-selected) {
- --background-color: var(--system-component-where-selected-background-color)
-}
-
-.component:has(.icon) {
- --color: var(--system-component-has-icon-color)
-}
diff --git a/plugins/postcss-add-theming-layer/fixtures/basic.css b/plugins/postcss-add-theming-layer/fixtures/basic.css
deleted file mode 100644
index 50692d97093..00000000000
--- a/plugins/postcss-add-theming-layer/fixtures/basic.css
+++ /dev/null
@@ -1,49 +0,0 @@
-@container style(--system: legacy) {
- .component {
- --background-color: blue;
- }
- .component.is-selected {
- --background-color: darkblue;
- }
- .component .icon {
- --color: gray;
- }
-
- :where(.component) {
- --background-color: blue;
- }
-
- .component:where(:selected, .is-selected) {
- --background-color: darkblue;
- }
-
- .component:has(.icon) {
- --color: gray;
- }
-}
-
-@container style(--system: modern) {
- .component {
- --background-color: purple;
- }
-
- .component.is-selected {
- --background-color: indigo;
- }
-
- .component .icon {
- --color: white;
- }
-
- :where(.component) {
- --background-color: indigo;
- }
-
- .component:where(:selected, .is-selected) {
- --background-color: darkpurple;
- }
-
- .component:has(.icon) {
- --color: white;
- }
-}
diff --git a/plugins/postcss-add-theming-layer/index.js b/plugins/postcss-add-theming-layer/index.js
deleted file mode 100644
index fa9904a5801..00000000000
--- a/plugins/postcss-add-theming-layer/index.js
+++ /dev/null
@@ -1,201 +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.
- */
-
-const selectorParser = require("postcss-selector-parser");
-const {
- cleanPropertyName,
- extractFallbackValue,
- getVariableName,
- checkForReplacement
-} = require("./utilities");
-
-/**
- * @typedef Options
- * @property {string} [selectorPrefix] - The prefix to use for the new selectors
- * @property {boolean} [skipMapping=false] - Skip the mapping of the variables to the system variables. This can be useful if you only want to extract the variables and not map them to the system variables.
- * @property {boolean} [preserveVariables=false] - When used with `skipMapping`, this option will preserve the variables defined inside the container query in the output by injecting them to the root selector.
- * @property {boolean} [referencesOnly=false] - This option will only output those variables that are referencing the newly created system variables and not the system variables themselves. This can be used as a bridge between an old and new implementation for the component.
- * @property {boolean} [stripLocalSelectors=false] - This option will remove the local selectors (those that map to system variables) from the output leaving only the system definitions.
- * @property {(identifierValue: string, identifierName: string) => string} [processIdentifier] - A function that processes the identifier value and creates a new selector
-*/
-
-/** @type import('postcss').PluginCreator */
-module.exports = ({
- selectorPrefix,
- skipMapping = false,
- preserveVariables = true,
- referencesOnly = false,
- stripLocalSelectors = false,
- processIdentifier,
-}) => ({
- postcssPlugin: "postcss-add-theming-layer",
- OnceExit(root, { Rule, Declaration }) {
- // Fallback function to process the identifier value and create a new selector
- if (typeof processIdentifier !== "function") {
- // If the base prefix exists and differs from the identifier value, append the identifier value to the base prefix as the new class name
- processIdentifier = (identifierValue) => selectorPrefix && selectorPrefix !== identifierValue ? `.${selectorPrefix}--${identifierValue}` : `.${identifierValue}`;
- }
-
- // This object will store the mappings for each selector
- const systemMap = new Map();
- const conversionMap = new Map();
-
- // Step 1: loop over all the container style queries and create a new selector for each
- // to be used as a theming toggle for components where style queries are not natively supported
- // @todo should there be a support check around this?
- root.walkAtRules(/container/, (container) => {
- if (skipMapping) {
- if (preserveVariables) {
- // Iterate over each rule in the container and append them to the root
- container.walkRules((rule) => {
- root.insertAfter(root.first, rule);
- });
- }
-
- container.remove();
- return;
- }
-
- // Extract the custom property name and it's value to use in creating the new selector
- // Identifier name is the prefix used for the custom properties created for the bridge
- // Identifier value is used to create the new selector
- const [, identifierName, identifierValue] = container.params.match(
- /\(\s*--(.*?)\s*[:=]\s*(.*?)\s*\)/
- );
-
- const selectorMap = systemMap.get(identifierName) ?? {};
-
- // Create a new rule using this selector to attach the new system-level custom properties
- let rule;
-
- // If we're only interested in references, we can skip the next step of appending the new rule
- if (!referencesOnly) {
- rule = new Rule({
- selector: processIdentifier(identifierValue, identifierName),
- source: container.source,
- });
-
- container.parent.insertAfter(container, rule);
- }
-
- // Iterate over each custom property in the container to create a new mapping that supports the new selector
- container.walkDecls(/^--[A-Z|a-z]/, (decl) => {
- selectorParser((selectors) => {
- selectors.each((s) => {
- // Check if the property is already mapped
- const variableName = getVariableName(s, decl.prop, {
- identifierName,
- identifierValue,
- selectorPrefix
- });
-
- const newDecl = decl.clone({
- prop: variableName,
- });
- newDecl.raws.before = "\n ";
-
- const uniqueSet = conversionMap.get(decl.prop) ?? new Set();
- conversionMap.set(decl.prop, uniqueSet.add(variableName));
-
- if (!referencesOnly) {
- rule.append(newDecl);
- }
-
- const selector = s.toString();
- selectorMap[selector] = selectorMap[selector] ?? {};
-
- const selectorNode = selectorMap[selector];
-
- // Check for fallbacks in the var() function
- const fallbackValue = extractFallbackValue(decl.value);
- if (fallbackValue) {
- // The final declaration should have the override present
- selectorNode[decl.prop] = `var(${fallbackValue}, var(${variableName}))`;
-
- // The system-level declaration should only have the fallback
- newDecl.value = `var(${fallbackValue})`;
- }
- else {
- selectorNode[decl.prop] = `var(${variableName})`;
- }
-
- selectorMap[selector] = selectorNode;
- });
- }).processSync(decl.parent.selector, { lossless: false });
- });
-
- systemMap.set(identifierName, selectorMap);
-
- if (rule) {
- rule.walkDecls((decl) => {
- const convertedProps = [...conversionMap.keys()];
-
- if (!convertedProps.some((key) => decl.value.includes(key))) return;
-
- // loop over all the updated properties and update internal references to the new variables
- for (let [prop, mappedValues] of conversionMap.entries()) {
- // Check if this key exists in the value
- if (!decl.value.match(new RegExp(`${prop}[^-]`))) continue;
-
- const systemValues = [...mappedValues];
-
- // If there is only one system variable, replace all instances of the prop with the system variable
- if (systemValues.length === 1) {
- decl.value = decl.value.replace(new RegExp(prop, "g"), systemValues[0]);
- continue;
- }
-
- const replacement = checkForReplacement(decl, prop, [
- `--${identifierName}-${cleanPropertyName(prop, { selectorPrefix })}`,
- ], systemValues);
-
- if (replacement) {
- decl.value = replacement;
- continue;
- }
-
- // @note: this will be an empty variable because we didn't find a match but it will match the format of the other variables
- decl.value = decl.value.replace(new RegExp(decl.prop, "g"), `--${identifierName}-${cleanPropertyName(decl.prop, { selectorPrefix })}`);
- }
- });
- }
-
- container.remove();
- });
-
- // Our job here is done
- if (skipMapping || stripLocalSelectors) return;
-
- const rules = [];
- for (let [, selectorMap] of systemMap.entries()) {
- // This adds the new selectors to the root with their respective system-level mappings
- for (let [selector, props] of Object.entries(selectorMap)) {
- const rule = new Rule({ selector });
-
- for (let [prop, value] of Object.entries(props)) {
- const decl = new Declaration({ prop, value });
- decl.raws.before = "\n ";
-
- rule.append(decl);
- }
-
- rules.push(rule);
- }
- }
-
- // Insert the new rules in order after the first rule in the root
- root.append(rules);
- },
-});
-
-module.exports.postcss = true;
diff --git a/plugins/postcss-add-theming-layer/package.json b/plugins/postcss-add-theming-layer/package.json
deleted file mode 100644
index baf25437dd4..00000000000
--- a/plugins/postcss-add-theming-layer/package.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "name": "@spectrum-tools/postcss-add-theming-layer",
- "version": "1.0.2",
- "description": "Leveraging style container queries to create an abstraction layer for supporting multiple theming systems",
- "license": "Apache-2.0",
- "author": "Adobe",
- "contributors": [
- "Cassondra Roberts "
- ],
- "homepage": "https://opensource.adobe.com/spectrum-css/",
- "repository": {
- "type": "git",
- "url": "https://github.com/adobe/spectrum-css.git",
- "directory": "plugins/postcss-add-theming-layer"
- },
- "bugs": {
- "url": "https://github.com/adobe/spectrum-css/issues"
- },
- "main": "index.js",
- "files": [
- "package.json",
- "index.js",
- "*.md"
- ],
- "dependencies": {
- "postcss-selector-parser": "^6.1.2",
- "postcss-values-parser": "^6.0.2"
- },
- "peerDependencies": {
- "postcss": ">=8"
- },
- "devDependencies": {
- "ava": "^6.2.0",
- "c8": "^10.1.3",
- "postcss": "^8.5.3"
- },
- "keywords": [
- "css",
- "theming",
- "custom properties",
- "postcss",
- "postcss-plugin"
- ]
-}
diff --git a/plugins/postcss-add-theming-layer/project.json b/plugins/postcss-add-theming-layer/project.json
deleted file mode 100644
index 7797edce0f8..00000000000
--- a/plugins/postcss-add-theming-layer/project.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
- "$schema": "../../node_modules/nx/schemas/project-schema.json",
- "name": "postcss-add-theming-layer",
- "tags": ["tooling", "postcss"],
- "targets": {
- "format": {
- "defaultConfiguration": "plugins"
- },
- "lint": {
- "defaultConfiguration": "plugins"
- },
- "test": {
- "defaultConfiguration": "plugins"
- }
- }
-}
diff --git a/plugins/postcss-add-theming-layer/test.js b/plugins/postcss-add-theming-layer/test.js
deleted file mode 100644
index ed431c85f20..00000000000
--- a/plugins/postcss-add-theming-layer/test.js
+++ /dev/null
@@ -1,43 +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.
- */
-
-const fs = require("fs");
-const test = require("ava");
-const postcss = require("postcss");
-const plugin = require("./index.js");
-
-function compare(
- t,
- fixtureFilePath,
- expectedFilePath,
- options = {}
-) {
- return postcss([plugin(options)])
- .process(readFile(`./fixtures/${fixtureFilePath}`), {
- from: fixtureFilePath,
- })
- .then((result) => {
- const actual = result.css;
- const expected = readFile(`./expected/${expectedFilePath}`);
- t.is(actual, expected);
- t.is(result.warnings().length, 0);
- });
-}
-
-function readFile(filename) {
- return fs.readFileSync(filename, "utf8");
-}
-
-test("create basic output", (t) => {
- return compare(t, "basic.css", "basic.css");
-});
diff --git a/plugins/postcss-add-theming-layer/utilities.js b/plugins/postcss-add-theming-layer/utilities.js
deleted file mode 100644
index 0988f27ce38..00000000000
--- a/plugins/postcss-add-theming-layer/utilities.js
+++ /dev/null
@@ -1,244 +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.
- */
-
-const valuesParser = require("postcss-values-parser");
-
-/**
- * Clean the property name to be used as a variable name
- * @param {string} prop
- * @param {{ selectorPrefix: string }} options
- * @returns {string} The clean variable name
- */
-function cleanPropertyName(prop, { selectorPrefix = "" } = {}) {
- if (!prop) return;
- return (
- prop
- // Remove the provided prefix if used
- .replace(new RegExp(selectorPrefix, "gi"), "")
- // Remove mod from the new property name
- .replace(/-?mod-/g, "-")
- // Remove state-based prefix
- .replace(/is-/g, "")
- // Remove the internal identifier marker
- .replace(/^_/g, "")
- // If a string has a lowercase letter followed by an uppercase letter, insert a dash between them
- .replace(/([a-z])([A-Z])/g, "$1-$2")
- // If a string has two uppercase letters followed by a lowercase letter, insert a dash between them
- .replace(/([A-Z])([A-Z])([a-z])/g, "$1-$2$3")
- .replace(/([a-z])([0-9])/g, "$1-$2")
- // Remove all whitespace
- .replace(/\s+/g, "")
- // Remove non-alphanumeric characters
- .replace(/\W/g, "-")
- // Replace multiple dashes with a single dash
- .replace(/-+/g, "-")
- // Remove any leading or trailing dashes
- .replace(/^-/g, "")
- .replace(/-$/g, "")
- .toLowerCase()
- );
-}
-
-/**
- * Extract the fallback value from a var() function
- * @param {string} declValue
- * @returns {string} The fallback value
- */
-function extractFallbackValue(declValue) {
- const parsed = valuesParser.parse(declValue);
- let fallbackValue;
-
- parsed.walk((node) => {
- if (node.type !== "func" || node.value !== "var") {
- return;
- }
-
- // Assuming the second argument of the var() function is the fallback
- const fallbackNode = node.nodes[2];
- if (fallbackNode) {
- // Convert the fallback node back to a string
- fallbackValue = valuesParser.stringify(fallbackNode);
- }
- });
-
- return fallbackValue;
-}
-
-/**
- * Get the base selector for a given selector
- * @param {string} selector
- * @param {{ selectorPrefix: string }} options
- * @returns {string} The base selector
- */
-function getBaseSelector(selector, { selectorPrefix = "" } = {}) {
- let baseSelector;
-
- if (!selector || !selector.nodes) return baseSelector;
-
- // This regex is designed to pull spectrum- out of a selector
- const baseRegex = new RegExp(
- `^(${selectorPrefix ? `${selectorPrefix}-` : ""}[A-Z][^\\W-.\\s]+)`,
- );
-
- // Iterate over the selector nodes to find a common root class name
- const found = [];
- selector.each((node) => {
- if (node.type !== "class") return;
- if (!node.value) return;
-
- const value = node.value ?? node.toString();
- const matches = value.match(baseRegex);
- if (!matches) return;
-
- const [, foundSelector] = matches;
- if (foundSelector) found.push(foundSelector);
- });
-
- if (found.length === 1) {
- return cleanPropertyName(found[0], { selectorPrefix });
- }
-
- let countMap = new Map();
-
- // Find and return the most common base selector in the array
- found.forEach((s) => countMap.set(s, (countMap.get(s) || 0) + 1));
-
- let count = 0;
- for (let [s, c] of countMap.entries()) {
- if (c > count) {
- baseSelector = s;
- count = c;
- }
- }
-
- // Remove the selector prefix from the returned base selector
- return baseSelector ? cleanPropertyName(baseSelector, { selectorPrefix }) : baseSelector;
-}
-
-/**
- * Fallback function to process the name of the new variable
- * @param {string} selector
- * @param {string} prop
- * @param {{ identifierName: string, identifierValue: string, selectorPrefix: string }} options
- * @returns {string} The new variable name
- */
-function getVariableName(
- selector,
- prop,
- { selectorPrefix = "", identifierName, identifierValue } = {},
-) {
- const baseSelector = getBaseSelector(selector, { selectorPrefix }) ?? "";
-
- const clean = (prop) =>
- prop &&
- cleanPropertyName(
- prop
- .replace(new RegExp(selectorPrefix, "gi"), "")
- // Remove the identifers if they exist
- .replace(new RegExp(baseSelector, "gi"), "")
- // Check for identifiers in the property name that don't include the dash
- .replace(new RegExp(baseSelector?.replace(/-/g, ""), "gi"), "")
- .replace(new RegExp(identifierName, "gi"), "")
- .replace(new RegExp(identifierValue, "gi"), ""),
- { selectorPrefix }
- );
-
- let property = [];
-
- function processSelector(node) {
- if (node.type === "pseudo") {
- property.push(node.value.slice(1));
- }
- else if (node.type === "tag") {
- property.push(node.value);
- }
- else if (node.type === "combinator") {
- switch (node.value) {
- case " ": // Descendant combinator
- break;
- case ">":
- property.push("child-of");
- break;
- case "+":
- property.push("next-to");
- break;
- case "~":
- property.push("sibling-of");
- break;
- }
- }
- else if (node.type === "class") {
- if (node.value === baseSelector) return;
- property.push(clean(node.value));
- return;
- }
-
- if (!node.nodes) return;
- node.each(processSelector);
- }
-
- selector.each(processSelector);
-
- // Dedupe the property array, removing the 2nd instance of a property
- property = property
- .filter((value, index) => property.indexOf(value) === index)
- .filter(Boolean);
-
- return `--${[identifierName, baseSelector, clean([...property, prop].filter(Boolean).join("-"))].filter(Boolean).join("-").toLowerCase()}`;
-}
-
-/**
- * Check for a replacement value based on the provided guesses
- * @param {import('postcss').Declaration} decl
- * @param {string} replace
- * @param {string[]} guesses
- * @param {string[]} systemValues
- * @returns {string|undefined|void} The updated declaration value
- */
-function checkForReplacement(
- decl,
- replace,
- guesses = [],
- systemValues = [],
-) {
- if (!decl || !replace || guesses.length === 0) return;
-
- const replacer = new RegExp(replace, "g");
-
- for (const g of guesses) {
- if (systemValues.includes(g)) {
- return decl.value.replace(replacer, g);
- }
-
- const values = systemValues.filter((value) => value.startsWith(g));
- if (values.length === 0) continue;
-
- if (values.length === 1) {
- return decl.value.replace(replacer, values[0]);
- }
-
- if (values.length > 1) {
- return decl.value.replace(replacer, values[0]);
- }
-
- continue;
- }
-}
-
-module.exports = {
- cleanPropertyName,
- extractFallbackValue,
- getBaseSelector,
- getVariableName,
- checkForReplacement,
-};
diff --git a/plugins/postcss-property-rollup/CHANGELOG.md b/plugins/postcss-property-rollup/CHANGELOG.md
deleted file mode 100644
index cfcc225c5d1..00000000000
--- a/plugins/postcss-property-rollup/CHANGELOG.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Change log
-
-## 0.0.1
-
-### Patch Changes
-
-📝 [#3541](https://github.com/adobe/spectrum-css/pull/3541) [`1a3245c`](https://github.com/adobe/spectrum-css/commit/1a3245c3a660bc52ed260f18b6cceab5ee81541d) Thanks [@castastrophe](https://github.com/castastrophe)!
-
-- Dependency alignment across the project.
-
- Set component peerDependencies as optional to reduce console warnings on downstream projects.
-
-## 2.0.1
-
-### Patch Changes
-
-📝 [#2775](https://github.com/adobe/spectrum-css/pull/2775) [`2452637`](https://github.com/adobe/spectrum-css/commit/2452637d1179b9b2b025dafeb5834720712413d7) Thanks [@castastrophe](https://github.com/castastrophe)!
-
-- Dependency minor and patch updates to support new features in tools leveraged
-
-## 2.0.0
-
-🗓 2024-01-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/postcss-combininator@1.0.2...postcss-combininator@2.0.0)
-
-### 🛑 BREAKING CHANGE
-
-Upgrade to PostCSS v8 [bd6c40e](https://github.com/adobe/spectrum-css/commit/bd6c40eb5a4b43df94dff1f325502e5cd08b7f5f)
-
-## 1.0.2
-
-🗓 2023-04-25 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/postcss-combininator@1.0.0...postcss-combininator@1.0.2)
-
-**Note:** Version bump only for package postcss-combininator
-
-## 1.0.1
-
-🗓 2023-04-25 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/postcss-combininator@1.0.0...postcss-combininator@1.0.1)
-
-**Note:** Version bump only for package postcss-combininator
-
-## 1.0.0
-
-🗓 2023-03-27
-
-**Note:** Version bump only for package postcss-combininator
diff --git a/plugins/postcss-property-rollup/README.md b/plugins/postcss-property-rollup/README.md
deleted file mode 100644
index a7a653d2a1b..00000000000
--- a/plugins/postcss-property-rollup/README.md
+++ /dev/null
@@ -1,74 +0,0 @@
-# postcss-property-rollup
-
-> Combines multiple blocks of custom properties
-
-## Installation
-
-```sh
-npm install postcss-property-rollup
-```
-
-## Usage
-
-On the command line:
-
-```sh
-postcss -u postcss-property-rollup -o dist/index.css src/index.css
-```
-
-or in the PostCSS configuration:
-
-```js
-module.exports = {
- plugins: {
- "postcss-property-rollup": {},
- },
-};
-```
-
-This plugin turns this:
-
-```css
-.lorem {
- --spectrum-actionbutton-background-color: blue;
- --spectrum-actionbutton-border-color: transparent;
-}
-
-.ipsum {
- --spectrum-actionbutton-background-color: purple;
-}
-```
-
-Into this:
-
-```css
-.ipsum {
- --spectrum-actionbutton-border-color: transparent;
- --spectrum-actionbutton-background-color: purple;
-}
-```
-
-The resulting selector comes from the last rule unless a `newSelector` option is provided, and all duplicate properties in the subsequent rules override the previous declarations.
-
-## Options
-
-### `newSelector`
-
-Type: `string`
- *
- * 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.
- */
-
-/**
- * @typedef Options
- * @property ignore {string[]} - List of selectors to ignore
- * @property newSelector {string} - New selector to create with the combined declarations
- */
-
-/** @type import('postcss').PluginCreator */
-module.exports = ({
- ignore = [],
- newSelector,
-} = {}) => {
- return {
- postcssPlugin: "postcss-property-rollup",
- OnceExit(root, { Rule }) {
- let shouldCombine = false;
- let localSelector;
- // Check the file for a comment with @combine and fetch the preceeding selector(s)
- root.walkComments((comment) => {
- if (!comment.text.includes("@combine")) return;
-
- shouldCombine = true;
-
- // Remove the @combine from the string
- const selectors = comment.text.replace("@combine", "").trim();
-
- comment.remove();
-
- if (!selectors) return;
-
- // Prefer the selectors from the comment over one provided in the config
- if (!localSelector) localSelector = selectors;
- });
-
- if (!shouldCombine) return;
-
- if (localSelector) newSelector = localSelector;
-
- const rules = [];
- const declarations = {};
-
- root.walkRules((rule) => {
- if (ignore.includes(rule.selector)) return;
- rules.push(rule);
- rule.walkDecls(/^--/, (decl) => {
- declarations[decl.prop] = decl;
- decl.remove();
- });
- });
-
- if (!rules.length) return;
-
- if (newSelector) {
- // Create a new rule with the combined declarations
- const newRule = new Rule({ selector: newSelector });
- for (const decl of Object.values(declarations)) {
- newRule.append(decl);
- }
- root.append(newRule);
-
- // Remove the rules from the root
- rules.forEach((rule) => {
- rule.remove();
- });
-
- return;
- }
-
- // If no new selector is provided, combine the declarations into the last rule
- const lastIdx = rules.length - 1;
- const lastRule = rules[lastIdx];
-
- if (!lastRule) return;
-
- rules.forEach((rule, index) => {
- if (index !== lastIdx) rule.remove();
- });
-
- for (const decl of Object.values(declarations)) {
- lastRule.append(decl);
- }
- },
- };
-};
-
-module.exports.postcss = true;
diff --git a/plugins/postcss-property-rollup/package.json b/plugins/postcss-property-rollup/package.json
deleted file mode 100644
index 1c909722236..00000000000
--- a/plugins/postcss-property-rollup/package.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
- "name": "@spectrum-tools/postcss-property-rollup",
- "version": "0.0.1",
- "description": "Combines custom properties from multiple selectors into a single selector",
- "license": "Apache-2.0",
- "author": "Adobe",
- "contributors": [
- "Cassondra Roberts "
- ],
- "homepage": "https://opensource.adobe.com/spectrum-css/",
- "repository": {
- "type": "git",
- "url": "https://github.com/adobe/spectrum-css.git",
- "directory": "plugins/postcss-property-rollup"
- },
- "bugs": {
- "url": "https://github.com/adobe/spectrum-css/issues"
- },
- "main": "index.js",
- "files": [
- "package.json",
- "index.js",
- "*.md"
- ],
- "peerDependencies": {
- "postcss": ">=8"
- },
- "devDependencies": {
- "ava": "^6.2.0",
- "c8": "^10.1.3",
- "postcss": "^8.5.3"
- },
- "keywords": [
- "css",
- "theming",
- "custom properties",
- "postcss",
- "postcss-plugin"
- ]
-}
diff --git a/plugins/postcss-property-rollup/project.json b/plugins/postcss-property-rollup/project.json
deleted file mode 100644
index 681869f7a14..00000000000
--- a/plugins/postcss-property-rollup/project.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
- "$schema": "../../node_modules/nx/schemas/project-schema.json",
- "name": "postcss-property-rollup",
- "tags": ["tooling", "postcss"],
- "targets": {
- "format": {
- "defaultConfiguration": "plugins"
- },
- "lint": {
- "defaultConfiguration": "plugins"
- },
- "test": {
- "defaultConfiguration": "plugins"
- }
- }
-}
diff --git a/plugins/postcss-property-rollup/test.js b/plugins/postcss-property-rollup/test.js
deleted file mode 100644
index 2e2923f7b91..00000000000
--- a/plugins/postcss-property-rollup/test.js
+++ /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.
- */
-
-const fs = require("fs");
-const test = require("ava");
-const postcss = require("postcss");
-const plugin = require("./index.js");
-
-function compare(
- t,
- fixtureFilePath,
- expectedFilePath,
- options = {
- processIdentifier: (identifier) => {
- if (identifier === "express") {
- return "spectrum--express";
- }
- return identifier;
- },
- }
-) {
- return postcss([plugin(options)])
- .process(readFile(`./fixtures/${fixtureFilePath}`), {
- from: fixtureFilePath,
- })
- .then((result) => {
- const actual = result.css;
- const expected = readFile(`./expected/${expectedFilePath}`);
- t.is(actual, expected);
- t.is(result.warnings().length, 0);
- });
-}
-
-function readFile(filename) {
- return fs.readFileSync(filename, "utf8");
-}
-
-test("create basic output", (t) => {
- return compare(t, "basic.css", "basic.css");
-});
diff --git a/plugins/postcss-rgb-mapping/index.js b/plugins/postcss-rgb-mapping/index.js
index 155a1c68cfe..248c928e991 100644
--- a/plugins/postcss-rgb-mapping/index.js
+++ b/plugins/postcss-rgb-mapping/index.js
@@ -24,7 +24,7 @@ function rgbMappingFunction ({
colorFunctionalNotation = false,
}) {
return {
- postcssPlugin: "postcss-rgb-mapping",
+ postcssPlugin: "@spectrum-tools/postcss-rgb-mapping",
/** @type {import('postcss').DeclarationProcessor} */
Declaration(decl, { Warning }) {
const { prop, value } = decl;
diff --git a/plugins/stylelint-no-missing-var/CHANGELOG.md b/plugins/stylelint-no-missing-var/CHANGELOG.md
index a222116b019..fc2214fb983 100644
--- a/plugins/stylelint-no-missing-var/CHANGELOG.md
+++ b/plugins/stylelint-no-missing-var/CHANGELOG.md
@@ -4,7 +4,9 @@
### Patch Changes
-- [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! - Minor dependency updates to align with the larger project.
+📝 [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+- Minor dependency updates to align with the larger project.
## 2.0.1
diff --git a/plugins/stylelint-no-unknown-custom-properties/CHANGELOG.md b/plugins/stylelint-no-unknown-custom-properties/CHANGELOG.md
index 4d2d09b6cac..9b66e2074f8 100644
--- a/plugins/stylelint-no-unknown-custom-properties/CHANGELOG.md
+++ b/plugins/stylelint-no-unknown-custom-properties/CHANGELOG.md
@@ -4,7 +4,9 @@
### Patch Changes
-- [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! - Minor dependency updates to align with the larger project.
+📝 [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+- Minor dependency updates to align with the larger project.
## 2.0.2
diff --git a/plugins/stylelint-no-unknown-custom-properties/index.js b/plugins/stylelint-no-unknown-custom-properties/index.js
index 443af61c20e..69ec3f8ad67 100644
--- a/plugins/stylelint-no-unknown-custom-properties/index.js
+++ b/plugins/stylelint-no-unknown-custom-properties/index.js
@@ -30,7 +30,6 @@ const messages = ruleMessages(ruleName, {
expected: (prop) => `Custom property ${prop.magenta} not defined`,
});
-import fg from "fast-glob";
import { parse } from "postcss";
import valuesParser from "postcss-values-parser";
@@ -71,14 +70,6 @@ const ruleFunction = (enabled, options = {}) => {
const sharedDefinitions = new Set();
- for (const themePath of fg.sync(["themes/*.css"], { cwd: componentRoot, absolute: true })) {
- const content = readFileSync(themePath, "utf8");
- if (!content) continue;
- parse(content).walkDecls(/^--/, ({ prop }) => {
- sharedDefinitions.add(prop);
- });
- }
-
function fetchResolutions(depName) {
let req;
try {
diff --git a/plugins/stylelint-no-unused-custom-properties/CHANGELOG.md b/plugins/stylelint-no-unused-custom-properties/CHANGELOG.md
index 3d00882fc9d..364204278d1 100644
--- a/plugins/stylelint-no-unused-custom-properties/CHANGELOG.md
+++ b/plugins/stylelint-no-unused-custom-properties/CHANGELOG.md
@@ -4,7 +4,9 @@
### Patch Changes
-- [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! - Minor dependency updates to align with the larger project.
+📝 [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+- Minor dependency updates to align with the larger project.
## 2.0.4
diff --git a/plugins/stylelint-theme-alignment/CHANGELOG.md b/plugins/stylelint-theme-alignment/CHANGELOG.md
deleted file mode 100644
index 86056dd1405..00000000000
--- a/plugins/stylelint-theme-alignment/CHANGELOG.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Change log
-
-## 1.2.1
-
-### Patch Changes
-
-- [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! - Minor dependency updates to align with the larger project.
-
-## 1.2.0
-
-### Minor Changes
-
-📝 [#3502](https://github.com/adobe/spectrum-css/pull/3502) [`562396e`](https://github.com/adobe/spectrum-css/commit/562396eaf21769341f78ea3761393b65f00e751b) Thanks [@castastrophe](https://github.com/castastrophe)!
-
-- Fixes a bug where the source file is expected to be "spectrum-two" instead of "spectrum".
-
-## 1.1.0
-
-### Minor Changes
-
-📝 [#3403](https://github.com/adobe/spectrum-css/pull/3403) [`48626b8`](https://github.com/adobe/spectrum-css/commit/48626b8ca11043d290c0fe987ec501b88bd6e339) Thanks [@castastrophe](https://github.com/castastrophe)!
-
-- Allow the base filename to be passed into the tool so that the core theme can be updated. Great preparations for S2 roll-out when spectrum-two.css theme files will become our primary source of theme content.
-
-## 1.0.0
-
-### Major Changes
-
-📝 [#3026](https://github.com/adobe/spectrum-css/pull/3026) [`544a803`](https://github.com/adobe/spectrum-css/commit/544a8039e84423a4db3137a0688f27b7812e291f) Thanks [@castastrophe](https://github.com/castastrophe)!
-
-- Initial release of the stylelint theme alignment tool. This package uses the base file (themes/spectrum.css) for a Spectrum CSS component as a "source of truth" and validates the sub-themes (i.e., themes/express.css) use only selectors and custom properties defined in the base file.
diff --git a/plugins/stylelint-theme-alignment/README.md b/plugins/stylelint-theme-alignment/README.md
deleted file mode 100644
index 1aa58cd7fa4..00000000000
--- a/plugins/stylelint-theme-alignment/README.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# stylelint-no-unused-custom-properties
-
-> Remove or report on unused variable definitions
-
-## Installation
-
-```sh
-yarn add -D @spectrum-tools/stylelint-no-unused-custom-properties
-```
-
-## Usage
-
-Assuming you have some variables defined and rule(s) that use them:
-
-```css
-:root {
- --prefix-component-background-color: blue;
- --prefix-component-width: 10px;
- --prefix-component-height: 10px;
- --prefix-component-size: 10px;
-}
-
-.component {
- background-color: var(--prefix-component-background-color);
-
- width: var(--prefix-component-width);
- height: var(--prefix-component-height);
-}
-```
-
-The variables that are not used in any rule will be removed from the output or reported to the console:
-
-```css
-:root {
- --prefix-component-background-color: blue;
- --prefix-component-width: 10px;
- --prefix-component-height: 10px;
-}
-
-.component {
- background-color: var(--prefix-component-background-color);
-
- width: var(--prefix-component-width);
- height: var(--prefix-component-height);
-}
-```
-
-To allow variables to be defined without being used, such as when you want to pass custom properties down to a child component, you can add a `/* @passthrough */` comment to the variable definition:
-
-```css
-:root {
- /* @passthrough */
- --nested-component-background-color: blue;
- --prefix-component-width: 10px;
- --prefix-component-height: 10px;
- --prefix-component-size: 10px;
-}
-```
-
-To allow a group of properties to be passed down, you can prefix the set with `/* @passthrough start */` and suffix it with `/* @passthrough end */`:
-
-```css
-:root {
- /* @passthrough start */
- --nested-component-background-color: blue;
- --nested-component-width: 10px;
- /* @passthrough end */
-
- --prefix-component-height: 10px;
- --prefix-component-size: 10px;
-}
-```
-
-## Options
-
-### `ignoreList` (default: `[]`)
-
-An array of strings or regular expressions that will be matched against the variable name. If a match is found, the variable will be ignored.
diff --git a/plugins/stylelint-theme-alignment/index.js b/plugins/stylelint-theme-alignment/index.js
deleted file mode 100644
index 98653a2225a..00000000000
--- a/plugins/stylelint-theme-alignment/index.js
+++ /dev/null
@@ -1,158 +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 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.
- */
-
-import fs from "node:fs";
-import { basename, relative, sep } from "node:path";
-
-import postcss from "postcss";
-import valuesParser from "postcss-values-parser";
-import stylelint from "stylelint";
-import { isString } from "stylelint/lib/utils/validateTypes.mjs";
-
-const {
- createPlugin,
- utils: { report, ruleMessages, validateOptions }
-} = stylelint;
-
-import "colors";
-
-const ruleName = "spectrum-tools/theme-alignment";
-const messages = ruleMessages(ruleName, {
- missing: (baseFile, sourceFile, rootPath) => `A base file (${relative(rootPath, baseFile)}) is required to validate ${relative(rootPath, sourceFile)}.`,
- // Report if a selector is in this file but not in the base file
- expected: (selector, baseFile, rootPath) => `Selector "${selector}" is not used or defined in the base file (${relative(rootPath, baseFile)}).`,
- // Report if a custom property is used in this file but not in the base file
- referenced: (property, baseFile, rootPath) => `Custom property "${property}" is not used or defined by the base file (${relative(rootPath, baseFile)}).`,
-});
-
-/** @type {import('stylelint').Plugin} */
-const ruleFunction = (enabled, options = {}) => {
- return (root, result) => {
- const validOptions = validateOptions(
- result,
- ruleName,
- {
- actual: enabled,
- possible: [true],
- },
- {
- actual: options,
- possible: {
- baseFilename: isString,
- },
- optional: true,
- },
- );
-
- if (!validOptions) return;
-
-
- const { baseFilename = "spectrum" } = options;
-
- const sourceFile = root.source.input.file;
- const parts = sourceFile ? sourceFile.split(sep) : [];
- const isTheme = parts[parts.length - 2] === "themes";
- const filename = parts[parts.length - 1];
-
- if (!isTheme || basename(filename, ".css") === baseFilename) return;
-
- // All the parts of the source file but replace the filename with the baseFilename
- const baseFile = [...parts.slice(0, -1), `${baseFilename}.css`].join(sep);
- const rootPath = parts.slice(0, -2).join(sep);
-
- // If the base file doesn't exist, throw an error
- if (!fs.existsSync(baseFile)) {
- report({
- message: messages.missing,
- messageArgs: [baseFile, sourceFile, rootPath],
- node: root,
- result,
- ruleName,
- });
- return;
- }
-
- // Read in the base file and parse it
- const baseContent = fs.readFileSync(baseFile, "utf8");
- const baseRoot = postcss.parse(baseContent);
-
- /* A list of all selectors in the base file */
- const baseSelectors = new Set();
- /* A list of all properties in the base file */
- const baseProperties = new Set();
-
- /* Iterate over selectors in the base root */
- baseRoot.walkRules((rule) => {
- rule.selectors.forEach((selector) => {
- // Add this selector to the selectors set
- baseSelectors.add(selector);
- });
-
- rule.walkDecls((decl) => {
- // If this is a custom property, add it to the properties set
- if (decl.prop.startsWith("--")) {
- baseProperties.add(decl.prop);
- }
-
- // If the value of this declaration includes a custom property, add it to the properties set
- const parsed = valuesParser.parse(decl.value);
- parsed.walk((node) => {
- if (node.type === "func" && node.value === "var") {
- baseProperties.add(node.nodes[0].value);
- }
- });
- });
- });
-
- /* Iterate over selectors in the source root and validate that they align with the base */
- root.walkRules((rule) => {
- rule.selectors.forEach((selector) => {
- // Check if this selector exists in the base
- if (!baseSelectors.has(selector)) {
- // Report any selectors that don't exist in the base
- report({
- message: messages.expected,
- messageArgs: [selector, baseFile, rootPath],
- node: rule,
- result,
- ruleName,
- });
- return;
- }
- });
-
- rule.walkDecls((decl) => {
- const isProperty = decl.prop.startsWith("--");
- // @todo should report that this is setting something other than a custom property in the theme file
- if (!isProperty) {
- return;
- }
-
- // If this is a custom property, check if it's used in the base
- if (!baseProperties.has(decl.prop)) {
- report({
- message: messages.referenced,
- messageArgs: [decl.prop, baseFile, rootPath],
- node: decl,
- result,
- ruleName,
- });
- }
- });
- });
- };
-};
-
-ruleFunction.ruleName = ruleName;
-ruleFunction.messages = messages;
-
-export default createPlugin(ruleName, ruleFunction);
diff --git a/plugins/stylelint-theme-alignment/package.json b/plugins/stylelint-theme-alignment/package.json
deleted file mode 100644
index 38e269695b0..00000000000
--- a/plugins/stylelint-theme-alignment/package.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "name": "@spectrum-tools/stylelint-theme-alignment",
- "version": "1.2.1",
- "description": "A utility to ensure that all custom properties are intially defined in a core resource file and all subsequent uses leverage only values defined there first.",
- "license": "Apache-2.0",
- "author": "Adobe",
- "contributors": [
- "Cassondra Roberts "
- ],
- "homepage": "https://opensource.adobe.com/spectrum-css",
- "repository": {
- "type": "git",
- "url": "https://github.com/adobe/spectrum-css.git",
- "directory": "plugins/stylelint-theme-alignment"
- },
- "bugs": {
- "url": "https://github.com/adobe/spectrum-css/issues"
- },
- "type": "module",
- "main": "index.js",
- "files": [
- "package.json",
- "index.js",
- "*.md"
- ],
- "dependencies": {
- "colors": "^1.4.0",
- "postcss": "^8.5.3",
- "postcss-values-parser": "^6.0.2"
- },
- "peerDependencies": {
- "stylelint": ">=16"
- },
- "devDependencies": {
- "stylelint": "^16.15.0"
- },
- "keywords": [
- "css",
- "lint",
- "properties",
- "report",
- "stylelint-plugin"
- ]
-}
diff --git a/plugins/stylelint-theme-alignment/project.json b/plugins/stylelint-theme-alignment/project.json
deleted file mode 100644
index 90709f217ad..00000000000
--- a/plugins/stylelint-theme-alignment/project.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "$schema": "../../node_modules/nx/schemas/project-schema.json",
- "name": "stylelint-theme-alignment",
- "tags": ["tooling", "stylelint"],
- "targets": {
- "format": {
- "defaultConfiguration": "plugins"
- },
- "lint": {
- "defaultConfiguration": "plugins"
- }
- }
-}
diff --git a/postcss.config.js b/postcss.config.js
index d30bb25de04..5e4804ed0d5 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -15,12 +15,7 @@ const fs = require("node:fs");
const { join, basename } = require("node:path");
module.exports = ({
- skipMapping = false,
- referencesOnly = false,
- preserveVariables = true,
- stripLocalSelectors = false,
resolveImports = true,
- shouldCombine = false,
lint = true,
verbose = true,
minify = false,
@@ -84,19 +79,6 @@ module.exports = ({
prefix: "is-"
} : false,
"postcss-hover-media-feature": {},
- /* --------------------------------------------------- */
- /* ------------------- VARIABLE PARSING -------------- */
- "@spectrum-tools/postcss-add-theming-layer": {
- selectorPrefix: "spectrum",
- skipMapping,
- preserveVariables,
- referencesOnly,
- stripLocalSelectors,
- debug: verbose,
- },
- "@spectrum-tools/postcss-property-rollup": shouldCombine ? {
- newSelector: ".spectrum",
- } : false,
...additionalPlugins,
/* --------------------------------------------------- */
/* ------------------- POLYFILLS --------------------- */
diff --git a/schemas/metadata.schema.json b/schemas/metadata.schema.json
index c91ce98e0f2..1352f802900 100644
--- a/schemas/metadata.schema.json
+++ b/schemas/metadata.schema.json
@@ -10,71 +10,54 @@
"pattern": "^.+\\.css$",
"description": "The path to the source file used in generating the metadata."
},
- "selectors": {
- "description": "These are the selectors available for the component.",
- "type": "array",
- "items": {
- "type": "string"
- }
- },
- "modifiers": {
- "description": "These are the modifiers available for the component.",
- "type": "array",
- "items": {
- "type": "string",
- "pattern": "^--mod-"
- }
- },
- "component": {
- "description": "The component-level custom properties for the component.",
- "type": "array",
- "items": {
- "type": "string",
- "pattern": "^--spectrum-"
- }
- },
- "global": {
- "description": "The global custom properties used in this component as generated by the design tokens.",
- "type": "array",
- "items": {
- "type": "string",
- "pattern": "^--spectrum-"
- }
- },
- "system-theme": {
- "description": "The system theme hooks created by the postcss tooling to allow theme toggling on a component.",
- "type": "array",
- "items": {
- "type": "string",
- "pattern": "^--system-"
- }
- },
- "passthroughs": {
- "description": "Modifier custom properties for nested components that are passed through by this component.",
- "type": "array",
- "items": {
- "type": "string",
- "pattern": "^--mod-"
- }
- },
- "high-contrast": {
- "description": "Custom properties that allow high-contrast styles to be applied to the component.",
- "type": "array",
- "items": {
- "type": "string",
- "pattern": "^--highcontrast-"
- }
- }
+ "selectors": {
+ "description": "These are the selectors available for the component.",
+ "type": "array",
+ "items": {
+ "type": "string"
+ }
+ },
+ "modifiers": {
+ "description": "These are the modifiers available for the component.",
+ "type": "array",
+ "items": {
+ "type": "string",
+ "pattern": "^--mod-"
+ }
+ },
+ "component": {
+ "description": "The component-level custom properties for the component.",
+ "type": "array",
+ "items": {
+ "type": "string",
+ "pattern": "^--spectrum-"
+ }
+ },
+ "global": {
+ "description": "The global custom properties used in this component as generated by the design tokens.",
+ "type": "array",
+ "items": {
+ "type": "string",
+ "pattern": "^--spectrum-"
+ }
+ },
+ "passthroughs": {
+ "description": "Modifier custom properties for nested components that are passed through by this component.",
+ "type": "array",
+ "items": {
+ "type": "string",
+ "pattern": "^--mod-"
+ }
+ },
+ "high-contrast": {
+ "description": "Custom properties that allow high-contrast styles to be applied to the component.",
+ "type": "array",
+ "items": {
+ "type": "string",
+ "pattern": "^--highcontrast-"
+ }
+ }
},
- "required": [
- "sourceFile",
- "selectors",
- "modifiers",
- "component",
- "global",
- "system-theme",
- "passthroughs",
- "high-contrast"
- ],
+ "required": ["sourceFile", "selectors", "modifiers", "component", "global", "passthroughs", "high-contrast"],
"additionalProperties": false
}
diff --git a/stylelint.config.js b/stylelint.config.js
index 2d5c9697c84..0a8ad1f507c 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -11,7 +11,6 @@ module.exports = {
"@spectrum-tools/stylelint-no-missing-var",
"@spectrum-tools/stylelint-no-unused-custom-properties",
"@spectrum-tools/stylelint-no-unknown-custom-properties",
- "@spectrum-tools/stylelint-theme-alignment",
// "stylelint-high-performance-animation",
],
rules: {
@@ -150,7 +149,6 @@ module.exports = {
* Local/custom plugins
* -------------------------------------------------------------- */
"spectrum-tools/no-missing-var": true,
- "spectrum-tools/theme-alignment": null,
"spectrum-tools/no-unused-custom-properties": null,
"spectrum-tools/no-unknown-custom-properties": null,
},
@@ -208,21 +206,6 @@ module.exports = {
"custom-property-pattern": [/^(spectrum|color|scale|system)/, {}],
}
},
- {
- /* Validate that the legacy themes don't introduce any new selectors or custom properties */
- files: ["components/*/themes/*.css", "!components/*/themes/spectrum.css"],
- rules: {
- "spectrum-tools/no-unused-custom-properties": null,
- "selector-class-pattern": [
- "^(spectrum-|is-|u-)[A-Za-z0-9-]+", {
- resolveNestedSelectors: true
- }
- ],
- "spectrum-tools/theme-alignment": [true, {
- baseFilename: "spectrum-two",
- }],
- },
- },
{
/* Allow "tree shaking" of unused custom properties in the bundle */
files: ["tools/bundle/**/*.css"],
diff --git a/tasks/clean-up-after-migration.sh b/tasks/clean-up-after-migration.sh
index 101f07e82ee..f04cb29e10c 100644
--- a/tasks/clean-up-after-migration.sh
+++ b/tasks/clean-up-after-migration.sh
@@ -13,11 +13,6 @@
# After migrating from our old build system, there are a lot of empty folders hanging out still
# This script aims to clean up those folders
-# Legacy tools folder (included storybook & generator)
-# test -d "tools" && rm -rf tools
-
-test -d "tools" && rm -rf tools
-
# Remove deprecated files
for folder in components/*; do
# Only processing nested folders, not top-level files
diff --git a/tasks/component-builder.js b/tasks/component-builder.js
index 93afb637693..6d37af3b6a4 100644
--- a/tasks/component-builder.js
+++ b/tasks/component-builder.js
@@ -196,79 +196,6 @@ async function build({ cwd = process.cwd(), clean = false, minify = false, compo
]);
}
-/**
- * The builder for the individual themes assets
- * @param {object} config
- * @param {string} config.cwd - Current working directory for the component being built
- * @param {boolean} config.clean - Should the built assets be cleaned before running the build
- * @returns Promise
- */
-async function buildThemes({ cwd = process.cwd(), minify = false, clean = false } = {}) {
- // This fetches the content of the files and returns an array of objects with the content and input paths
- const contentData = await fetchContent(["themes/*.css"], { cwd, clean });
-
- // Nothing to do if there's no content
- if (!contentData || contentData.length === 0) return;
-
- const imports = contentData.map(({ input }) => input);
- const importMap = imports.map((i) => `@import "${i}";`).join("\n");
-
- const basePostCSSOptions = {
- cwd,
- clean,
- map: false,
- env: "production",
- lint: false,
- };
-
- const promises = [];
-
- contentData.forEach(async ({ content, input }) => {
- const theme = path.basename(input, ".css");
-
- promises.push(
- processCSS(content, path.join(cwd, input), path.join(cwd, "dist", "themes", `${theme}.css`), {
- ...basePostCSSOptions,
- shouldCombine: true,
- // Only output the new selectors with the system mappings
- stripLocalSelectors: true,
- }),
- minify ? processCSS(content, path.join(cwd, input), path.join(cwd, "dist", "themes", `${theme}.min.css`), {
- ...basePostCSSOptions,
- shouldCombine: true,
- // Only output the new selectors with the system mappings
- stripLocalSelectors: true,
- }) : Promise.resolve(),
- );
- });
-
- promises.push(
- processCSS(undefined, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-base.css"), {
- ...basePostCSSOptions,
- referencesOnly: true,
- // Only output the new selectors with the system mappings
- stripLocalSelectors: true,
- }),
- minify ? processCSS(undefined, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-base.min.css"), {
- ...basePostCSSOptions,
- referencesOnly: true,
- // Only output the new selectors with the system mappings
- stripLocalSelectors: true,
- }) : Promise.resolve(),
- // Expect this file to have component-specific selectors mapping to the system tokens but not the system tokens themselves
- processCSS(importMap, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-theme.css"), {
- ...basePostCSSOptions,
- referencesOnly: true,
- }),
- minify ? processCSS(importMap, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-theme.min.css"), {
- ...basePostCSSOptions,
- referencesOnly: true,
- }) : Promise.resolve(),
- );
-
- return Promise.all(promises);
-}
-
/**
* The main entry point for this tool; this builds a CSS component
* @param {object} config
@@ -304,42 +231,33 @@ async function main({
const key = `[build] ${`@spectrum-css/${componentName}`.cyan}`;
console.time(key);
- // Create the dist directory if it doesn't exist
- if (!fs.existsSync(path.join(cwd, "dist"))) {
- fs.mkdirSync(path.join(cwd, "dist"));
+ const reports = [];
+ const errors = [];
+
+ await build({ cwd, clean, minify }).then((report) => reports.push(report)).catch((err) => errors.push(err));
+
+ const logs = reports.flat(Infinity).filter(Boolean);
+ const errs = errors.flat(Infinity).filter(Boolean);
+
+ console.log(`\n\n${key} 🔨`);
+ console.log(`${"".padStart(30, "-")}`);
+
+ if (errs && errs.length > 0) {
+ errs.forEach((err) => console.error(err));
+ }
+ else {
+ if (logs && logs.length > 0) {
+ logs.forEach((log) => console.log(log));
+ }
+ else console.log("No assets created.".gray);
}
- return Promise.all([
- build({ cwd, clean, minify }),
- buildThemes({ cwd, clean, minify }),
- ])
- .then((report) => {
- const logs = report.flat(Infinity).filter(Boolean);
-
- console.log(`\n\n${key} 🔨`);
- console.log(`${"".padStart(30, "-")}`);
-
- if (logs && logs.length > 0) {
- logs.forEach((log) => console.log(log));
- }
- else console.log("No assets created.".gray);
-
- console.log(`${"".padStart(30, "-")}`);
- console.timeEnd(key);
- console.log("");
- })
- .catch((err) => {
- console.log(`\n\n${key} 🔨`);
- console.log(`${"".padStart(30, "-")}`);
-
- console.trace(err);
-
- console.log(`${"".padStart(30, "-")}`);
- console.timeEnd(key);
- console.log("");
-
- process.exit(1);
- });
+ console.log(`${"".padStart(30, "-")}`);
+ console.timeEnd(key);
+ console.log("");
+
+ if (errs && errs.length > 0) process.exit(1);
+ else process.exit(0);
}
exports.processCSS = processCSS;
diff --git a/tasks/component-reporter.js b/tasks/component-reporter.js
index 444449c833a..379256b9107 100644
--- a/tasks/component-reporter.js
+++ b/tasks/component-reporter.js
@@ -66,6 +66,9 @@ async function extractModifiers(
const selectors = new Set();
const root = postcss.parse(content);
root.walkRules((rule) => {
+ // Check that the selector is not inside a keyframe
+ if (rule.parent.type === "atrule" && rule.parent.name === "keyframes") return;
+
if (rule.selectors) {
rule.selectors.forEach((selector) => {
// If the selector is not a base selector, add it to the set
@@ -170,10 +173,6 @@ async function main({
const processed = await processCSS(undefined, sourceCSS, undefined, {
cwd,
- skipMapping: false,
- referencesOnly: false,
- preserveVariables: true,
- stripLocalSelectors: false,
map: false,
env: "production",
});
@@ -184,11 +183,10 @@ async function main({
cwd,
sourcePath: sourceCSS,
componentName,
- baseSelectors: [".spectrum", ".spectrum--express", ".spectrum--legacy"],
+ baseSelectors: [".spectrum"],
dataModel: {
modifiers: ["mod"],
spectrum: ["spectrum"],
- "system-theme": ["system"],
"high-contrast": ["highcontrast"],
},
}
@@ -203,7 +201,6 @@ async function main({
modifiers: meta.modifiers,
component: meta.component,
global: meta.global,
- "system-theme": meta["system-theme"],
passthroughs: meta.passthroughs,
"high-contrast": meta["high-contrast"],
}, null, 2),
diff --git a/tasks/templates/diff-preview.njk b/tasks/templates/diff-preview.njk
index dc90d09a576..468a77ed93c 100644
--- a/tasks/templates/diff-preview.njk
+++ b/tasks/templates/diff-preview.njk
@@ -7,11 +7,11 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ui-icons/dist/svg/Arrow100.svg b/ui-icons/dist/svg/Arrow100.svg
new file mode 100644
index 00000000000..a6c433499cd
--- /dev/null
+++ b/ui-icons/dist/svg/Arrow100.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Arrow400.svg b/ui-icons/dist/svg/Arrow400.svg
new file mode 100644
index 00000000000..af171ce0e68
--- /dev/null
+++ b/ui-icons/dist/svg/Arrow400.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Asterisk100.svg b/ui-icons/dist/svg/Asterisk100.svg
new file mode 100644
index 00000000000..af668563976
--- /dev/null
+++ b/ui-icons/dist/svg/Asterisk100.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Asterisk200.svg b/ui-icons/dist/svg/Asterisk200.svg
new file mode 100644
index 00000000000..91754591db9
--- /dev/null
+++ b/ui-icons/dist/svg/Asterisk200.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Asterisk300.svg b/ui-icons/dist/svg/Asterisk300.svg
new file mode 100644
index 00000000000..3cbd7e379f5
--- /dev/null
+++ b/ui-icons/dist/svg/Asterisk300.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Checkmark100.svg b/ui-icons/dist/svg/Checkmark100.svg
new file mode 100644
index 00000000000..6d082e8f7f3
--- /dev/null
+++ b/ui-icons/dist/svg/Checkmark100.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Checkmark200.svg b/ui-icons/dist/svg/Checkmark200.svg
new file mode 100644
index 00000000000..8aae373b1c5
--- /dev/null
+++ b/ui-icons/dist/svg/Checkmark200.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Checkmark300.svg b/ui-icons/dist/svg/Checkmark300.svg
new file mode 100644
index 00000000000..bdcc9296de7
--- /dev/null
+++ b/ui-icons/dist/svg/Checkmark300.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Checkmark400.svg b/ui-icons/dist/svg/Checkmark400.svg
new file mode 100644
index 00000000000..9400f42a2a3
--- /dev/null
+++ b/ui-icons/dist/svg/Checkmark400.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Checkmark50.svg b/ui-icons/dist/svg/Checkmark50.svg
new file mode 100644
index 00000000000..704b869ecce
--- /dev/null
+++ b/ui-icons/dist/svg/Checkmark50.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Checkmark75.svg b/ui-icons/dist/svg/Checkmark75.svg
new file mode 100644
index 00000000000..9b0c902d8a2
--- /dev/null
+++ b/ui-icons/dist/svg/Checkmark75.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Chevron100.svg b/ui-icons/dist/svg/Chevron100.svg
new file mode 100644
index 00000000000..5edaf03b675
--- /dev/null
+++ b/ui-icons/dist/svg/Chevron100.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Chevron200.svg b/ui-icons/dist/svg/Chevron200.svg
new file mode 100644
index 00000000000..f6f23faf52c
--- /dev/null
+++ b/ui-icons/dist/svg/Chevron200.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Chevron300.svg b/ui-icons/dist/svg/Chevron300.svg
new file mode 100644
index 00000000000..06ad2ade3f5
--- /dev/null
+++ b/ui-icons/dist/svg/Chevron300.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Chevron400.svg b/ui-icons/dist/svg/Chevron400.svg
new file mode 100644
index 00000000000..f8a01dbcabb
--- /dev/null
+++ b/ui-icons/dist/svg/Chevron400.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Chevron50.svg b/ui-icons/dist/svg/Chevron50.svg
new file mode 100644
index 00000000000..6c80a8c3080
--- /dev/null
+++ b/ui-icons/dist/svg/Chevron50.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Chevron75.svg b/ui-icons/dist/svg/Chevron75.svg
new file mode 100644
index 00000000000..1913da9f1cd
--- /dev/null
+++ b/ui-icons/dist/svg/Chevron75.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/CornerTriangle100.svg b/ui-icons/dist/svg/CornerTriangle100.svg
new file mode 100644
index 00000000000..8b45d75972a
--- /dev/null
+++ b/ui-icons/dist/svg/CornerTriangle100.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/CornerTriangle200.svg b/ui-icons/dist/svg/CornerTriangle200.svg
new file mode 100644
index 00000000000..73f555eeb10
--- /dev/null
+++ b/ui-icons/dist/svg/CornerTriangle200.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/CornerTriangle300.svg b/ui-icons/dist/svg/CornerTriangle300.svg
new file mode 100644
index 00000000000..f3e396f8d19
--- /dev/null
+++ b/ui-icons/dist/svg/CornerTriangle300.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/CornerTriangle75.svg b/ui-icons/dist/svg/CornerTriangle75.svg
new file mode 100644
index 00000000000..adc2a60646c
--- /dev/null
+++ b/ui-icons/dist/svg/CornerTriangle75.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Cross100.svg b/ui-icons/dist/svg/Cross100.svg
new file mode 100644
index 00000000000..c29d221fd64
--- /dev/null
+++ b/ui-icons/dist/svg/Cross100.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Cross200.svg b/ui-icons/dist/svg/Cross200.svg
new file mode 100644
index 00000000000..303de9df8d4
--- /dev/null
+++ b/ui-icons/dist/svg/Cross200.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Cross300.svg b/ui-icons/dist/svg/Cross300.svg
new file mode 100644
index 00000000000..cf60cae4390
--- /dev/null
+++ b/ui-icons/dist/svg/Cross300.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Cross400.svg b/ui-icons/dist/svg/Cross400.svg
new file mode 100644
index 00000000000..17ae1b7cae5
--- /dev/null
+++ b/ui-icons/dist/svg/Cross400.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Cross500.svg b/ui-icons/dist/svg/Cross500.svg
new file mode 100644
index 00000000000..e315377ec13
--- /dev/null
+++ b/ui-icons/dist/svg/Cross500.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Cross600.svg b/ui-icons/dist/svg/Cross600.svg
new file mode 100644
index 00000000000..ac09b6343ca
--- /dev/null
+++ b/ui-icons/dist/svg/Cross600.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Cross75.svg b/ui-icons/dist/svg/Cross75.svg
new file mode 100644
index 00000000000..e13a110f942
--- /dev/null
+++ b/ui-icons/dist/svg/Cross75.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Dash100.svg b/ui-icons/dist/svg/Dash100.svg
new file mode 100644
index 00000000000..b999e39178a
--- /dev/null
+++ b/ui-icons/dist/svg/Dash100.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Dash200.svg b/ui-icons/dist/svg/Dash200.svg
new file mode 100644
index 00000000000..ad1fb7fd198
--- /dev/null
+++ b/ui-icons/dist/svg/Dash200.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Dash300.svg b/ui-icons/dist/svg/Dash300.svg
new file mode 100644
index 00000000000..088990ab145
--- /dev/null
+++ b/ui-icons/dist/svg/Dash300.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Dash50.svg b/ui-icons/dist/svg/Dash50.svg
new file mode 100644
index 00000000000..3a364e588a1
--- /dev/null
+++ b/ui-icons/dist/svg/Dash50.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/dist/svg/Dash75.svg b/ui-icons/dist/svg/Dash75.svg
new file mode 100644
index 00000000000..c0df96d142b
--- /dev/null
+++ b/ui-icons/dist/svg/Dash75.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/ui-icons/index.js b/ui-icons/index.js
index 884926f2215..b1eb8257727 100644
--- a/ui-icons/index.js
+++ b/ui-icons/index.js
@@ -1,118 +1,169 @@
-const fs = require('fs');
+const fs = require("fs");
const fsp = fs.promises;
-const path = require('path');
-
-const fg = require('fast-glob');
-const { optimize } = require('svgo');
-const combine = require('svgcombiner');
-const svgstore = require('svgstore');
-
-async function setupIconStores() {
- const stores = new Map();
- stores.set('all', svgstore());
-
- for (const variant of await fg(['*'], {
- cwd: __dirname,
- ignore: ['dist', 'node_modules'],
- onlyDirectories: true,
- })) {
- stores.set(variant, svgstore());
- }
-
- return stores;
-}
-
-async function main() {
- // Not using svgo's loadConfig because it doesn't support dynamic config files
- const getSvgoConfig = require('./svgo.config.js');
-
- // Hash to hold all icons arranged by processed name
- const icons = new Map();
- const stores = await setupIconStores();
- const variants = [...stores.keys()].filter((key) => key !== 'all');
-
- const files = await fg([`{${variants.join(',')}}/*.svg`], {
- cwd: __dirname,
- onlyFiles: true,
- });
-
- const promises = [];
- for (const file of files) {
- const assetName = path.basename(file, '.svg');
-
- // Capture metadata about the icon from the path and filename
- const variant = path.dirname(file);
-
- // Read in the SVG contents
- const contents = await fsp.readFile(file, 'utf-8');
- const result = optimize(contents, getSvgoConfig({ clean: true }));
+const path = require("path");
- icons.set(assetName, {
- ...(icons.has(assetName) ? icons.get(assetName) : {}),
- [variant]: result.data,
- });
+const fg = require("fast-glob");
+const { optimize } = require("svgo");
- stores.get(variant).add(assetName, result.data);
+const svgstore = require("svgstore");
- const dest = path.join(__dirname, 'dist', file);
- if (!fs.existsSync(path.dirname(dest))) {
- fs.mkdirSync(path.dirname(dest), { recursive: true });
- }
+// Not using svgo's loadConfig because it doesn't support dynamic config files
+const getSvgoConfig = require("./svgo.config.js");
- promises.push(fsp.writeFile(dest, result.data));
- }
+/**
+ * @description Clean the file name
+ */
+const cleanFileName = (file) => {
+ return file.replace(/^S2_/, "").replace(/Size/, "");
+};
- // Wait for all the SVG content to be read in and processed before continuing
- await Promise.all(promises);
+/**
+ * @description Process the SVG assets using svgo config settings
+ */
+async function processSVG(filePath, destPath) {
+ if (!fs.existsSync(filePath)) return;
- if (icons.size === 0) return;
+ // Read in the SVG contents
+ const contents = await fsp.readFile(filePath, "utf-8");
+ const result = optimize(contents, getSvgoConfig({
+ clean: true
+ }));
- // For each entry in the map, combine the SVG variants into a single SVG file with multiple symbols
- promises.length = 0;
- [...icons.entries()].map(([iconName, data]) => {
- // Combine the SVG variants into a single SVG file with multiple symbols
- const contents = combine(iconName, data);
+ if (!result?.data) return;
- // Add the combined SVG to the "all" store so we can generate a single SVG file with all icons
- stores.get('all').add(iconName, contents);
+ const assetName = cleanFileName(path.basename(filePath, ".svg"));
- // Write the combined SVG to the dist folder
- const destPath = path.join(__dirname, 'dist/combined');
- if (!fs.existsSync(destPath)) fs.mkdirSync(destPath, { recursive: true });
-
- promises.push(fsp.writeFile(path.join(destPath, `${iconName}.svg`), optimize(contents, getSvgoConfig())?.data));
- });
-
- // Finally, we write out the stores to disk
- for (const [identifier, store] of stores.entries()) {
- const isFullSet = identifier === 'all';
- const filename = isFullSet ? 'spectrum-css-icons' : `spectrum-css-icons-${identifier}`;
- const dest = path.join(__dirname, `dist/${filename}.svg`);
- const config = getSvgoConfig(
- isFullSet
- ? {
- idPrefix: 'spectrum-css-icon',
- removeViewBox: true,
- }
- : {},
- );
-
- const result = optimize(store.toString(), config);
+ return fsp.writeFile(path.join(destPath, `${assetName}.svg`), result.data);
+}
- if (!result?.data) continue;
+/**
+ * @description Attempts to fetch icon assets from their source
+ */
+async function copySVGs() {
+ let source;
+
+ // workflow icons: @a4u/a4u-s2-icon-global-set-open-source-processed
+ try {
+ source = require.resolve("@a4u/a4u-s2-ui-icon-global-set", {
+ paths: [process.cwd(), path.join(__dirname, ".."), "~/"]
+ });
+ }
+ catch (e) { /* empty */ }
+
+ if (!source) return Promise.resolve();
+
+ const sourcePath = path.join(path.dirname(source), "assets");
+ if (!fs.existsSync(sourcePath)) return Promise.resolve();
+
+ const files = await fg(["svg/*.svg"], {
+ cwd: sourcePath,
+ onlyFiles: true,
+ });
+
+ if (!files || files.length === 0) return Promise.resolve();
+
+ const outputPath = path.join(__dirname, "dist", "svg");
+
+ if (fs.existsSync(outputPath)) {
+ // Remove existing assets to replace them fully with the new ones
+ fs.rmdirSync(outputPath, {
+ force: true,
+ recursive: true
+ });
+ }
+
+ // Recreate the folder to store the new assets
+ await fsp.mkdir(outputPath, {
+ force: true,
+ recursive: true
+ });
+
+ return Promise.all(
+ files.map(file =>
+ processSVG(
+ path.join(sourcePath, file),
+ outputPath
+ )
+ )
+ );
+}
- promises.push(fsp.writeFile(dest, result?.data));
- }
+/**
+ * @description A custom alpha-numeric sort
+ * @param {string} a
+ * @param {string} b
+ * @returns number
+ */
+function alphaNumericSort (a, b) {
+ const aSet = a.match(/^([a-z]+)([0-9]+)\.svg$/i);
+ const bSet = b.match(/^([a-z]+)([0-9]+)\.svg$/i);
+ const aChar = aSet[1];
+ const bChar = bSet[1];
+
+ if (aChar !== bChar) return aChar > bChar ? 1 : -1;
+
+ const aInt = parseInt(aSet[2] ?? 0);
+ const bInt = parseInt(bSet[2] ?? 0);
+ return aInt - bInt;
+}
- return Promise.all(promises);
+async function main() {
+ // This can only be run by an Adobe employee on the VPN with appropriate access configured on their machine
+ await copySVGs();
+
+ // Hash to hold all icons arranged by processed name
+ const icons = [];
+ const store = svgstore();
+
+ const files = await fg(["*.svg"], {
+ cwd: path.join(__dirname, "dist", "svg"),
+ onlyFiles: true,
+ });
+
+ if (!files || files.length === 0) {
+ return Promise.resolve("No assets detected.");
+ }
+
+ /** Sorting here controls the order in which entries are added to the store
+ * such that they print in the same order every time; preventing unnecessary diffs */
+ for (const file of files.sort(alphaNumericSort)) {
+ const assetName = path.basename(file, ".svg");
+ if (icons.includes(`${assetName}.svg`)) {
+ // eslint-disable-next-line no-console
+ console.log(`⚠️ The icon set already includes an icon with the name ${assetName}.`);
+ }
+ else icons.push(`${assetName}.svg`);
+
+ const content = await fsp.readFile(path.join(__dirname, "dist", "svg", file), { encoding: "utf-8" });
+ store.add(assetName, content);
+ }
+
+ // Write the icon array to icons.json as a resource
+ await fsp.writeFile(path.join(__dirname, "dist", "icons.json"), JSON.stringify(icons.sort(alphaNumericSort), null, 2));
+
+ // Finally, we write out the store to disk
+ const dest = path.join(__dirname, "dist", "spectrum-css-icons.svg");
+ const config = getSvgoConfig({
+ idPrefix: "spectrum-css-icon",
+ removeViewBox: true,
+ });
+
+ const result = optimize(store.toString(), config);
+
+ if (!result?.data) {
+ return Promise.reject("Encountered an error optimizing SVG assets via svgo.");
+ }
+
+ return fsp.writeFile(dest, result?.data);
}
main()
- .then(() => {
- console.log('✔ Icons generated successfully.');
- process.exit(0);
- })
- .catch((e) => {
- console.error(e);
- process.exit(1);
- });
+ .then(() => {
+ // eslint-disable-next-line no-console
+ console.log("✔ Icons generated successfully.");
+ process.exit(0);
+ })
+ .catch((e) => {
+ console.error(e);
+ process.exit(1);
+ });
diff --git a/ui-icons/large/Arrow100.svg b/ui-icons/large/Arrow100.svg
deleted file mode 100644
index af57dc15a22..00000000000
--- a/ui-icons/large/Arrow100.svg
+++ /dev/null
@@ -1 +0,0 @@
-, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin":
- version: 1.22.8
- resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin::version=1.22.8&hash=c3c19d"
+ version: 1.22.10
+ resolution: "resolve@patch:resolve@npm%3A1.22.10#optional!builtin::version=1.22.10&hash=c3c19d"
dependencies:
- is-core-module: "npm:^2.13.0"
+ is-core-module: "npm:^2.16.0"
path-parse: "npm:^1.0.7"
supports-preserve-symlinks-flag: "npm:^1.0.0"
bin:
resolve: bin/resolve
- checksum: 10c0/0446f024439cd2e50c6c8fa8ba77eaa8370b4180f401a96abf3d1ebc770ac51c1955e12764cde449fde3fff480a61f84388e3505ecdbab778f4bef5f8212c729
+ checksum: 10c0/52a4e505bbfc7925ac8f4cd91fd8c4e096b6a89728b9f46861d3b405ac9a1ccf4dcbf8befb4e89a2e11370dacd0160918163885cbc669369590f2f31f4c58939
languageName: node
linkType: hard
@@ -18220,16 +18220,6 @@ __metadata:
languageName: node
linkType: hard
-"restore-cursor@npm:^4.0.0":
- version: 4.0.0
- resolution: "restore-cursor@npm:4.0.0"
- dependencies:
- onetime: "npm:^5.1.0"
- signal-exit: "npm:^3.0.2"
- checksum: 10c0/6f7da8c5e422ac26aa38354870b1afac09963572cf2879443540449068cb43476e9cbccf6f8de3e0171e0d6f7f533c2bc1a0a008003c9a525bbc098e89041318
- languageName: node
- linkType: hard
-
"restore-cursor@npm:^5.0.0":
version: 5.1.0
resolution: "restore-cursor@npm:5.1.0"
@@ -18273,13 +18263,13 @@ __metadata:
linkType: hard
"rimraf@npm:^5.0.5":
- version: 5.0.9
- resolution: "rimraf@npm:5.0.9"
+ version: 5.0.10
+ resolution: "rimraf@npm:5.0.10"
dependencies:
glob: "npm:^10.3.7"
bin:
rimraf: dist/esm/bin.mjs
- checksum: 10c0/87374682492b9e64de9c6fcbf2c8f209c7a2cd0e9749b3732eef8a62c6f859a9ed996d46f662d9ad5dd38c2c469f8e88de56b6c509026070ee3f06369cac1bc8
+ checksum: 10c0/7da4fd0e15118ee05b918359462cfa1e7fe4b1228c7765195a45b55576e8c15b95db513b8466ec89129666f4af45ad978a3057a02139afba1a63512a2d9644cc
languageName: node
linkType: hard
@@ -18306,26 +18296,29 @@ __metadata:
linkType: hard
"rollup@npm:^4.20.0":
- version: 4.22.4
- resolution: "rollup@npm:4.22.4"
- dependencies:
- "@rollup/rollup-android-arm-eabi": "npm:4.22.4"
- "@rollup/rollup-android-arm64": "npm:4.22.4"
- "@rollup/rollup-darwin-arm64": "npm:4.22.4"
- "@rollup/rollup-darwin-x64": "npm:4.22.4"
- "@rollup/rollup-linux-arm-gnueabihf": "npm:4.22.4"
- "@rollup/rollup-linux-arm-musleabihf": "npm:4.22.4"
- "@rollup/rollup-linux-arm64-gnu": "npm:4.22.4"
- "@rollup/rollup-linux-arm64-musl": "npm:4.22.4"
- "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.22.4"
- "@rollup/rollup-linux-riscv64-gnu": "npm:4.22.4"
- "@rollup/rollup-linux-s390x-gnu": "npm:4.22.4"
- "@rollup/rollup-linux-x64-gnu": "npm:4.22.4"
- "@rollup/rollup-linux-x64-musl": "npm:4.22.4"
- "@rollup/rollup-win32-arm64-msvc": "npm:4.22.4"
- "@rollup/rollup-win32-ia32-msvc": "npm:4.22.4"
- "@rollup/rollup-win32-x64-msvc": "npm:4.22.4"
- "@types/estree": "npm:1.0.5"
+ version: 4.34.8
+ resolution: "rollup@npm:4.34.8"
+ dependencies:
+ "@rollup/rollup-android-arm-eabi": "npm:4.34.8"
+ "@rollup/rollup-android-arm64": "npm:4.34.8"
+ "@rollup/rollup-darwin-arm64": "npm:4.34.8"
+ "@rollup/rollup-darwin-x64": "npm:4.34.8"
+ "@rollup/rollup-freebsd-arm64": "npm:4.34.8"
+ "@rollup/rollup-freebsd-x64": "npm:4.34.8"
+ "@rollup/rollup-linux-arm-gnueabihf": "npm:4.34.8"
+ "@rollup/rollup-linux-arm-musleabihf": "npm:4.34.8"
+ "@rollup/rollup-linux-arm64-gnu": "npm:4.34.8"
+ "@rollup/rollup-linux-arm64-musl": "npm:4.34.8"
+ "@rollup/rollup-linux-loongarch64-gnu": "npm:4.34.8"
+ "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.34.8"
+ "@rollup/rollup-linux-riscv64-gnu": "npm:4.34.8"
+ "@rollup/rollup-linux-s390x-gnu": "npm:4.34.8"
+ "@rollup/rollup-linux-x64-gnu": "npm:4.34.8"
+ "@rollup/rollup-linux-x64-musl": "npm:4.34.8"
+ "@rollup/rollup-win32-arm64-msvc": "npm:4.34.8"
+ "@rollup/rollup-win32-ia32-msvc": "npm:4.34.8"
+ "@rollup/rollup-win32-x64-msvc": "npm:4.34.8"
+ "@types/estree": "npm:1.0.6"
fsevents: "npm:~2.3.2"
dependenciesMeta:
"@rollup/rollup-android-arm-eabi":
@@ -18336,6 +18329,10 @@ __metadata:
optional: true
"@rollup/rollup-darwin-x64":
optional: true
+ "@rollup/rollup-freebsd-arm64":
+ optional: true
+ "@rollup/rollup-freebsd-x64":
+ optional: true
"@rollup/rollup-linux-arm-gnueabihf":
optional: true
"@rollup/rollup-linux-arm-musleabihf":
@@ -18344,6 +18341,8 @@ __metadata:
optional: true
"@rollup/rollup-linux-arm64-musl":
optional: true
+ "@rollup/rollup-linux-loongarch64-gnu":
+ optional: true
"@rollup/rollup-linux-powerpc64le-gnu":
optional: true
"@rollup/rollup-linux-riscv64-gnu":
@@ -18364,7 +18363,7 @@ __metadata:
optional: true
bin:
rollup: dist/bin/rollup
- checksum: 10c0/4c96b6e2e0c5dbe73b4ba899cea894a05115ab8c65ccff631fbbb944e2b3a9f2eb3b99c2dce3dd91b179647df1892ffc44ecee29381ccf155ba8000b22712a32
+ checksum: 10c0/b9e711e33413112fbb761107c3fddc4561dfc74335c393542a829a85ccfb2763bfd17bf2422d84a2e9bee7646e5367018973e97005fdf64e49c2e209612f0eb6
languageName: node
linkType: hard
@@ -18413,23 +18412,24 @@ __metadata:
linkType: hard
"rxjs@npm:^7.2.0, rxjs@npm:^7.5.6, rxjs@npm:^7.8.1":
- version: 7.8.1
- resolution: "rxjs@npm:7.8.1"
+ version: 7.8.2
+ resolution: "rxjs@npm:7.8.2"
dependencies:
tslib: "npm:^2.1.0"
- checksum: 10c0/3c49c1ecd66170b175c9cacf5cef67f8914dcbc7cd0162855538d365c83fea631167cacb644b3ce533b2ea0e9a4d0b12175186985f89d75abe73dbd8f7f06f68
+ checksum: 10c0/1fcd33d2066ada98ba8f21fcbbcaee9f0b271de1d38dc7f4e256bfbc6ffcdde68c8bfb69093de7eeb46f24b1fb820620bf0223706cff26b4ab99a7ff7b2e2c45
languageName: node
linkType: hard
-"safe-array-concat@npm:^1.0.0, safe-array-concat@npm:^1.1.2":
- version: 1.1.2
- resolution: "safe-array-concat@npm:1.1.2"
+"safe-array-concat@npm:^1.1.2, safe-array-concat@npm:^1.1.3":
+ version: 1.1.3
+ resolution: "safe-array-concat@npm:1.1.3"
dependencies:
- call-bind: "npm:^1.0.7"
- get-intrinsic: "npm:^1.2.4"
- has-symbols: "npm:^1.0.3"
+ call-bind: "npm:^1.0.8"
+ call-bound: "npm:^1.0.2"
+ get-intrinsic: "npm:^1.2.6"
+ has-symbols: "npm:^1.1.0"
isarray: "npm:^2.0.5"
- checksum: 10c0/12f9fdb01c8585e199a347eacc3bae7b5164ae805cdc8c6707199dbad5b9e30001a50a43c4ee24dc9ea32dbb7279397850e9208a7e217f4d8b1cf5d90129dec9
+ checksum: 10c0/43c86ffdddc461fb17ff8a17c5324f392f4868f3c7dd2c6a5d9f5971713bc5fd755667212c80eab9567595f9a7509cc2f83e590ddaebd1bd19b780f9c79f9a8d
languageName: node
linkType: hard
@@ -18447,14 +18447,24 @@ __metadata:
languageName: node
linkType: hard
-"safe-regex-test@npm:^1.0.3":
- version: 1.0.3
- resolution: "safe-regex-test@npm:1.0.3"
+"safe-push-apply@npm:^1.0.0":
+ version: 1.0.0
+ resolution: "safe-push-apply@npm:1.0.0"
+ dependencies:
+ es-errors: "npm:^1.3.0"
+ isarray: "npm:^2.0.5"
+ checksum: 10c0/831f1c9aae7436429e7862c7e46f847dfe490afac20d0ee61bae06108dbf5c745a0de3568ada30ccdd3eeb0864ca8331b2eef703abd69bfea0745b21fd320750
+ languageName: node
+ linkType: hard
+
+"safe-regex-test@npm:^1.1.0":
+ version: 1.1.0
+ resolution: "safe-regex-test@npm:1.1.0"
dependencies:
- call-bind: "npm:^1.0.6"
+ call-bound: "npm:^1.0.2"
es-errors: "npm:^1.3.0"
- is-regex: "npm:^1.1.4"
- checksum: 10c0/900bf7c98dc58f08d8523b7012b468e4eb757afa624f198902c0643d7008ba777b0bdc35810ba0b758671ce887617295fb742b3f3968991b178ceca54cb07603
+ is-regex: "npm:^1.2.1"
+ checksum: 10c0/f2c25281bbe5d39cddbbce7f86fca5ea9b3ce3354ea6cd7c81c31b006a5a9fff4286acc5450a3b9122c56c33eba69c56b9131ad751457b2b4a585825e6a10665
languageName: node
linkType: hard
@@ -18491,6 +18501,13 @@ __metadata:
languageName: node
linkType: hard
+"scheduler@npm:^0.25.0":
+ version: 0.25.0
+ resolution: "scheduler@npm:0.25.0"
+ checksum: 10c0/a4bb1da406b613ce72c1299db43759526058fdcc413999c3c3e0db8956df7633acf395cb20eb2303b6a65d658d66b6585d344460abaee8080b4aa931f10eaafe
+ languageName: node
+ linkType: hard
+
"semver@npm:^6.0.0, semver@npm:^6.3.0, semver@npm:^6.3.1":
version: 6.3.1
resolution: "semver@npm:6.3.1"
@@ -18500,16 +18517,7 @@ __metadata:
languageName: node
linkType: hard
-"semver@npm:^7.3.2, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2":
- version: 7.6.3
- resolution: "semver@npm:7.6.3"
- bin:
- semver: bin/semver.js
- checksum: 10c0/88f33e148b210c153873cb08cfe1e281d518aaa9a666d4d148add6560db5cd3c582f3a08ccb91f38d5f379ead256da9931234ed122057f40bb5766e65e58adaf
- languageName: node
- linkType: hard
-
-"semver@npm:^7.7.1":
+"semver@npm:^7.3.2, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2, semver@npm:^7.7.1":
version: 7.7.1
resolution: "semver@npm:7.7.1"
bin:
@@ -18545,7 +18553,7 @@ __metadata:
languageName: node
linkType: hard
-"set-function-length@npm:^1.2.1":
+"set-function-length@npm:^1.2.2":
version: 1.2.2
resolution: "set-function-length@npm:1.2.2"
dependencies:
@@ -18559,7 +18567,7 @@ __metadata:
languageName: node
linkType: hard
-"set-function-name@npm:^2.0.1":
+"set-function-name@npm:^2.0.2":
version: 2.0.2
resolution: "set-function-name@npm:2.0.2"
dependencies:
@@ -18571,6 +18579,17 @@ __metadata:
languageName: node
linkType: hard
+"set-proto@npm:^1.0.0":
+ version: 1.0.0
+ resolution: "set-proto@npm:1.0.0"
+ dependencies:
+ dunder-proto: "npm:^1.0.1"
+ es-errors: "npm:^1.3.0"
+ es-object-atoms: "npm:^1.0.0"
+ checksum: 10c0/ca5c3ccbba479d07c30460e367e66337cec825560b11e8ba9c5ebe13a2a0d6021ae34eddf94ff3dfe17a3104dc1f191519cb6c48378b503e5c3f36393938776a
+ languageName: node
+ linkType: hard
+
"shebang-command@npm:^2.0.0":
version: 2.0.0
resolution: "shebang-command@npm:2.0.0"
@@ -18594,15 +18613,51 @@ __metadata:
languageName: node
linkType: hard
-"side-channel@npm:^1.0.4":
- version: 1.0.6
- resolution: "side-channel@npm:1.0.6"
+"side-channel-list@npm:^1.0.0":
+ version: 1.0.0
+ resolution: "side-channel-list@npm:1.0.0"
dependencies:
- call-bind: "npm:^1.0.7"
es-errors: "npm:^1.3.0"
- get-intrinsic: "npm:^1.2.4"
- object-inspect: "npm:^1.13.1"
- checksum: 10c0/d2afd163dc733cc0a39aa6f7e39bf0c436293510dbccbff446733daeaf295857dbccf94297092ec8c53e2503acac30f0b78830876f0485991d62a90e9cad305f
+ object-inspect: "npm:^1.13.3"
+ checksum: 10c0/644f4ac893456c9490ff388bf78aea9d333d5e5bfc64cfb84be8f04bf31ddc111a8d4b83b85d7e7e8a7b845bc185a9ad02c052d20e086983cf59f0be517d9b3d
+ languageName: node
+ linkType: hard
+
+"side-channel-map@npm:^1.0.1":
+ version: 1.0.1
+ resolution: "side-channel-map@npm:1.0.1"
+ dependencies:
+ call-bound: "npm:^1.0.2"
+ es-errors: "npm:^1.3.0"
+ get-intrinsic: "npm:^1.2.5"
+ object-inspect: "npm:^1.13.3"
+ checksum: 10c0/010584e6444dd8a20b85bc926d934424bd809e1a3af941cace229f7fdcb751aada0fb7164f60c2e22292b7fa3c0ff0bce237081fd4cdbc80de1dc68e95430672
+ languageName: node
+ linkType: hard
+
+"side-channel-weakmap@npm:^1.0.2":
+ version: 1.0.2
+ resolution: "side-channel-weakmap@npm:1.0.2"
+ dependencies:
+ call-bound: "npm:^1.0.2"
+ es-errors: "npm:^1.3.0"
+ get-intrinsic: "npm:^1.2.5"
+ object-inspect: "npm:^1.13.3"
+ side-channel-map: "npm:^1.0.1"
+ checksum: 10c0/71362709ac233e08807ccd980101c3e2d7efe849edc51455030327b059f6c4d292c237f94dc0685031dd11c07dd17a68afde235d6cf2102d949567f98ab58185
+ languageName: node
+ linkType: hard
+
+"side-channel@npm:^1.1.0":
+ version: 1.1.0
+ resolution: "side-channel@npm:1.1.0"
+ dependencies:
+ es-errors: "npm:^1.3.0"
+ object-inspect: "npm:^1.13.3"
+ side-channel-list: "npm:^1.0.0"
+ side-channel-map: "npm:^1.0.1"
+ side-channel-weakmap: "npm:^1.0.2"
+ checksum: 10c0/cb20dad41eb032e6c24c0982e1e5a24963a28aa6122b4f05b3f3d6bf8ae7fd5474ef382c8f54a6a3ab86e0cac4d41a23bd64ede3970e5bfb50326ba02a7996e6
languageName: node
linkType: hard
@@ -18713,40 +18768,40 @@ __metadata:
linkType: hard
"socks-proxy-agent@npm:^8.0.3":
- version: 8.0.4
- resolution: "socks-proxy-agent@npm:8.0.4"
+ version: 8.0.5
+ resolution: "socks-proxy-agent@npm:8.0.5"
dependencies:
- agent-base: "npm:^7.1.1"
+ agent-base: "npm:^7.1.2"
debug: "npm:^4.3.4"
socks: "npm:^2.8.3"
- checksum: 10c0/345593bb21b95b0508e63e703c84da11549f0a2657d6b4e3ee3612c312cb3a907eac10e53b23ede3557c6601d63252103494caa306b66560f43af7b98f53957a
+ checksum: 10c0/5d2c6cecba6821389aabf18728325730504bf9bb1d9e342e7987a5d13badd7a98838cc9a55b8ed3cb866ad37cc23e1086f09c4d72d93105ce9dfe76330e9d2a6
languageName: node
linkType: hard
"socks@npm:^2.8.3":
- version: 2.8.3
- resolution: "socks@npm:2.8.3"
+ version: 2.8.4
+ resolution: "socks@npm:2.8.4"
dependencies:
ip-address: "npm:^9.0.5"
smart-buffer: "npm:^4.2.0"
- checksum: 10c0/d54a52bf9325165770b674a67241143a3d8b4e4c8884560c4e0e078aace2a728dffc7f70150660f51b85797c4e1a3b82f9b7aa25e0a0ceae1a243365da5c51a7
+ checksum: 10c0/00c3271e233ccf1fb83a3dd2060b94cc37817e0f797a93c560b9a7a86c4a0ec2961fb31263bdd24a3c28945e24868b5f063cd98744171d9e942c513454b50ae5
languageName: node
linkType: hard
-"source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.0":
- version: 1.2.0
- resolution: "source-map-js@npm:1.2.0"
- checksum: 10c0/7e5f896ac10a3a50fe2898e5009c58ff0dc102dcb056ed27a354623a0ece8954d4b2649e1a1b2b52ef2e161d26f8859c7710350930751640e71e374fe2d321a4
- languageName: node
- linkType: hard
-
-"source-map-js@npm:^1.2.1":
+"source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.1":
version: 1.2.1
resolution: "source-map-js@npm:1.2.1"
checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf
languageName: node
linkType: hard
+"source-map-js@npm:^1.2.0":
+ version: 1.2.0
+ resolution: "source-map-js@npm:1.2.0"
+ checksum: 10c0/7e5f896ac10a3a50fe2898e5009c58ff0dc102dcb056ed27a354623a0ece8954d4b2649e1a1b2b52ef2e161d26f8859c7710350930751640e71e374fe2d321a4
+ languageName: node
+ linkType: hard
+
"source-map-support@npm:0.5.13":
version: 0.5.13
resolution: "source-map-support@npm:0.5.13"
@@ -18893,7 +18948,7 @@ __metadata:
languageName: node
linkType: hard
-"stdin-discarder@npm:^0.2.1":
+"stdin-discarder@npm:^0.2.2":
version: 0.2.2
resolution: "stdin-discarder@npm:0.2.2"
checksum: 10c0/c78375e82e956d7a64be6e63c809c7f058f5303efcaf62ea48350af072bacdb99c06cba39209b45a071c1acbd49116af30df1df9abb448df78a6005b72f10537
@@ -18901,10 +18956,10 @@ __metadata:
linkType: hard
"storybook@npm:^8.4.7":
- version: 8.4.7
- resolution: "storybook@npm:8.4.7"
+ version: 8.5.8
+ resolution: "storybook@npm:8.5.8"
dependencies:
- "@storybook/core": "npm:8.4.7"
+ "@storybook/core": "npm:8.5.8"
peerDependencies:
prettier: ^2 || ^3
peerDependenciesMeta:
@@ -18914,26 +18969,25 @@ __metadata:
getstorybook: ./bin/index.cjs
sb: ./bin/index.cjs
storybook: ./bin/index.cjs
- checksum: 10c0/795b79950b88b41ee0158fe2e2583a8ce97ff843c054f91e3c55310967b9e5c4e4d72814773380b543c33bd6d57ce6b5f377ce93ce73962e803b250a751be37c
+ checksum: 10c0/a02ccf3132c05341139deb23dd7731191b4542b80d0d4ed772d06f483373be5713e3db1003fddb8823da417c5c9353273032d30d61cfa6084a04b9b33dc764cc
languageName: node
linkType: hard
"streamx@npm:^2.15.0":
- version: 2.18.0
- resolution: "streamx@npm:2.18.0"
+ version: 2.22.0
+ resolution: "streamx@npm:2.22.0"
dependencies:
bare-events: "npm:^2.2.0"
fast-fifo: "npm:^1.3.2"
- queue-tick: "npm:^1.0.1"
text-decoder: "npm:^1.1.0"
dependenciesMeta:
bare-events:
optional: true
- checksum: 10c0/ef50f419252a73dd35abcde72329eafbf5ad9cd2e27f0cc3abebeff6e0dbea124ac6d3e16acbdf081cce41b4125393ac22f9848fcfa19e640830734883e622ba
+ checksum: 10c0/f5017998a5b6360ba652599d20ef308c8c8ab0e26c8e5f624f0706f0ea12624e94fdf1ec18318124498529a1b106a1ab1c94a1b1e1ad6c2eec7cb9c8ac1b9198
languageName: node
linkType: hard
-"string-argv@npm:~0.3.2":
+"string-argv@npm:^0.3.2":
version: 0.3.2
resolution: "string-argv@npm:0.3.2"
checksum: 10c0/75c02a83759ad1722e040b86823909d9a2fc75d15dd71ec4b537c3560746e33b5f5a07f7332d1e3f88319909f82190843aa2f0a0d8c8d591ec08e93d5b8dec82
@@ -19008,7 +19062,7 @@ __metadata:
languageName: node
linkType: hard
-"string-width@npm:^7.0.0":
+"string-width@npm:^7.0.0, string-width@npm:^7.2.0":
version: 7.2.0
resolution: "string-width@npm:7.2.0"
dependencies:
@@ -19019,26 +19073,30 @@ __metadata:
languageName: node
linkType: hard
-"string.prototype.trim@npm:^1.2.9":
- version: 1.2.9
- resolution: "string.prototype.trim@npm:1.2.9"
+"string.prototype.trim@npm:^1.2.10":
+ version: 1.2.10
+ resolution: "string.prototype.trim@npm:1.2.10"
dependencies:
- call-bind: "npm:^1.0.7"
+ call-bind: "npm:^1.0.8"
+ call-bound: "npm:^1.0.2"
+ define-data-property: "npm:^1.1.4"
define-properties: "npm:^1.2.1"
- es-abstract: "npm:^1.23.0"
+ es-abstract: "npm:^1.23.5"
es-object-atoms: "npm:^1.0.0"
- checksum: 10c0/dcef1a0fb61d255778155006b372dff8cc6c4394bc39869117e4241f41a2c52899c0d263ffc7738a1f9e61488c490b05c0427faa15151efad721e1a9fb2663c2
+ has-property-descriptors: "npm:^1.0.2"
+ checksum: 10c0/8a8854241c4b54a948e992eb7dd6b8b3a97185112deb0037a134f5ba57541d8248dd610c966311887b6c2fd1181a3877bffb14d873ce937a344535dabcc648f8
languageName: node
linkType: hard
-"string.prototype.trimend@npm:^1.0.8":
- version: 1.0.8
- resolution: "string.prototype.trimend@npm:1.0.8"
+"string.prototype.trimend@npm:^1.0.9":
+ version: 1.0.9
+ resolution: "string.prototype.trimend@npm:1.0.9"
dependencies:
- call-bind: "npm:^1.0.7"
+ call-bind: "npm:^1.0.8"
+ call-bound: "npm:^1.0.2"
define-properties: "npm:^1.2.1"
es-object-atoms: "npm:^1.0.0"
- checksum: 10c0/0a0b54c17c070551b38e756ae271865ac6cc5f60dabf2e7e343cceae7d9b02e1a1120a824e090e79da1b041a74464e8477e2da43e2775c85392be30a6f60963c
+ checksum: 10c0/59e1a70bf9414cb4c536a6e31bef5553c8ceb0cf44d8b4d0ed65c9653358d1c64dd0ec203b100df83d0413bbcde38b8c5d49e14bc4b86737d74adc593a0d35b6
languageName: node
linkType: hard
@@ -19158,10 +19216,10 @@ __metadata:
languageName: node
linkType: hard
-"strnum@npm:^1.0.5":
- version: 1.0.5
- resolution: "strnum@npm:1.0.5"
- checksum: 10c0/64fb8cc2effbd585a6821faa73ad97d4b553c8927e49086a162ffd2cc818787643390b89d567460a8e74300148d11ac052e21c921ef2049f2987f4b1b89a7ff1
+"strnum@npm:^1.1.1":
+ version: 1.1.1
+ resolution: "strnum@npm:1.1.1"
+ checksum: 10c0/c016034f9896ea99c4a22a8a8142d1ec72dba8d514ddec399f96998d5d2ab9f9e5b6c75c761d9730c3244b794022b1a63ec293f0da41ab0a994e3584020ba1ad
languageName: node
linkType: hard
@@ -19422,15 +19480,6 @@ __metadata:
languageName: node
linkType: hard
-"svgcombiner@npm:^1.0.1":
- version: 1.0.1
- resolution: "svgcombiner@npm:1.0.1"
- dependencies:
- cheerio: "npm:^1.0.0-rc.2"
- checksum: 10c0/1258087f33723967aa7f74f9f2507cf0d254d9b56842bfa663f32ffe3cf6cb6ebbbd705945c938a7e01e4e1cf5753ea03ec78aedc1462220979f09955699324d
- languageName: node
- linkType: hard
-
"svgo@npm:^3.3.2":
version: 3.3.2
resolution: "svgo@npm:3.3.2"
@@ -19467,12 +19516,12 @@ __metadata:
linkType: hard
"synckit@npm:^0.9.1":
- version: 0.9.1
- resolution: "synckit@npm:0.9.1"
+ version: 0.9.2
+ resolution: "synckit@npm:0.9.2"
dependencies:
"@pkgr/core": "npm:^0.1.0"
tslib: "npm:^2.6.2"
- checksum: 10c0/d8b89e1bf30ba3ffb469d8418c836ad9c0c062bf47028406b4d06548bc66af97155ea2303b96c93bf5c7c0f0d66153a6fbd6924c76521b434e6a9898982abc2e
+ checksum: 10c0/e0c262817444e5b872708adb6f5ad37951ba33f6b2d1d4477d45db1f57573a784618ceed5e6614e0225db330632b1f6b95bb74d21e4d013e45ad4bde03d0cb59
languageName: node
linkType: hard
@@ -19578,11 +19627,11 @@ __metadata:
linkType: hard
"text-decoder@npm:^1.1.0":
- version: 1.1.1
- resolution: "text-decoder@npm:1.1.1"
+ version: 1.2.3
+ resolution: "text-decoder@npm:1.2.3"
dependencies:
b4a: "npm:^1.6.4"
- checksum: 10c0/e527d05454b59c0fa77456495de68c88e560a122de3dd28b3ebdbf81828aabeaa7e9bb8054b9eb52bc5029ccb5899ad04f466cbba3c53b2685270599d1710cee
+ checksum: 10c0/569d776b9250158681c83656ef2c3e0a5d5c660c27ca69f87eedef921749a4fbf02095e5f9a0f862a25cf35258379b06e31dee9c125c9f72e273b7ca1a6d1977
languageName: node
linkType: hard
@@ -19636,9 +19685,9 @@ __metadata:
linkType: hard
"tinyexec@npm:^0.3.0":
- version: 0.3.0
- resolution: "tinyexec@npm:0.3.0"
- checksum: 10c0/138a4f4241aea6b6312559508468ab275a31955e66e2f57ed206e0aaabecee622624f208c5740345f0a66e33478fd065e359ed1eb1269eb6fd4fa25d44d0ba3b
+ version: 0.3.2
+ resolution: "tinyexec@npm:0.3.2"
+ checksum: 10c0/3efbf791a911be0bf0821eab37a3445c2ba07acc1522b1fa84ae1e55f10425076f1290f680286345ed919549ad67527d07281f1c19d584df3b74326909eb1f90
languageName: node
linkType: hard
@@ -19826,16 +19875,6 @@ __metadata:
languageName: node
linkType: hard
-"ts-poet@npm:^4.5.0":
- version: 4.15.0
- resolution: "ts-poet@npm:4.15.0"
- dependencies:
- lodash: "npm:^4.17.15"
- prettier: "npm:^2.5.1"
- checksum: 10c0/87ce3589f071a66a9701c88ee830ce778f2e4c43bcfdee9308a8f38bb53b8fb36e7b5900749389b4bb8aaddf67e87043d51c2fbf36ec25aa98bcfff90bf6d742
- languageName: node
- linkType: hard
-
"tsconfig-paths@npm:^4.1.2":
version: 4.2.0
resolution: "tsconfig-paths@npm:4.2.0"
@@ -19847,14 +19886,7 @@ __metadata:
languageName: node
linkType: hard
-"tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.6.2":
- version: 2.6.3
- resolution: "tslib@npm:2.6.3"
- checksum: 10c0/2598aef53d9dbe711af75522464b2104724d6467b26a60f2bdac8297d2b5f1f6b86a71f61717384aa8fd897240467aaa7bcc36a0700a0faf751293d1331db39a
- languageName: node
- linkType: hard
-
-"tslib@npm:^2.8.1":
+"tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.6.2, tslib@npm:^2.8.1":
version: 2.8.1
resolution: "tslib@npm:2.8.1"
checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62
@@ -19875,30 +19907,6 @@ __metadata:
languageName: node
linkType: hard
-"twirp-ts@npm:^2.5.0":
- version: 2.5.0
- resolution: "twirp-ts@npm:2.5.0"
- dependencies:
- "@protobuf-ts/plugin-framework": "npm:^2.0.7"
- camel-case: "npm:^4.1.2"
- dot-object: "npm:^2.1.4"
- path-to-regexp: "npm:^6.2.0"
- ts-poet: "npm:^4.5.0"
- yaml: "npm:^1.10.2"
- peerDependencies:
- "@protobuf-ts/plugin": ^2.5.0
- ts-proto: ^1.81.3
- peerDependenciesMeta:
- "@protobuf-ts/plugin":
- optional: true
- ts-proto:
- optional: true
- bin:
- protoc-gen-twirp_ts: protoc-gen-twirp_ts
- checksum: 10c0/046ef483420105e92bb8429931e754d7046516fd4fc4f5eeeacbf57dd26ec06ab9c69eba934e587e525f24f49177b03667d18dea78741c408b3e69e1c9774bbd
- languageName: node
- linkType: hard
-
"type-check@npm:^0.4.0, type-check@npm:~0.4.0":
version: 0.4.0
resolution: "type-check@npm:0.4.0"
@@ -19959,55 +19967,56 @@ __metadata:
languageName: node
linkType: hard
-"typed-array-buffer@npm:^1.0.2":
- version: 1.0.2
- resolution: "typed-array-buffer@npm:1.0.2"
+"typed-array-buffer@npm:^1.0.3":
+ version: 1.0.3
+ resolution: "typed-array-buffer@npm:1.0.3"
dependencies:
- call-bind: "npm:^1.0.7"
+ call-bound: "npm:^1.0.3"
es-errors: "npm:^1.3.0"
- is-typed-array: "npm:^1.1.13"
- checksum: 10c0/9e043eb38e1b4df4ddf9dde1aa64919ae8bb909571c1cc4490ba777d55d23a0c74c7d73afcdd29ec98616d91bb3ae0f705fad4421ea147e1daf9528200b562da
+ is-typed-array: "npm:^1.1.14"
+ checksum: 10c0/1105071756eb248774bc71646bfe45b682efcad93b55532c6ffa4518969fb6241354e4aa62af679ae83899ec296d69ef88f1f3763657cdb3a4d29321f7b83079
languageName: node
linkType: hard
-"typed-array-byte-length@npm:^1.0.1":
- version: 1.0.1
- resolution: "typed-array-byte-length@npm:1.0.1"
+"typed-array-byte-length@npm:^1.0.3":
+ version: 1.0.3
+ resolution: "typed-array-byte-length@npm:1.0.3"
dependencies:
- call-bind: "npm:^1.0.7"
+ call-bind: "npm:^1.0.8"
for-each: "npm:^0.3.3"
- gopd: "npm:^1.0.1"
- has-proto: "npm:^1.0.3"
- is-typed-array: "npm:^1.1.13"
- checksum: 10c0/fcebeffb2436c9f355e91bd19e2368273b88c11d1acc0948a2a306792f1ab672bce4cfe524ab9f51a0505c9d7cd1c98eff4235c4f6bfef6a198f6cfc4ff3d4f3
+ gopd: "npm:^1.2.0"
+ has-proto: "npm:^1.2.0"
+ is-typed-array: "npm:^1.1.14"
+ checksum: 10c0/6ae083c6f0354f1fce18b90b243343b9982affd8d839c57bbd2c174a5d5dc71be9eb7019ffd12628a96a4815e7afa85d718d6f1e758615151d5f35df841ffb3e
languageName: node
linkType: hard
-"typed-array-byte-offset@npm:^1.0.2":
- version: 1.0.2
- resolution: "typed-array-byte-offset@npm:1.0.2"
+"typed-array-byte-offset@npm:^1.0.4":
+ version: 1.0.4
+ resolution: "typed-array-byte-offset@npm:1.0.4"
dependencies:
available-typed-arrays: "npm:^1.0.7"
- call-bind: "npm:^1.0.7"
+ call-bind: "npm:^1.0.8"
for-each: "npm:^0.3.3"
- gopd: "npm:^1.0.1"
- has-proto: "npm:^1.0.3"
- is-typed-array: "npm:^1.1.13"
- checksum: 10c0/d2628bc739732072e39269389a758025f75339de2ed40c4f91357023c5512d237f255b633e3106c461ced41907c1bf9a533c7e8578066b0163690ca8bc61b22f
+ gopd: "npm:^1.2.0"
+ has-proto: "npm:^1.2.0"
+ is-typed-array: "npm:^1.1.15"
+ reflect.getprototypeof: "npm:^1.0.9"
+ checksum: 10c0/3d805b050c0c33b51719ee52de17c1cd8e6a571abdf0fffb110e45e8dd87a657e8b56eee94b776b13006d3d347a0c18a730b903cf05293ab6d92e99ff8f77e53
languageName: node
linkType: hard
-"typed-array-length@npm:^1.0.6":
- version: 1.0.6
- resolution: "typed-array-length@npm:1.0.6"
+"typed-array-length@npm:^1.0.7":
+ version: 1.0.7
+ resolution: "typed-array-length@npm:1.0.7"
dependencies:
call-bind: "npm:^1.0.7"
for-each: "npm:^0.3.3"
gopd: "npm:^1.0.1"
- has-proto: "npm:^1.0.3"
is-typed-array: "npm:^1.1.13"
possible-typed-array-names: "npm:^1.0.0"
- checksum: 10c0/74253d7dc488eb28b6b2711cf31f5a9dcefc9c41b0681fd1c178ed0a1681b4468581a3626d39cd4df7aee3d3927ab62be06aa9ca74e5baf81827f61641445b77
+ reflect.getprototypeof: "npm:^1.0.6"
+ checksum: 10c0/e38f2ae3779584c138a2d8adfa8ecf749f494af3cd3cdafe4e688ce51418c7d2c5c88df1bd6be2bbea099c3f7cea58c02ca02ed438119e91f162a9de23f61295
languageName: node
linkType: hard
@@ -20068,23 +20077,23 @@ __metadata:
linkType: hard
"uglify-js@npm:^3.1.4":
- version: 3.19.0
- resolution: "uglify-js@npm:3.19.0"
+ version: 3.19.3
+ resolution: "uglify-js@npm:3.19.3"
bin:
uglifyjs: bin/uglifyjs
- checksum: 10c0/c27d7a4734a59c5e2c08a6efd68bc534d559619f80ad437b1009ed56a7b1a8f6d6cbd5892a15879e0413d724e785b7227487ccca8d3e07261ba92d469c1447d3
+ checksum: 10c0/83b0a90eca35f778e07cad9622b80c448b6aad457c9ff8e568afed978212b42930a95f9e1be943a1ffa4258a3340fbb899f41461131c05bb1d0a9c303aed8479
languageName: node
linkType: hard
-"unbox-primitive@npm:^1.0.2":
- version: 1.0.2
- resolution: "unbox-primitive@npm:1.0.2"
+"unbox-primitive@npm:^1.1.0":
+ version: 1.1.0
+ resolution: "unbox-primitive@npm:1.1.0"
dependencies:
- call-bind: "npm:^1.0.2"
+ call-bound: "npm:^1.0.3"
has-bigints: "npm:^1.0.2"
- has-symbols: "npm:^1.0.3"
- which-boxed-primitive: "npm:^1.0.2"
- checksum: 10c0/81ca2e81134167cc8f75fa79fbcc8a94379d6c61de67090986a2273850989dd3bae8440c163121b77434b68263e34787a675cbdcb34bb2f764c6b9c843a11b66
+ has-symbols: "npm:^1.1.0"
+ which-boxed-primitive: "npm:^1.1.1"
+ checksum: 10c0/7dbd35ab02b0e05fe07136c72cb9355091242455473ec15057c11430129bab38b7b3624019b8778d02a881c13de44d63cd02d122ee782fb519e1de7775b5b982
languageName: node
linkType: hard
@@ -20095,10 +20104,10 @@ __metadata:
languageName: node
linkType: hard
-"undici-types@npm:~5.26.4":
- version: 5.26.5
- resolution: "undici-types@npm:5.26.5"
- checksum: 10c0/bb673d7876c2d411b6eb6c560e0c571eef4a01c1c19925175d16e3a30c4c428181fb8d7ae802a261f283e4166a0ac435e2f505743aa9e45d893f9a3df017b501
+"undici-types@npm:~6.20.0":
+ version: 6.20.0
+ resolution: "undici-types@npm:6.20.0"
+ checksum: 10c0/68e659a98898d6a836a9a59e6adf14a5d799707f5ea629433e025ac90d239f75e408e2e5ff086afc3cace26f8b26ee52155293564593fbb4a2f666af57fc59bf
languageName: node
linkType: hard
@@ -20125,6 +20134,13 @@ __metadata:
languageName: node
linkType: hard
+"unicorn-magic@npm:^0.3.0":
+ version: 0.3.0
+ resolution: "unicorn-magic@npm:0.3.0"
+ checksum: 10c0/0a32a997d6c15f1c2a077a15b1c4ca6f268d574cf5b8975e778bb98e6f8db4ef4e86dfcae4e158cd4c7e38fb4dd383b93b13eefddc7f178dea13d3ac8a603271
+ languageName: node
+ linkType: hard
+
"unified@npm:^11.0.0":
version: 11.0.5
resolution: "unified@npm:11.0.5"
@@ -20237,14 +20253,12 @@ __metadata:
linkType: hard
"unplugin@npm:^1.3.1":
- version: 1.12.0
- resolution: "unplugin@npm:1.12.0"
+ version: 1.16.1
+ resolution: "unplugin@npm:1.16.1"
dependencies:
- acorn: "npm:^8.12.1"
- chokidar: "npm:^3.6.0"
- webpack-sources: "npm:^3.2.3"
+ acorn: "npm:^8.14.0"
webpack-virtual-modules: "npm:^0.6.2"
- checksum: 10c0/d4ca9508adbc3724fbafe0eec50e346b3772d3bca7881f20b29d403c576fae5ac2f1224cc84481913396e9c52cba5e934d2815d1b2a206c439fdc52ec39889b8
+ checksum: 10c0/dd5f8c5727d0135847da73cf03fb199107f1acf458167034886fda3405737dab871ad3926431b4f70e1e82cdac482ac1383cea4019d782a68515c8e3e611b6cc
languageName: node
linkType: hard
@@ -20273,16 +20287,16 @@ __metadata:
linkType: hard
"update-browserslist-db@npm:^1.1.1":
- version: 1.1.1
- resolution: "update-browserslist-db@npm:1.1.1"
+ version: 1.1.2
+ resolution: "update-browserslist-db@npm:1.1.2"
dependencies:
escalade: "npm:^3.2.0"
- picocolors: "npm:^1.1.0"
+ picocolors: "npm:^1.1.1"
peerDependencies:
browserslist: ">= 4.21.0"
bin:
update-browserslist-db: cli.js
- checksum: 10c0/536a2979adda2b4be81b07e311bd2f3ad5e978690987956bc5f514130ad50cac87cd22c710b686d79731e00fbee8ef43efe5fcd72baa241045209195d43dcc80
+ checksum: 10c0/9cb353998d6d7d6ba1e46b8fa3db888822dd972212da4eda609d185eb5c3557a93fd59780ceb757afd4d84240518df08542736969e6a5d6d6ce2d58e9363aac6
languageName: node
linkType: hard
@@ -20321,17 +20335,22 @@ __metadata:
linkType: hard
"util.promisify@npm:^1.0.0":
- version: 1.1.2
- resolution: "util.promisify@npm:1.1.2"
+ version: 1.1.3
+ resolution: "util.promisify@npm:1.1.3"
dependencies:
- call-bind: "npm:^1.0.2"
- define-properties: "npm:^1.2.0"
+ call-bind: "npm:^1.0.8"
+ call-bound: "npm:^1.0.3"
+ define-data-property: "npm:^1.1.4"
+ define-properties: "npm:^1.2.1"
+ es-errors: "npm:^1.3.0"
+ es-object-atoms: "npm:^1.0.0"
for-each: "npm:^0.3.3"
- has-proto: "npm:^1.0.1"
- has-symbols: "npm:^1.0.3"
- object.getownpropertydescriptors: "npm:^2.1.6"
- safe-array-concat: "npm:^1.0.0"
- checksum: 10c0/cc9bf4912b89ea8e095b5746d945607884b4635d219cb1935c028259e86be6af92d7b7b1e702776805d81f7d387ffa436037299e9bf01ce076267e217b54ae3e
+ get-intrinsic: "npm:^1.2.6"
+ has-proto: "npm:^1.2.0"
+ has-symbols: "npm:^1.1.0"
+ object.getownpropertydescriptors: "npm:^2.1.8"
+ safe-array-concat: "npm:^1.1.3"
+ checksum: 10c0/b7a2f721222ffc26f8a12a1cdc44a81b16a614b81f2d6f71f50c8b214a20afe8324d5f0700f04759d6ea33446ba0730e4ef0b4e2c4f4ef5adca16dabd502fa2b
languageName: node
linkType: hard
@@ -20419,8 +20438,8 @@ __metadata:
linkType: hard
"vite@npm:^5.4.11":
- version: 5.4.11
- resolution: "vite@npm:5.4.11"
+ version: 5.4.14
+ resolution: "vite@npm:5.4.14"
dependencies:
esbuild: "npm:^0.21.3"
fsevents: "npm:~2.3.3"
@@ -20457,7 +20476,7 @@ __metadata:
optional: true
bin:
vite: bin/vite.js
- checksum: 10c0/d536bb7af57dd0eca2a808f95f5ff1d7b7ffb8d86e17c6893087680a0448bd0d15e07475270c8a6de65cb5115592d037130a1dd979dc76bcef8c1dda202a1874
+ checksum: 10c0/8842933bd70ca6a98489a0bb9c8464bec373de00f9a97c8c7a4e64b24d15c88bfaa8c1acb38a68c3e5eb49072ffbccb146842c2d4edcdd036a9802964cffe3d1
languageName: node
linkType: hard
@@ -20523,13 +20542,6 @@ __metadata:
languageName: node
linkType: hard
-"webpack-sources@npm:^3.2.3":
- version: 3.2.3
- resolution: "webpack-sources@npm:3.2.3"
- checksum: 10c0/2ef63d77c4fad39de4a6db17323d75eb92897b32674e97d76f0a1e87c003882fc038571266ad0ef581ac734cbe20952912aaa26155f1905e96ce251adbb1eb4e
- languageName: node
- linkType: hard
-
"webpack-virtual-modules@npm:^0.6.2":
version: 0.6.2
resolution: "webpack-virtual-modules@npm:0.6.2"
@@ -20554,16 +20566,49 @@ __metadata:
languageName: node
linkType: hard
-"which-boxed-primitive@npm:^1.0.2":
+"which-boxed-primitive@npm:^1.1.0, which-boxed-primitive@npm:^1.1.1":
+ version: 1.1.1
+ resolution: "which-boxed-primitive@npm:1.1.1"
+ dependencies:
+ is-bigint: "npm:^1.1.0"
+ is-boolean-object: "npm:^1.2.1"
+ is-number-object: "npm:^1.1.1"
+ is-string: "npm:^1.1.1"
+ is-symbol: "npm:^1.1.1"
+ checksum: 10c0/aceea8ede3b08dede7dce168f3883323f7c62272b49801716e8332ff750e7ae59a511ae088840bc6874f16c1b7fd296c05c949b0e5b357bfe3c431b98c417abe
+ languageName: node
+ linkType: hard
+
+"which-builtin-type@npm:^1.2.1":
+ version: 1.2.1
+ resolution: "which-builtin-type@npm:1.2.1"
+ dependencies:
+ call-bound: "npm:^1.0.2"
+ function.prototype.name: "npm:^1.1.6"
+ has-tostringtag: "npm:^1.0.2"
+ is-async-function: "npm:^2.0.0"
+ is-date-object: "npm:^1.1.0"
+ is-finalizationregistry: "npm:^1.1.0"
+ is-generator-function: "npm:^1.0.10"
+ is-regex: "npm:^1.2.1"
+ is-weakref: "npm:^1.0.2"
+ isarray: "npm:^2.0.5"
+ which-boxed-primitive: "npm:^1.1.0"
+ which-collection: "npm:^1.0.2"
+ which-typed-array: "npm:^1.1.16"
+ checksum: 10c0/8dcf323c45e5c27887800df42fbe0431d0b66b1163849bb7d46b5a730ad6a96ee8bfe827d078303f825537844ebf20c02459de41239a0a9805e2fcb3cae0d471
+ languageName: node
+ linkType: hard
+
+"which-collection@npm:^1.0.2":
version: 1.0.2
- resolution: "which-boxed-primitive@npm:1.0.2"
+ resolution: "which-collection@npm:1.0.2"
dependencies:
- is-bigint: "npm:^1.0.1"
- is-boolean-object: "npm:^1.1.0"
- is-number-object: "npm:^1.0.4"
- is-string: "npm:^1.0.5"
- is-symbol: "npm:^1.0.3"
- checksum: 10c0/0a62a03c00c91dd4fb1035b2f0733c341d805753b027eebd3a304b9cb70e8ce33e25317add2fe9b5fea6f53a175c0633ae701ff812e604410ddd049777cd435e
+ is-map: "npm:^2.0.3"
+ is-set: "npm:^2.0.3"
+ is-weakmap: "npm:^2.0.2"
+ is-weakset: "npm:^2.0.3"
+ checksum: 10c0/3345fde20964525a04cdf7c4a96821f85f0cc198f1b2ecb4576e08096746d129eb133571998fe121c77782ac8f21cbd67745a3d35ce100d26d4e684c142ea1f2
languageName: node
linkType: hard
@@ -20574,7 +20619,7 @@ __metadata:
languageName: node
linkType: hard
-"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2":
+"which-typed-array@npm:^1.1.14":
version: 1.1.15
resolution: "which-typed-array@npm:1.1.15"
dependencies:
@@ -20587,6 +20632,20 @@ __metadata:
languageName: node
linkType: hard
+"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.18, which-typed-array@npm:^1.1.2":
+ version: 1.1.18
+ resolution: "which-typed-array@npm:1.1.18"
+ dependencies:
+ available-typed-arrays: "npm:^1.0.7"
+ call-bind: "npm:^1.0.8"
+ call-bound: "npm:^1.0.3"
+ for-each: "npm:^0.3.3"
+ gopd: "npm:^1.2.0"
+ has-tostringtag: "npm:^1.0.2"
+ checksum: 10c0/0412f4a91880ca1a2a63056187c2e3de6b129b2b5b6c17bc3729f0f7041047ae48fb7424813e51506addb2c97320003ee18b8c57469d2cde37983ef62126143c
+ languageName: node
+ linkType: hard
+
"which@npm:^1.2.12, which@npm:^1.2.14, which@npm:^1.3.1":
version: 1.3.1
resolution: "which@npm:1.3.1"
@@ -20620,6 +20679,17 @@ __metadata:
languageName: node
linkType: hard
+"which@npm:^5.0.0":
+ version: 5.0.0
+ resolution: "which@npm:5.0.0"
+ dependencies:
+ isexe: "npm:^3.1.1"
+ bin:
+ node-which: bin/which.js
+ checksum: 10c0/e556e4cd8b7dbf5df52408c9a9dd5ac6518c8c5267c8953f5b0564073c66ed5bf9503b14d876d0e9c7844d4db9725fb0dcf45d6e911e17e26ab363dc3965ae7b
+ languageName: node
+ linkType: hard
+
"word-wrap@npm:^1.2.5":
version: 1.2.5
resolution: "word-wrap@npm:1.2.5"
@@ -20728,8 +20798,8 @@ __metadata:
linkType: hard
"ws@npm:^8.2.3":
- version: 8.18.0
- resolution: "ws@npm:8.18.0"
+ version: 8.18.1
+ resolution: "ws@npm:8.18.1"
peerDependencies:
bufferutil: ^4.0.1
utf-8-validate: ">=5.0.2"
@@ -20738,7 +20808,7 @@ __metadata:
optional: true
utf-8-validate:
optional: true
- checksum: 10c0/25eb33aff17edcb90721ed6b0eb250976328533ad3cd1a28a274bd263682e7296a6591ff1436d6cbc50fa67463158b062f9d1122013b361cec99a05f84680e06
+ checksum: 10c0/e498965d6938c63058c4310ffb6967f07d4fa06789d3364829028af380d299fe05762961742971c764973dce3d1f6a2633fe8b2d9410c9b52e534b4b882a99fa
languageName: node
linkType: hard
@@ -20842,19 +20912,12 @@ __metadata:
languageName: node
linkType: hard
-"yaml@npm:^1.10.2":
- version: 1.10.2
- resolution: "yaml@npm:1.10.2"
- checksum: 10c0/5c28b9eb7adc46544f28d9a8d20c5b3cb1215a886609a2fd41f51628d8aaa5878ccd628b755dbcd29f6bb4921bd04ffbc6dcc370689bb96e594e2f9813d2605f
- languageName: node
- linkType: hard
-
-"yaml@npm:~2.6.1":
- version: 2.6.1
- resolution: "yaml@npm:2.6.1"
+"yaml@npm:^2.7.0":
+ version: 2.7.0
+ resolution: "yaml@npm:2.7.0"
bin:
yaml: bin.mjs
- checksum: 10c0/aebf07f61c72b38c74d2b60c3a3ccf89ee4da45bcd94b2bfb7899ba07a5257625a7c9f717c65a6fc511563d48001e01deb1d9e55f0133f3e2edf86039c8c1be7
+ checksum: 10c0/886a7d2abbd70704b79f1d2d05fe9fb0aa63aefb86e1cb9991837dced65193d300f5554747a872b4b10ae9a12bc5d5327e4d04205f70336e863e35e89d8f4ea9
languageName: node
linkType: hard