diff --git a/.github/actions/file-diff/index.js b/.github/actions/file-diff/index.js index ded6fff3987..bd24eaeedf5 100644 --- a/.github/actions/file-diff/index.js +++ b/.github/actions/file-diff/index.js @@ -85,8 +85,6 @@ async function run() { `**Total size**: ${bytesToSize(overallHeadSize)}*`, ]; - let summaryTable = []; - if (sections.length === 0) { summary.push(...["", " 🎉 No changes detected in any packages"]); } else { @@ -96,7 +94,7 @@ async function run() { */ let changeSummary = ""; if (baseOutput.size > 0 && hasBase && hasChange) { - changeSummary = `**Total change (Δ)**: ${printChange(overallHeadSize, overallBaseSize)} (${printPercentChange(overallHeadSize, overallBaseSize)})`; + changeSummary = `**Total change (Δ)**: ${printChange(overallBaseSize, overallHeadSize)} (${printPercentChange(overallHeadSize, overallBaseSize)})`; } else if (baseOutput.size > 0 && hasBase && !hasChange) { changeSummary = `No change in file sizes`; } @@ -105,15 +103,11 @@ async function run() { summary.push( changeSummary, "", - "Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.", - "" ); } markdown.push( "", - `
`, - `Details`, "" ); @@ -151,10 +145,6 @@ async function run() { ) { data.push(printChange(headMainSize, baseMainSize)); } - - if (data.length > 0) { - summaryTable.push([name, bytesToSize(headMainSize), data]); - } } @@ -180,7 +170,7 @@ async function run() { isRemoved(headByteSize, baseByteSize) ? " - " : bytesToSize(headByteSize), ...(hasBase ? [ bytesToSize(baseByteSize), - isRemoved(headByteSize, baseByteSize) ? "🚨 deleted, moved, or renamed" : isNew(headByteSize, baseByteSize) ? "🎉 **new**" : `${printChange(headByteSize, baseByteSize)}${difference(headByteSize, baseByteSize) !== 0 ? ` (${printPercentChange(headByteSize , baseByteSize)})` : ""}`, + isRemoved(headByteSize, baseByteSize) ? "🚨 deleted, moved, or renamed" : isNew(headByteSize, baseByteSize) ? "🎉 **new**" : `${printChange(headByteSize, baseByteSize)}${difference(baseByteSize, headByteSize) !== 0 ? ` (${printPercentChange(headByteSize , baseByteSize)})` : ""}`, ] : []), ] ]; @@ -193,18 +183,7 @@ async function run() { markdown.push(...md); }); - markdown.push("", `
`); - } - - if (summaryTable.length > 0) { - // Add the headings to the summary table if it contains data - summaryTable = [ - ["Package", "Size", ...(hasBase ? ["Δ"] : [])], - ["-", "-", ...(hasBase ? ["-"] : [])], - ...summaryTable, - ]; - - summary.push(...summaryTable.map((row) => `| ${row.join(" | ")} |`)); + markdown.push(""); } markdown.push( @@ -276,7 +255,7 @@ const isNew = (v1, v0) => (v1 && v1 > 0) && (!v0 || v0 === 0); * @param {number} difference * @returns {string} */ -const printChange = function (v0, v1) { +const printChange = function (v1, v0) { /** Calculate the change in size: v1 - v0 = change */ const d = difference(v1, v0); return d === 0 @@ -321,9 +300,8 @@ const makeTable = function (PACKAGES, filePath, path) { // Check if a minified output of this file exists if (existsSync(join(dirname(packagePath), main.replace(/\.css$/, ".min.css")))) { mainFile = mainFile.replace(/\.css$/, ".min.css"); - } else { - } + } } const mainFileOnly = [...fileMap.keys()].filter((file) => file.endsWith(mainFile)); diff --git a/components/accordion/index.css b/components/accordion/index.css index c3c3b49bda2..643a33ed5dc 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -13,32 +13,64 @@ governing permissions and limitations under the License. .spectrum-Accordion { --spectrum-accordion-item-height: var(--spectrum-component-height-200); --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); - --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text); - --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator); - --spectrum-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium); + --spectrum-accordion-disclosure-indicator-height: var( + --spectrum-component-height-100 + ); + --spectrum-accordion-disclosure-indicator-to-text-space: var( + --spectrum-accordion-disclosure-indicator-to-text + ); + --spectrum-accordion-edge-to-disclosure-indicator-space: var( + --spectrum-accordion-edge-to-disclosure-indicator + ); + --spectrum-accordion-edge-to-text-space: var( + --spectrum-accordion-edge-to-text + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium + ); --spectrum-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-accordion-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content); - --spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-accordion-item-content-area-top-to-content: var( + --spectrum-accordion-content-area-top-to-content + ); + --spectrum-accordion-item-content-area-bottom-to-content: var( + --spectrum-accordion-content-area-bottom-to-content + ); + --spectrum-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); /* Text header */ --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack); - --spectrum-accordion-item-header-font-weight: var(--spectrum-bold-font-weight); - --spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style); + --spectrum-accordion-item-header-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-accordion-item-header-font-style: var( + --spectrum-default-font-style + ); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); --spectrum-accordion-item-header-line-height: 1.25; /* Text body */ - --spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack); - --spectrum-accordion-item-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-accordion-item-content-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-accordion-item-content-font: var( + --spectrum-sans-font-family-stack + ); + --spectrum-accordion-item-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --spectrum-accordion-item-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s); - --spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100); + --spectrum-accordion-item-content-line-height: var( + --spectrum-line-height-100 + ); /* Colors */ --spectrum-accordion-background-color-default: rgba( @@ -59,31 +91,57 @@ governing permissions and limitations under the License. ); /* Label */ - --spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-accordion-item-header-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-accordion-item-header-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-accordion-item-header-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-accordion-item-header-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); - --spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color); - --spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); + --spectrum-accordion-item-header-disabled-color: var( + --spectrum-disabled-content-color + ); + --spectrum-accordion-item-content-disabled-color: var( + --spectrum-disabled-content-color + ); /* Body */ --spectrum-accordion-item-content-color: var(--spectrum-body-color); /* Focus indicator */ - --spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-accordion-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); /* Divider */ --spectrum-accordion-divider-color: var(--spectrum-gray-300); --spectrum-accordion-min-block-size: max( var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)), calc( - var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + - var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + - ( - var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * - var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)) - ) + var( + --mod-accordion-item-header-top-to-text-space, + var(--spectrum-accordion-item-header-top-to-text-space) + ) + + var( + --mod-accordion-item-header-bottom-to-text-space, + var(--spectrum-accordion-item-header-bottom-to-text-space) + ) + + ( + var( + --mod-accordion-item-header-font-size, + var(--spectrum-accordion-item-header-font-size) + ) * + var( + --mod-accordion-item-header-line-height, + var(--spectrum-accordion-item-header-line-height) + ) + ) ) ); @@ -94,87 +152,147 @@ governing permissions and limitations under the License. &:lang(ja), &:lang(zh), &:lang(ko) { - --spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-accordion-item-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --spectrum-accordion-item-content-line-height: var( + --spectrum-cjk-line-height-100 + ); } } .spectrum-Accordion--compact { --spectrum-accordion-item-height: var(--spectrum-component-height-100); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium + ); &.spectrum-Accordion--sizeS { --spectrum-accordion-item-height: var(--spectrum-component-height-75); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-small + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-small + ); } &.spectrum-Accordion--sizeL { --spectrum-accordion-item-height: var(--spectrum-component-height-200); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-large + ); } &.spectrum-Accordion--sizeXL { --spectrum-accordion-item-height: var(--spectrum-component-height-300); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-extra-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-extra-large + ); } } .spectrum-Accordion--spacious { --spectrum-accordion-item-header-line-height: 1.278; - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); &.spectrum-Accordion--sizeS { --spectrum-accordion-item-header-line-height: 1.25; - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-small-top-to-text-spacious + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-small + ); } &.spectrum-Accordion--sizeL { --spectrum-accordion-item-header-line-height: 1.273; - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-large + ); } &.spectrum-Accordion--sizeXL { --spectrum-accordion-item-header-line-height: 1.25; - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-extra-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-extra-large + ); } } .spectrum-Accordion--sizeS { --spectrum-accordion-item-height: var(--spectrum-component-height-100); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50); + --spectrum-accordion-disclosure-indicator-height: var( + --spectrum-component-height-75 + ); + --spectrum-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-50 + ); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200); --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-small + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-small + ); } .spectrum-Accordion--sizeL { --spectrum-accordion-item-height: var(--spectrum-component-height-300); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-accordion-disclosure-indicator-height: var( + --spectrum-component-height-200 + ); + --spectrum-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500); --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-large + ); } .spectrum-Accordion--sizeXL { --spectrum-accordion-item-height: var(--spectrum-component-height-400); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-accordion-disclosure-indicator-height: var( + --spectrum-component-height-300 + ); + --spectrum-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700); --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-extra-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-extra-large + ); } .spectrum-Accordion { @@ -190,18 +308,36 @@ governing permissions and limitations under the License. margin: 0; - min-block-size: var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)); - min-inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width)); + min-block-size: var( + --mod-accordion-item-height, + var(--spectrum-accordion-item-height) + ); + min-inline-size: var( + --mod-accordion-item-width, + var(--spectrum-accordion-item-width) + ); &:first-child { border-block-start: 1px solid transparent; - border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color)); - border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)); + border-color: var( + --mod-accordion-divider-color, + var(--spectrum-accordion-divider-color) + ); + border-width: var( + --mod-accordion-divider-thickness, + var(--spectrum-divider-thickness-small) + ); } border-block-end: 1px solid transparent; - border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color)); - border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)); + border-color: var( + --mod-accordion-divider-color, + var(--spectrum-accordion-divider-color) + ); + border-width: var( + --mod-accordion-divider-thickness, + var(--spectrum-divider-thickness-small) + ); } .spectrum-Accordion-itemHeading { @@ -211,21 +347,39 @@ governing permissions and limitations under the License. } .spectrum-Accordion-itemIconContainer { - padding-inline-start: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space)); - inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)); - block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)); + padding-inline-start: var( + --mod-accordion-edge-to-disclosure-indicator-space, + var(--spectrum-accordion-edge-to-disclosure-indicator-space) + ); + inline-size: var( + --mod-accordion-disclosure-indicator-height, + var(--spectrum-accordion-disclosure-indicator-height) + ); + block-size: var( + --mod-accordion-disclosure-indicator-height, + var(--spectrum-accordion-disclosure-indicator-height) + ); display: flex; justify-content: center; align-items: center; - color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default)); + color: var( + --mod-accordion-item-header-color-default, + var(--spectrum-accordion-item-header-color-default) + ); position: absolute; inset-block-start: max( 0px, calc( ( - var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)) - ) / 2 + var( + --mod-accordion-min-block-size, + var(--spectrum-accordion-min-block-size) + ) - + var( + --mod-accordion-disclosure-indicator-height, + var(--spectrum-accordion-disclosure-indicator-height) + ) + ) / 2 ) ); @@ -235,17 +389,47 @@ governing permissions and limitations under the License. } .spectrum-Accordion-itemContent { - padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) - var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content)); - padding-inline: var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)) - var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)); + padding-block: var( + --mod-accordion-item-content-area-top-to-content, + var(--spectrum-accordion-item-content-area-top-to-content) + ) + var( + --mod-accordion-item-content-area-bottom-to-content, + var(--spectrum-accordion-item-content-area-bottom-to-content) + ); + padding-inline: var( + --mod-accordion-component-edge-to-text, + var(--spectrum-accordion-component-edge-to-text) + ) + var( + --mod-accordion-component-edge-to-text, + var(--spectrum-accordion-component-edge-to-text) + ); display: none; - color: var(--mod-accordion-item-content-color, var(--spectrum-accordion-item-content-color)); - font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight)); - font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style)); - font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size)); - font-family: var(--mod-accordion-item-content-font, var(--spectrum-accordion-item-content-font)); - line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height)); + color: var( + --mod-accordion-item-content-color, + var(--spectrum-accordion-item-content-color) + ); + font-weight: var( + --mod-accordion-item-content-font-weight, + var(--spectrum-accordion-item-content-font-weight) + ); + font-style: var( + --mod-accordion-item-content-font-style, + var(--spectrum-accordion-item-content-font-style) + ); + font-size: var( + --mod-accordion-item-content-font-size, + var(--spectrum-accordion-item-content-font-size) + ); + font-family: var( + --mod-accordion-item-content-font, + var(--spectrum-accordion-item-content-font) + ); + line-height: var( + --mod-accordion-item-content-line-height, + var(--spectrum-accordion-item-content-line-height) + ); } .spectrum-Accordion-itemHeader { @@ -255,24 +439,57 @@ governing permissions and limitations under the License. justify-content: flex-start; box-sizing: border-box; - padding-block: var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) - var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)); + padding-block: var( + --mod-accordion-item-header-top-to-text-space, + var(--spectrum-accordion-item-header-top-to-text-space) + ) + var( + --mod-accordion-item-header-bottom-to-text-space, + var(--spectrum-accordion-item-header-bottom-to-text-space) + ); padding-inline-start: calc( - var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)) + - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)) + var( + --mod-accordion-disclosure-indicator-to-text-space, + var(--spectrum-accordion-disclosure-indicator-to-text-space) + ) + + var( + --mod-accordion-disclosure-indicator-height, + var(--spectrum-accordion-disclosure-indicator-height) + ) + ); + padding-inline-end: var( + --mod-accordion-edge-to-text-space, + var(--spectrum-accordion-edge-to-text-space) ); - padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space)); - min-block-size: var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)); - line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)); + min-block-size: var( + --mod-accordion-min-block-size, + var(--spectrum-accordion-min-block-size) + ); + line-height: var( + --mod-accordion-item-header-line-height, + var(--spectrum-accordion-item-header-line-height) + ); text-overflow: ellipsis; cursor: pointer; - font-size: var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)); - font-weight: var(--mod-accordion-item-header-font-weight, var(--spectrum-accordion-item-header-font-weight)); - font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style)); - font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font)); + font-size: var( + --mod-accordion-item-header-font-size, + var(--spectrum-accordion-item-header-font-size) + ); + font-weight: var( + --mod-accordion-item-header-font-weight, + var(--spectrum-accordion-item-header-font-weight) + ); + font-style: var( + --mod-accordion-item-header-font-style, + var(--spectrum-accordion-item-header-font-style) + ); + font-family: var( + --mod-accordion-item-header-font, + var(--spectrum-accordion-item-header-font) + ); /* reset styling if button element is used */ /* stylelint-disable-next-line property-no-vendor-prefix -- todo may no longer be needed */ @@ -293,41 +510,83 @@ governing permissions and limitations under the License. inset-inline-start: 0; } } - color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default)); - background-color: var(--mod-accordion-background-color-default, var(--spectrum-accordion-background-color-default)); + color: var( + --mod-accordion-item-header-color-default, + var(--spectrum-accordion-item-header-color-default) + ); + background-color: var( + --mod-accordion-background-color-default, + var(--spectrum-accordion-background-color-default) + ); &:hover { - color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover)); - background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover)); + color: var( + --mod-accordion-item-header-color-hover, + var(--spectrum-accordion-item-header-color-hover) + ); + background-color: var( + --mod-accordion-background-color-hover, + var(--spectrum-accordion-background-color-hover) + ); + .spectrum-Accordion-itemIconContainer { - color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover)); + color: var( + --mod-accordion-item-header-color-hover, + var(--spectrum-accordion-item-header-color-hover) + ); } } &:focus-visible { - border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius)); + border-radius: var( + --mod-accordion-corner-radius, + var(--spectrum-accordion-corner-radius) + ); - outline: var(--mod-accordion-focus-indicator-thickness, var(--spectrum-accordion-focus-indicator-thickness)) + outline: var( + --mod-accordion-focus-indicator-thickness, + var(--spectrum-accordion-focus-indicator-thickness) + ) solid - var(--mod-accordion-focus-indicator-color, var(--spectrum-accordion-focus-indicator-color)); - background-color: var(--mod-accordion-background-color-key-focus, var(--spectrum-accordion-background-color-key-focus)); - color: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-accordion-item-header-color-key-focus)); + var( + --mod-accordion-focus-indicator-color, + var(--spectrum-accordion-focus-indicator-color) + ); + background-color: var( + --mod-accordion-background-color-key-focus, + var(--spectrum-accordion-background-color-key-focus) + ); + color: var( + --mod-accordion-item-header-color-key-focus, + var(--spectrum-accordion-item-header-color-key-focus) + ); outline-offset: calc( - var(--mod-accordion-focus-indicator-gap, var(--spectrum-accordion-focus-indicator-gap)) * -1 + var( + --mod-accordion-focus-indicator-gap, + var(--spectrum-accordion-focus-indicator-gap) + ) * -1 ); } &:active { - background-color: var(--mod-accordion-background-color-down, var(--spectrum-accordion-background-color-down)); - color: var(--mod-accordion-item-header-color-down, var(--spectrum-accordion-item-header-color-down)); + background-color: var( + --mod-accordion-background-color-down, + var(--spectrum-accordion-background-color-down) + ); + color: var( + --mod-accordion-item-header-color-down, + var(--spectrum-accordion-item-header-color-down) + ); } } .spectrum-Accordion-item { &.is-open { .spectrum-Accordion-itemHeader:hover { - background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover)); + background-color: var( + --mod-accordion-background-color-hover, + var(--spectrum-accordion-background-color-hover) + ); } } } @@ -337,17 +596,26 @@ governing permissions and limitations under the License. &, &:hover, &:focus-visible { - color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color)); + color: var( + --mod-accordion-item-header-disabled-color, + var(--spectrum-accordion-item-header-disabled-color) + ); background-color: transparent; } + .spectrum-Accordion-itemIconContainer { - color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color)); + color: var( + --mod-accordion-item-header-disabled-color, + var(--spectrum-accordion-item-header-disabled-color) + ); } } .spectrum-Accordion-itemContent { - color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color)); + color: var( + --mod-accordion-item-content-disabled-color, + var(--spectrum-accordion-item-content-disabled-color) + ); } } diff --git a/components/asset/index.css b/components/asset/index.css index 60a92e33718..29fdf09c0fd 100644 --- a/components/asset/index.css +++ b/components/asset/index.css @@ -40,20 +40,29 @@ governing permissions and limitations under the License. .spectrum-Asset-folderBackground { fill: var( --highcontrast-asset-folder-background-color, - var(--mod-asset-folder-background-color, var(--spectrum-gray-300)) + var( + --mod-asset-folder-background-color, + var(--spectrum-gray-300) + ) ); } .spectrum-Asset-fileBackground { fill: var( --highcontrast-asset-file-background-color, - var(--mod-asset-file-background-color, var(--spectrum-gray-50)) + var( + --mod-asset-file-background-color, + var(--spectrum-gray-50) + ) ); } .spectrum-Asset-folderOutline, .spectrum-Asset-fileOutline { - fill: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500)); + fill: var( + --mod-asset-icon-outline-color, + var(--spectrum-gray-500) + ); } @media (forced-colors: active) { diff --git a/components/card/index.css b/components/card/index.css index 35440048b3c..c03b6a8c9e3 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -32,8 +32,12 @@ governing permissions and limitations under the License. /* Typography */ --spectrum-card-title-font-family: var(--spectrum-sans-font-family-stack); --spectrum-card-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-card-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --spectrum-card-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --spectrum-card-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); --spectrum-card-title-line-height: var(--spectrum-heading-line-height); --spectrum-card-title-font-color: var(--spectrum-heading-color); @@ -51,7 +55,9 @@ governing permissions and limitations under the License. /* TODO update to --spectrum-card-selection-background-color token once an RGB stripped value is available */ --spectrum-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); - --spectrum-card-actions-background-color-opacity: var(--spectrum-card-selection-background-color-opacity); + --spectrum-card-actions-background-color-opacity: var( + --spectrum-card-selection-background-color-opacity + ); --spectrum-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); --spectrum-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); --spectrum-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); @@ -59,7 +65,9 @@ governing permissions and limitations under the License. /* Focus */ --spectrum-card-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-card-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --spectrum-card-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); /* Selected */ --spectrum-card-selected-background-opacity: 0.1; /* table-selected-row-background-opacity does not exist in tokens yet */ @@ -107,18 +115,34 @@ governing permissions and limitations under the License. box-sizing: border-box; text-decoration: none; - min-inline-size: var(--mod-card-minimum-width, var(--spectrum-card-minimum-width)); + min-inline-size: var( + --mod-card-minimum-width, + var(--spectrum-card-minimum-width) + ); border: var(--mod-card-border-width, var(--spectrum-card-border-width)) solid transparent; - border-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)); + border-radius: var( + --mod-card-corner-radius, + var(--spectrum-card-corner-radius) + ); border-color: var( --highcontrast-card-border-color, var(--mod-card-border-color, var(--spectrum-card-border-color)) ); - /* @deprecation --mod-spectrum-card-background-color has been renamed to --mod-card-background-color. The fallback will be removed in a future version. */ - background-color: var(--highcontrast-card-background-color, var(--mod-card-background-color, var(--mod-spectrum-card-background-color, var(--spectrum-card-background-color)))); + /* @deprecation --mod-spectrum-card-background-color has been renamed to + --mod-card-background-color. The fallback will be removed in a future version. */ + background-color: var( + --highcontrast-card-background-color, + var( + --mod-card-background-color, + var( + --mod-spectrum-card-background-color, + var(--spectrum-card-background-color) + ) + ) + ); &::before { content: ""; @@ -141,7 +165,10 @@ governing permissions and limitations under the License. border-style: solid; border-color: transparent; border-width: 0; - border-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)); + border-radius: var( + --mod-card-corner-radius, + var(--spectrum-card-corner-radius) + ); margin-block-start: calc( -1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) ); @@ -154,29 +181,47 @@ governing permissions and limitations under the License. outline: none; &::after { - border-width: var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)); - border-color: var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color)); + border-width: var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ); + border-color: var( + --mod-card-focus-indicator-color, + var(--spectrum-card-focus-indicator-color) + ); } .spectrum-Card-coverPhoto { border-start-start-radius: calc( var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) + var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ) ); border-start-end-radius: calc( var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) + var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ) ); } .spectrum-Card-preview { border-start-start-radius: calc( var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) + var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ) ); border-start-end-radius: calc( var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) + var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ) ); } } @@ -184,37 +229,61 @@ governing permissions and limitations under the License. &:hover { border-color: var( --highcontrast-card-border-color-hover, - var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover)) + var( + --mod-card-border-color-hover, + var(--spectrum-card-border-color-hover) + ) ); } &.is-selected { border-color: var( --highcontrast-card-border-color-selected, - var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)) + var( + --mod-card-border-color-selected, + var(--spectrum-card-border-color-selected) + ) ); &::before { background-color: rgba( - var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), - var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity)) + var( + --mod-card-selected-background-color-rgb, + var(--spectrum-card-selected-background-color-rgb) + ), + var( + --mod-card-selected-background-opacity, + var(--spectrum-card-selected-background-opacity) + ) ); } } &.is-drop-target { - --mod-card-background-color: var(--spectrum-card-background-color-quiet, var(--spectrum-background-base-color)); + --mod-card-background-color: var( + --spectrum-card-background-color-quiet, + var(--spectrum-background-base-color) + ); border-color: var( --highcontrast-card-border-color-selected, - var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)) + var( + --mod-card-border-color-selected, + var(--spectrum-card-border-color-selected) + ) ); box-shadow: 0 0 0 1px var( --highcontrast-card-border-color-selected, - var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected)) + var( + --mod-card-border-color-selected, + var(--spectrum-card-border-color-selected) + ) ); - background-color: var(--mod-card-background-color, var(--spectrum-card-background-color)); + background-color: var( + --mod-card-background-color, + var(--spectrum-card-background-color) + ); } &.is-focused, @@ -234,17 +303,38 @@ governing permissions and limitations under the License. .spectrum-Card-quickActions { position: absolute; visibility: hidden; - box-shadow: var(--mod-card-actions-drop-shadow-x, var(--spectrum-card-actions-drop-shadow-x)) - var(--mod-card-actions-drop-shadow-y, var(--spectrum-card-actions-drop-shadow-y)) - var(--mod-card-actions-drop-shadow-blur, var(--spectrum-card-actions-drop-shadow-blur)) - var(--mod-card-actions-drop-shadow-color, var(--spectrum-card-actions-drop-shadow-color)); + box-shadow: var( + --mod-card-actions-drop-shadow-x, + var(--spectrum-card-actions-drop-shadow-x) + ) + var( + --mod-card-actions-drop-shadow-y, + var(--spectrum-card-actions-drop-shadow-y) + ) + var( + --mod-card-actions-drop-shadow-blur, + var(--spectrum-card-actions-drop-shadow-blur) + ) + var( + --mod-card-actions-drop-shadow-color, + var(--spectrum-card-actions-drop-shadow-color) + ); inline-size: var(--mod-card-actions-size, var(--spectrum-card-actions-size)); block-size: var(--mod-card-actions-size, var(--spectrum-card-actions-size)); - border-radius: var(--mod-card-actions-border-radius, var(--spectrum-card-actions-border-radius)); + border-radius: var( + --mod-card-actions-border-radius, + var(--spectrum-card-actions-border-radius) + ); background-color: rgba( - var(--mod-card-actions-background-color-rgb, var(--spectrum-card-actions-background-color-rgb)), - var(--mod-card-actions-background-color-opacity, var(--spectrum-card-actions-background-color-opacity)) + var( + --mod-card-actions-background-color-rgb, + var(--spectrum-card-actions-background-color-rgb) + ), + var( + --mod-card-actions-background-color-opacity, + var(--spectrum-card-actions-background-color-opacity) + ) ); inset-inline-start: calc( @@ -258,13 +348,22 @@ governing permissions and limitations under the License. } .spectrum-Card-actions { - inset-block-start: var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)); - inset-inline-end: var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)); + inset-block-start: var( + --mod-card-actions-spacing, + var(--spectrum-card-actions-spacing) + ); + inset-inline-end: var( + --mod-card-actions-spacing, + var(--spectrum-card-actions-spacing) + ); } .spectrum-Card-coverPhoto { position: relative; - block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height)); + block-size: var( + --mod-card-preview-minimum-height, + var(--spectrum-card-preview-minimum-height) + ); box-sizing: border-box; overflow: hidden; @@ -285,8 +384,14 @@ governing permissions and limitations under the License. background-size: cover; background-position: center center; - background-color: var(--mod-card-background-color, var(--spectrum-card-background-color)); - border-block-end-color: var(--mod-card-border-color, var(--spectrum-card-border-color)); + background-color: var( + --mod-card-background-color, + var(--spectrum-card-background-color) + ); + border-block-end-color: var( + --mod-card-border-color, + var(--spectrum-card-border-color) + ); } .spectrum-Card .spectrum-Divider { @@ -296,7 +401,10 @@ governing permissions and limitations under the License. .spectrum-Card-content { display: flex; align-items: center; - margin-block-start: var(--mod-card-content-margin-top, var(--spectrum-card-content-margin-top)); + margin-block-start: var( + --mod-card-content-margin-top, + var(--spectrum-card-content-margin-top) + ); } .spectrum-Card-body { @@ -304,7 +412,10 @@ governing permissions and limitations under the License. and will be removed in a future version. */ padding-block-start: var( --mod-card-body-padding-block-start, - var(--mod-card-title-padding-top, var(--spectrum-card-title-padding-top)) + var( + --mod-card-title-padding-top, + var(--spectrum-card-title-padding-top) + ) ); padding-inline-end: var( --mod-card-body-padding-inline-end, @@ -331,8 +442,14 @@ governing permissions and limitations under the License. .spectrum-Card-preview { overflow: hidden; - border-start-start-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)); - border-start-end-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)); + border-start-start-radius: var( + --mod-card-corner-radius, + var(--spectrum-card-corner-radius) + ); + border-start-end-radius: var( + --mod-card-corner-radius, + var(--spectrum-card-corner-radius) + ); border-end-end-radius: 0; border-end-start-radius: 0; display: flex; @@ -344,12 +461,30 @@ governing permissions and limitations under the License. } .spectrum-Card-title { - padding-inline-end: var(--mod-card-title-padding-right, var(--spectrum-card-title-padding-right)); - font-family: var(--mod-card-title-font-family, var(--spectrum-card-title-font-family)); - font-size: var(--mod-card-title-font-size, var(--spectrum-card-title-font-size)); - font-weight: var(--mod-card-title-font-weight, var(--spectrum-card-title-font-weight)); - font-style: var(--mod-card-title-font-style, var(--spectrum-card-title-font-style)); - line-height: var(--mod-card-title-line-height, var(--spectrum-card-title-line-height)); + padding-inline-end: var( + --mod-card-title-padding-right, + var(--spectrum-card-title-padding-right) + ); + font-family: var( + --mod-card-title-font-family, + var(--spectrum-card-title-font-family) + ); + font-size: var( + --mod-card-title-font-size, + var(--spectrum-card-title-font-size) + ); + font-weight: var( + --mod-card-title-font-weight, + var(--spectrum-card-title-font-weight) + ); + font-style: var( + --mod-card-title-font-style, + var(--spectrum-card-title-font-style) + ); + line-height: var( + --mod-card-title-line-height, + var(--spectrum-card-title-line-height) + ); color: var( --highcontrast-card-title-font-color, var(--mod-card-title-font-color, var(--spectrum-card-title-font-color)) @@ -357,7 +492,10 @@ governing permissions and limitations under the License. } .spectrum-Card-subtitle { - padding-inline-end: var(--mod-card-subtitle-padding-right, var(--spectrum-card-subtitle-padding-right)); + padding-inline-end: var( + --mod-card-subtitle-padding-right, + var(--spectrum-card-subtitle-padding-right) + ); color: var( --highcontrast-card-title-font-color, var(--mod-card-title-font-color, var(--spectrum-card-title-font-color)) @@ -367,15 +505,33 @@ governing permissions and limitations under the License. .spectrum-Card-subtitle + .spectrum-Card-description::before { content: "•"; - padding-inline-end: var(--mod-card-subtitle-padding-right, var(--spectrum-card-subtitle-padding-right)); + padding-inline-end: var( + --mod-card-subtitle-padding-right, + var(--spectrum-card-subtitle-padding-right) + ); } .spectrum-Card-description { - font-family: var(--mod-card-body-font-family, var(--spectrum-card-body-font-family)); - font-size: var(--mod-card-body-font-size, var(--spectrum-card-body-font-size)); - font-weight: var(--mod-card-body-font-weight, var(--spectrum-card-body-font-weight)); - font-style: var(--mod-card-body-font-style, var(--spectrum-card-body-font-style)); - line-height: var(--mod-card-body-line-height, var(--spectrum-card-body-line-height)); + font-family: var( + --mod-card-body-font-family, + var(--spectrum-card-body-font-family) + ); + font-size: var( + --mod-card-body-font-size, + var(--spectrum-card-body-font-size) + ); + font-weight: var( + --mod-card-body-font-weight, + var(--spectrum-card-body-font-weight) + ); + font-style: var( + --mod-card-body-font-style, + var(--spectrum-card-body-font-style) + ); + line-height: var( + --mod-card-body-line-height, + var(--spectrum-card-body-line-height) + ); color: var( --highcontrast-card-body-font-color, var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)) @@ -388,16 +544,25 @@ governing permissions and limitations under the License. --mod-card-footer-margin-block-start, calc( -1 * (var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-content-margin-bottom, var(--spectrum-card-content-margin-bottom))) + var( + --mod-card-content-margin-bottom, + var(--spectrum-card-content-margin-bottom) + )) ) ); margin-inline-start: var( --mod-card-footer-margin-inline-start, - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) + var( + --mod-card-body-spacing, + var(--spectrum-card-body-spacing) + ) ); margin-inline-end: var( --mod-card-footer-margin-inline-end, - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) + var( + --mod-card-body-spacing, + var(--spectrum-card-body-spacing) + ) ); padding-block-end: var( --mod-card-footer-padding-block-end, @@ -411,15 +576,24 @@ governing permissions and limitations under the License. and will be removed in a future version. */ padding-block-start: var( --mod-card-footer-padding-block-start, - var(--mod-card-footer-margin-top, var(--spectrum-card-footer-padding-top)) + var( + --mod-card-footer-margin-top, + var(--spectrum-card-footer-padding-top) + ) ); color: var( --highcontrast-card-body-font-color, var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)) ); - line-height: var(--mod-card-body-line-height, var(--spectrum-card-body-line-height)); - border-block-start: var(--mod-card-border-width, var(--spectrum-card-border-width)) + line-height: var( + --mod-card-body-line-height, + var(--spectrum-card-body-line-height) + ); + border-block-start: var( + --mod-card-border-width, + var(--spectrum-card-border-width) + ) solid var(--mod-card-divider-color, var(--spectrum-card-divider-color)); } @@ -438,7 +612,10 @@ governing permissions and limitations under the License. .spectrum-Card--quiet { .spectrum-Card-preview { - border: var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) + border: var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ) solid transparent; } @@ -450,15 +627,32 @@ governing permissions and limitations under the License. } .spectrum-Card-preview::after { - border-color: var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color)); + border-color: var( + --mod-card-focus-indicator-color, + var(--spectrum-card-focus-indicator-color) + ); } } &.is-selected { .spectrum-Card-preview { - /* @deprecation --mod-card-preview-border-width has been renamed to --mod-card-preview-border-width-selected and the fallback will be removed in a future version. */ - border: var(--mod-card-preview-border-width-selected, var(--mod-card-preview-border-width, var(--spectrum-card-preview-border-width-selected))) solid; - border-color: var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected))); + /* @deprecation --mod-card-preview-border-width has been renamed to --mod-card-preview-border-width-selected + and the fallback will be removed in a future version. */ + border: var( + --mod-card-preview-border-width-selected, + var( + --mod-card-preview-border-width, + var(--spectrum-card-preview-border-width-selected) + ) + ) + solid; + border-color: var( + --highcontrast-card-border-color-selected, + var( + --mod-card-border-color-selected, + var(--spectrum-card-border-color-selected) + ) + ); } } } @@ -466,7 +660,10 @@ governing permissions and limitations under the License. .spectrum-Card--quiet, .spectrum-Card--gallery { block-size: 100%; - min-inline-size: var(--mod-card-minimum-width, var(--spectrum-card-minimum-width)); + min-inline-size: var( + --mod-card-minimum-width, + var(--spectrum-card-minimum-width) + ); border-width: 0; border-radius: 0; overflow: visible; @@ -529,7 +726,10 @@ governing permissions and limitations under the License. border-width: 0; border-radius: calc( var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) + - var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) + var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ) ); margin-block-start: calc( -1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) @@ -571,23 +771,38 @@ governing permissions and limitations under the License. } .spectrum-Card-preview::before { - border-color: var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color)); + border-color: var( + --mod-card-focus-indicator-color, + var(--spectrum-card-focus-indicator-color) + ); box-shadow: 0 0 0 1px - var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color)); + var( + --mod-card-focus-indicator-color, + var(--spectrum-card-focus-indicator-color) + ); } } &.is-selected { .spectrum-Card-preview::before { background-color: rgba( - var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), - var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity)) + var( + --mod-card-selected-background-color-rgb, + var(--spectrum-card-selected-background-color-rgb) + ), + var( + --mod-card-selected-background-opacity, + var(--spectrum-card-selected-background-opacity) + ) ); } } .spectrum-Card-body { - margin-block-start: var(--mod-card-content-margin-top, var(--spectrum-card-content-margin-top)); + margin-block-start: var( + --mod-card-content-margin-top, + var(--spectrum-card-content-margin-top) + ); } .spectrum-Card-body { @@ -605,7 +820,10 @@ governing permissions and limitations under the License. &:hover { .spectrum-Card-preview { - border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover)); + border-color: var( + --mod-card-border-color-hover, + var(--spectrum-card-border-color-hover) + ); } } @@ -621,9 +839,18 @@ governing permissions and limitations under the License. border-end-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); border-end-end-radius: 0; - padding: var(--mod-card-horizontal-preview-padding, var(--spectrum-card-horizontal-preview-padding)); - background-color: var(--mod-card-preview-background-color, var(--spectrum-card-preview-background-color)); - border-color: var(--mod-card-border-color, var(--spectrum-card-border-color)); + padding: var( + --mod-card-horizontal-preview-padding, + var(--spectrum-card-horizontal-preview-padding) + ); + background-color: var( + --mod-card-preview-background-color, + var(--spectrum-card-preview-background-color) + ); + border-color: var( + --mod-card-border-color, + var(--spectrum-card-border-color) + ); } .spectrum-Card-header, @@ -646,7 +873,10 @@ governing permissions and limitations under the License. justify-content: center; flex-direction: column; padding-block: 0; - padding-inline: var(--mod-card-horizontal-body-padding, var(--spectrum-card-horizontal-body-padding)); + padding-inline: var( + --mod-card-horizontal-body-padding, + var(--spectrum-card-horizontal-body-padding) + ); } } diff --git a/components/colorhandle/index.css b/components/colorhandle/index.css index 7de029134c6..510561c9740 100644 --- a/components/colorhandle/index.css +++ b/components/colorhandle/index.css @@ -28,8 +28,12 @@ governing permissions and limitations under the License. --spectrum-colorhandle-border-width: var(--spectrum-color-handle-border-width); --spectrum-colorhandle-border-color: var(--spectrum-white); - --spectrum-colorhandle-border-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-colorhandle-fill-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-colorhandle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-colorhandle-fill-color-disabled: var( + --spectrum-disabled-background-color + ); --mod-opacity-checkerboard-position: 50%; } diff --git a/components/dialog/index.css b/components/dialog/index.css index d885008aace..30fe156565f 100644 --- a/components/dialog/index.css +++ b/components/dialog/index.css @@ -82,7 +82,9 @@ governing permissions and limitations under the License. grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var( + --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) + ); grid-template-areas: "hero hero hero hero hero hero" ". . . . . ." @@ -214,7 +216,9 @@ governing permissions and limitations under the License. grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var( + --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) + ); grid-template-areas: "hero hero hero hero hero hero hero" ". . . . . closeButton closeButton" @@ -264,8 +268,12 @@ governing permissions and limitations under the License. &.spectrum-Dialog .spectrum-Dialog-grid { display: grid; - grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr auto auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr auto auto var( + --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) + ); + grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr var( + --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) + ); grid-template-areas: ". . . . ." ". heading header buttonGroup ." @@ -304,7 +312,9 @@ governing permissions and limitations under the License. grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var( + --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) + ); grid-template-areas: "hero hero hero hero hero hero" ". . . . . ." @@ -320,7 +330,9 @@ governing permissions and limitations under the License. grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var( + --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) + ); grid-template-areas: "hero hero hero hero hero hero hero" ". . . . . closeButton closeButton" @@ -340,8 +352,12 @@ governing permissions and limitations under the License. .spectrum-Dialog--fullscreenTakeover { &.spectrum-Dialog .spectrum-Dialog-grid { display: grid; - grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr var( + --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) + ); + grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var( + --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) + ); grid-template-areas: ". . ." ". heading ." @@ -353,7 +369,9 @@ governing permissions and limitations under the License. } .spectrum-Dialog-buttonGroup { - padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)); + padding-block-start: var( + --mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top) + ); } .spectrum-Dialog-heading { diff --git a/components/dropindicator/index.css b/components/dropindicator/index.css index 15cc5454457..8b66dfbc830 100644 --- a/components/dropindicator/index.css +++ b/components/dropindicator/index.css @@ -34,8 +34,14 @@ governing permissions and limitations under the License. &::after { content: ''; position: absolute; - inline-size: var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)); - block-size: var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)); + inline-size: var( + --mod-dropindicator-circle-size, + var(--spectrum-dropindicator-circle-size) + ); + block-size: var( + --mod-dropindicator-circle-size, + var(--spectrum-dropindicator-circle-size) + ); border-radius: 50%; border: var( --mod-dropindicator-border-size, @@ -49,8 +55,14 @@ governing permissions and limitations under the License. } .spectrum-DropIndicator--horizontal { - block-size: var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)); - margin: 0 var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)); + block-size: var( + --mod-dropindicator-border-size, + var(--spectrum-dropindicator-border-size) + ); + margin: 0 var( + --mod-dropindicator-circle-size, + var(--spectrum-dropindicator-circle-size) + ); &::before, &::after { @@ -67,8 +79,14 @@ governing permissions and limitations under the License. } .spectrum-DropIndicator--vertical { - inline-size: var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)); - margin-block: var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)); + inline-size: var( + --mod-dropindicator-border-size, + var(--spectrum-dropindicator-border-size) + ); + margin-block: var( + --mod-dropindicator-circle-size, + var(--spectrum-dropindicator-circle-size) + ); margin-inline: 0; &::before, diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index 073437b4e51..fcbbaa9a4e2 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -18,32 +18,70 @@ governing permissions and limitations under the License. --spectrum-infield-button-width: var(--spectrum-component-height-100); --spectrum-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); - --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill); - --spectrum-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill); + --spectrum-infield-button-edge-to-fill: var( + --spectrum-in-field-button-edge-to-fill + ); + --spectrum-infield-button-inner-edge-to-fill: var( + --spectrum-in-field-button-stacked-inner-edge-to-fill + ); --spectrum-infield-button-fill-padding: 0px; --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium); --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium); - --spectrum-infield-button-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-infield-button-animation-duration: var( + --spectrum-animation-duration-100 + ); - --spectrum-infield-button-icon-color: var(--spectrum-neutral-content-color-default); - --spectrum-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-infield-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-infield-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-infield-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-infield-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); --spectrum-infield-button-fill-justify-content: center; &:disabled { - --mod-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color)); - --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); - --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); - --mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color)); - - --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --mod-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --mod-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color)); + --mod-infield-button-background-color: var( + --mod-infield-button-background-color-disabled, + var(--spectrum-disabled-background-color) + ); + --mod-infield-button-background-color-hover: var( + --mod-infield-button-background-color-hover-disabled, + var(--spectrum-disabled-background-color) + ); + --mod-infield-button-background-color-down: var( + --mod-infield-button-background-color-down-disabled, + var(--spectrum-disabled-background-color) + ); + --mod-infield-button-border-color: var( + --mod-infield-button-border-color-disabled, + var(--spectrum-disabled-background-color) + ); + + --mod-infield-button-icon-color: var( + --mod-infield-button-icon-color-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-infield-button-icon-color-hover: var( + --mod-infield-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-infield-button-icon-color-down: var( + --mod-infield-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-infield-button-icon-color-key-focus: var( + --mod-infield-button-icon-color-key-focus-disabled, + var(--spectrum-disabled-content-color) + ); } &.spectrum-InfieldButton--sizeS { @@ -75,33 +113,69 @@ governing permissions and limitations under the License. &.spectrum-InfieldButton--top, &.spectrum-InfieldButton--bottom { - --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium)); + --mod-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-medium) + ); &.spectrum-InfieldButton--sizeS { - --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small)); + --mod-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-small) + ); } &.spectrum-InfieldButton--sizeL { - --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large)); + --mod-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-large) + ); } &.spectrum-InfieldButton--sizeXL { - --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large)); + --mod-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-extra-large) + ); } } &.spectrum-InfieldButton--quiet { - --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent); - --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent); - --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent); - --mod-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent); + --mod-infield-button-background-color: var( + --mod-infield-button-background-color-quiet, + transparent + ); + --mod-infield-button-background-color-hover: var( + --mod-infield-button-background-color-hover-quiet, + transparent + ); + --mod-infield-button-background-color-down: var( + --mod-infield-button-background-color-down-quiet, + transparent + ); + --mod-infield-button-background-color-key-focus: var( + --mod-infield-button-background-color-key-focus-quiet, + transparent + ); - --mod-infield-border-color: var(--mod-infield-border-color-quiet, transparent); - --mod-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0); + --mod-infield-border-color: var( + --mod-infield-border-color-quiet, + transparent + ); + --mod-infield-button-border-width: var( + --mod-infield-button-border-width-quiet, + 0 + ); &:disabled { - --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent); - --mod-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent); + --mod-infield-button-background-color: var( + --mod-infield-button-background-color-quiet-disabled, + transparent + ); + --mod-infield-button-border-color: var( + --mod-infield-button-border-color-quiet-disabled, + transparent + ); } } @@ -123,47 +197,92 @@ governing permissions and limitations under the License. justify-content: center; align-items: center; - block-size: var(--mod-infield-button-height, var(--spectrum-infield-button-height)); - inline-size: var(--mod-infield-button-width, var(--spectrum-infield-button-width)); + block-size: var( + --mod-infield-button-height, + var(--spectrum-infield-button-height) + ); + inline-size: var( + --mod-infield-button-width, + var(--spectrum-infield-button-width) + ); - padding: var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)); + padding: var( + --mod-infield-button-edge-to-fill, + var(--spectrum-infield-button-edge-to-fill) + ); .spectrum-InfieldButton-fill { block-size: 100%; inline-size: 100%; - background-color: var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color)); + background-color: var( + --mod-infield-button-background-color, + var(--spectrum-infield-button-background-color) + ); - border-width: var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)); + border-width: var( + --mod-infield-button-border-width, + var(--spectrum-infield-button-border-width) + ); border-style: solid; border-color: var( --highcontrast-infield-button-border-color, var(--mod-infield-button-border-color, var(--spectrum-infield-button-border-color)) ); - border-end-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); - border-start-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); - border-end-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); - border-start-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); + border-end-end-radius: var( + --mod-infield-button-border-radius, + var(--spectrum-infield-button-border-radius) + ); + border-start-end-radius: var( + --mod-infield-button-border-radius, + var(--spectrum-infield-button-border-radius) + ); + border-end-start-radius: var( + --mod-infield-button-border-radius, + var(--spectrum-infield-button-border-radius) + ); + border-start-start-radius: var( + --mod-infield-button-border-radius, + var(--spectrum-infield-button-border-radius) + ); - padding: var(--mod-infield-button-fill-padding, var(--spectrum-infield-button-fill-padding)); + padding: var( + --mod-infield-button-fill-padding, + var(--spectrum-infield-button-fill-padding) + ); } .spectrum-InfieldButton-icon { - color: var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color)); + color: var( + --mod-infield-button-icon-color, + var(--spectrum-infield-button-icon-color) + ); } &.spectrum-InfieldButton--right { .spectrum-InfieldButton-fill { - border-end-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset)); - border-start-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset)); + border-end-start-radius: var( + --mod-infield-button-border-radius-reset, + var(--spectrum-infield-button-border-radius-reset) + ); + border-start-start-radius: var( + --mod-infield-button-border-radius-reset, + var(--spectrum-infield-button-border-radius-reset) + ); } } &.spectrum-InfieldButton--left { .spectrum-InfieldButton-fill { - border-end-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset)); - border-start-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset)); + border-end-end-radius: var( + --mod-infield-button-border-radius-reset, + var(--spectrum-infield-button-border-radius-reset) + ); + border-start-end-radius: var( + --mod-infield-button-border-radius-reset, + var(--spectrum-infield-button-border-radius-reset) + ); } } @@ -173,21 +292,33 @@ governing permissions and limitations under the License. &:hover { .spectrum-InfieldButton-fill { - background-color: var(--mod-infield-button-background-color-hover, var(--spectrum-infield-button-background-color-hover)); + background-color: var( + --mod-infield-button-background-color-hover, + var(--spectrum-infield-button-background-color-hover) + ); } .spectrum-InfieldButton-icon { - color: var(--mod-infield-button-icon-color-hover, var(--spectrum-infield-button-icon-color-hover)); + color: var( + --mod-infield-button-icon-color-hover, + var(--spectrum-infield-button-icon-color-hover) + ); } } &:active { .spectrum-InfieldButton-fill { - background-color: var(--mod-infield-button-background-color-down, var(--spectrum-infield-button-background-color-down)); + background-color: var( + --mod-infield-button-background-color-down, + var(--spectrum-infield-button-background-color-down) + ); } .spectrum-InfieldButton-icon { - color: var(--mod-infield-button-icon-color-down, var(--spectrum-infield-button-icon-color-down)); + color: var( + --mod-infield-button-icon-color-down, + var(--spectrum-infield-button-icon-color-down) + ); } } @@ -195,11 +326,17 @@ governing permissions and limitations under the License. outline: none; .spectrum-InfieldButton-fill { - background-color: var(--mod-infield-button-background-color-key-focus, var(--spectrum-infield-button-background-color-key-focus)); + background-color: var( + --mod-infield-button-background-color-key-focus, + var(--spectrum-infield-button-background-color-key-focus) + ); } .spectrum-InfieldButton-icon { - color: var(--mod-infield-button-icon-color-key-focus, var(--spectrum-infield-button-icon-color-key-focus)); + color: var( + --mod-infield-button-icon-color-key-focus, + var(--spectrum-infield-button-icon-color-key-focus) + ); } } } @@ -208,7 +345,10 @@ governing permissions and limitations under the License. /* center icon */ display: flex; align-items: center; - justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content)); + justify-content: var( + --mod-infield-button-fill-justify-content, + var(--spectrum-infield-button-fill-justify-content) + ); transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out; } @@ -229,27 +369,51 @@ governing permissions and limitations under the License. } .spectrum-InfieldButton--top { - padding-block-end: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)); + padding-block-end: var( + --mod-infield-button-inner-edge-to-fill, + var(--spectrum-infield-button-inner-edge-to-fill) + ); .spectrum-InfieldButton-fill { padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill))); border-block-end: none; - border-start-start-radius: var(--mod-infield-button-stacked-top-border-radius-start-start, var(--spectrum-infield-button-stacked-top-border-radius-start-start)); - border-end-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); - border-end-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); + border-start-start-radius: var( + --mod-infield-button-stacked-top-border-radius-start-start, + var(--spectrum-infield-button-stacked-top-border-radius-start-start) + ); + border-end-start-radius: var( + --mod-infield-button-stacked-border-radius-reset, + var(--spectrum-infield-button-stacked-border-radius-reset) + ); + border-end-end-radius: var( + --mod-infield-button-stacked-border-radius-reset, + var(--spectrum-infield-button-stacked-border-radius-reset) + ); } } .spectrum-InfieldButton--bottom { - padding-block-start: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)); + padding-block-start: var( + --mod-infield-button-inner-edge-to-fill, + var(--spectrum-infield-button-inner-edge-to-fill) + ); .spectrum-InfieldButton-fill { padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); - border-end-start-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-start, var(--spectrum-infield-button-stacked-bottom-border-radius-end-start)); - border-start-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); - border-start-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); + border-end-start-radius: var( + --mod-infield-button-stacked-bottom-border-radius-end-start, + var(--spectrum-infield-button-stacked-bottom-border-radius-end-start) + ); + border-start-start-radius: var( + --mod-infield-button-stacked-border-radius-reset, + var(--spectrum-infield-button-stacked-border-radius-reset) + ); + border-start-end-radius: var( + --mod-infield-button-stacked-border-radius-reset, + var(--spectrum-infield-button-stacked-border-radius-reset) + ); border-end-end-radius: var( --mod-infield-button-stacked-bottom-border-radius-end-end, var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)) diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css index 4965444ba96..5d9e7c78b04 100644 --- a/components/opacitycheckerboard/index.css +++ b/components/opacitycheckerboard/index.css @@ -8,25 +8,46 @@ express or implied. See the License for the specific language governing permissions and limitations under the License. */ .spectrum-OpacityCheckerboard { - --spectrum-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark); - --spectrum-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light); - --spectrum-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); + --spectrum-opacity-checkerboard-dark: var( + --spectrum-opacity-checkerboard-square-dark + ); + --spectrum-opacity-checkerboard-light: var( + --spectrum-opacity-checkerboard-square-light + ); + --spectrum-opacity-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); --spectrum-opacity-checkerboard-position: left top; } .spectrum-OpacityCheckerboard { background: repeating-conic-gradient( - var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-light)) + var( + --mod-opacity-checkerboard-light, + var(--spectrum-opacity-checkerboard-light) + ) 0% 25%, - var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-dark)) + var( + --mod-opacity-checkerboard-dark, + var(--spectrum-opacity-checkerboard-dark) + ) 0% 50% ) - var(--mod-opacity-checkerboard-position, var(--spectrum-opacity-checkerboard-position)) / + var( + --mod-opacity-checkerboard-position, + var(--spectrum-opacity-checkerboard-position) + ) / calc( - var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2 + var( + --mod-opacity-checkerboard-size, + var(--spectrum-opacity-checkerboard-size) + ) * 2 ) calc( - var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2 + var( + --mod-opacity-checkerboard-size, + var(--spectrum-opacity-checkerboard-size) + ) * 2 ); } diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css index ddf057e8550..47c289ec041 100644 --- a/components/pickerbutton/index.css +++ b/components/pickerbutton/index.css @@ -21,47 +21,114 @@ governing permissions and limitations under the License. --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50); --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); - --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200); - - --spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default); - --spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-picker-button-font-color: var(--spectrum-neutral-content-color-default); - --spectrum-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-picker-button-font-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-picker-button-border-radius-rounded: var( + --spectrum-corner-radius-200 + ); + + --spectrum-picker-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-picker-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-picker-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-picker-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + + --spectrum-picker-button-font-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-picker-button-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-picker-button-font-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-picker-button-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); --spectrum-picker-button-font-family: var(--spectrum-sans-font-family-stack); --spectrum-picker-button-font-style: var(--spectrum-default-font-style); - --spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-picker-button-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); --spectrum-picker-button-font-size: var(--spectrum-font-size-100); - --spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-picker-button-background-animation-duration: var( + --spectrum-animation-duration-100 + ); &:disabled { - --mod-picker-button-background-color: var(--mod-picker-button-background-color-disabled, var(--spectrum-disabled-background-color)); - --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); - --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); - --mod-picker-button-border-color: var(--mod-picker-button-border-color-disabled, var(--spectrum-disabled-background-color)); - - --mod-picker-button-font-color: var(--mod-picker-button-font-color-disabled, var(--spectrum-disabled-content-color)); - --mod-picker-button-font-color-hover: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-disabled-content-color)); - --mod-picker-button-font-color-down: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-disabled-content-color)); - - --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); + --mod-picker-button-background-color: var( + --mod-picker-button-background-color-disabled, + var(--spectrum-disabled-background-color) + ); + --mod-picker-button-background-color-hover: var( + --mod-picker-button-background-color-hover-disabled, + var(--spectrum-disabled-background-color) + ); + --mod-picker-button-background-color-down: var( + --mod-picker-button-background-color-down-disabled, + var(--spectrum-disabled-background-color) + ); + --mod-picker-button-border-color: var( + --mod-picker-button-border-color-disabled, + var(--spectrum-disabled-background-color) + ); + + --mod-picker-button-font-color: var( + --mod-picker-button-font-color-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-picker-button-font-color-hover: var( + --mod-picker-button-font-color-hover-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-picker-button-font-color-down: var( + --mod-picker-button-font-color-down-disabled, + var(--spectrum-disabled-content-color) + ); + + --mod-picker-button-icon-color: var( + --mod-picker-button-icon-color-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-picker-button-icon-color-hover: var( + --mod-picker-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-picker-button-icon-color-down: var( + --mod-picker-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) + ); } &.spectrum-PickerButton--quiet { - --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent); - --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent); - --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent); - --mod-picker-button-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent); - - --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet, transparent); + --mod-picker-button-background-color: var( + --mod-picker-button-background-color-quiet, + transparent + ); + --mod-picker-button-background-color-hover: var( + --mod-picker-button-background-color-hover-quiet, + transparent + ); + --mod-picker-button-background-color-down: var( + --mod-picker-button-background-color-down-quiet, + transparent + ); + --mod-picker-button-background-color-key-focus: var( + --mod-picker-button-background-color-key-focus-quiet, + transparent + ); + + --mod-picker-button-border-color: var( + --mod-picker-button-border-color-quiet, + transparent + ); } &.spectrum-PickerButton--sizeS { @@ -92,39 +159,63 @@ governing permissions and limitations under the License. .spectrum-PickerButton { border-style: none; background-color: transparent; - block-size: var(--mod-picker-button-width, var(--spectrum-picker-button-width)); + block-size: var( + --mod-picker-button-width, + var(--spectrum-picker-button-width) + ); display: flex; justify-content: center; align-items: center; box-sizing: border-box; - padding: var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)); + padding: var( + --mod-picker-button-padding, + var(--spectrum-picker-button-padding) + ); &:hover { .spectrum-PickerButton-fill { - background-color: var(--mod-picker-button-background-color-hover, var(--spectrum-picker-button-background-color-hover)); + background-color: var( + --mod-picker-button-background-color-hover, + var(--spectrum-picker-button-background-color-hover) + ); } .spectrum-PickerButton-label { - color: var(--mod-picker-button-font-color-hover, var(--spectrum-picker-button-font-color-hover)); + color: var( + --mod-picker-button-font-color-hover, + var(--spectrum-picker-button-font-color-hover) + ); } .spectrum-PickerButton-icon { - color: var(--mod-picker-button-icon-color-hover, var(--spectrum-picker-button-icon-color-hover)); + color: var( + --mod-picker-button-icon-color-hover, + var(--spectrum-picker-button-icon-color-hover) + ); } } &:active, &.is-open { .spectrum-PickerButton-fill { - background-color: var(--mod-picker-button-background-color-down, var(--spectrum-picker-button-background-color-down)); + background-color: var( + --mod-picker-button-background-color-down, + var(--spectrum-picker-button-background-color-down) + ); } .spectrum-PickerButton-label { - color: var(--mod-picker-button-font-color-down, var(--spectrum-picker-button-font-color-down)); + color: var( + --mod-picker-button-font-color-down, + var(--spectrum-picker-button-font-color-down) + ); } .spectrum-PickerButton-icon { - color: var(--mod-picker-button-icon-color-down, var(--spectrum-picker-button-icon-color-down)); + color: var( + --mod-picker-button-icon-color-down, + var(--spectrum-picker-button-icon-color-down) + ); } } @@ -133,43 +224,76 @@ governing permissions and limitations under the License. &:focus-visible, &.is-keyboardFocused { .spectrum-PickerButton-fill { - background-color: var(--mod-picker-button-background-color-key-focus, var(--spectrum-picker-button-background-color-key-focus)); + background-color: var( + --mod-picker-button-background-color-key-focus, + var(--spectrum-picker-button-background-color-key-focus) + ); } .spectrum-PickerButton-label { - color: var(--mod-picker-button-font-color-key-focus, var(--spectrum-picker-button-font-color-key-focus)); + color: var( + --mod-picker-button-font-color-key-focus, + var(--spectrum-picker-button-font-color-key-focus) + ); } .spectrum-PickerButton-icon { - color: var(--mod-picker-button-icon-color-key-focus, var(--spectrum-picker-button-icon-color-key-focus)); + color: var( + --mod-picker-button-icon-color-key-focus, + var(--spectrum-picker-button-icon-color-key-focus) + ); } } } .spectrum-PickerButton--right { .spectrum-PickerButton-fill { - border-end-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided)); - border-start-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided)); + border-end-start-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) + ); + border-start-start-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) + ); } &.spectrum-PickerButton--rounded { .spectrum-PickerButton-fill { - border-end-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided)); - border-start-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided)); + border-end-start-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) + ); + border-start-start-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) + ); } } } .spectrum-PickerButton--left { .spectrum-PickerButton-fill { - border-end-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided)); - border-start-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided)); + border-end-end-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) + ); + border-start-end-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) + ); } &.spectrum-PickerButton--rounded { .spectrum-PickerButton-fill { - border-end-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided)); - border-start-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided)); + border-end-end-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) + ); + border-start-end-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) + ); } } } @@ -177,17 +301,38 @@ governing permissions and limitations under the License. .spectrum-PickerButton-label { /* Be the biggest, but also shrink! */ flex: 1 1 auto; - color: var(--mod-picker-button-font-color, var(--spectrum-picker-button-font-color)); + color: var( + --mod-picker-button-font-color, + var(--spectrum-picker-button-font-color) + ); white-space: nowrap; overflow: hidden; - padding-block-end: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding)); - padding-block-start: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding)); - - font-family: var(--mod-picker-button-font-family, var(--spectrum-picker-button-font-family)); - font-style: var(--mod-picker-button-font-style, var(--spectrum-picker-button-font-style)); - font-weight: var(--mod-picker-button-font-weight, var(--spectrum-picker-button-font-weight)); - font-size: var(--mod-picker-button-font-size, var(--spectrum-picker-button-font-size)); + padding-block-end: var( + --mod-picker-button-label-padding, + var(--spectrum-picker-button-label-padding) + ); + padding-block-start: var( + --mod-picker-button-label-padding, + var(--spectrum-picker-button-label-padding) + ); + + font-family: var( + --mod-picker-button-font-family, + var(--spectrum-picker-button-font-family) + ); + font-style: var( + --mod-picker-button-font-style, + var(--spectrum-picker-button-font-style) + ); + font-weight: var( + --mod-picker-button-font-weight, + var(--spectrum-picker-button-font-weight) + ); + font-size: var( + --mod-picker-button-font-size, + var(--spectrum-picker-button-font-size) + ); } .spectrum-PickerButton-fill { @@ -199,39 +344,81 @@ governing permissions and limitations under the License. inline-size: 100%; gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap)); - background-color: var(--mod-picker-button-background-color, var(--spectrum-picker-button-background-color)); - border-color: var(--mod-picker-button-border-color, var(--spectrum-picker-button-border-color)); - border-width: var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width)); + background-color: var( + --mod-picker-button-background-color, + var(--spectrum-picker-button-background-color) + ); + border-color: var( + --mod-picker-button-border-color, + var(--spectrum-picker-button-border-color) + ); + border-width: var( + --mod-picker-button-border-width, + var(--spectrum-picker-button-border-width) + ); border-style: solid; padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)) - var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width))); - border-end-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); - border-end-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); - border-start-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); - border-start-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); + border-end-end-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) + ); + border-end-start-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) + ); + border-start-end-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) + ); + border-start-start-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) + ); transition: border-color - var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) + var( + --mod-picker-button-background-animation-duration, + var(--spectrum-picker-button-background-animation-duration) + ) ease-in-out; } .spectrum-PickerButton-icon { /* don't be small, ever */ flex-shrink: 0; - color: var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color)); + color: var( + --mod-picker-button-icon-color, + var(--spectrum-picker-button-icon-color) + ); } .spectrum-PickerButton--rounded { .spectrum-PickerButton-fill { - border-end-end-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded)); - border-end-start-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded)); - border-start-end-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded)); - border-start-start-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded)); + border-end-end-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) + ); + border-end-start-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) + ); + border-start-end-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) + ); + border-start-start-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) + ); } } .spectrum-PickerButton--uiicononly { - inline-size: var(--mod-picker-button-height, var(--spectrum-picker-button-height)); + inline-size: var( + --mod-picker-button-height, + var(--spectrum-picker-button-height) + ); .spectrum-PickerButton-label { display: none; diff --git a/components/search/index.css b/components/search/index.css index bc365ece1c7..dbe83a533f1 100644 --- a/components/search/index.css +++ b/components/search/index.css @@ -26,12 +26,18 @@ governing permissions and limitations under the License. --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-100); --spectrum-search-to-help-text: var(--spectrum-help-text-to-component); --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-search-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); /* Focus Indicator */ - --spectrum-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-search-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); --spectrum-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-search-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-search-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); /* Font / Color */ --spectrum-search-font-family: var(--spectrum-sans-font-family-stack); @@ -39,11 +45,17 @@ governing permissions and limitations under the License. --spectrum-search-font-style: var(--spectrum-default-font-style); --spectrum-search-line-height: var(--spectrum-line-height-100); - --spectrum-search-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-search-color-default: var( + --spectrum-neutral-content-color-default + ); --spectrum-search-color-hover: var(--spectrum-neutral-content-color-hover); --spectrum-search-color-focus: var(--spectrum-neutral-content-color-focus); - --spectrum-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); - --spectrum-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-search-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --spectrum-search-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); /* Background and Border */ --spectrum-search-border-width: var(--spectrum-border-width-100); @@ -51,36 +63,103 @@ governing permissions and limitations under the License. /* Disabled */ --spectrum-search-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-search-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --spectrum-search-border-color-disabled: var( + --spectrum-disabled-background-color + ); /* Settings for nested Textfield component. */ - --mod-textfield-font-family: var(--mod-search-font-family, var(--spectrum-search-font-family)); - --mod-textfield-font-weight: var(--mod-search-font-weight, var(--spectrum-search-font-weight)); - - --mod-textfield-corner-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius)); - --mod-textfield-border-width: var(--mod-search-border-width, var(--spectrum-search-border-width)); - - --mod-textfield-focus-indicator-gap: var(--mod-search-focus-indicator-gap, var(--spectrum-search-focus-indicator-gap)); - --mod-textfield-focus-indicator-width: var(--mod-search-focus-indicator-thickness, var(--spectrum-search-focus-indicator-thickness)); - --mod-textfield-focus-indicator-color: var(--mod-search-focus-indicator-color, var(--spectrum-search-focus-indicator-color)); - - --mod-textfield-text-color-default: var(--mod-search-color-default, var(--spectrum-search-color-default)); - --mod-textfield-text-color-hover: var(--mod-search-color-hover, var(--spectrum-search-color-hover)); - --mod-textfield-text-color-focus: var(--mod-search-color-focus, var(--spectrum-search-color-focus)); - --mod-textfield-text-color-focus-hover: var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover)); - --mod-textfield-text-color-keyboard-focus: var(--mod-search-color-key-focus, var(--spectrum-search-color-key-focus)); - --mod-textfield-text-color-disabled: var(--mod-search-color-disabled, var(--spectrum-search-color-disabled)); - - --mod-textfield-border-color: var(--mod-search-border-color-default, var(--spectrum-search-border-color-default)); - --mod-textfield-border-color-hover: var(--mod-search-border-color-hover, var(--spectrum-search-border-color-hover)); - --mod-textfield-border-color-focus: var(--mod-search-border-color-focus, var(--spectrum-search-border-color-focus)); - --mod-textfield-border-color-focus-hover: var(--mod-search-border-color-focus-hover, var(--spectrum-search-border-color-focus-hover)); - --mod-textfield-border-color-keyboard-focus: var(--mod-search-border-color-key-focus, var(--spectrum-search-border-color-key-focus)); - --mod-textfield-border-color-disabled: var(--mod-search-border-color-disabled, var(--spectrum-search-border-color-disabled)); - - --mod-textfield-background-color: var(--mod-search-background-color, var(--spectrum-search-background-color)); - --mod-textfield-background-color-disabled: var(--mod-search-background-color-disabled, var(--spectrum-search-background-color-disabled)); + --mod-textfield-font-family: var( + --mod-search-font-family, + var(--spectrum-search-font-family) + ); + --mod-textfield-font-weight: var( + --mod-search-font-weight, + var(--spectrum-search-font-weight) + ); + + --mod-textfield-corner-radius: var( + --mod-search-border-radius, + var(--spectrum-search-border-radius) + ); + --mod-textfield-border-width: var( + --mod-search-border-width, + var(--spectrum-search-border-width) + ); + + --mod-textfield-focus-indicator-gap: var( + --mod-search-focus-indicator-gap, + var(--spectrum-search-focus-indicator-gap) + ); + --mod-textfield-focus-indicator-width: var( + --mod-search-focus-indicator-thickness, + var(--spectrum-search-focus-indicator-thickness) + ); + --mod-textfield-focus-indicator-color: var( + --mod-search-focus-indicator-color, + var(--spectrum-search-focus-indicator-color) + ); + + --mod-textfield-text-color-default: var( + --mod-search-color-default, + var(--spectrum-search-color-default) + ); + --mod-textfield-text-color-hover: var( + --mod-search-color-hover, + var(--spectrum-search-color-hover) + ); + --mod-textfield-text-color-focus: var( + --mod-search-color-focus, + var(--spectrum-search-color-focus) + ); + --mod-textfield-text-color-focus-hover: var( + --mod-search-color-focus-hover, + var(--spectrum-search-color-focus-hover) + ); + --mod-textfield-text-color-keyboard-focus: var( + --mod-search-color-key-focus, + var(--spectrum-search-color-key-focus) + ); + --mod-textfield-text-color-disabled: var( + --mod-search-color-disabled, + var(--spectrum-search-color-disabled) + ); + + --mod-textfield-border-color: var( + --mod-search-border-color-default, + var(--spectrum-search-border-color-default) + ); + --mod-textfield-border-color-hover: var( + --mod-search-border-color-hover, + var(--spectrum-search-border-color-hover) + ); + --mod-textfield-border-color-focus: var( + --mod-search-border-color-focus, + var(--spectrum-search-border-color-focus) + ); + --mod-textfield-border-color-focus-hover: var( + --mod-search-border-color-focus-hover, + var(--spectrum-search-border-color-focus-hover) + ); + --mod-textfield-border-color-keyboard-focus: var( + --mod-search-border-color-key-focus, + var(--spectrum-search-border-color-key-focus) + ); + --mod-textfield-border-color-disabled: var( + --mod-search-border-color-disabled, + var(--spectrum-search-border-color-disabled) + ); + + --mod-textfield-background-color: var( + --mod-search-background-color, + var(--spectrum-search-background-color) + ); + --mod-textfield-background-color-disabled: var( + --mod-search-background-color-disabled, + var(--spectrum-search-background-color-disabled) + ); } .spectrum-Search--sizeS { @@ -105,17 +184,24 @@ governing permissions and limitations under the License. --spectrum-search-quiet-button-offset: calc( (var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2) - ( - var(--mod-workflow-icon-size-100, var(--spectrum-workflow-icon-size-100)) / 2 + var( + --mod-workflow-icon-size-100, + var(--spectrum-workflow-icon-size-100) + ) / 2 ) ); --spectrum-search-background-color: transparent; --spectrum-search-background-color-disabled: transparent; - --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-search-border-color-disabled: var( + --spectrum-disabled-border-color + ); /* Added specificity, otherwise they are overridden by system specific themes. */ &.spectrum-Search { --spectrum-search-border-radius: 0; - --spectrum-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); + --spectrum-search-edge-to-visual: var( + --spectrum-field-edge-to-visual-quiet + ); } } @@ -141,11 +227,20 @@ governing permissions and limitations under the License. .spectrum-Search { display: inline-block; position: relative; - inline-size: var(--mod-search-inline-size, var(--spectrum-search-inline-size)); - min-inline-size: var(--mod-search-min-inline-size, var(--spectrum-search-min-inline-size)); + inline-size: var( + --mod-search-inline-size, + var(--spectrum-search-inline-size) + ); + min-inline-size: var( + --mod-search-min-inline-size, + var(--spectrum-search-min-inline-size) + ); .spectrum-HelpText { - margin-block-start: var(--mod-search-to-help-text, var(--spectrum-search-to-help-text)); + margin-block-start: var( + --mod-search-to-help-text, + var(--spectrum-search-to-help-text) + ); } } @@ -153,10 +248,16 @@ governing permissions and limitations under the License. position: absolute; inset-inline-end: 0; inset-block-start: 0; - border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius)); + border-radius: var( + --mod-search-border-radius, + var(--spectrum-search-border-radius) + ); .spectrum-ClearButton-fill { - border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius)); + border-radius: var( + --mod-search-border-radius, + var(--spectrum-search-border-radius) + ); } .spectrum-Search.is-disabled & { @@ -197,7 +298,10 @@ governing permissions and limitations under the License. .spectrum-Search-textfield.is-focused:hover & { --spectrum-search-color: var( --highcontrast-search-color-focus, - var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover)) + var( + --mod-search-color-focus-hover, + var(--spectrum-search-color-focus-hover) + ) ); } @@ -239,13 +343,19 @@ governing permissions and limitations under the License. ); font-style: var(--mod-search-font-style, var(--spectrum-search-font-style)); - line-height: var(--mod-search-line-height, var(--spectrum-search-line-height)); + line-height: var( + --mod-search-line-height, + var(--spectrum-search-line-height) + ); } /* Standard / Default Only */ .spectrum-Search:not(.spectrum-Search--quiet) { .spectrum-Search-icon { - inset-inline-start: var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)); + inset-inline-start: var( + --mod-search-edge-to-visual, + var(--spectrum-search-edge-to-visual) + ); } .spectrum-Search-input { @@ -256,7 +366,10 @@ governing permissions and limitations under the License. var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)) ); padding-inline-end: calc( - var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var( + --mod-search-button-inline-size, + var(--spectrum-search-button-inline-size) + ) - var(--mod-search-border-width, var(--spectrum-search-border-width)) ); } } @@ -265,21 +378,36 @@ governing permissions and limitations under the License. .spectrum-Search--quiet { .spectrum-Search-clearButton { transform: translateX( - var(--mod-search-quiet-button-offset, var(--spectrum-search-quiet-button-offset)) + var( + --mod-search-quiet-button-offset, + var(--spectrum-search-quiet-button-offset) + ) ); } &.spectrum-Search .spectrum-Search-input { - border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius)); + border-radius: var( + --mod-search-border-radius, + var(--spectrum-search-border-radius) + ); padding-inline-start: calc( var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)) ); padding-inline-end: calc( - var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size)) - - var(--mod-search-quiet-button-offset, var(--spectrum-search-quiet-button-offset)) + var( + --mod-search-button-inline-size, + var(--spectrum-search-button-inline-size) + ) - + var( + --mod-search-quiet-button-offset, + var(--spectrum-search-quiet-button-offset) + ) + ); + padding-block-start: var( + --mod-search-top-to-text, + var(--spectrum-search-top-to-text) ); - padding-block-start: var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)); } } diff --git a/components/search/themes/express.css b/components/search/themes/express.css index 65cb3fdc5d0..84cff57a925 100644 --- a/components/search/themes/express.css +++ b/components/search/themes/express.css @@ -17,7 +17,9 @@ governing permissions and limitations under the License. --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-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-100 + ); --spectrum-search-border-color-default: var(--spectrum-gray-400); --spectrum-search-border-color-hover: var(--spectrum-gray-500); @@ -30,27 +32,35 @@ governing permissions and limitations under the License. --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-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-75 + ); } .spectrum-Search--sizeM { --spectrum-search-border-radius: calc( var(--spectrum-component-height-100) / 2 ); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); + --spectrum-search-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-100 + ); } .spectrum-Search--sizeL { --spectrum-search-border-radius: calc( var(--spectrum-component-height-200) / 2 ); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200); + --spectrum-search-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-200 + ); } .spectrum-Search--sizeXL { --spectrum-search-border-radius: calc( var(--spectrum-component-height-300) / 2 ); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300); + --spectrum-search-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-300 + ); } } diff --git a/components/search/themes/spectrum.css b/components/search/themes/spectrum.css index 18b60565efb..fa7ba731f31 100644 --- a/components/search/themes/spectrum.css +++ b/components/search/themes/spectrum.css @@ -13,7 +13,9 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-Search { --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --spectrum-search-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); --spectrum-search-border-color-default: var(--spectrum-gray-500); --spectrum-search-border-color-hover: var(--spectrum-gray-600); @@ -24,21 +26,29 @@ governing permissions and limitations under the License. .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-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 + ); } .spectrum-Search--sizeM { --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --spectrum-search-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); } .spectrum-Search--sizeL { --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200); + --spectrum-search-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-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 + ); } } diff --git a/components/site/component.css b/components/site/component.css index 4f7683a136a..c7c43ef564d 100644 --- a/components/site/component.css +++ b/components/site/component.css @@ -307,7 +307,10 @@ a[href*="spectrum.adobe.com"] /* CSS Example */ .spectrum-CSSExample-example { - background-color: var(--spectrum-background-layer-1-color, var(--spectrum-gray-100)); + background-color: var( + --spectrum-background-layer-1-color, + var(--spectrum-gray-100) + ); } .spectrum-CSSExample-markup { diff --git a/components/swatch/index.css b/components/swatch/index.css index fafc6f72245..0fbf80340c0 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -112,13 +112,22 @@ governing permissions and limitations under the License. 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( + --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) + ); } &, &::before { - border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius)); + border-radius: var( + --mod-swatch-border-radius, + var(--spectrum-swatch-border-radius) + ); } &.is-selected { @@ -145,7 +154,7 @@ governing permissions and limitations under the License. } &::before { - opacity: 100%; + opacity: 1; } } @@ -178,14 +187,20 @@ governing permissions and limitations under the License. background-image: none; &::after { - inline-size: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness)); + inline-size: var( + --mod-swatch-slash-thickness, + 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)) + var( + --mod-swatch-slash-icon-color, + var(--spectrum-swatch-slash-icon-color) + ) ); } } @@ -216,7 +231,7 @@ governing permissions and limitations under the License. border-style: solid; border-color: var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-swatch-border-color-selected))); - opacity: 0%; + opacity: 0; pointer-events: none; } @@ -229,7 +244,7 @@ governing permissions and limitations under the License. -2 * var(--mod-swatch-focus-indicator-gap, var(--spectrum-swatch-focus-indicator-gap)) ); - opacity: 0%; + opacity: 0; border-width: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-swatch-focus-indicator-thickness)); border-style: solid; @@ -241,7 +256,7 @@ governing permissions and limitations under the License. &:focus-visible { &::after { - opacity: 100%; + opacity: 1; } } } diff --git a/components/tabs/index.css b/components/tabs/index.css index 0267362da7c..72ec7fc2cdc 100644 --- a/components/tabs/index.css +++ b/components/tabs/index.css @@ -15,20 +15,32 @@ governing permissions and limitations under the License. .spectrum-Tabs { /* Default is Medium sizing */ --spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium); - --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); - --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium); + --spectrum-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-medium + ); + --spectrum-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-medium + ); --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium); --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-75); --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-100); - --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium); + --spectrum-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-medium + ); --spectrum-tabs-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-tabs-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --spectrum-tabs-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --spectrum-tabs-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); --spectrum-tabs-color-disabled: var(--spectrum-gray-500); --spectrum-tabs-font-family: var(--spectrum-sans-font-family-stack); @@ -37,11 +49,19 @@ governing permissions and limitations under the License. --spectrum-tabs-line-height: var(--spectrum-line-height-100); /* Focus Indicator */ - --spectrum-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --spectrum-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100); - --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium); + --spectrum-tabs-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-tabs-focus-indicator-border-radius: var( + --spectrum-corner-radius-100 + ); + --spectrum-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-medium + ); --spectrum-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-tabs-selection-indicator-color: var( + --spectrum-neutral-subdued-content-color-down + ); --spectrum-tabs-list-background-direction: top; --spectrum-tabs-divider-background-color: var(--spectrum-gray-300); @@ -53,67 +73,113 @@ governing permissions and limitations under the License. &.spectrum-Tabs--sizeS { --spectrum-tabs-item-height: var(--spectrum-tab-item-height-small); - --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small); - --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small); + --spectrum-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-small + ); + --spectrum-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-small + ); --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-small); --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-small); --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small); --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-50); --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-75); - --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small); + --spectrum-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-small + ); - --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small); + --spectrum-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-small + ); --spectrum-tabs-font-size: var(--spectrum-font-size-75); } &.spectrum-Tabs--sizeL { --spectrum-tabs-item-height: var(--spectrum-tab-item-height-large); - --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large); - --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large); + --spectrum-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-large + ); + --spectrum-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-large + ); --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-large); --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-large); --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large); --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-100); --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-200); - --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large); + --spectrum-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-large + ); - --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large); + --spectrum-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-large + ); --spectrum-tabs-font-size: var(--spectrum-font-size-200); } &.spectrum-Tabs--sizeXL { --spectrum-tabs-item-height: var(--spectrum-tab-item-height-extra-large); - --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large); - --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large); - --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large); + --spectrum-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-extra-large + ); + --spectrum-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-extra-large + ); + --spectrum-tabs-start-to-edge: var( + --spectrum-tab-item-start-to-edge-extra-large + ); --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large); - --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large); + --spectrum-tabs-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-extra-large + ); --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-200); --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-300); - --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large); + --spectrum-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-extra-large + ); - --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large); + --spectrum-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-extra-large + ); --spectrum-tabs-font-size: var(--spectrum-font-size-300); } &.spectrum-Tabs--emphasized { - --mod-tabs-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-accent-content-color-default)); - --mod-tabs-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-accent-content-color-hover)); - --mod-tabs-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-accent-content-color-key-focus)); + --mod-tabs-color-selected: var( + --mod-tabs-color-selected-emphasized, + var(--spectrum-accent-content-color-default) + ); + --mod-tabs-color-hover: var( + --mod-tabs-color-hover-emphasized, + var(--spectrum-accent-content-color-hover) + ); + --mod-tabs-color-key-focus: var( + --mod-tabs-color-key-focus-emphasized, + var(--spectrum-accent-content-color-key-focus) + ); - --mod-tabs-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-accent-content-color-default)); + --mod-tabs-selection-indicator-color: var( + --mod-tabs-selection-indicator-color-emphasized, + var(--spectrum-accent-content-color-default) + ); } } .spectrum-Tabs--vertical { - --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right); + --mod-tabs-list-background-direction: var( + --mod-tabs-list-background-direction-vertical, + right + ); } .spectrum-Tabs--vertical-right { - --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left); + --mod-tabs-list-background-direction: var( + --mod-tabs-list-background-direction-vertical-right, + left + ); } .spectrum-Tabs--vertical:dir(rtl) { @@ -131,30 +197,78 @@ governing permissions and limitations under the License. } .spectrum-Tabs.spectrum-Tabs--compact { - --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium)); - --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); - --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); - --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)); + --mod-tabs-item-height: var( + --mod-tabs-item-height-compact, + var(--spectrum-tab-item-compact-height-medium) + ); + --mod-tabs-top-to-text: var( + --mod-tabs-top-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-medium) + ); + --mod-tabs-bottom-to-text: var( + --mod-tabs-bottom-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-medium) + ); + --mod-tabs-top-to-icon: var( + --mod-tabs-top-to-icon-compact, + var(--spectrum-tab-item-top-to-workflow-icon-compact-medium) + ); &.spectrum-Tabs--sizeS { - --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-small)); - --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small)); - --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small)); - --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-small)); + --mod-tabs-item-height: var( + --mod-tabs-item-height-compact, + var(--spectrum-tab-item-compact-height-small) + ); + --mod-tabs-top-to-text: var( + --mod-tabs-top-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-small) + ); + --mod-tabs-bottom-to-text: var( + --mod-tabs-bottom-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-small) + ); + --mod-tabs-top-to-icon: var( + --mod-tabs-top-to-icon-compact, + var(--spectrum-tab-item-top-to-workflow-icon-compact-small) + ); } &.spectrum-Tabs--sizeL { - --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large)); - --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large)); - --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large)); - --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-large)); + --mod-tabs-item-height: var( + --mod-tabs-item-height-compact, + var(--spectrum-tab-item-compact-height-large) + ); + --mod-tabs-top-to-text: var( + --mod-tabs-top-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-large) + ); + --mod-tabs-bottom-to-text: var( + --mod-tabs-bottom-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-large) + ); + --mod-tabs-top-to-icon: var( + --mod-tabs-top-to-icon-compact, + var(--spectrum-tab-item-top-to-workflow-icon-compact-large) + ); } &.spectrum-Tabs--sizeXL { - --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-extra-large)); - --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); - --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); - --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large)); + --mod-tabs-item-height: var( + --mod-tabs-item-height-compact, + var(--spectrum-tab-item-compact-height-extra-large) + ); + --mod-tabs-top-to-text: var( + --mod-tabs-top-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-extra-large) + ); + --mod-tabs-bottom-to-text: var( + --mod-tabs-bottom-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-extra-large) + ); + --mod-tabs-top-to-icon: var( + --mod-tabs-top-to-icon-compact, + var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large) + ); } } @@ -173,10 +287,16 @@ governing permissions and limitations under the License. background: linear-gradient( to - var(--mod-tabs-list-background-direction, var(--spectrum-tabs-list-background-direction)), + var( + --mod-tabs-list-background-direction, + var(--spectrum-tabs-list-background-direction) + ), var( --highcontrast-tabs-divider-background-color, - var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color)) + var( + --mod-tabs-divider-background-color, + var(--spectrum-tabs-divider-background-color) + ) ) 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)) @@ -211,10 +331,16 @@ governing permissions and limitations under the License. /* Vertical centering */ block-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size)); inline-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size)); - margin-block-start: var(--mod-tabs-top-to-icon, var(--spectrum-tabs-top-to-icon)); + margin-block-start: var( + --mod-tabs-top-to-icon, + var(--spectrum-tabs-top-to-icon) + ); & + .spectrum-Tabs-itemLabel { - margin-inline-start: var(--mod-tabs-icon-to-text, var(--spectrum-tabs-icon-to-text)); + margin-inline-start: var( + --mod-tabs-icon-to-text, + var(--spectrum-tabs-icon-to-text) + ); } } @@ -229,7 +355,10 @@ governing permissions and limitations under the License. ); inline-size: calc( 100% + - var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * 2 + var( + --mod-tabs-focus-indicator-gap, + var(--spectrum-tabs-focus-indicator-gap) + ) * 2 ); inset-block-start: calc( @@ -242,9 +371,15 @@ governing permissions and limitations under the License. -1 * var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) ); - border: var(--mod-tabs-focus-indicator-width, var(--spectrum-tabs-focus-indicator-width)) + border: var( + --mod-tabs-focus-indicator-width, + var(--spectrum-tabs-focus-indicator-width) + ) solid transparent; - border-radius: var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-tabs-focus-indicator-border-radius)); + border-radius: var( + --mod-tabs-focus-indicator-border-radius, + var(--spectrum-tabs-focus-indicator-border-radius) + ); pointer-events: none; } @@ -284,7 +419,10 @@ governing permissions and limitations under the License. &::before { border-color: var( --highcontrast-tabs-focus-indicator-color, - var(--mod-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color)) + var( + --mod-tabs-focus-indicator-color, + var(--spectrum-tabs-focus-indicator-color) + ) ); } } @@ -300,8 +438,14 @@ governing permissions and limitations under the License. font-size: var(--mod-tabs-font-size, var(--spectrum-tabs-font-size)); font-weight: var(--mod-tabs-font-weight, var(--spectrum-tabs-font-weight)); line-height: var(--mod-tabs-line-height, var(--spectrum-tabs-line-height)); - margin-block-start: var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)); - margin-block-end: var(--mod-tabs-bottom-to-text, var(--spectrum-tabs-bottom-to-text)); + margin-block-start: var( + --mod-tabs-top-to-text, + var(--spectrum-tabs-top-to-text) + ); + margin-block-end: var( + --mod-tabs-bottom-to-text, + var(--spectrum-tabs-bottom-to-text) + ); /* support links */ text-decoration: none; @@ -317,7 +461,10 @@ governing permissions and limitations under the License. inset-inline-start: 0; background-color: var( --highcontrast-tabs-selection-indicator-color, - var(--mod-tabs-selection-indicator-color, var(--spectrum-tabs-selection-indicator-color)) + var( + --mod-tabs-selection-indicator-color, + var(--spectrum-tabs-selection-indicator-color) + ) ); /* Be below the tab */ @@ -328,7 +475,10 @@ governing permissions and limitations under the License. var(--mod-tabs-animation-ease, var(--spectrum-tabs-animation-ease)); transform-origin: top left; - border-radius: var(--mod-tabs-divider-border-radius, var(--spectrum-tabs-divider-border-radius)); + border-radius: var( + --mod-tabs-divider-border-radius, + var(--spectrum-tabs-divider-border-radius) + ); } .spectrum-Tabs--horizontal { @@ -339,7 +489,10 @@ governing permissions and limitations under the License. /* Target anything since React likes to add lots of happy
s around all things */ & + *:not(.spectrum-Tabs-selectionIndicator) { - margin-inline-start: var(--mod-tabs-item-horizontal-spacing, var(--spectrum-tabs-item-horizontal-spacing)); + margin-inline-start: var( + --mod-tabs-item-horizontal-spacing, + var(--spectrum-tabs-item-horizontal-spacing) + ); } } @@ -363,7 +516,10 @@ governing permissions and limitations under the License. border-color: transparent; .spectrum-Tabs-selectionIndicator { - padding-inline-start: var(--mod-tabs-start-to-item-quiet, var(--spectrum-tabs-start-to-item-quiet)); + padding-inline-start: var( + --mod-tabs-start-to-item-quiet, + var(--spectrum-tabs-start-to-item-quiet) + ); } } @@ -382,9 +538,18 @@ governing permissions and limitations under the License. line-height: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)); padding-block: 0; - margin-block-end: var(--mod-tabs-item-vertical-spacing, var(--spectrum-tabs-item-vertical-spacing)); - margin-inline-start: var(--mod-tabs-start-to-edge, var(--spectrum-tabs-start-to-edge)); - margin-inline-end: var(--mod-tabs-start-to-edge, var(--spectrum-tabs-start-to-edge)); + margin-block-end: var( + --mod-tabs-item-vertical-spacing, + var(--spectrum-tabs-item-vertical-spacing) + ); + margin-inline-start: var( + --mod-tabs-start-to-edge, + var(--spectrum-tabs-start-to-edge) + ); + margin-inline-end: var( + --mod-tabs-start-to-edge, + var(--spectrum-tabs-start-to-edge) + ); &::before { inset-inline-start: calc( @@ -401,7 +566,10 @@ governing permissions and limitations under the License. position: absolute; inset-inline-start: 0; inset-block-start: 0; - inline-size: var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)); + inline-size: var( + --mod-tabs-divider-size, + var(--spectrum-tabs-divider-size) + ); } } @@ -441,7 +609,9 @@ governing permissions and limitations under the License. .is-selected { &::before { - background-color: var(--highcontrast-tabs-focus-indicator-background-color); + background-color: var( + --highcontrast-tabs-focus-indicator-background-color + ); } &:focus, @@ -461,10 +631,16 @@ governing permissions and limitations under the License. &.spectrum-Tabs--quiet { background: linear-gradient( to - var(--mod-tabs-list-background-direction, var(--spectrum-tabs-list-background-direction)), + var( + --mod-tabs-list-background-direction, + var(--spectrum-tabs-list-background-direction) + ), var( --highcontrast-tabs-divider-background-color, - var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color)) + var( + --mod-tabs-divider-background-color, + var(--spectrum-tabs-divider-background-color) + ) ) 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)) diff --git a/components/textfield/index.css b/components/textfield/index.css index 4bf965be3ce..dfea49a1646 100644 --- a/components/textfield/index.css +++ b/components/textfield/index.css @@ -16,45 +16,87 @@ governing permissions and limitations under the License. /* 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); - --spectrum-texfield-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-texfield-animation-duration: var( + --spectrum-animation-duration-100 + ); --spectrum-textfield-width: 240px; /* override per api */ - --spectrum-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier); + --spectrum-textfield-min-width: var( + --spectrum-text-field-minimum-width-multiplier + ); --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100); /* default height */ --spectrum-textfield-height: var(--spectrum-component-height-100); /* default spacing */ - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); - --spectrum-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet); - --spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100); - --spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100); - --spectrum-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet); + --spectrum-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-textfield-spacing-inline-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --spectrum-textfield-spacing-block-start: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-textfield-spacing-block-end: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-textfield-spacing-block-quiet: var( + --spectrum-field-edge-to-border-quiet + ); /* default label spacing */ - --spectrum-textfield-label-spacing-block: var(--spectrum-field-label-to-component); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100); + --spectrum-textfield-label-spacing-block: var( + --spectrum-field-label-to-component + ); + --spectrum-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-100 + ); /* default help text spacing */ - --spectrum-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component); + --spectrum-textfield-helptext-spacing-block: var( + --spectrum-help-text-to-component + ); /* default icon size */ - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --spectrum-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 + ); + --spectrum-textfield-icon-size-valid: var( + --spectrum-checkmark-icon-size-100 + ); /* default icon spacing - invalid */ - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var( + --spectrum-field-edge-to-alert-icon-quiet + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); /* default icon spacing - valid */ - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); - --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var( + --spectrum-field-edge-to-validation-icon-quiet + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); /* font styles */ --spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack); @@ -62,150 +104,320 @@ governing permissions and limitations under the License. --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100); /* character count */ - --spectrum-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-textfield-character-count-font-weight: var(--spectrum-regular-font-weight); + --spectrum-textfield-character-count-font-family: var( + --spectrum-sans-font-family-stack + ); + --spectrum-textfield-character-count-font-weight: var( + --spectrum-regular-font-weight + ); --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-character-count-spacing-inline: var(--spectrum-spacing-200); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --spectrum-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); + --spectrum-textfield-character-count-spacing-inline: var( + --spectrum-spacing-200 + ); + --spectrum-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-textfield-character-count-spacing-inline-side: var( + --spectrum-side-label-character-count-to-field + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); /* focus indicator */ - --spectrum-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --spectrum-textfield-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); --spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); /*** Colors ***/ --spectrum-textfield-background-color: var(--spectrum-gray-50); /* Text Colors */ - --spectrum-textfield-text-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus); - --spectrum-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); - --spectrum-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-textfield-text-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-textfield-text-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-textfield-text-color-focus: var( + --spectrum-neutral-content-color-focus + ); + --spectrum-textfield-text-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --spectrum-textfield-text-color-keyboard-focus: var( + --spectrum-neutral-content-color-key-focus + ); /* Read Only Text Color */ - --spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default); + --spectrum-textfield-text-color-readonly: var( + --spectrum-neutral-content-color-default + ); /* Disabled Colors */ - --spectrum-textfield-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-textfield-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-textfield-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --spectrum-textfield-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --spectrum-textfield-text-color-disabled: var( + --spectrum-disabled-content-color + ); /* Invalid Colors */ - --spectrum-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default); - --spectrum-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); - --spectrum-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); - --spectrum-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); - --spectrum-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus); - --spectrum-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); + --spectrum-textfield-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --spectrum-textfield-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --spectrum-textfield-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --spectrum-textfield-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --spectrum-textfield-border-color-invalid-keyboard-focus: var( + --spectrum-negative-border-color-key-focus + ); + --spectrum-textfield-icon-color-invalid: var( + --spectrum-negative-visual-color + ); - --spectrum-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default); + --spectrum-textfield-text-color-invalid: var( + --spectrum-neutral-content-color-default + ); /* Valid Colors */ - --spectrum-textfield-text-color-valid: var(--spectrum-neutral-content-color-default); + --spectrum-textfield-text-color-valid: var( + --spectrum-neutral-content-color-default + ); --spectrum-textfield-icon-color-valid: var(--spectrum-positive-visual-color); /* Focus Indicator Color */ - --spectrum-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-textfield-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); /* Text Area / Multiline */ --spectrum-text-area-min-inline-size: var(--spectrum-text-area-minimum-width); --spectrum-text-area-min-block-size: var(--spectrum-text-area-minimum-height); - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100); + --spectrum-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); } /********* Text field t-shirt sizes *********/ .spectrum-Textfield--sizeS { --spectrum-textfield-height: var(--spectrum-component-height-75); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100); + --spectrum-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-100 + ); --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-75); + --spectrum-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-75 + ); --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-75); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-75); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small); + --spectrum-textfield-icon-size-valid: var( + --spectrum-checkmark-icon-size-75 + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-small + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-small + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-small + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-small + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-small + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-small + ); --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small); + --spectrum-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-small + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-small + ); /* Text Area / Multiline size small */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-75); + --spectrum-text-area-min-block-size-quiet: var( + --spectrum-component-height-75 + ); } .spectrum-Textfield--sizeM { --spectrum-textfield-height: var(--spectrum-component-height-100); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --spectrum-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); + --spectrum-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 + ); + --spectrum-textfield-icon-size-valid: var( + --spectrum-checkmark-icon-size-100 + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); + --spectrum-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); /* Text Area / Multiline size medium */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100); + --spectrum-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); } .spectrum-Textfield--sizeL { --spectrum-textfield-height: var(--spectrum-component-height-200); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --spectrum-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-200); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-200); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large); + --spectrum-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-200 + ); + --spectrum-textfield-icon-size-valid: var( + --spectrum-checkmark-icon-size-200 + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-large + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-large + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-large + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-large + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-large + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-large + ); --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-100); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large); + --spectrum-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-large + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-large + ); /* Text Area / Multiline size large */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-200); + --spectrum-text-area-min-block-size-quiet: var( + --spectrum-component-height-200 + ); } .spectrum-Textfield--sizeXL { --spectrum-textfield-height: var(--spectrum-component-height-300); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --spectrum-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-300); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-300); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large); + --spectrum-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-300 + ); + --spectrum-textfield-icon-size-valid: var( + --spectrum-checkmark-icon-size-300 + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-extra-large + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-extra-large + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-extra-large + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-extra-large + ); --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-200); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large); + --spectrum-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-extra-large + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-extra-large + ); /* Text Area / Multiline size extra large */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-300); + --spectrum-text-area-min-block-size-quiet: var( + --spectrum-component-height-300 + ); } /********* TEXT FIELD and TEXT AREA Outer Wrapper *********/ @@ -261,14 +473,20 @@ governing permissions and limitations under the License. ); inset-inline-start: 0; inline-size: 100%; - block-size: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)); + block-size: var( + --mod-textfield-focus-indicator-width, + var(--spectrum-textfield-focus-indicator-width) + ); } &.is-keyboardFocused { &::after { background-color: var( --highcontrast-textfield-focus-indicator-color, - var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color)) + var( + --mod-textfield-focus-indicator-color, + var(--spectrum-textfield-focus-indicator-color) + ) ); } } @@ -314,25 +532,55 @@ governing permissions and limitations under the License. /****** Validation Icon - Valid ✅ ******/ .spectrum-Textfield.is-valid & { - inset-block-start: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid)); - inset-block-end: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid)); - inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)); + inset-block-start: var( + --mod-textfield-icon-spacing-block-valid, + var(--spectrum-textfield-icon-spacing-block-valid) + ); + inset-block-end: var( + --mod-textfield-icon-spacing-block-valid, + var(--spectrum-textfield-icon-spacing-block-valid) + ); + inset-inline-end: var( + --mod-textfield-icon-spacing-inline-end-valid, + var(--spectrum-textfield-icon-spacing-inline-end-valid) + ); color: var( --highcontrast-textfield-icon-color-valid, - var(--mod-textfield-icon-color-valid, var(--spectrum-textfield-icon-color-valid)) + var( + --mod-textfield-icon-color-valid, + var(--spectrum-textfield-icon-color-valid) + ) ); } /****** Validation Icon - Invalid ⚠️ ******/ .spectrum-Textfield.is-invalid & { - block-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)); - inline-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)); - inset-block-start: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid)); - inset-block-end: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid)); - inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)); + block-size: var( + --mod-textfield-icon-size-invalid, + var(--spectrum-textfield-icon-size-invalid) + ); + inline-size: var( + --mod-textfield-icon-size-invalid, + var(--spectrum-textfield-icon-size-invalid) + ); + inset-block-start: var( + --mod-textfield-icon-spacing-block-invalid, + var(--spectrum-textfield-icon-spacing-block-invalid) + ); + inset-block-end: var( + --mod-textfield-icon-spacing-block-invalid, + var(--spectrum-textfield-icon-spacing-block-invalid) + ); + inset-inline-end: var( + --mod-textfield-icon-spacing-inline-end-invalid, + var(--spectrum-textfield-icon-spacing-inline-end-invalid) + ); color: var( --highcontrast-textfield-icon-color-invalid, - var(--mod-textfield-icon-color-invalid, var(--spectrum-textfield-icon-color-invalid)) + var( + --mod-textfield-icon-color-invalid, + var(--spectrum-textfield-icon-color-invalid) + ) ); } @@ -347,24 +595,36 @@ governing permissions and limitations under the License. } .spectrum-Textfield--quiet.is-valid & { - inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-quiet-valid, var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid)); + inset-inline-end: var( + --mod-textfield-icon-spacing-inline-end-quiet-valid, + var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid) + ); } .spectrum-Textfield--quiet.is-invalid & { - inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-quiet-invalid, var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid)); + inset-inline-end: var( + --mod-textfield-icon-spacing-inline-end-quiet-invalid, + var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid) + ); } } /********* Child Component - Label *********/ .spectrum-FieldLabel { .spectrum-Textfield & { - margin-block-end: var(--mod-textfield-label-spacing-block, var(--spectrum-textfield-label-spacing-block)); + margin-block-end: var( + --mod-textfield-label-spacing-block, + var(--spectrum-textfield-label-spacing-block) + ); grid-row: 1; grid-column: 1 / span 1; } .spectrum-Textfield--quiet & { - margin-block-end: var(--mod-textfield-label-spacing-block-quiet, var(--spectrum-textfield-label-spacing-block-quiet)); + margin-block-end: var( + --mod-textfield-label-spacing-block-quiet, + var(--spectrum-textfield-label-spacing-block-quiet) + ); } .is-disabled & { @@ -375,7 +635,10 @@ governing permissions and limitations under the License. /********* Child Component - Help Text *********/ .spectrum-HelpText { .spectrum-Textfield & { - margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block)); + margin-block-start: var( + --mod-textfield-helptext-spacing-block, + var(--spectrum-textfield-helptext-spacing-block) + ); grid-row: 3; grid-column: 1 / span 2; } @@ -387,12 +650,27 @@ governing permissions and limitations under the License. align-items: flex-end; justify-content: flex-end; inline-size: auto; - margin-block-end: var(--mod-textfield-character-count-spacing-block, var(--spectrum-textfield-character-count-spacing-block)); - margin-inline-start: var(--mod-textfield-character-count-spacing-inline, var(--spectrum-textfield-character-count-spacing-inline)); + margin-block-end: var( + --mod-textfield-character-count-spacing-block, + var(--spectrum-textfield-character-count-spacing-block) + ); + margin-inline-start: var( + --mod-textfield-character-count-spacing-inline, + var(--spectrum-textfield-character-count-spacing-inline) + ); margin-inline-end: 0; - font-size: var(--mod-textfield-character-count-font-size, var(--spectrum-textfield-character-count-font-size)); - font-family: var(--mod-textfield-character-count-font-family, var(--spectrum-textfield-character-count-font-family)); - font-weight: var(--mod-textfield-character-count-font-weight, var(--spectrum-textfield-character-count-font-weight)); + font-size: var( + --mod-textfield-character-count-font-size, + var(--spectrum-textfield-character-count-font-size) + ); + font-family: var( + --mod-textfield-character-count-font-family, + var(--spectrum-textfield-character-count-font-family) + ); + font-weight: var( + --mod-textfield-character-count-font-weight, + var(--spectrum-textfield-character-count-font-weight) + ); grid-row: 1; grid-column: 2 / span 1; padding-inline-end: calc( @@ -401,7 +679,10 @@ governing permissions and limitations under the License. ); .spectrum-Textfield--quiet & { - margin-block-end: var(--mod-textfield-character-count-spacing-block-quiet, var(--spectrum-textfield-character-count-spacing-block-quiet)); + margin-block-end: var( + --mod-textfield-character-count-spacing-block-quiet, + var(--spectrum-textfield-character-count-spacing-block-quiet) + ); } } @@ -411,14 +692,23 @@ governing permissions and limitations under the License. line-height: var(--spectrum-textfield-input-line-height); box-sizing: border-box; inline-size: 100%; - min-inline-size: var(--mod-textfield-min-width, var(--spectrum-textfield-min-width)); + min-inline-size: var( + --mod-textfield-min-width, + var(--spectrum-textfield-min-width) + ); block-size: var(--mod-textfield-height, var(--spectrum-textfield-height)); padding-block-start: calc( - var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)) - + var( + --mod-textfield-spacing-block-start, + var(--spectrum-textfield-spacing-block-start) + ) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) ); padding-block-end: calc( - var(--mod-textfield-spacing-block-end, var(--spectrum-textfield-spacing-block-end)) - + var( + --mod-textfield-spacing-block-end, + var(--spectrum-textfield-spacing-block-end) + ) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) ); @@ -431,24 +721,48 @@ governing permissions and limitations under the License. text-indent: 0; vertical-align: top; /* used to align them correctly in forms. */ outline: none; - background-color: var(--mod-textfield-background-color, var(--spectrum-textfield-background-color)); - border: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) + background-color: var( + --mod-textfield-background-color, + var(--spectrum-textfield-background-color) + ); + border: var( + --mod-textfield-border-width, + var(--spectrum-textfield-border-width) + ) solid var( --highcontrast-textfield-border-color, var(--mod-textfield-border-color, var(--spectrum-textfield-border-color)) ); - border-radius: var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)); + border-radius: var( + --mod-textfield-corner-radius, + var(--spectrum-textfield-corner-radius) + ); transition: border-color - var(--mod-texfield-animation-duration, var(--spectrum-texfield-animation-duration)) + var( + --mod-texfield-animation-duration, + var(--spectrum-texfield-animation-duration) + ) ease-in-out; - font-size: var(--mod-textfield-placeholder-font-size, var(--spectrum-textfield-placeholder-font-size)); - font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family)); - font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight)); + font-size: var( + --mod-textfield-placeholder-font-size, + var(--spectrum-textfield-placeholder-font-size) + ); + font-family: var( + --mod-textfield-font-family, + var(--spectrum-textfield-font-family) + ); + font-weight: var( + --mod-textfield-font-weight, + var(--spectrum-textfield-font-weight) + ); color: var( --highcontrast-textfield-text-color-default, - var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default)) + var( + --mod-textfield-text-color-default, + var(--spectrum-textfield-text-color-default) + ) ); /*** ↓ Browser Mitigations for Input ↓ ***/ @@ -509,16 +823,31 @@ governing permissions and limitations under the License. /*** Input Placeholder Text ***/ &::placeholder { - opacity: 100%; - font-size: var(--mod-textfield-placeholder-font-size, var(--spectrum-textfield-placeholder-font-size)); - font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family)); - font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight)); + opacity: 1; + font-size: var( + --mod-textfield-placeholder-font-size, + var(--spectrum-textfield-placeholder-font-size) + ); + font-family: var( + --mod-textfield-font-family, + var(--spectrum-textfield-font-family) + ); + font-weight: var( + --mod-textfield-font-weight, + var(--spectrum-textfield-font-weight) + ); color: var( --highcontrast-textfield-text-color-default, - var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default)) + var( + --mod-textfield-text-color-default, + var(--spectrum-textfield-text-color-default) + ) ); transition: color - var(--mod-texfield-animation-duration, var(--spectrum-texfield-animation-duration)) + var( + --mod-texfield-animation-duration, + var(--spectrum-texfield-animation-duration) + ) ease-in-out; } @@ -543,17 +872,26 @@ governing permissions and limitations under the License. &:hover { border-color: var( --highcontrast-textfield-border-color-hover, - var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover)) + var( + --mod-textfield-border-color-hover, + var(--spectrum-textfield-border-color-hover) + ) ); color: var( --highcontrast-textfield-text-color-hover, - var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover)) + var( + --mod-textfield-text-color-hover, + var(--spectrum-textfield-text-color-hover) + ) ); &::placeholder { color: var( --highcontrast-textfield-text-color-hover, - var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover)) + var( + --mod-textfield-text-color-hover, + var(--spectrum-textfield-text-color-hover) + ) ); } } @@ -563,17 +901,26 @@ governing permissions and limitations under the License. &:focus { border-color: var( --highcontrast-textfield-border-color-focus, - var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus)) + var( + --mod-textfield-border-color-focus, + var(--spectrum-textfield-border-color-focus) + ) ); color: var( --highcontrast-textfield-text-color-focus, - var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus)) + var( + --mod-textfield-text-color-focus, + var(--spectrum-textfield-text-color-focus) + ) ); &::placeholder { color: var( --highcontrast-textfield-text-color-focus, - var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus)) + var( + --mod-textfield-text-color-focus, + var(--spectrum-textfield-text-color-focus) + ) ); } @@ -581,18 +928,27 @@ governing permissions and limitations under the License. &:hover { border-color: var( --highcontrast-textfield-border-color-focus-hover, - var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover)) + var( + --mod-textfield-border-color-focus-hover, + var(--spectrum-textfield-border-color-focus-hover) + ) ); color: var( --highcontrast-textfield-text-color-focus-hover, - var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover)) + var( + --mod-textfield-text-color-focus-hover, + var(--spectrum-textfield-text-color-focus-hover) + ) ); } &:hover::placeholder { color: var( --highcontrast-textfield-text-color-focus-hover, - var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover)) + var( + --mod-textfield-text-color-focus-hover, + var(--spectrum-textfield-text-color-focus-hover) + ) ); } } @@ -601,28 +957,46 @@ governing permissions and limitations under the License. .is-keyboardFocused & { border-color: var( --highcontrast-textfield-border-color-keyboard-focus, - var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus)) + var( + --mod-textfield-border-color-keyboard-focus, + var(--spectrum-textfield-border-color-keyboard-focus) + ) ); color: var( --highcontrast-textfield-text-color-keyboard-focus, - var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)) + var( + --mod-textfield-text-color-keyboard-focus, + var(--spectrum-textfield-text-color-keyboard-focus) + ) ); &::placeholder { color: var( --highcontrast-textfield-text-color-keyboard-focus, - var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)) + var( + --mod-textfield-text-color-keyboard-focus, + var(--spectrum-textfield-text-color-keyboard-focus) + ) ); } /* focus indicator is focused state */ - outline: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)) + outline: var( + --mod-textfield-focus-indicator-width, + var(--spectrum-textfield-focus-indicator-width) + ) solid; outline-color: var( --highcontrast-textfield-focus-indicator-color, - var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color)) + var( + --mod-textfield-focus-indicator-color, + var(--spectrum-textfield-focus-indicator-color) + ) + ); + outline-offset: var( + --mod-textfield-focus-indicator-gap, + var(--spectrum-textfield-focus-indicator-gap) ); - outline-offset: var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)); } /*** Input Valid ✅ ***/ @@ -635,7 +1009,10 @@ governing permissions and limitations under the License. ); color: var( --highcontrast-textfield-text-color-valid, - var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid)) + var( + --mod-textfield-text-color-valid, + var(--spectrum-textfield-text-color-valid) + ) ); } @@ -649,11 +1026,17 @@ governing permissions and limitations under the License. ); color: var( --highcontrast-textfield-text-color-invalid, - var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid)) + var( + --mod-textfield-text-color-invalid, + var(--spectrum-textfield-text-color-invalid) + ) ); border-color: var( --highcontrast-textfield-border-color-invalid-default, - var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default)) + var( + --mod-textfield-border-color-invalid-default, + var(--spectrum-textfield-border-color-invalid-default) + ) ); } @@ -662,7 +1045,10 @@ governing permissions and limitations under the License. .is-invalid &:hover { border-color: var( --highcontrast-textfield-border-color-invalid-hover, - var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover)) + var( + --mod-textfield-border-color-invalid-hover, + var(--spectrum-textfield-border-color-invalid-hover) + ) ); } @@ -672,14 +1058,20 @@ governing permissions and limitations under the License. .is-invalid &:focus { border-color: var( --highcontrast-textfield-border-color-invalid-focus, - var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus)) + var( + --mod-textfield-border-color-invalid-focus, + var(--spectrum-textfield-border-color-invalid-focus) + ) ); /* focus hover */ &:hover { border-color: var( --highcontrast-textfield-border-color-invalid-focus-hover, - var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover)) + var( + --mod-textfield-border-color-invalid-focus-hover, + var(--spectrum-textfield-border-color-invalid-focus-hover) + ) ); } } @@ -689,7 +1081,10 @@ governing permissions and limitations under the License. .is-invalid &:focus-visible { border-color: var( --highcontrast-textfield-border-color-invalid-keyboard-focus, - var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus)) + var( + --mod-textfield-border-color-invalid-keyboard-focus, + var(--spectrum-textfield-border-color-invalid-keyboard-focus) + ) ); } @@ -697,17 +1092,26 @@ governing permissions and limitations under the License. .spectrum-Textfield.is-disabled &, .spectrum-Textfield.is-disabled:hover &, &:disabled { - background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled)); + background-color: var( + --mod-textfield-background-color-disabled, + var(--spectrum-textfield-background-color-disabled) + ); border-color: transparent; color: var( --highcontrast-textfield-text-color-disabled, - var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)) + var( + --mod-textfield-text-color-disabled, + var(--spectrum-textfield-text-color-disabled) + ) ); /* For safari mobile browser */ -webkit-text-fill-color: var( --highcontrast-textfield-text-color-disabled, - var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)) + var( + --mod-textfield-text-color-disabled, + var(--spectrum-textfield-text-color-disabled) + ) ); /* Disable the resize functionality when disabled */ @@ -719,7 +1123,10 @@ governing permissions and limitations under the License. &::placeholder { color: var( --highcontrast-textfield-text-color-disabled, - var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)) + var( + --mod-textfield-text-color-disabled, + var(--spectrum-textfield-text-color-disabled) + ) ); } } @@ -730,9 +1137,18 @@ governing permissions and limitations under the License. border-block-start-width: 0; border-inline-width: 0; - margin-block-end: var(--mod-textfield-spacing-block-quiet, var(--spectrum-textfield-spacing-block-quiet)); - padding-block-start: var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)); - padding-inline: var(--mod-textfield-spacing-inline-quiet, var(--spectrum-textfield-spacing-inline-quiet)); + margin-block-end: var( + --mod-textfield-spacing-block-quiet, + var(--spectrum-textfield-spacing-block-quiet) + ); + padding-block-start: var( + --mod-textfield-spacing-block-start, + var(--spectrum-textfield-spacing-block-start) + ); + padding-inline: var( + --mod-textfield-spacing-inline-quiet, + var(--spectrum-textfield-spacing-inline-quiet) + ); background-color: transparent; border-radius: 0; @@ -746,16 +1162,25 @@ governing permissions and limitations under the License. .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( + --mod-textfield-border-color-disabled, + 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)) + var( + --mod-textfield-text-color-disabled, + var(--spectrum-textfield-text-color-disabled) + ) ); &::placeholder { color: var( --highcontrast-textfield-text-color-disabled, - var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)) + var( + --mod-textfield-text-color-disabled, + var(--spectrum-textfield-text-color-disabled) + ) ); } } @@ -768,14 +1193,20 @@ governing permissions and limitations under the License. border-color: transparent; color: var( --highcontrast-textfield-text-color-readonly, - var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)) + var( + --mod-textfield-text-color-readonly, + var(--spectrum-textfield-text-color-readonly) + ) ); outline: none; &::placeholder { color: var( --highcontrast-textfield-text-color-readonly, - var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)) + var( + --mod-textfield-text-color-readonly, + var(--spectrum-textfield-text-color-readonly) + ) ); background-color: transparent; } @@ -794,15 +1225,24 @@ governing permissions and limitations under the License. } .spectrum-FieldLabel { - margin-inline-end: var(--mod-textfield-label-spacing-inline-side-label, var(--spectrum-textfield-label-spacing-inline-side-label)); + margin-inline-end: var( + --mod-textfield-label-spacing-inline-side-label, + var(--spectrum-textfield-label-spacing-inline-side-label) + ); grid-row: 1 / span 2; grid-column: 1 / span 1; } .spectrum-Textfield-characterCount { align-items: flex-start; - margin-block-start: var(--mod-textfield-character-count-spacing-block-side, var(--spectrum-textfield-character-count-spacing-block-side)); - margin-inline-start: var(--mod-textfield-character-count-spacing-inline-side, var(--spectrum-textfield-character-count-spacing-inline-side)); + margin-block-start: var( + --mod-textfield-character-count-spacing-block-side, + var(--spectrum-textfield-character-count-spacing-block-side) + ); + margin-inline-start: var( + --mod-textfield-character-count-spacing-inline-side, + var(--spectrum-textfield-character-count-spacing-inline-side) + ); grid-row: 1; grid-column: 3 / span 1; } @@ -828,8 +1268,14 @@ governing permissions and limitations under the License. --spectrum-textfield-input-line-height: normal; .spectrum-Textfield-input { - min-inline-size: var(--mod-text-area-min-inline-size, var(--spectrum-text-area-min-inline-size)); - min-block-size: var(--mod-text-area-min-block-size, var(--spectrum-text-area-min-block-size)); + min-inline-size: var( + --mod-text-area-min-inline-size, + var(--spectrum-text-area-min-inline-size) + ); + min-block-size: var( + --mod-text-area-min-block-size, + var(--spectrum-text-area-min-block-size) + ); resize: inherit; } @@ -846,7 +1292,10 @@ governing permissions and limitations under the License. &.spectrum-Textfield--quiet { .spectrum-Textfield-input { - min-block-size: var(--mod-text-area-min-block-size-quiet, var(--spectrum-text-area-min-block-size-quiet)); + min-block-size: var( + --mod-text-area-min-block-size-quiet, + var(--spectrum-text-area-min-block-size-quiet) + ); /* Treat all quiet inputs and text areas the same */ resize: none; diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index efa7c2a3855..c90a2856ecb 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -21,9 +21,13 @@ governing permissions and limitations under the License. var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-color-opacity) ); - --spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); + --spectrum-thumbnail-layer-border-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-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); @@ -33,7 +37,9 @@ governing permissions and limitations under the License. --spectrum-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); + --spectrum-thumbnail-color-opacity-disabled: var( + --spectrum-thumbnail-opacity-disabled + ); } .spectrum-Thumbnail--size50 { @@ -93,7 +99,10 @@ governing permissions and limitations under the License. inline-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); block-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); - border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); + border-radius: var( + --mod-thumbnail-border-radius, + var(--spectrum-thumbnail-border-radius) + ); &::before { content: ''; @@ -106,7 +115,10 @@ governing permissions and limitations under the License. } &.is-disabled { - opacity: var(--mod-thumbnail-color-opacity-disabled, var(--spectrum-thumbnail-color-opacity-disabled)); + opacity: var( + --mod-thumbnail-color-opacity-disabled, + var(--spectrum-thumbnail-color-opacity-disabled) + ); } /* stylelint-disable selector-pseudo-class-no-unknown */ &.is-focused { @@ -115,42 +127,78 @@ governing permissions and limitations under the License. &::after { content: ""; border-style: solid; - border-width: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness)); + 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)) + var( + --mod-thumbnail-focus-indicator-color, + var(--spectrum-thumbnail-focus-indicator-color) + ) + ); + border-radius: var( + --mod-thumbnail-border-radius, + var(--spectrum-thumbnail-border-radius) ); - border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); position: absolute; inset-inline-start: 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)) + 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 ); inset-inline-end: 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)) + 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 ); inset-block-end: 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)) + 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 ); inset-block-start: 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)) + 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(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); + border-radius: var( + --mod-thumbnail-border-radius, + var(--spectrum-thumbnail-border-radius) + ); } } /* stylelint-enable selector-pseudo-class-no-unknown */ @@ -163,10 +211,16 @@ governing permissions and limitations under the License. .spectrum-Thumbnail-layer { border-style: solid; - border-width: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-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)) + var( + --mod-thumbnail-layer-border-color-outer, + var(--spectrum-thumbnail-layer-border-color-outer) + ) ); box-sizing: border-box; @@ -183,12 +237,24 @@ governing permissions and limitations under the License. outline-style: solid; outline-color: var( --highcontrast-thumbnail-border-color-selected, - var(--mod-thumbnail-border-color-selected, var(--spectrum-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-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)) + 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) + ) ); } } @@ -202,7 +268,10 @@ governing permissions and limitations under the License. var(--spectrum-thumbnail-size) - ( ( - var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)) + var( + --mod-thumbnail-layer-border-width-inner, + var(--spectrum-thumbnail-layer-border-width-inner) + ) ) ) * 2 ); @@ -210,18 +279,30 @@ governing permissions and limitations under the License. var(--spectrum-thumbnail-size) - ( ( - var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)) + var( + --mod-thumbnail-layer-border-width-inner, + var(--spectrum-thumbnail-layer-border-width-inner) + ) ) ) * 2 ); outline-style: solid; outline-color: var( --highcontrast-thumbnail-layer-border-color-inner, - var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-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)) + var( + --mod-thumbnail-layer-border-width-inner, + var(--spectrum-thumbnail-layer-border-width-inner) + ) - + var( + --mod-thumbnail-layer-border-width-outer, + var(--spectrum-thumbnail-layer-border-width-outer) + ) ); } /* stylelint-enable declaration-block-no-redundant-longhand-properties */ diff --git a/postcss.config.js b/postcss.config.js index fc3521bb848..df94f0a64b6 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -22,14 +22,11 @@ module.exports = ({ combine = false, lint = true, verbose = true, - shouldMinify = false, additionalPlugins = {}, env = process.env.NODE_ENV ?? "development", ...options } = {}) => { - const isProduction = env.toLowerCase() === "production"; - - if (!isProduction && !options.map) { + if (env === "development" && !options.map) { options.map = { inline: false }; } else options.map = false; @@ -145,7 +142,8 @@ module.exports = ({ }, /* --------------------------------------------------- */ /* ------------------- REPORTING --------------------- */ - "stylelint": lint ? { + stylelint: lint + ? { cache: true, // Passing the config path saves a little time b/c it doesn't have to find it configFile: join(__dirname, "stylelint.config.js"), @@ -154,11 +152,14 @@ module.exports = ({ ignorePath: join(__dirname, ".stylelintignore"), reportNeedlessDisables: true, reportInvalidScopeDisables: true, - } : false, - "postcss-reporter": verbose ? { - clearAllMessages: true, - noIcon: true, - } : false, + } + : false, + "postcss-reporter": verbose + ? { + clearAllMessages: true, + noIcon: true, + } + : false, }, }; }; diff --git a/site/tasks/builder.js b/site/tasks/builder.js index 18b2d62270d..9d80ab6912d 100644 --- a/site/tasks/builder.js +++ b/site/tasks/builder.js @@ -422,15 +422,17 @@ async function buildPages_compileTemplate(componentName, dirName, file, globalDa * @param {TemplateData} [globalData={}] * @returns {Promise} */ -async function buildPages_forPackage(dep, globalData = {}) { - const pkgPath = require.resolve(path.join(dep, "package.json")); - const dirName = path.dirname(pkgPath); - const componentName = getPackageFromPath(dirName); - +async function buildPages_forPackage(componentName, globalData = {}) { if (!componentName) { return Promise.reject(new Error(`${"✗".red} No package found for ${dirName}`)); } + const pkgPath = require.resolve(`@spectrum-css/${componentName}/package.json`); + const dirName = path.dirname(pkgPath); + if (!dirName) { + return Promise.reject(new Error(`${"✗".red} No package found for ${dirName}`)); + } + let dataDir = path.join(dirName, "metadata"); if (deprecatedComponents.includes(componentName)) { dataDir = path.join(dirs.storybook, "deprecated", componentName); @@ -471,7 +473,7 @@ async function build_forPackage(componentName, globalData = {}) { /** @todo how do we load dependencies not hosted in the repo? */ return Promise.all([ - buildPages_forPackage(dirName, globalData), + buildPages_forPackage(componentName, globalData), copy_Assets(["*.css", "themes/*.css", "*.json"], { cwd: path.join(dirName, "dist"), outputDir, @@ -734,25 +736,10 @@ async function watch_Styles(file) { return Promise.reject(new Error(`${"✗".red} No package found for ${file}`)); } - const dirName = path.join(dirs.components, componentName); - if (!fs.existsSync(dirName)) { - return Promise.reject(new Error(`${"✗".red} No local package found for ${componentName}`)); - } - - const outputDir = path.join(dirs.publish); - - const copyTask = () => copy_Assets(["**"], { - cwd: path.join(dirName, "dist"), - outputDir, - allowEmpty: true, - absolute: false, - }) - .then(() => fg.sync(`${dirName}/dist/*.css`)); - const processorPath = path.join(dirs.root, "tasks/component-builder.js"); + if (!fs.existsSync(processorPath)) { - console.log(`${"✗".red} No processing function found for ${relativePrint(processorPath)}`); - return copyTask(); + return Promise.reject(new Error(`${"✗".red} No processing function found for ${relativePrint(processorPath)}`)); } await require(processorPath); diff --git a/stylelint.config.js b/stylelint.config.js index a4961c6e31b..d7997b9f744 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -1,4 +1,5 @@ const { join } = require("path"); +const { propertiesOrder } = require('stylelint-config-clean-order') module.exports = { allowEmptyInput: true, diff --git a/tasks/component-builder.js b/tasks/component-builder.js index d3e1408d6e1..3ed68809391 100644 --- a/tasks/component-builder.js +++ b/tasks/component-builder.js @@ -130,44 +130,44 @@ async function extractModifiers(filepath, { cwd } = {}) { fs.mkdirSync(path.join(cwd, "metadata")); } - promises.push( - fsp.writeFile( - path.join(cwd, `metadata/mods.md`), - (await prettier.format( - [ - "| Modifiable custom properties |\n| --- |", - ...[...found].sort().map((result) => `| \`${result}\` |`), - ].join("\n"), - { parser: "markdown" } - )), - { encoding: "utf-8" } - ) - .then(() => `${"✓".green} ${"metadata/mods.md".padEnd(20, " ").yellow} ${'-- deprecated --'.gray}`) - .catch((err) => { - if (!err) return; - console.log(`${"✗".red} ${"metadata/mods.md".yellow} not written`); - return Promise.reject(err); - }) - ); - } - - promises.push( - fsp.writeFile( - path.join(cwd, `dist/metadata.json`), - (await prettier.format( - JSON.stringify({ - selectors: [...selectors].sort(), - mods: [...found].sort(), - spectrum: [...spectrum].sort(), - system: [...system].sort(), - a11y: [...highContrast].sort(), - }, null, 2), - { parser: "json" } - )), - { encoding: "utf-8" } - ).then(() => { - const stats = fs.statSync(path.join(cwd, `dist/metadata.json`)); - return [ + promises.push( + fsp.writeFile( + path.join(cwd, "metadata/mods.md"), + (await prettier.format( + [ + "| Modifiable custom properties |\n| --- |", + ...[...found].sort().map((result) => `| \`${result}\` |`), + ].join("\n"), + { parser: "markdown" } + )), + { encoding: "utf-8" } + ) + .then(() => `${"✓".green} ${"metadata/mods.md".padEnd(20, " ").yellow} ${"-- deprecated --".gray}`) + .catch((err) => { + if (!err) return; + console.log(`${"✗".red} ${"metadata/mods.md".yellow} not written`); + return Promise.reject(err); + }) + ); + } + + promises.push( + fsp.writeFile( + path.join(cwd, "dist/metadata.json"), + (await prettier.format( + JSON.stringify({ + selectors: [...selectors].sort(), + mods: [...found].sort(), + spectrum: [...spectrum].sort(), + system: [...system].sort(), + a11y: [...highContrast].sort(), + }, null, 2), + { parser: "json" } + )), + { encoding: "utf-8" } + ).then(() => { + const stats = fs.statSync(path.join(cwd, "dist/metadata.json")); + return [ `${"✓".green} ${"dist/metadata.json".padEnd(20, " ").yellow} ${bytesToSize(stats.size).gray}`, `🔍 ${`${found.size}`.underline} modifiable custom propert${found.size === 1 ? "y" : "ies"}`, `🔍 ${`${selectors.size}`.underline} selector${found.size === 1 ? "" : "s"}`, @@ -230,19 +230,18 @@ async function processCSS(content, input, output, { const promises = []; - if (result.css) { - const formatted = await prettier.format(result.css.trimStart(), { parser: "css", printWidth: 500 }); - promises.push( - fsp.writeFile(output, formatted).then(() => { - const stats = fs.statSync(output); - return `${"✓".green} ${relativePrint(output, { cwd }).padEnd(20, " ").yellow} ${bytesToSize(stats.size).gray}`; - }).catch((err) => { - if (!err) return; - console.log(`${"✗".red} ${relativePrint(output, { cwd }).yellow} not written`); - return Promise.reject(err); - }) - ); - } + if (result.css) { + const formatted = await prettier.format(result.css.trimStart(), { parser: "css", printWidth: 500 }); + promises.push( + fsp.writeFile(output, formatted).then(() => { + const stats = fs.statSync(output); + return `${"✓".green} ${relativePrint(output, { cwd }).padEnd(20, " ").yellow} ${bytesToSize(stats.size).gray}`; + }).catch((err) => { + if (!err) return; + console.log(`${"✗".red} ${relativePrint(output, { cwd }).yellow} not written`); + return Promise.reject(err); + }) + ); if (postCSSOptions.shouldMinify) { promises.push( @@ -487,7 +486,8 @@ async function main({ if (a.includes("🔍")) return 0; return 1; }).forEach(log => console.log(log)); - } else console.log("No assets created.".gray); + } + else console.log("No assets created.".gray); console.log(`${"".padStart(30, "-")}`); console.timeEnd(key); diff --git a/tokens/custom-spectrum/custom-dark-vars.css b/tokens/custom-spectrum/custom-dark-vars.css index 3dbe166b91b..a3d2807179a 100644 --- a/tokens/custom-spectrum/custom-dark-vars.css +++ b/tokens/custom-spectrum/custom-dark-vars.css @@ -18,7 +18,7 @@ governing permissions and limitations under the License. --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ + --spectrum-drop-zone-background-color-rgb: var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ /* Drop Indicator color rgb */ --spectrum-dropindicator-color: var(--spectrum-blue-700); diff --git a/tokens/custom-spectrum/custom-darkest-vars.css b/tokens/custom-spectrum/custom-darkest-vars.css index 563da8f5c80..3ddf1fda2b0 100644 --- a/tokens/custom-spectrum/custom-darkest-vars.css +++ b/tokens/custom-spectrum/custom-darkest-vars.css @@ -18,7 +18,7 @@ governing permissions and limitations under the License. --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ + --spectrum-drop-zone-background-color-rgb: var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ /* Drop Indicator color rgb */ --spectrum-dropindicator-color: var(--spectrum-blue-700); diff --git a/tokens/dist/css/spectrum/custom-dark-vars.css b/tokens/dist/css/spectrum/custom-dark-vars.css index e6e227747ca..a2905cb2552 100644 --- a/tokens/dist/css/spectrum/custom-dark-vars.css +++ b/tokens/dist/css/spectrum/custom-dark-vars.css @@ -7,7 +7,7 @@ --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ + --spectrum-drop-zone-background-color-rgb:var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ /* Drop Indicator color rgb */ --spectrum-dropindicator-color:var(--spectrum-blue-700); diff --git a/tokens/dist/css/spectrum/custom-darkest-vars.css b/tokens/dist/css/spectrum/custom-darkest-vars.css index 7dc5c34102d..5b01abbf22b 100644 --- a/tokens/dist/css/spectrum/custom-darkest-vars.css +++ b/tokens/dist/css/spectrum/custom-darkest-vars.css @@ -7,7 +7,7 @@ --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ + --spectrum-drop-zone-background-color-rgb:var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ /* Drop Indicator color rgb */ --spectrum-dropindicator-color:var(--spectrum-blue-700); diff --git a/tokens/dist/index.css b/tokens/dist/index.css index 1c83744cdd3..fc9685e0c46 100644 --- a/tokens/dist/index.css +++ b/tokens/dist/index.css @@ -464,7 +464,7 @@ --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ + --spectrum-drop-zone-background-color-rgb:var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ /* Drop Indicator color rgb */ --spectrum-dropindicator-color:var(--spectrum-blue-700); @@ -977,7 +977,7 @@ --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ + --spectrum-drop-zone-background-color-rgb:var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ /* Drop Indicator color rgb */ --spectrum-dropindicator-color:var(--spectrum-blue-700);