diff --git a/.changeset/ten-cows-cry.md b/.changeset/ten-cows-cry.md new file mode 100644 index 0000000000..c4cd0b5a8c --- /dev/null +++ b/.changeset/ten-cows-cry.md @@ -0,0 +1,8 @@ +--- +"@spectrum-css/accordion": patch +"@spectrum-css/search": patch +"@spectrum-css/textfield": patch +"@spectrum-css/thumbnail": patch +--- + +fix: when whitespace normalization is done before stylelint fixes, a few selector optimizations were uncovered. diff --git a/components/accordion/index.css b/components/accordion/index.css index 643a33ed5d..1cf5bcb74f 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -13,136 +13,59 @@ 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( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-default) - ); - --spectrum-accordion-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-hover) - ); - --spectrum-accordion-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-down) - ); - --spectrum-accordion-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-key-focus) - ); + --spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default)); + --spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover)); + --spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down)); + --spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus)); /* Label */ - --spectrum-accordion-item-header-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-accordion-item-header-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-accordion-item-header-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-accordion-item-header-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); + --spectrum-accordion-item-header-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) - ) - ) - ) + 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)))) ); &:dir(rtl) { @@ -152,147 +75,87 @@ 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 { @@ -308,36 +171,18 @@ 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 { @@ -347,41 +192,15 @@ 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 - ) - ); + 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)); &:dir(rtl) { transform: scaleX(-1); @@ -389,47 +208,15 @@ 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 { @@ -439,57 +226,20 @@ 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-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) - ) - ); - padding-inline-end: var( - --mod-accordion-edge-to-text-space, - var(--spectrum-accordion-edge-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)); - 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) - ); + 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))); + 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)); 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 */ @@ -510,83 +260,37 @@ 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) - ); - - 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) - ); - outline-offset: calc( - var( - --mod-accordion-focus-indicator-gap, - var(--spectrum-accordion-focus-indicator-gap) - ) * -1 - ); + 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)) 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)); + outline-offset: calc(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)); } } } @@ -596,26 +300,17 @@ 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/actionbar/index.css b/components/actionbar/index.css index 0c306f0292..be19f1bc1f 100644 --- a/components/actionbar/index.css +++ b/components/actionbar/index.css @@ -10,180 +10,180 @@ governing permissions and limitations under the License. */ .spectrum-ActionBar { - --spectrum-actionbar-height: var(--spectrum-action-bar-height); - --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100); - - /* item counter field label */ - --spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-100); - --spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100); - --spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default); - - /* cjk language support for item counter */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100); - } - - /* colors - applied to popover */ - --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50); - --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); - - /* emphasized variation colors */ - --spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default); - --spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white); - - /* spacing of action bar bottom and horizontal outer edge */ - --spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300); - - /* spacing of close button */ - --spectrum-actionbar-spacing-close-button-top: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-close-button-start: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-close-button-end: var(--spectrum-spacing-75); - - /* spacing of item counter field label */ - --spectrum-actionbar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter); - --spectrum-actionbar-spacing-item-counter-end: var(--spectrum-spacing-400); - - /* spacing of action group */ - --spectrum-actionbar-spacing-action-group-top: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-action-group-end: var(--spectrum-spacing-100); - - /* drop shadow */ - --spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-x); - --spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-y); - --spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-blur); - --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color); + --spectrum-actionbar-height: var(--spectrum-action-bar-height); + --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100); + + /* item counter field label */ + --spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-100); + --spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100); + --spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default); + + /* cjk language support for item counter */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100); + } + + /* colors - applied to popover */ + --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50); + --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); + + /* emphasized variation colors */ + --spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default); + --spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white); + + /* spacing of action bar bottom and horizontal outer edge */ + --spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300); + + /* spacing of close button */ + --spectrum-actionbar-spacing-close-button-top: var(--spectrum-spacing-100); + --spectrum-actionbar-spacing-close-button-start: var(--spectrum-spacing-100); + --spectrum-actionbar-spacing-close-button-end: var(--spectrum-spacing-75); + + /* spacing of item counter field label */ + --spectrum-actionbar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter); + --spectrum-actionbar-spacing-item-counter-end: var(--spectrum-spacing-400); + + /* spacing of action group */ + --spectrum-actionbar-spacing-action-group-top: var(--spectrum-spacing-100); + --spectrum-actionbar-spacing-action-group-end: var(--spectrum-spacing-100); + + /* drop shadow */ + --spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-x); + --spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-y); + --spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-blur); + --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color); } /* windows high contrast mode */ @media (forced-colors: active) { - .spectrum-ActionBar { - --highcontrast-actionbar-popover-border-color: CanvasText; - } - - .spectrum-ActionBar--emphasized { - .spectrum-ActionBar-popover { - --highcontrast-actionbar-popover-border-color: CanvasText; - } - } + .spectrum-ActionBar { + --highcontrast-actionbar-popover-border-color: CanvasText; + } + + .spectrum-ActionBar--emphasized { + .spectrum-ActionBar-popover { + --highcontrast-actionbar-popover-border-color: CanvasText; + } + } } /* ActionBar is outer wrapper with nested popover component within */ .spectrum-ActionBar { - /* creates horizontal spacing to edge */ - padding: 0 var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge)); - inset-block-end: 0; - z-index: 1; - - /* Account for fixed width */ - box-sizing: border-box; - - /* Let clicks in blank space fall through */ - pointer-events: none; - - /* Take up no space and be invisible when not open */ - block-size: 0; - opacity: 0; - - &.is-open { - /* add ActionBar bottom margin to height for correct spacing even when sticky */ - block-size: calc(var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge)) + var(--mod-actionbar-height, var(--spectrum-actionbar-height))); - opacity: 1; - } - - .spectrum-ActionBar-popover { - /* popover is ActionBar height */ - block-size: var(--mod-actionbar-height, var(--spectrum-actionbar-height)); - box-sizing: border-box; - inline-size: 100%; - margin: auto; - padding-block-start: 0; - padding-block-end: 0; - - /* Be relative so our width can be restricted */ - position: relative; - - border-radius: var(--mod-actionbar-corner-radius, var(--spectrum-actionbar-corner-radius)); - border-color: var(--highcontrast-actionbar-popover-border-color, var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color))); - background-color: var(--mod-actionbar-popover-background-color, var(--spectrum-actionbar-popover-background-color)); - - filter: drop-shadow(var(--mod-actionbar-shadow-horizontal, var(--spectrum-actionbar-shadow-horizontal)) var(--mod-actionbar-shadow-vertical, var(--spectrum-actionbar-shadow-vertical)) var(--mod-actionbar-shadow-blur, var(--spectrum-actionbar-shadow-blur)) var(--mod-actionbar-shadow-color, var(--spectrum-actionbar-shadow-color))); - - /* Let clicks do their thing */ - pointer-events: auto; - - /* inner layout of content items */ - display: flex; - flex-direction: row; - } - - /* close button */ - .spectrum-CloseButton { - margin-inline-start: var(--mod-actionbar-spacing-close-button-start, var(--spectrum-actionbar-spacing-close-button-start)); - margin-inline-end: var(--mod-actionbar-spacing-close-button-end, var(--spectrum-actionbar-spacing-close-button-end)); - margin-block-start: var(--mod-actionbar-spacing-close-button-top, var(--spectrum-actionbar-spacing-close-button-top)); - flex-shrink: 0; - } - - /* item counter */ - .spectrum-FieldLabel { - margin-inline-end: var(--mod-actionbar-spacing-item-counter-end, var(--spectrum-actionbar-spacing-item-counter-end)); - margin-block-start: var(--mod-actionbar-spacing-item-counter-top, var(--spectrum-actionbar-spacing-item-counter-top)); - - /* neutralize padding for correct spacing within ActionBar */ - padding: 0; - - font-size: var(--mod-actionbar-item-counter-font-size, var(--spectrum-actionbar-item-counter-font-size)); - color: var(--mod-actionbar-item-counter-color, var(--spectrum-actionbar-item-counter-color)); - line-height: var(--mod-actionbar-item-counter-line-height, var(--spectrum-actionbar-item-counter-line-height)); - - /* cjk language support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - line-height: var(--mod-actionbar-item-counter-line-height-cjk, var(--spectrum-actionbar-item-counter-line-height-cjk)); - } - } - - /* action group */ - .spectrum-ActionGroup { - margin-inline-end: var(--mod-actionbar-spacing-action-group-end, var(--spectrum-actionbar-spacing-action-group-end)); - margin-block-start: var(--mod-actionbar-spacing-action-group-top, var(--spectrum-actionbar-spacing-action-group-top)); - - /* align to end by default */ - margin-inline-start: auto; - } + /* creates horizontal spacing to edge */ + padding: 0 var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge)); + inset-block-end: 0; + z-index: 1; + + /* Account for fixed width */ + box-sizing: border-box; + + /* Let clicks in blank space fall through */ + pointer-events: none; + + /* Take up no space and be invisible when not open */ + block-size: 0; + opacity: 0; + + &.is-open { + /* add ActionBar bottom margin to height for correct spacing even when sticky */ + block-size: calc(var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge)) + var(--mod-actionbar-height, var(--spectrum-actionbar-height))); + opacity: 1; + } + + .spectrum-ActionBar-popover { + /* popover is ActionBar height */ + block-size: var(--mod-actionbar-height, var(--spectrum-actionbar-height)); + box-sizing: border-box; + inline-size: 100%; + margin: auto; + padding-block-start: 0; + padding-block-end: 0; + + /* Be relative so our width can be restricted */ + position: relative; + + border-radius: var(--mod-actionbar-corner-radius, var(--spectrum-actionbar-corner-radius)); + border-color: var(--highcontrast-actionbar-popover-border-color, var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color))); + background-color: var(--mod-actionbar-popover-background-color, var(--spectrum-actionbar-popover-background-color)); + + filter: drop-shadow(var(--mod-actionbar-shadow-horizontal, var(--spectrum-actionbar-shadow-horizontal)) var(--mod-actionbar-shadow-vertical, var(--spectrum-actionbar-shadow-vertical)) var(--mod-actionbar-shadow-blur, var(--spectrum-actionbar-shadow-blur)) var(--mod-actionbar-shadow-color, var(--spectrum-actionbar-shadow-color))); + + /* Let clicks do their thing */ + pointer-events: auto; + + /* inner layout of content items */ + display: flex; + flex-direction: row; + } + + /* close button */ + .spectrum-CloseButton { + margin-inline-start: var(--mod-actionbar-spacing-close-button-start, var(--spectrum-actionbar-spacing-close-button-start)); + margin-inline-end: var(--mod-actionbar-spacing-close-button-end, var(--spectrum-actionbar-spacing-close-button-end)); + margin-block-start: var(--mod-actionbar-spacing-close-button-top, var(--spectrum-actionbar-spacing-close-button-top)); + flex-shrink: 0; + } + + /* item counter */ + .spectrum-FieldLabel { + margin-inline-end: var(--mod-actionbar-spacing-item-counter-end, var(--spectrum-actionbar-spacing-item-counter-end)); + margin-block-start: var(--mod-actionbar-spacing-item-counter-top, var(--spectrum-actionbar-spacing-item-counter-top)); + + /* neutralize padding for correct spacing within ActionBar */ + padding: 0; + + font-size: var(--mod-actionbar-item-counter-font-size, var(--spectrum-actionbar-item-counter-font-size)); + color: var(--mod-actionbar-item-counter-color, var(--spectrum-actionbar-item-counter-color)); + line-height: var(--mod-actionbar-item-counter-line-height, var(--spectrum-actionbar-item-counter-line-height)); + + /* cjk language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-actionbar-item-counter-line-height-cjk, var(--spectrum-actionbar-item-counter-line-height-cjk)); + } + } + + /* action group */ + .spectrum-ActionGroup { + margin-inline-end: var(--mod-actionbar-spacing-action-group-end, var(--spectrum-actionbar-spacing-action-group-end)); + margin-block-start: var(--mod-actionbar-spacing-action-group-top, var(--spectrum-actionbar-spacing-action-group-top)); + + /* align to end by default */ + margin-inline-start: auto; + } } .spectrum-ActionBar--emphasized { - .spectrum-ActionBar-popover { - filter: none; - background-color: var(--mod-actionbar-emphasized-background-color, var(--spectrum-actionbar-emphasized-background-color)); - - /* border transparent instead of none so WHCM will have visible border */ - border-color: transparent; - } - - /* ensure text is legible on emphasized background */ - .spectrum-FieldLabel { - color: var(--mod-actionbar-emphasized-item-counter-color, var(--spectrum-actionbar-emphasized-item-counter-color)); - } + .spectrum-ActionBar-popover { + filter: none; + background-color: var(--mod-actionbar-emphasized-background-color, var(--spectrum-actionbar-emphasized-background-color)); + + /* border transparent instead of none so WHCM will have visible border */ + border-color: transparent; + } + + /* ensure text is legible on emphasized background */ + .spectrum-FieldLabel { + color: var(--mod-actionbar-emphasized-item-counter-color, var(--spectrum-actionbar-emphasized-item-counter-color)); + } } .spectrum-ActionBar--sticky { - inset-inline-start: 0; - inset-inline-end: 0; - position: sticky; + inset-inline-start: 0; + inset-inline-end: 0; + position: sticky; } .spectrum-ActionBar--fixed { - position: fixed; + position: fixed; } /* flexible width */ .spectrum-ActionBar--flexible { - .spectrum-ActionBar-popover { - inline-size: auto; - } + .spectrum-ActionBar-popover { + inline-size: auto; + } } diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index f833caed86..6ca86c976b 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -14,278 +14,269 @@ governing permissions and limitations under the License. @import "./themes/express.css"; .spectrum-ActionButton { - --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100); - --spectrum-actionbutton-border-width: var(--spectrum-border-width-100); + --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100); + --spectrum-actionbutton-border-width: var(--spectrum-border-width-100); - --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-actionbutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)); + --spectrum-actionbutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)); &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } - &.is-selected { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); - --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); - --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); - --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus)); - - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-50)); - - &.spectrum-ActionButton--emphasized { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); - --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); - --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); - --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); - - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); - } - } + &.is-selected { + --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); + --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); + --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); + --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus)); + + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-50)); + + &.spectrum-ActionButton--emphasized { + --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); + --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); + --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); + --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); + + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); + } + } } .spectrum-ActionButton--sizeXS { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-50) * 2) + var(--spectrum-workflow-icon-size-50)); - --spectrum-actionbutton-height: var(--spectrum-component-height-50); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-50); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); - --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-50) * 2) + var(--spectrum-workflow-icon-size-50)); + --spectrum-actionbutton-height: var(--spectrum-component-height-50); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-50); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton--sizeS { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-75) * 2) + var(--spectrum-workflow-icon-size-75)); - --spectrum-actionbutton-height: var(--spectrum-component-height-75); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-75); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); - --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-75) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-75) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-75) * 2) + var(--spectrum-workflow-icon-size-75)); + --spectrum-actionbutton-height: var(--spectrum-component-height-75); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-75); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-75) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-75) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton--sizeM { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100)); - --spectrum-actionbutton-height: var(--spectrum-component-height-100); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-100); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100)); + --spectrum-actionbutton-height: var(--spectrum-component-height-100); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-100); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton--sizeL { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-200) * 2) + var(--spectrum-workflow-icon-size-200)); - --spectrum-actionbutton-height: var(--spectrum-component-height-200); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-200); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); - --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-200) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-200) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-200) * 2) + var(--spectrum-workflow-icon-size-200)); + --spectrum-actionbutton-height: var(--spectrum-component-height-200); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-200); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-200) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-200) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-300) * 2) + var(--spectrum-workflow-icon-size-300)); - --spectrum-actionbutton-height: var(--spectrum-component-height-300); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-300); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); - --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-300) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-300) * 2) + var(--spectrum-workflow-icon-size-300)); + --spectrum-actionbutton-height: var(--spectrum-component-height-300); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-300); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-300) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width)); } @media (forced-colors: active) { - .spectrum-ActionButton { - &::after { - /* make sure focus indicator renders */ - forced-color-adjust: none; - } - - /* force a more visible focus indicator color */ - --highcontrast-actionbutton-focus-indicator-color: ButtonText; - - &.is-selected { - --highcontrast-actionbutton-background-color-default: Highlight; - --highcontrast-actionbutton-background-color-hover: Highlight; - --highcontrast-actionbutton-background-color-focus: Highlight; - --highcontrast-actionbutton-background-color-down: Highlight; - --highcontrast-actionbutton-background-color-disabled: ButtonFace; - - --highcontrast-actionbutton-border-color-default: HighlightText; - --highcontrast-actionbutton-border-color-hover: HighlightText; - --highcontrast-actionbutton-border-color-focus: HighlightText; - --highcontrast-actionbutton-border-color-down: HighlightText; - --highcontrast-actionbutton-border-color-disabled: GrayText; - - --highcontrast-actionbutton-content-color-default: HighlightText; - --highcontrast-actionbutton-content-color-hover: HighlightText; - --highcontrast-actionbutton-content-color-focus: HighlightText; - --highcontrast-actionbutton-content-color-down: HighlightText; - --highcontrast-actionbutton-content-color-disabled: GrayText; - - .spectrum-ActionButton-icon, - .spectrum-ActionButton-hold, - .spectrum-ActionButton-label { - /* ensure custom text colors from above get applied */ - /* it seems like this shouldn't have to be done, but colors are wrong without it */ - forced-color-adjust: none; - } - } - } + .spectrum-ActionButton { + &::after { + /* make sure focus indicator renders */ + forced-color-adjust: none; + } + + /* force a more visible focus indicator color */ + --highcontrast-actionbutton-focus-indicator-color: ButtonText; + + &.is-selected { + --highcontrast-actionbutton-background-color-default: Highlight; + --highcontrast-actionbutton-background-color-hover: Highlight; + --highcontrast-actionbutton-background-color-focus: Highlight; + --highcontrast-actionbutton-background-color-down: Highlight; + --highcontrast-actionbutton-background-color-disabled: ButtonFace; + + --highcontrast-actionbutton-border-color-default: HighlightText; + --highcontrast-actionbutton-border-color-hover: HighlightText; + --highcontrast-actionbutton-border-color-focus: HighlightText; + --highcontrast-actionbutton-border-color-down: HighlightText; + --highcontrast-actionbutton-border-color-disabled: GrayText; + + --highcontrast-actionbutton-content-color-default: HighlightText; + --highcontrast-actionbutton-content-color-hover: HighlightText; + --highcontrast-actionbutton-content-color-focus: HighlightText; + --highcontrast-actionbutton-content-color-down: HighlightText; + --highcontrast-actionbutton-content-color-disabled: GrayText; + + .spectrum-ActionButton-icon, + .spectrum-ActionButton-hold, + .spectrum-ActionButton-label { + /* ensure custom text colors from above get applied */ + /* it seems like this shouldn't have to be done, but colors are wrong without it */ + forced-color-adjust: none; + } + } + } } .spectrum-ActionButton { - @extend %spectrum-BaseButton; - position: relative; - - min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width)); - block-size: var(--mod-actionbutton-height, var(--spectrum-actionbutton-height)); - - border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius)); - border-width: var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width)); - - gap: calc(var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)) + (var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)))); - - /* Start with text-only padding */ - padding-inline: var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)); - - background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); - border-color: var(--highcontrast-actionbutton-border-color-default, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); - color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default))); - - &:hover { - background-color: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover))); - border-color: var(--highcontrast-actionbutton-border-color-hover, var(--mod-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover))); - color: var(--highcontrast-actionbutton-content-color-hover, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover))); - } - - &:focus-visible { - background-color: var(--highcontrast-actionbutton-background-color-focus, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus))); - border-color: var(--highcontrast-actionbutton-border-color-focus, var(--mod-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus))); - color: var(--highcontrast-actionbutton-content-color-focus, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus))); - } - - &:active { - background-color: var(--highcontrast-actionbutton-background-color-down, var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))); - border-color: var(--highcontrast-actionbutton-border-color-down, var(--mod-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down))); - color: var(--highcontrast-actionbutton-content-color-down, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))); - } - - &:disabled, - &.is-disabled { - background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))); - border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled))); - color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))); - } + @extend %spectrum-BaseButton; + position: relative; + + min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width)); + block-size: var(--mod-actionbutton-height, var(--spectrum-actionbutton-height)); + + border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius)); + border-width: var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width)); + + gap: calc(var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)) + (var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)))); + + /* Start with text-only padding */ + padding-inline: var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)); + + background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); + border-color: var(--highcontrast-actionbutton-border-color-default, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); + color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default))); + + &:hover { + background-color: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover))); + border-color: var(--highcontrast-actionbutton-border-color-hover, var(--mod-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover))); + color: var(--highcontrast-actionbutton-content-color-hover, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover))); + } + + &:focus-visible { + background-color: var(--highcontrast-actionbutton-background-color-focus, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus))); + border-color: var(--highcontrast-actionbutton-border-color-focus, var(--mod-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus))); + color: var(--highcontrast-actionbutton-content-color-focus, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus))); + } + + &:active { + background-color: var(--highcontrast-actionbutton-background-color-down, var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))); + border-color: var(--highcontrast-actionbutton-border-color-down, var(--mod-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down))); + color: var(--highcontrast-actionbutton-content-color-down, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))); + } + + &:disabled, + &.is-disabled { + background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))); + border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled))); + color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))); + } } a.spectrum-ActionButton { - @extend %spectrum-AnchorButton; + @extend %spectrum-AnchorButton; } .spectrum-ActionButton-icon { - @extend %spectrum-ButtonIcon; - - inline-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); - block-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); - - /* adjust icon positioning to match UI kit */ - margin-inline-start: calc( - var(--mod-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)) - - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - ); - margin-inline-end: calc( - var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - ); - - color: inherit; + @extend %spectrum-ButtonIcon; + + inline-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + block-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + + /* adjust icon positioning to match UI kit */ + margin-inline-start: calc(var(--mod-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text))); + margin-inline-end: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text))); + + color: inherit; } .spectrum-ActionButton-hold + .spectrum-ActionButton-icon, .spectrum-ActionButton-icon:only-child { - /* Augment the margin correction for the icon only scenario */ - margin-inline-start: calc( - var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - ); + /* Augment the margin correction for the icon only scenario */ + margin-inline-start: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text))); } .spectrum-ActionButton-label { - @extend %spectrum-ButtonLabel; - pointer-events: none; + @extend %spectrum-ButtonLabel; + pointer-events: none; - font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-font-size)); - white-space: nowrap; - color: var(--mod-actionbutton-label-color, inherit); + font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-font-size)); + white-space: nowrap; + color: var(--mod-actionbutton-label-color, inherit); - text-overflow: ellipsis; - overflow: hidden; + text-overflow: ellipsis; + overflow: hidden; } .spectrum-ActionButton-hold { - position: absolute; - inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); - inset-block-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); + position: absolute; + inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); + inset-block-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); - color: inherit; + color: inherit; - transform: var(--spectrum-logical-rotation); + transform: var(--spectrum-logical-rotation); } /* special cases for focus-ring */ .spectrum-ActionButton { - transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; + transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; - &::after { - position: absolute; - inset: 0; + &::after { + position: absolute; + inset: 0; - margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width))) * -1); + margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width))) * -1); - border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius)); + border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius)); - transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; + transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; - pointer-events: none; - content: ''; - } + pointer-events: none; + content: ""; + } - &:focus-visible { - /* kill the default ring */ - box-shadow: none; - outline: none; + &:focus-visible { + /* kill the default ring */ + box-shadow: none; + outline: none; - &::after { - box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color))); - } - } + &::after { + box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color))); + } + } } diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css index f56b4e5081..314ce50c2f 100644 --- a/components/actionbutton/themes/express.css +++ b/components/actionbutton/themes/express.css @@ -13,47 +13,47 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); - - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-actionbutton-border-color-disabled: transparent; - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); - } - - &.spectrum-ActionButton--staticBlack, - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - } - - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); - } - - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); - } - } + .spectrum-ActionButton { + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-actionbutton-border-color-disabled: transparent; + + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); + } + + &.spectrum-ActionButton--staticBlack, + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + } + + &.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); + } + + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); + } + } } diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css index 30de8aaf3a..019a158df4 100644 --- a/components/actionbutton/themes/spectrum.css +++ b/components/actionbutton/themes/spectrum.css @@ -11,132 +11,132 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - - --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-border-color-disabled: transparent; - } - - &.is-selected { - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-actionbutton-border-color-disabled: transparent; - } - - &.spectrum-ActionButton--staticBlack, - &.spectrum-ActionButton--staticWhite { - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - - --spectrum-actionbutton-border-color-disabled: transparent; - } - } - - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); - - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500); - - --spectrum-actionbutton-content-color-default: var(--spectrum-black); - --spectrum-actionbutton-content-color-hover: var(--spectrum-black); - --spectrum-actionbutton-content-color-down: var(--spectrum-black); - --spectrum-actionbutton-content-color-focus: var(--spectrum-black); - - --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - - &.is-selected { - --mod-actionbutton-background-color-default: var(--spectrum-transparent-black-800); - --mod-actionbutton-background-color-hover: var(--spectrum-transparent-black-900); - --mod-actionbutton-background-color-down: var(--spectrum-transparent-black-900); - --mod-actionbutton-background-color-focus: var(--spectrum-transparent-black-900); - - --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - - --mod-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --mod-actionbutton-border-color-disabled: transparent; - } - } - - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500); - - --spectrum-actionbutton-content-color-default: var(--spectrum-white); - --spectrum-actionbutton-content-color-hover: var(--spectrum-white); - --spectrum-actionbutton-content-color-down: var(--spectrum-white); - --spectrum-actionbutton-content-color-focus: var(--spectrum-white); - - --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - - &.is-selected { - --mod-actionbutton-background-color-default: var(--spectrum-transparent-white-800); - --mod-actionbutton-background-color-hover: var(--spectrum-transparent-white-900); - --mod-actionbutton-background-color-down: var(--spectrum-transparent-white-900); - --mod-actionbutton-background-color-focus: var(--spectrum-transparent-white-900); - - --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - - --mod-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --mod-actionbutton-border-color-disabled: transparent; - } - } - } + .spectrum-ActionButton { + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + + --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: transparent; + } + + &.is-selected { + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-actionbutton-border-color-disabled: transparent; + } + + &.spectrum-ActionButton--staticBlack, + &.spectrum-ActionButton--staticWhite { + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + + --spectrum-actionbutton-border-color-disabled: transparent; + } + } + + &.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); + + --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500); + + --spectrum-actionbutton-content-color-default: var(--spectrum-black); + --spectrum-actionbutton-content-color-hover: var(--spectrum-black); + --spectrum-actionbutton-content-color-down: var(--spectrum-black); + --spectrum-actionbutton-content-color-focus: var(--spectrum-black); + + --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + + &.is-selected { + --mod-actionbutton-background-color-default: var(--spectrum-transparent-black-800); + --mod-actionbutton-background-color-hover: var(--spectrum-transparent-black-900); + --mod-actionbutton-background-color-down: var(--spectrum-transparent-black-900); + --mod-actionbutton-background-color-focus: var(--spectrum-transparent-black-900); + + --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); + + --mod-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --mod-actionbutton-border-color-disabled: transparent; + } + } + + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); + + --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500); + + --spectrum-actionbutton-content-color-default: var(--spectrum-white); + --spectrum-actionbutton-content-color-hover: var(--spectrum-white); + --spectrum-actionbutton-content-color-down: var(--spectrum-white); + --spectrum-actionbutton-content-color-focus: var(--spectrum-white); + + --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + + &.is-selected { + --mod-actionbutton-background-color-default: var(--spectrum-transparent-white-800); + --mod-actionbutton-background-color-hover: var(--spectrum-transparent-white-900); + --mod-actionbutton-background-color-down: var(--spectrum-transparent-white-900); + --mod-actionbutton-background-color-focus: var(--spectrum-transparent-white-900); + + --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); + + --mod-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --mod-actionbutton-border-color-disabled: transparent; + } + } + } } diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css index 7f78b2945f..297ffb9166 100644 --- a/components/actiongroup/index.css +++ b/components/actiongroup/index.css @@ -13,145 +13,145 @@ governing permissions and limitations under the License. @import "./themes/express.css"; .spectrum-ActionGroup { - --spectrum-actiongroup-button-spacing-reset: 0; - --spectrum-actiongroup-border-radius-reset: 0; - --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100); + --spectrum-actiongroup-button-spacing-reset: 0; + --spectrum-actiongroup-border-radius-reset: 0; + --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100); } .spectrum-ActionGroup--sizeXS, .spectrum-ActionGroup--sizeS { - --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-75); - --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75); + --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-75); + --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75); } .spectrum-ActionGroup--sizeM, .spectrum-ActionGroup--sizeL, .spectrum-ActionGroup--sizeXL { - --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-100); - --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-100); + --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-100); + --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-100); } .spectrum-ActionGroup { - display: flex; - flex-wrap: wrap; - gap: var(--mod-actiongroup-horizontal-spacing-regular, var(--spectrum-actiongroup-horizontal-spacing-regular)); - - .spectrum-ActionGroup-item { - flex-shrink: 0; - - /* Focus indicator should appear above hovered and selected borders */ - &:focus-visible { - z-index: 3; - } - } - - &:not(.spectrum-ActionGroup--vertical)&:not(.spectrum-ActionGroup--compact) { - .spectrum-ActionGroup-item { - flex-shrink: 0; - } - } + display: flex; + flex-wrap: wrap; + gap: var(--mod-actiongroup-horizontal-spacing-regular, var(--spectrum-actiongroup-horizontal-spacing-regular)); + + .spectrum-ActionGroup-item { + flex-shrink: 0; + + /* Focus indicator should appear above hovered and selected borders */ + &:focus-visible { + z-index: 3; + } + } + + &:not(.spectrum-ActionGroup--vertical)&:not(.spectrum-ActionGroup--compact) { + .spectrum-ActionGroup-item { + flex-shrink: 0; + } + } } .spectrum-ActionGroup--vertical { - gap: var(--mod-actiongroup-vertical-spacing-regular, var(--spectrum-actiongroup-vertical-spacing-regular)); - display: inline-flex; - flex-direction: column; + gap: var(--mod-actiongroup-vertical-spacing-regular, var(--spectrum-actiongroup-vertical-spacing-regular)); + display: inline-flex; + flex-direction: column; } .spectrum-ActionGroup--compact { - gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact)); + gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact)); } .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) { - flex-wrap: nowrap; - - .spectrum-ActionGroup-item { - position: relative; - border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); - z-index: 0; - - &:first-child { - /* Action button passthrough styling */ - --mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - - border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - } - - & + .spectrum-ActionGroup-item { - /* Action button passthrough styling */ - --mod-actionbutton-focus-indicator-border-radius: 0px; - - margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); - margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); - } - - &:last-child { - /* Action button passthrough styling */ - --mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px; - - border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); - margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); - } - - &.is-selected { - z-index: 1; - } - - &:hover { - z-index: 2; - } - - /* Focus indicator should appear above hovered and selected borders */ - &:focus-visible { - z-index: 3; - } - - .spectrum-ActionButton-label { - inline-size: auto; - } - } + flex-wrap: nowrap; + + .spectrum-ActionGroup-item { + position: relative; + border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); + z-index: 0; + + &:first-child { + /* Action button passthrough styling */ + --mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + + border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); + } + + & + .spectrum-ActionGroup-item { + /* Action button passthrough styling */ + --mod-actionbutton-focus-indicator-border-radius: 0px; + + margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); + margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); + } + + &:last-child { + /* Action button passthrough styling */ + --mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px; + + border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); + margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); + } + + &.is-selected { + z-index: 1; + } + + &:hover { + z-index: 2; + } + + /* Focus indicator should appear above hovered and selected borders */ + &:focus-visible { + z-index: 3; + } + + .spectrum-ActionButton-label { + inline-size: auto; + } + } } .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical { - gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact)); - - .spectrum-ActionGroup-item { - border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); - - &:first-child { - /* Action button passthrough styling */ - --mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px; - - border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - } - - & + .spectrum-ActionGroup-item { - margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - } - - &:last-child { - /* Action button passthrough styling */ - --mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - - border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - margin-block-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - } - } + gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact)); + + .spectrum-ActionGroup-item { + border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); + + &:first-child { + /* Action button passthrough styling */ + --mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px; + + border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); + margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); + margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); + } + + & + .spectrum-ActionGroup-item { + margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); + margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); + margin-block-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); + margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); + } + + &:last-child { + /* Action button passthrough styling */ + --mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + + border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); + margin-block-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); + } + } } .spectrum-ActionGroup--justified .spectrum-ActionGroup-item { - flex: 1; + flex: 1; } diff --git a/components/actiongroup/themes/express.css b/components/actiongroup/themes/express.css index 73630a7c0b..9a2b72cc92 100644 --- a/components/actiongroup/themes/express.css +++ b/components/actiongroup/themes/express.css @@ -13,11 +13,11 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50); + .spectrum-ActionGroup { + --spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50); - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - --spectrum-actiongroup-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - } + /* account for button border */ + --spectrum-actiongroup-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); + --spectrum-actiongroup-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); + } } diff --git a/components/actiongroup/themes/spectrum.css b/components/actiongroup/themes/spectrum.css index 0b606f3f6b..0715d2a243 100644 --- a/components/actiongroup/themes/spectrum.css +++ b/components/actiongroup/themes/spectrum.css @@ -11,11 +11,11 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: 0; + .spectrum-ActionGroup { + --spectrum-actiongroup-gap-size-compact: 0; - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: -1px; - --spectrum-actiongroup-vertical-spacing-compact: -1px; - } + /* account for button border */ + --spectrum-actiongroup-horizontal-spacing-compact: -1px; + --spectrum-actiongroup-vertical-spacing-compact: -1px; + } } diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css index 79edc3c524..978ab27bab 100644 --- a/components/alertbanner/index.css +++ b/components/alertbanner/index.css @@ -12,102 +12,102 @@ governing permissions and limitations under the License. @import "./themes/express.css"; .spectrum-AlertBanner { - --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); - --spectrum-alert-banner-size: var(--spectrum-alert-banner-width); - --spectrum-alert-banner-font-size: var(--spectrum-font-size-100); - --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); - - /* spacing */ - --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300); - --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); - /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- internal reference below; todo solve for this edge case in the plugin */ - --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon); - --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text); - - /* colors */ - --spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default); - --spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default); - --spectrum-alert-banner-font-color: var(--spectrum-white); - - /* settings for nested Divider */ - --mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider)); - --mod-divider-vertical-height: auto; - --mod-divider-vertical-align: stretch; - - /* settings for nested Button */ - --mod-button-margin-block: var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button)); - --mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-alert-banner-text-to-divider)); - --mod-button-margin-left: auto; - - /* settings for nested CloseButton */ - --mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing)); - --mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing)); - --mod-closebutton-align-self: flex-start; + --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); + --spectrum-alert-banner-size: var(--spectrum-alert-banner-width); + --spectrum-alert-banner-font-size: var(--spectrum-font-size-100); + --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + + /* spacing */ + --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300); + --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- internal reference below; todo solve for this edge case in the plugin */ + --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon); + --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text); + + /* colors */ + --spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default); + --spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default); + --spectrum-alert-banner-font-color: var(--spectrum-white); + + /* settings for nested Divider */ + --mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider)); + --mod-divider-vertical-height: auto; + --mod-divider-vertical-align: stretch; + + /* settings for nested Button */ + --mod-button-margin-block: var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button)); + --mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-alert-banner-text-to-divider)); + --mod-button-margin-left: auto; + + /* settings for nested CloseButton */ + --mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing)); + --mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing)); + --mod-closebutton-align-self: flex-start; } .spectrum-AlertBanner { - display: none; - justify-content: space-between; - inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size)); - min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height)); - font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size)); - color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color)); - background-color: var(--mod-alert-banner-netural-background, var(--spectrum-alert-banner-netural-background)); - border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent); - - &.is-open { - display: flex; - } + display: none; + justify-content: space-between; + inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size)); + min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height)); + font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size)); + color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color)); + background-color: var(--mod-alert-banner-netural-background, var(--spectrum-alert-banner-netural-background)); + border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent); + + &.is-open { + display: flex; + } } .spectrum-AlertBanner--info { - background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background)); + background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background)); } .spectrum-AlertBanner--negative { - background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background)); + background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background)); } .spectrum-AlertBanner-body { - inline-size: 100%; - display: flex; - - /* --mod-* for alert-banner-text-to-button-vertical will only accept values larger than alert-banner-edge-to-bottom, as gap only recognizes positive values */ - gap: max(calc(var(--mod-alert-banner-text-to-button-vertical, var(--spectrum-alert-banner-text-to-button-vertical)) - var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button))), 0px); - flex-wrap: wrap; - align-items: center; - margin-inline-start: var(--mod-alert-banner-start-edge, var(--spectrum-alert-banner-start-edge)); + inline-size: 100%; + display: flex; + + /* --mod-* for alert-banner-text-to-button-vertical will only accept values larger than alert-banner-edge-to-bottom, as gap only recognizes positive values */ + gap: max(calc(var(--mod-alert-banner-text-to-button-vertical, var(--spectrum-alert-banner-text-to-button-vertical)) - var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button))), 0px); + flex-wrap: wrap; + align-items: center; + margin-inline-start: var(--mod-alert-banner-start-edge, var(--spectrum-alert-banner-start-edge)); } .spectrum-AlertBanner-content { - display: flex; + display: flex; } .spectrum-AlertBanner-end { - display: flex; - align-items: center; + display: flex; + align-items: center; } .spectrum-AlertBanner-icon { - inline-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); - block-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); - margin-block-start: var(--mod-alert-banner-top-icon, var(--spectrum-alert-banner-top-icon)); - margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text)); - flex-shrink: 0; + inline-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); + block-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); + margin-block-start: var(--mod-alert-banner-top-icon, var(--spectrum-alert-banner-top-icon)); + margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text)); + flex-shrink: 0; } .spectrum-AlertBanner-text { - margin-block-start: var(--mod-alert-banner-top-text, var(--spectrum-alert-banner-top-text)); - margin-block-end: var(--mod-alert-banner-bottom-text, var(--spectrum-alert-banner-bottom-text)); - margin-inline-end: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal)); + margin-block-start: var(--mod-alert-banner-top-text, var(--spectrum-alert-banner-top-text)); + margin-block-end: var(--mod-alert-banner-bottom-text, var(--spectrum-alert-banner-bottom-text)); + margin-inline-end: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal)); } @media (forced-colors: active) { - .spectrum-AlertBanner { - --highcontrast-alert-banner-border-color: CanvasText; - --highcontrast-alert-banner-border-width: var(--spectrum-border-width-100); - } + .spectrum-AlertBanner { + --highcontrast-alert-banner-border-color: CanvasText; + --highcontrast-alert-banner-border-width: var(--spectrum-border-width-100); + } } diff --git a/components/alertbanner/themes/express.css b/components/alertbanner/themes/express.css index 6fd182f97c..133220d9b6 100644 --- a/components/alertbanner/themes/express.css +++ b/components/alertbanner/themes/express.css @@ -13,7 +13,7 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-AlertBanner { - --spectrum-alert-banner-netural-background: var(--spectrum-neutral-background-color-default); - } + .spectrum-AlertBanner { + --spectrum-alert-banner-netural-background: var(--spectrum-neutral-background-color-default); + } } diff --git a/components/alertbanner/themes/spectrum.css b/components/alertbanner/themes/spectrum.css index a7afe4693d..89ac8a8f9b 100644 --- a/components/alertbanner/themes/spectrum.css +++ b/components/alertbanner/themes/spectrum.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-AlertBanner { - --spectrum-alert-banner-netural-background: var(--spectrum-neutral-subdued-background-color-default); - } + .spectrum-AlertBanner { + --spectrum-alert-banner-netural-background: var(--spectrum-neutral-subdued-background-color-default); + } } diff --git a/components/alertdialog/index.css b/components/alertdialog/index.css index f3911a868f..ae5dc49086 100644 --- a/components/alertdialog/index.css +++ b/components/alertdialog/index.css @@ -11,104 +11,104 @@ governing permissions and limitations under the License. */ .spectrum-AlertDialog { - --spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); - --spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); - --spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); - - /* color */ - --spectrum-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color); - --spectrum-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); - - /* typography */ - --spectrum-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-alert-dialog-title-font-size: var(--spectrum-alert-dialog-title-size); - --spectrum-alert-dialog-title-line-height: var(--spectrum-heading-line-height); - --spectrum-alert-dialog-title-color: var(--spectrum-heading-color); - - --spectrum-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-alert-dialog-body-font-size: var(--spectrum-alert-dialog-description-size); - --spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-100); - --spectrum-alert-dialog-body-color: var(--spectrum-body-color); - - /* spacing */ - --spectrum-alert-dialog-title-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300); - --spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300); - - /* mods for nested component */ - --mod-buttongroup-justify-content: flex-end; + --spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + --spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + + /* color */ + --spectrum-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color); + --spectrum-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); + + /* typography */ + --spectrum-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --spectrum-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --spectrum-alert-dialog-title-font-size: var(--spectrum-alert-dialog-title-size); + --spectrum-alert-dialog-title-line-height: var(--spectrum-heading-line-height); + --spectrum-alert-dialog-title-color: var(--spectrum-heading-color); + + --spectrum-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-alert-dialog-body-font-size: var(--spectrum-alert-dialog-description-size); + --spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-100); + --spectrum-alert-dialog-body-color: var(--spectrum-body-color); + + /* spacing */ + --spectrum-alert-dialog-title-to-divider: var(--spectrum-spacing-200); + --spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300); + --spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300); + + /* mods for nested component */ + --mod-buttongroup-justify-content: flex-end; } .spectrum-AlertDialog { - display: flex; - box-sizing: border-box; - inline-size: fit-content; - min-inline-size: var(--mod-alert-dialog-min-width, var(--spectrum-alert-dialog-min-width)); - max-inline-size: var(--mod-alert-dialog-max-width, var(--spectrum-alert-dialog-max-width)); - max-block-size: inherit; - outline: none; - padding: var(--mod-alert-dialog-padding, var(--spectrum-alert-dialog-padding)); - - .spectrum-Icon { - inline-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size)); - block-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size)); - margin-inline-start: var(--mod-alert-dialog-title-to-icon, var(--spectrum-alert-dialog-title-to-icon)); - flex-shrink: 0; - } + display: flex; + box-sizing: border-box; + inline-size: fit-content; + min-inline-size: var(--mod-alert-dialog-min-width, var(--spectrum-alert-dialog-min-width)); + max-inline-size: var(--mod-alert-dialog-max-width, var(--spectrum-alert-dialog-max-width)); + max-block-size: inherit; + outline: none; + padding: var(--mod-alert-dialog-padding, var(--spectrum-alert-dialog-padding)); + + .spectrum-Icon { + inline-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size)); + block-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size)); + margin-inline-start: var(--mod-alert-dialog-title-to-icon, var(--spectrum-alert-dialog-title-to-icon)); + flex-shrink: 0; + } } .spectrum-AlertDialog--warning { - /* @passthrough */ - --mod-icon-color: var(--mod-alert-dialog-warning-icon-color, var(--spectrum-alert-dialog-warning-icon-color)); + /* @passthrough */ + --mod-icon-color: var(--mod-alert-dialog-warning-icon-color, var(--spectrum-alert-dialog-warning-icon-color)); } .spectrum-AlertDialog--error { - /* @passthrough */ - --mod-icon-color: var(--mod-alert-dialog-error-icon-color, var(--spectrum-alert-dialog-error-icon-color)); + /* @passthrough */ + --mod-icon-color: var(--mod-alert-dialog-error-icon-color, var(--spectrum-alert-dialog-error-icon-color)); } .spectrum-AlertDialog-grid { - display: grid; + display: grid; } .spectrum-AlertDialog-header { - display: flex; - justify-content: space-between; - align-items: baseline; + display: flex; + justify-content: space-between; + align-items: baseline; } .spectrum-AlertDialog-heading { - font-family: var(--mod-alert-dialog-title-font-family, var(--spectrum-alert-dialog-title-font-family)); - font-weight: var(--mod-alert-dialog-title-font-weight, var(--spectrum-alert-dialog-title-font-weight)); - font-style: var(--mod-alert-dialog-title-font-style, var(--spectrum-alert-dialog-title-font-style)); - font-size: var(--mod-alert-dialog-title-font-size, var(--spectrum-alert-dialog-title-font-size)); - line-height: var(--mod-alert-dialog-title-line-height, var(--spectrum-alert-dialog-title-line-height)); - color: var(--mod-alert-dialog-title-color, var(--spectrum-alert-dialog-title-color)); - margin: 0; - margin-block-end: var(--mod-alert-dialog-title-to-divider, var(--spectrum-alert-dialog-title-to-divider)); + font-family: var(--mod-alert-dialog-title-font-family, var(--spectrum-alert-dialog-title-font-family)); + font-weight: var(--mod-alert-dialog-title-font-weight, var(--spectrum-alert-dialog-title-font-weight)); + font-style: var(--mod-alert-dialog-title-font-style, var(--spectrum-alert-dialog-title-font-style)); + font-size: var(--mod-alert-dialog-title-font-size, var(--spectrum-alert-dialog-title-font-size)); + line-height: var(--mod-alert-dialog-title-line-height, var(--spectrum-alert-dialog-title-line-height)); + color: var(--mod-alert-dialog-title-color, var(--spectrum-alert-dialog-title-color)); + margin: 0; + margin-block-end: var(--mod-alert-dialog-title-to-divider, var(--spectrum-alert-dialog-title-to-divider)); } .spectrum-AlertDialog-content { - font-family: var(--mod-alert-dialog-body-font-family, var(--spectrum-alert-dialog-body-font-family)); - font-weight: var(--mod-alert-dialog-body-font-weight, var(--spectrum-alert-dialog-body-font-weight)); - font-style: var(--mod-alert-dialog-body-font-style, var(--spectrum-alert-dialog-body-font-style)); - font-size: var(--mod-alert-dialog-body-font-size, var(--spectrum-alert-dialog-body-font-size)); - line-height: var(--mod-alert-dialog-body-line-height, var(--spectrum-alert-dialog-body-line-height)); - color: var(--mod-alert-dialog-body-color, var(--spectrum-alert-dialog-body-color)); - margin: 0; - margin-block-start: var(--mod-alert-dialog-divider-to-description, var(--spectrum-alert-dialog-divider-to-description)); - margin-block-end: var(--mod-alert-dialog-description-to-buttons, var(--spectrum-alert-dialog-description-to-buttons)); - - overflow-y: auto; - -webkit-overflow-scrolling: touch; + font-family: var(--mod-alert-dialog-body-font-family, var(--spectrum-alert-dialog-body-font-family)); + font-weight: var(--mod-alert-dialog-body-font-weight, var(--spectrum-alert-dialog-body-font-weight)); + font-style: var(--mod-alert-dialog-body-font-style, var(--spectrum-alert-dialog-body-font-style)); + font-size: var(--mod-alert-dialog-body-font-size, var(--spectrum-alert-dialog-body-font-size)); + line-height: var(--mod-alert-dialog-body-line-height, var(--spectrum-alert-dialog-body-line-height)); + color: var(--mod-alert-dialog-body-color, var(--spectrum-alert-dialog-body-color)); + margin: 0; + margin-block-start: var(--mod-alert-dialog-divider-to-description, var(--spectrum-alert-dialog-divider-to-description)); + margin-block-end: var(--mod-alert-dialog-description-to-buttons, var(--spectrum-alert-dialog-description-to-buttons)); + + overflow-y: auto; + -webkit-overflow-scrolling: touch; } @media (forced-colors: active) { - .spectrum-AlertDialog { - border: solid; - } + .spectrum-AlertDialog { + border: solid; + } } diff --git a/components/asset/index.css b/components/asset/index.css index 29fdf09c0f..2be7b5953c 100644 --- a/components/asset/index.css +++ b/components/asset/index.css @@ -11,63 +11,44 @@ governing permissions and limitations under the License. */ .spectrum-Asset { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; - inline-size: 100%; - block-size: 100%; + inline-size: 100%; + block-size: 100%; } .spectrum-Asset-image { - max-inline-size: 100%; - max-block-size: 100%; - object-fit: contain; - transition: opacity var(--spectrum-animation-duration-100); + max-inline-size: 100%; + max-block-size: 100%; + object-fit: contain; + transition: opacity var(--spectrum-animation-duration-100); } .spectrum-Asset-folder, .spectrum-Asset-file { - inline-size: clamp( - var(--mod-asset-icon-min-width, 48px), - 100%, - var(--mod-asset-icon-max-width, 80px) - ); - block-size: 100%; - margin: var(--mod-asset-icon-margin, 20px); + inline-size: clamp(var(--mod-asset-icon-min-width, 48px), 100%, var(--mod-asset-icon-max-width, 80px)); + block-size: 100%; + margin: var(--mod-asset-icon-margin, 20px); } .spectrum-Asset-folderBackground { - fill: var( - --highcontrast-asset-folder-background-color, - var( - --mod-asset-folder-background-color, - var(--spectrum-gray-300) - ) - ); + fill: var(--highcontrast-asset-folder-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-300))); } .spectrum-Asset-fileBackground { - fill: var( - --highcontrast-asset-file-background-color, - var( - --mod-asset-file-background-color, - var(--spectrum-gray-50) - ) - ); + fill: var(--highcontrast-asset-file-background-color, var(--mod-asset-file-background-color, var(--spectrum-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) { - .spectrum-Asset { - --highcontrast-asset-folder-background-color: currentColor; - --highcontrast-asset-file-background-color: currentColor; - } + .spectrum-Asset { + --highcontrast-asset-folder-background-color: currentColor; + --highcontrast-asset-file-background-color: currentColor; + } } diff --git a/components/assetcard/index.css b/components/assetcard/index.css index 418275e401..390891f9f9 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -14,65 +14,65 @@ governing permissions and limitations under the License. /* outer container, unstyled */ .spectrum-AssetCard { - /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */ - --spectrum-assetcard-asset-size: 224px; - --spectrum-assetcard-background-color: var(--spectrum-gray-200); - --spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-assetcard-asset-container-border-size: 1px; - --spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300); - - --spectrum-assetcard-border-radius: var(--spectrum-corner-radius-100); - --spectrum-assetcard-border-color: transparent; - --spectrum-assetcard-border-color-hover: var(--spectrum-gray-500); - --spectrum-assetcard-border-color-down: var(--spectrum-gray-600); - - --spectrum-assetcard-focus-ring-gap: 5px; - --spectrum-assetcard-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - - /* selection indicator - checkbox or number */ - --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9); - --spectrum-assetcard-selectionindicator-size: var(--spectrum-card-selection-background-size); - --spectrum-assetcard-selectionindicator-border-radius: var(--spectrum-corner-radius-100); - --spectrum-assetcard-selectionindicator-offset-y: 4px; - --spectrum-assetcard-selectionindicator-blur: 6px; - --spectrum-assetcard-selectionindicator-color: var(--spectrum-white); - --spectrum-assetcard-selectionindicator-font-weight: var(--spectrum-bold-font-weight); - --spectrum-assetcard-selectionindicator-font-size: var(--spectrum-font-size-400); - - /* title */ - --spectrum-assetcard-title-text-color: var(--spectrum-gray-900); - --spectrum-assetcard-title-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-assetcard-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-assetcard-title-font-style: var(--spectrum-default-font-style); - --spectrum-assetcard-title-line-height: var(--spectrum-line-height-100); - --spectrum-assetcard-title-letter-spacing: 0; - - /* header content */ - --spectrum-assetcard-header-content-text-color: var(--spectrum-gray-900); - --spectrum-assetcard-header-content-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-assetcard-header-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-assetcard-header-content-font-style: var(--spectrum-default-font-style); - --spectrum-assetcard-header-content-line-height: var(--spectrum-line-height-200); - --spectrum-assetcard-header-content-letter-spacing: 0; - - /* content */ - --spectrum-assetcard-content-text-color: var(--spectrum-gray-700); - --spectrum-assetcard-content-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-assetcard-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-assetcard-content-font-style: var(--spectrum-default-font-style); - --spectrum-assetcard-content-line-height: var(--spectrum-line-height-200); - --spectrum-assetcard-content-letter-spacing: 0; - - --spectrum-assetcard-content-margin-block-start: var(--spectrum-spacing-75); - - &:lang(zh), + /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */ + --spectrum-assetcard-asset-size: 224px; + --spectrum-assetcard-background-color: var(--spectrum-gray-200); + --spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-assetcard-asset-container-border-size: 1px; + --spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300); + + --spectrum-assetcard-border-radius: var(--spectrum-corner-radius-100); + --spectrum-assetcard-border-color: transparent; + --spectrum-assetcard-border-color-hover: var(--spectrum-gray-500); + --spectrum-assetcard-border-color-down: var(--spectrum-gray-600); + + --spectrum-assetcard-focus-ring-gap: 5px; + --spectrum-assetcard-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + + /* selection indicator - checkbox or number */ + --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9); + --spectrum-assetcard-selectionindicator-size: var(--spectrum-card-selection-background-size); + --spectrum-assetcard-selectionindicator-border-radius: var(--spectrum-corner-radius-100); + --spectrum-assetcard-selectionindicator-offset-y: 4px; + --spectrum-assetcard-selectionindicator-blur: 6px; + --spectrum-assetcard-selectionindicator-color: var(--spectrum-white); + --spectrum-assetcard-selectionindicator-font-weight: var(--spectrum-bold-font-weight); + --spectrum-assetcard-selectionindicator-font-size: var(--spectrum-font-size-400); + + /* title */ + --spectrum-assetcard-title-text-color: var(--spectrum-gray-900); + --spectrum-assetcard-title-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-assetcard-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --spectrum-assetcard-title-font-style: var(--spectrum-default-font-style); + --spectrum-assetcard-title-line-height: var(--spectrum-line-height-100); + --spectrum-assetcard-title-letter-spacing: 0; + + /* header content */ + --spectrum-assetcard-header-content-text-color: var(--spectrum-gray-900); + --spectrum-assetcard-header-content-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-assetcard-header-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-assetcard-header-content-font-style: var(--spectrum-default-font-style); + --spectrum-assetcard-header-content-line-height: var(--spectrum-line-height-200); + --spectrum-assetcard-header-content-letter-spacing: 0; + + /* content */ + --spectrum-assetcard-content-text-color: var(--spectrum-gray-700); + --spectrum-assetcard-content-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-assetcard-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-assetcard-content-font-style: var(--spectrum-default-font-style); + --spectrum-assetcard-content-line-height: var(--spectrum-line-height-200); + --spectrum-assetcard-content-letter-spacing: 0; + + --spectrum-assetcard-content-margin-block-start: var(--spectrum-spacing-75); + + &:lang(zh), &:lang(ja), &:lang(ko) { --spectrum-assetcard-title-font-family: var(--spectrum-cjk-font-family-stack); --spectrum-assetcard-title-font-style: var(--spectrum-heading-cjk-font-style); --spectrum-assetcard-title-font-weight: var(--spectrum-heading-cjk-font-weight); --spectrum-assetcard-title-font-size: var(--spectrum-heading-cjk-size-xs); - --spectrum-assetcard-title-line-height: var(--spectrum-heading-cjk-line-height); + --spectrum-assetcard-title-line-height: var(--spectrum-heading-cjk-line-height); --spectrum-assetcard-title-letter-spacing: var(--spectrum-cjk-letter-spacing); --spectrum-assetcard-header-content-font-family: var(--spectrum-cjk-font-family-stack); @@ -90,297 +90,289 @@ governing permissions and limitations under the License. } .spectrum-AssetCard { - /* contain selection indicator */ - position: relative; - - display: flex; - flex-direction: column; - - inline-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size)); - - cursor: pointer; - - &.is-selected, - &:hover, - &:focus-visible { - .spectrum-AssetCard-assetContainer::after { - border-color: var(--highcontrast-assetcard-border-color-hover, var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover))); - } - - /* adds hover to checkbox when spectrum-AssetCard card receives hover */ - .spectrum-Checkbox-box::before{ - border-color: var(--highcontrast-assetcard-border-color-hover, var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover))); - } - } - - &:active { - .spectrum-AssetCard-assetContainer::after { - border-color: var(--mod-assetcard-border-color-down, var(--spectrum-assetcard-border-color-down)); - } - } - - outline: none; - - &:focus-visible { - .spectrum-AssetCard-assetContainer::before { - opacity: 1; - } - } + /* contain selection indicator */ + position: relative; + + display: flex; + flex-direction: column; + + inline-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size)); + + cursor: pointer; + + &.is-selected, + &:hover, + &:focus-visible { + .spectrum-AssetCard-assetContainer::after { + border-color: var(--highcontrast-assetcard-border-color-hover, var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover))); + } + + /* adds hover to checkbox when spectrum-AssetCard card receives hover */ + .spectrum-Checkbox-box::before { + border-color: var(--highcontrast-assetcard-border-color-hover, var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover))); + } + } + + &:active { + .spectrum-AssetCard-assetContainer::after { + border-color: var(--mod-assetcard-border-color-down, var(--spectrum-assetcard-border-color-down)); + } + } + + outline: none; + + &:focus-visible { + .spectrum-AssetCard-assetContainer::before { + opacity: 1; + } + } } /* the container for the asset (background, border, etc) */ .spectrum-AssetCard-assetContainer { - /* contain overlay */ - position: relative; + /* contain overlay */ + position: relative; - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; - inline-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size)); - block-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size)); + inline-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size)); + block-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size)); - border-radius: var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)); + border-radius: var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)); - background-color: var(--mod-assetcard-background-color, var(--spectrum-assetcard-background-color)); + background-color: var(--mod-assetcard-background-color, var(--spectrum-assetcard-background-color)); - transition: border var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; + transition: border var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; - /* focus indicator */ - &::before { - content: ''; + /* focus indicator */ + &::before { + content: ""; - position: absolute; - inset: calc(-1 * var(--mod-assetcard-focus-ring-gap, var(--spectrum-assetcard-focus-ring-gap))); + position: absolute; + inset: calc(-1 * var(--mod-assetcard-focus-ring-gap, var(--spectrum-assetcard-focus-ring-gap))); - border: - var(--mod-assetcard-focus-indicator-thickness, var(--spectrum-assetcard-focus-indicator-thickness)) - solid - var(--mod-assectcard-focus-indicator-color, var(--spectrum-assestcard-focus-indicator-color)); + border: var(--mod-assetcard-focus-indicator-thickness, var(--spectrum-assetcard-focus-indicator-thickness)) solid var(--mod-assectcard-focus-indicator-color, var(--spectrum-assestcard-focus-indicator-color)); - border-radius: var(--mod-assetcard-focus-ring-border-radius, var(--spectrum-assetcard-focus-ring-border-radius)); + border-radius: var(--mod-assetcard-focus-ring-border-radius, var(--spectrum-assetcard-focus-ring-border-radius)); - opacity: 0; - pointer-events: none; - transition: opacity var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; - } + opacity: 0; + pointer-events: none; + transition: opacity var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; + } - /* border */ - &::after { - content: ''; - position: absolute; - inset: 0; - z-index: 3; + /* border */ + &::after { + content: ""; + position: absolute; + inset: 0; + z-index: 3; - border: - var(--mod-assetcard-asset-container-border-size, var(--spectrum-assetcard-asset-container-border-size)) - solid - var(--mod-assetcard-border-color, var(--spectrum-assetcard-border-color)); - border-radius: calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px); - } + border: var(--mod-assetcard-asset-container-border-size, var(--spectrum-assetcard-asset-container-border-size)) solid var(--mod-assetcard-border-color, var(--spectrum-assetcard-border-color)); + border-radius: calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px); + } } /* the actual asset */ .spectrum-AssetCard-asset { - object-fit: contain; + object-fit: contain; - inline-size: 100%; - block-size: 100%; + inline-size: 100%; + block-size: 100%; - transition: inline-size var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out, - block-size var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; + transition: + inline-size var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out, + block-size var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; - border-radius: calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px); + border-radius: calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px); } /* header area, contains the header and optional content */ .spectrum-AssetCard-header { - display: flex; - flex-direction: row; - align-items: center; + display: flex; + flex-direction: row; + align-items: center; - /* space between the asset and the header, place it on the header so header can be optional */ - margin-block-start: var(--mod-assetcard-header-margin-block-start, var(--spectrum-assetcard-header-margin-block-start)); + /* space between the asset and the header, place it on the header so header can be optional */ + margin-block-start: var(--mod-assetcard-header-margin-block-start, var(--spectrum-assetcard-header-margin-block-start)); } /* bold title */ .spectrum-AssetCard-title { - flex-grow: 1; + flex-grow: 1; - color: var(--mod-assetcard-title-text-color, var(--spectrum-assetcard-title-text-color)); + color: var(--mod-assetcard-title-text-color, var(--spectrum-assetcard-title-text-color)); - font-family: var(--mod-assetcard-title-font-family, var(--spectrum-assetcard-title-font-family)); - font-weight: var(--mod-assetcard-title-font-weight, var(--spectrum-assetcard-title-font-weight)); - font-size: var(--mod-assetcard-title-font-size, var(--spectrum-assetcard-title-font-size)); - line-height: var(--mod-assetcard-title-line-height, var(--spectrum-assetcard-title-line-height)); - font-style: var(--mod-assetcard-title-font-style, var(--spectrum-assetcard-title-font-style)); - letter-spacing: var(--mod-assetcard-title-letter-spacing, var(--spectrum-assetcard-title-letter-spacing)); + font-family: var(--mod-assetcard-title-font-family, var(--spectrum-assetcard-title-font-family)); + font-weight: var(--mod-assetcard-title-font-weight, var(--spectrum-assetcard-title-font-weight)); + font-size: var(--mod-assetcard-title-font-size, var(--spectrum-assetcard-title-font-size)); + line-height: var(--mod-assetcard-title-line-height, var(--spectrum-assetcard-title-line-height)); + font-style: var(--mod-assetcard-title-font-style, var(--spectrum-assetcard-title-font-style)); + letter-spacing: var(--mod-assetcard-title-letter-spacing, var(--spectrum-assetcard-title-letter-spacing)); } - /* optional content placed to the right of the title */ .spectrum-AssetCard-headerContent { - color: var(--mod-assetcard-header-content-text-color, var(--spectrum-assetcard-header-content-text-color)); - - font-family: var(--mod-assetcard-header-content-font-family, var(--spectrum-assetcard-header-content-font-family)); - font-size: var(--mod-assetcard-header-content-font-size, var(--spectrum-assetcard-header-content-font-size)); - font-weight: var(--mod-assetcard-header-content-font-weight, var(--spectrum-assetcard-header-content-font-weight)); - line-height: var(--mod-assetcard-header-content-line-height, var(--spectrum-assetcard-header-content-line-height)); - font-style: var(--mod-assetcard-header-content-font-stlye, var(--spectrum-assetcard-header-content-font-style)); - letter-spacing: var(--mod-assetcard-header-content-letter-spacing, var(--spectrum-assetcard-header-content-letter-spacing)); + color: var(--mod-assetcard-header-content-text-color, var(--spectrum-assetcard-header-content-text-color)); + + font-family: var(--mod-assetcard-header-content-font-family, var(--spectrum-assetcard-header-content-font-family)); + font-size: var(--mod-assetcard-header-content-font-size, var(--spectrum-assetcard-header-content-font-size)); + font-weight: var(--mod-assetcard-header-content-font-weight, var(--spectrum-assetcard-header-content-font-weight)); + line-height: var(--mod-assetcard-header-content-line-height, var(--spectrum-assetcard-header-content-line-height)); + font-style: var(--mod-assetcard-header-content-font-stlye, var(--spectrum-assetcard-header-content-font-style)); + letter-spacing: var(--mod-assetcard-header-content-letter-spacing, var(--spectrum-assetcard-header-content-letter-spacing)); } - - /* content area, the last thing in the card */ .spectrum-AssetCard-content { - flex-grow: 1; + flex-grow: 1; - /* space between the content and the header, place it on the content so content can be optional */ - margin-block-start: var(--mod-assetcard-content-margin-block-start, var(--spectrum-assetcard-content-margin-block-start)); + /* space between the content and the header, place it on the content so content can be optional */ + margin-block-start: var(--mod-assetcard-content-margin-block-start, var(--spectrum-assetcard-content-margin-block-start)); - color: var(--mod-assetcard-content-text-color, var(--spectrum-assetcard-content-text-color)); + color: var(--mod-assetcard-content-text-color, var(--spectrum-assetcard-content-text-color)); - font-family: var(--mod-assetcard-content-font-family, var(--spectrum-assetcard-content-font-family)); - font-size: var(--mod-assetcard-content-font-size, var(--spectrum-assetcard-content-font-size)); - font-weight: var(--mod-assetcard-content-font-weight, var(--spectrum-assetcard-content-font-weight)); - line-height: var(--mod-assetcard-content-line-height, var(--spectrum-assetcard-content-line-height)); - font-style: var(--mod-assetcard-content-font-style, var(--spectrum-assetcard-content-font-style)); - letter-spacing: var(--mod-assetcard-content-letter-spacing, var(--spectrum-assetcard-content-letter-spacing)); + font-family: var(--mod-assetcard-content-font-family, var(--spectrum-assetcard-content-font-family)); + font-size: var(--mod-assetcard-content-font-size, var(--spectrum-assetcard-content-font-size)); + font-weight: var(--mod-assetcard-content-font-weight, var(--spectrum-assetcard-content-font-weight)); + line-height: var(--mod-assetcard-content-line-height, var(--spectrum-assetcard-content-line-height)); + font-style: var(--mod-assetcard-content-font-style, var(--spectrum-assetcard-content-font-style)); + letter-spacing: var(--mod-assetcard-content-letter-spacing, var(--spectrum-assetcard-content-letter-spacing)); } /* Selection styles */ .spectrum-AssetCard-selectionOverlay { - position: absolute; - z-index: 1; - inset: 0; + position: absolute; + z-index: 1; + inset: 0; - background-color: transparent; + background-color: transparent; - pointer-events: none; - transition: background-color var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; + pointer-events: none; + transition: background-color var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; - border-radius: calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px); + border-radius: calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px); } /* the checkbox or selection order indicator */ .spectrum-AssetCard-selectionIndicator { - position: absolute; - z-index: 2; - inset-inline-start: var(--mod-assetcard-selectionindicator-margin, var(--spectrum-assetcard-selectionindicator-margin)); - inset-block-start: var(--mod-assetcard-selectionindicator-margin, var(--spectrum-assetcard-selectionindicator-margin)); + position: absolute; + z-index: 2; + inset-inline-start: var(--mod-assetcard-selectionindicator-margin, var(--spectrum-assetcard-selectionindicator-margin)); + inset-block-start: var(--mod-assetcard-selectionindicator-margin, var(--spectrum-assetcard-selectionindicator-margin)); - display: none; - align-items: center; - justify-content: center; + display: none; + align-items: center; + justify-content: center; - inline-size: var(--mod-assetcard-selectionindicator-size, var(--spectrum-assetcard-selectionindicator-size)); - block-size: var(--mod-assetcard-selectionindicator-size, var(--spectrum-assetcard-selectionindicator-size)); + inline-size: var(--mod-assetcard-selectionindicator-size, var(--spectrum-assetcard-selectionindicator-size)); + block-size: var(--mod-assetcard-selectionindicator-size, var(--spectrum-assetcard-selectionindicator-size)); - border-radius: var(--mod-assetcard-selectionindicator-border-radius, var(--spectrum-assetcard-selectionindicator-border-radius)); + border-radius: var(--mod-assetcard-selectionindicator-border-radius, var(--spectrum-assetcard-selectionindicator-border-radius)); - box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0, 0, 0, 15%); + box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0, 0, 0, 15%); - color: var(--highcontrast-assetcard-selectionindicator-color, var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color))); - font-weight: var(--mod-assetcard-selectionindicator-font-weight, var(--spectrum-assetcard-selectionindicator-font-weight)); - font-size: var(--mod-assetcard-selectionindicator-font-size, var(--spectrum-assetcard-selectionindicator-font-size)); + color: var(--highcontrast-assetcard-selectionindicator-color, var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color))); + font-weight: var(--mod-assetcard-selectionindicator-font-weight, var(--spectrum-assetcard-selectionindicator-font-weight)); + font-size: var(--mod-assetcard-selectionindicator-font-size, var(--spectrum-assetcard-selectionindicator-font-size)); - transition: opacity var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; - background-color: transparent; + transition: opacity var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; + background-color: transparent; } .spectrum-AssetCard-selectionOrder { - line-height: 0; + line-height: 0; } /* base selection styles shared by every selection mode */ - /* drop target looks identical to selected */ +/* drop target looks identical to selected */ .spectrum-AssetCard.is-drop-target, .spectrum-AssetCard.is-selected { - .spectrum-AssetCard-assetContainer::after { - border-color: var(--highcontrast-assetcard-border-color-selected, var(--mod-assetcard-border-color-selected, var(--spectrum-assetcard-border-color-selected))); - } - - .spectrum-AssetCard-selectionOverlay { - background-color: var(--mod-assetcard-overlay-background-color, var(--spectrum-assetcard-overlay-background-color)); - } - - &:hover { - .spectrum-AssetCard-assetContainer::after { - border-color: var(--highcontrast-assetcard-border-color-selected-hover, var(--mod-assetcard-border-color-selected-hover, var(--spectrum-assetcard-border-color-selected-hover))); - } - } - - &:active { - .spectrum-AssetCard-assetContainer::after { - border-color: var(--highcontrast-assectcard-border-color-selected-down, var(--mod-assectcard-border-color-selected-down, var(--spectrum-assetcard-border-color-selected-down))); - } - } + .spectrum-AssetCard-assetContainer::after { + border-color: var(--highcontrast-assetcard-border-color-selected, var(--mod-assetcard-border-color-selected, var(--spectrum-assetcard-border-color-selected))); + } + + .spectrum-AssetCard-selectionOverlay { + background-color: var(--mod-assetcard-overlay-background-color, var(--spectrum-assetcard-overlay-background-color)); + } + + &:hover { + .spectrum-AssetCard-assetContainer::after { + border-color: var(--highcontrast-assetcard-border-color-selected-hover, var(--mod-assetcard-border-color-selected-hover, var(--spectrum-assetcard-border-color-selected-hover))); + } + } + + &:active { + .spectrum-AssetCard-assetContainer::after { + border-color: var(--highcontrast-assectcard-border-color-selected-down, var(--mod-assectcard-border-color-selected-down, var(--spectrum-assetcard-border-color-selected-down))); + } + } } /* highlight */ .spectrum-AssetCard--highlightSelection { - &.is-selected { - .spectrum-AssetCard-asset { - inline-size: 90%; - block-size: 90%; - - /* no radius, otherwise square assets get rounded */ - border-radius: 0; - } - } + &.is-selected { + .spectrum-AssetCard-asset { + inline-size: 90%; + block-size: 90%; + + /* no radius, otherwise square assets get rounded */ + border-radius: 0; + } + } } /* with a checkbox */ .spectrum-AssetCard--checkboxSelection { - .spectrum-AssetCard-selectionIndicator { - background-color: var(--mod-assetcard-selectionindicator-background-color-default, var(--spectrum-assetcard-selectionindicator-background-color-default)); - - .spectrum-AssetCard-selectionOrder { - display: none; - } - } - - &.is-selected, - &:focus-visible, - &:hover { - .spectrum-AssetCard-selectionIndicator { - display: flex; - pointer-events: all; - } - } + .spectrum-AssetCard-selectionIndicator { + background-color: var(--mod-assetcard-selectionindicator-background-color-default, var(--spectrum-assetcard-selectionindicator-background-color-default)); + + .spectrum-AssetCard-selectionOrder { + display: none; + } + } + + &.is-selected, + &:focus-visible, + &:hover { + .spectrum-AssetCard-selectionIndicator { + display: flex; + pointer-events: all; + } + } } /* with the little order flag that shows the selection order */ .spectrum-AssetCard--orderedSelection { - .spectrum-AssetCard-selectionIndicator { - background-color: var(--highcontrast-assetcard-selectionindicator-background-color-ordered, var(--mod-assetcard-selectionindicator-background-color-ordered, var(--spectrum-assetcard-selectionindicator-background-color-ordered))); - - .spectrum-AssetCard-checkbox { - display: none; - } - } - - &.is-selected { - .spectrum-AssetCard-selectionIndicator { - display: flex; - pointer-events: all; - } - } + .spectrum-AssetCard-selectionIndicator { + background-color: var(--highcontrast-assetcard-selectionindicator-background-color-ordered, var(--mod-assetcard-selectionindicator-background-color-ordered, var(--spectrum-assetcard-selectionindicator-background-color-ordered))); + + .spectrum-AssetCard-checkbox { + display: none; + } + } + + &.is-selected { + .spectrum-AssetCard-selectionIndicator { + display: flex; + pointer-events: all; + } + } } @media (forced-colors: active) { - .spectrum-AssetCard { - --highcontrast-assetcard-border-color-hover: Highlight; - --highcontrast-assetcard-border-color-selected: Highlight; - --highcontrast-assetcard-border-color-selected-hover: Highlight; - --highcontrast-assectcard-border-color-selected-down: Highlight; - --highcontrast-assetcard-selectionindicator-background-color-ordered: Highlight; - --highcontrast-assetcard-selectionindicator-color: SelectedItemText; - - .spectrum-AssetCard-selectionOrder { - /* prevents text backplate on displayed order number */ - forced-color-adjust: none; - } - } + .spectrum-AssetCard { + --highcontrast-assetcard-border-color-hover: Highlight; + --highcontrast-assetcard-border-color-selected: Highlight; + --highcontrast-assetcard-border-color-selected-hover: Highlight; + --highcontrast-assectcard-border-color-selected-down: Highlight; + --highcontrast-assetcard-selectionindicator-background-color-ordered: Highlight; + --highcontrast-assetcard-selectionindicator-color: SelectedItemText; + + .spectrum-AssetCard-selectionOrder { + /* prevents text backplate on displayed order number */ + forced-color-adjust: none; + } + } } diff --git a/components/assetcard/themes/express.css b/components/assetcard/themes/express.css index f12a249837..d408471cc8 100644 --- a/components/assetcard/themes/express.css +++ b/components/assetcard/themes/express.css @@ -13,7 +13,7 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(109, 115, 246, 20%) - } + .spectrum-AssetCard { + --spectrum-assetcard-overlay-background-color: rgba(109, 115, 246, 20%); + } } diff --git a/components/assetcard/themes/spectrum.css b/components/assetcard/themes/spectrum.css index 04fc20bce9..ce6f6a73b8 100644 --- a/components/assetcard/themes/spectrum.css +++ b/components/assetcard/themes/spectrum.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 10%); - } + .spectrum-AssetCard { + --spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 10%); + } } diff --git a/components/assetlist/index.css b/components/assetlist/index.css index ccb9ba09be..b6e2caaba7 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -11,29 +11,29 @@ governing permissions and limitations under the License. */ .spectrum-AssetList { - --spectrum-assetlist-width: 272px; - --spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100); - - /* item */ - --spectrum-assetlist-item-height: var(--spectrum-spacing-600); - --spectrum-assetlist-item-padding-inline-start: var(--spectrum-spacing-300); - --spectrum-assetlist-item-padding-inline-end: var(--spectrum-spacing-300); - --spectrum-assetlist-item-margin-block-end: var(--spectrum-spacing-75); - --spectrum-assetlist-item-border-radius: var(--spectrum-spacing-75); - --spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100); - --spectrum-assetlist-item-font-size: var(--spectrum-font-size-100); - --spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight); - --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300); - --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200); - - /* thumbnail */ - --spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400); - --spectrum-assetlist-thumbnail-height: var(--spectrum-spacing-400); - --spectrum-assetlist-thumbnail-margin-inline-start: var(--spectrum-spacing-100); - - /* label */ - --spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100); - --spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default); + --spectrum-assetlist-width: 272px; + --spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100); + + /* item */ + --spectrum-assetlist-item-height: var(--spectrum-spacing-600); + --spectrum-assetlist-item-padding-inline-start: var(--spectrum-spacing-300); + --spectrum-assetlist-item-padding-inline-end: var(--spectrum-spacing-300); + --spectrum-assetlist-item-margin-block-end: var(--spectrum-spacing-75); + --spectrum-assetlist-item-border-radius: var(--spectrum-spacing-75); + --spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100); + --spectrum-assetlist-item-font-size: var(--spectrum-font-size-100); + --spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight); + --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300); + --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200); + + /* thumbnail */ + --spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400); + --spectrum-assetlist-thumbnail-height: var(--spectrum-spacing-400); + --spectrum-assetlist-thumbnail-margin-inline-start: var(--spectrum-spacing-100); + + /* label */ + --spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100); + --spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default); &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); @@ -41,150 +41,148 @@ governing permissions and limitations under the License. } .spectrum-AssetList { - margin-block-start: 0; - margin-block-end: 0; - padding: 0; + margin-block-start: 0; + margin-block-end: 0; + padding: 0; } .spectrum-AssetList-item { - position: relative; - color: var(--highcontrast-assetlist-label-color, var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color))); - - display: flex; - box-sizing: border-box; - align-items: center; - - inline-size: var(--mod-assetlist-width, var(--spectrum-assetlist-width)); - block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height)); - - padding-block: 0; - padding-inline: var(--mod-assetlist-item-padding-inline-start, var(--spectrum-assetlist-item-padding-inline-start)) - var(--mod-assetlist-item-padding-inline-end, var(--spectrum-assetlist-item-padding-inline-end)); - margin-block: 0 var(--mod-assetlist-item-margin-bottom, var(--spectrum-assetlist-item-margin-block-end)); - margin-inline: 0; - - border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius)); - - transition: background-color var(--mod-assetlist-item-animation, var(--spectrum-assetlist-item-animation)) ease-in-out; - - font-size: var(--mod-assetlist-item-font-size, var(--spectrum-assetlist-item-font-size)); - font-weight: var(--mod-assetlist-item-font-weight, var(--spectrum-assetlist-item-font-weight)); - font-style: normal; - - cursor: pointer; - - outline: none; - - &::before { - content: ""; - - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - - block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height)); - - background-color: transparent; - - border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius)); - } - - &.is-selectable, - &.is-selected, - &:hover, - &:focus { - /* checkbox on the left, shows up always */ - .spectrum-Checkbox { - display: inline-flex; - } - } - - &.is-branch { - /* show chevron */ - .spectrum-AssetList-itemChildIndicator { - display: block; - } - } - - .spectrum-AssetList-itemThumbnail { - /* Remove the border on images inside links in IE 10-. */ - border-style: none; - - inline-size: var(--mod-assetlist-thumbnail-width, var(--spectrum-assetlist-thumbnail-width)); - block-size: var(--mod-assetlist-thumnail-height, var(--spectrum-assetlist-thumbnail-height)); - margin-inline-start: var(--mod-assetlist-thumbnail-margin-left, var(--spectrum-assetlist-thumbnail-margin-inline-start)); - vertical-align: middle; - } - - &:hover { - background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))); - } - - &:focus-within { - &:focus-visible, - &.is-focused { - background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))); - - &::before { - /* we cannot achieve rounded corners with outline so we use box-shadow instead */ - box-shadow: 0 0 0 2px var(--highcontrast-assetlist-border-color-key-focus, var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus))) inset; - } - } - } - - &.is-navigated { - /* gray background */ - background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down)); - - &:hover, - &:focus { - background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down)) - } - } - - &.is-selected { - background-color: var(--highcontrast-assetlist-item-background-color-selected, var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected))); - - &:hover, - &:focus { - background-color: var(--highcontrast-assetlist-item-background-color-selected-hover, var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover))); - } - } + position: relative; + color: var(--highcontrast-assetlist-label-color, var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color))); + + display: flex; + box-sizing: border-box; + align-items: center; + + inline-size: var(--mod-assetlist-width, var(--spectrum-assetlist-width)); + block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height)); + + padding-block: 0; + padding-inline: var(--mod-assetlist-item-padding-inline-start, var(--spectrum-assetlist-item-padding-inline-start)) var(--mod-assetlist-item-padding-inline-end, var(--spectrum-assetlist-item-padding-inline-end)); + margin-block: 0 var(--mod-assetlist-item-margin-bottom, var(--spectrum-assetlist-item-margin-block-end)); + margin-inline: 0; + + border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius)); + + transition: background-color var(--mod-assetlist-item-animation, var(--spectrum-assetlist-item-animation)) ease-in-out; + + font-size: var(--mod-assetlist-item-font-size, var(--spectrum-assetlist-item-font-size)); + font-weight: var(--mod-assetlist-item-font-weight, var(--spectrum-assetlist-item-font-weight)); + font-style: normal; + + cursor: pointer; + + outline: none; + + &::before { + content: ""; + + position: absolute; + inset-inline-start: 0; + inset-inline-end: 0; + + block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height)); + + background-color: transparent; + + border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius)); + } + + &.is-selectable, + &.is-selected, + &:hover, + &:focus { + /* checkbox on the left, shows up always */ + .spectrum-Checkbox { + display: inline-flex; + } + } + + &.is-branch { + /* show chevron */ + .spectrum-AssetList-itemChildIndicator { + display: block; + } + } + + .spectrum-AssetList-itemThumbnail { + /* Remove the border on images inside links in IE 10-. */ + border-style: none; + + inline-size: var(--mod-assetlist-thumbnail-width, var(--spectrum-assetlist-thumbnail-width)); + block-size: var(--mod-assetlist-thumnail-height, var(--spectrum-assetlist-thumbnail-height)); + margin-inline-start: var(--mod-assetlist-thumbnail-margin-left, var(--spectrum-assetlist-thumbnail-margin-inline-start)); + vertical-align: middle; + } + + &:hover { + background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))); + } + + &:focus-within { + &:focus-visible, + &.is-focused { + background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))); + + &::before { + /* we cannot achieve rounded corners with outline so we use box-shadow instead */ + box-shadow: 0 0 0 2px var(--highcontrast-assetlist-border-color-key-focus, var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus))) inset; + } + } + } + + &.is-navigated { + /* gray background */ + background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down)); + + &:hover, + &:focus { + background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down)); + } + } + + &.is-selected { + background-color: var(--highcontrast-assetlist-item-background-color-selected, var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected))); + + &:hover, + &:focus { + background-color: var(--highcontrast-assetlist-item-background-color-selected-hover, var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover))); + } + } } .spectrum-AssetList-itemSelector { - display: none; + display: none; } .spectrum-AssetList-itemChildIndicator { - display: none; - transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation)); - transform: var(--spectrum-logical-rotation); + display: none; + transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation)); + transform: var(--spectrum-logical-rotation); } .spectrum-AssetList-itemLabel { - flex: 1; - padding-inline-start: var(--mod-assetlist-item-label-padding-inline-start, var(--spectrum-assetlist-item-label-padding-inline-start)); + flex: 1; + padding-inline-start: var(--mod-assetlist-item-label-padding-inline-start, var(--spectrum-assetlist-item-label-padding-inline-start)); - - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } @media (forced-colors: active) { - .spectrum-AssetList-item { - forced-color-adjust: none; - --highcontrast-assetlist-border-color-key-focus: Highlight; - --highcontrast-assetlist-item-background-color-hover: Highlight; - --highcontrast-assetlist-item-background-color-selected-hover: Highlight; - --highcontrast-assetlist-label-color: ButtonText; - --highcontrast-assetlist-item-background-color-selected: SelectedItem; - - &:hover, - &.is-selected, - &.is-navigated { - --highcontrast-assetlist-label-color: SelectedItemText; - } - } + .spectrum-AssetList-item { + forced-color-adjust: none; + --highcontrast-assetlist-border-color-key-focus: Highlight; + --highcontrast-assetlist-item-background-color-hover: Highlight; + --highcontrast-assetlist-item-background-color-selected-hover: Highlight; + --highcontrast-assetlist-label-color: ButtonText; + --highcontrast-assetlist-item-background-color-selected: SelectedItem; + + &:hover, + &.is-selected, + &.is-navigated { + --highcontrast-assetlist-label-color: SelectedItemText; + } + } } diff --git a/components/avatar/index.css b/components/avatar/index.css index a001454825..64121adfaf 100644 --- a/components/avatar/index.css +++ b/components/avatar/index.css @@ -11,121 +11,121 @@ governing permissions and limitations under the License. */ .spectrum-Avatar { - --spectrum-avatar-color-opacity: 1; + --spectrum-avatar-color-opacity: 1; - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); - --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); + --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); - --spectrum-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled); + --spectrum-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled); } .spectrum-Avatar--size50 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-50); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-50) + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-50); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-50); } .spectrum-Avatar--size75 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-75); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-75) + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-75); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-75); } .spectrum-Avatar--size100 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-100) + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); } .spectrum-Avatar--size200 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-200); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-200) + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-200); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-200); } .spectrum-Avatar--size300 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-300); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-300) + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-300); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-300); } .spectrum-Avatar--size400 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-400); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-400) + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-400); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-400); } .spectrum-Avatar--size500 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-500); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-500) + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-500); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-500); } .spectrum-Avatar--size600 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-600); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-600) + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-600); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-600); } .spectrum-Avatar--size700 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-700); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-700) + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-700); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-700); } @media (forced-colors: active) { - .spectrum-Avatar { - --highcontrast-avatar-focus-indicator-color: CanvasText; - } + .spectrum-Avatar { + --highcontrast-avatar-focus-indicator-color: CanvasText; + } } .spectrum-Avatar { - display: inline-block; - position: relative; - inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)); - block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); + display: inline-block; + position: relative; + inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)); + block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); - border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); - border-width: 0; + border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); + border-width: 0; - outline: none; + outline: none; - -webkit-user-drag: none; - user-select: none; + -webkit-user-drag: none; + user-select: none; - overflow: visible; + overflow: visible; - opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity)); + opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity)); - &.is-disabled { - opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled))); - } + &.is-disabled { + opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled))); + } } .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible { - &::after { - pointer-events: none; - content: ""; - position: absolute; - inset-block-start: calc((var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness))) * -1); - inset-inline-start: calc((var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness))) * -1); - - inline-size: calc(var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + (var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) * 2)); - block-size: calc(var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + (var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) * 2)); - - border-style: solid; - border-width: var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness)); - border-color: var(--highcontrast-avatar-focus-indicator-color, var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color))); - border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); - } + &::after { + pointer-events: none; + content: ""; + position: absolute; + inset-block-start: calc((var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness))) * -1); + inset-inline-start: calc((var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness))) * -1); + + inline-size: calc(var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + (var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) * 2)); + block-size: calc(var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + (var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) * 2)); + + border-style: solid; + border-width: var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness)); + border-color: var(--highcontrast-avatar-focus-indicator-color, var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color))); + border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); + } } .spectrum-Avatar-link { - outline: none; - outline-color: transparent; - outline-style: solid; + outline: none; + outline-color: transparent; + outline-style: solid; } .spectrum-Avatar-image { - inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)); - block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); + inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)); + block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); - border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); + border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); } diff --git a/components/badge/index.css b/components/badge/index.css index 9ed33e8a08..ac4def7b64 100644 --- a/components/badge/index.css +++ b/components/badge/index.css @@ -11,64 +11,62 @@ governing permissions and limitations under the License. */ .spectrum-Badge { - /* badge styling for all t-shirt sizes and all themes */ - --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100); - - /* label text styles for all t-shirt sizes and all themes */ - --spectrum-badge-line-height: var(--spectrum-line-height-100); - --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); - - - /* text and icon color default white for all t-shirt sizes and all themes */ - --spectrum-badge-label-icon-color: var(--spectrum-white); - - /* background color default for all t-shirt sizes and all themes */ - --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - - /* semantic background colors for all t-shirt sizes and all themes */ - --spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default); - --spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default); - --spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default); - --spectrum-badge-background-color-positive: var(--spectrum-positive-background-color-default); - --spectrum-badge-background-color-notice: var(--spectrum-notice-background-color-default); - - /* non-semantic background colors */ - --spectrum-badge-background-color-gray: var(--spectrum-gray-background-color-default); - --spectrum-badge-background-color-red: var(--spectrum-red-background-color-default); - --spectrum-badge-background-color-orange: var(--spectrum-orange-background-color-default); - --spectrum-badge-background-color-yellow: var(--spectrum-yellow-background-color-default); - --spectrum-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default); - --spectrum-badge-background-color-celery: var(--spectrum-celery-background-color-default); - --spectrum-badge-background-color-green: var(--spectrum-green-background-color-default); - --spectrum-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default); - --spectrum-badge-background-color-cyan: var(--spectrum-cyan-background-color-default); - --spectrum-badge-background-color-blue: var(--spectrum-blue-background-color-default); - --spectrum-badge-background-color-indigo: var(--spectrum-indigo-background-color-default); - --spectrum-badge-background-color-purple: var(--spectrum-purple-background-color-default); - --spectrum-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default); - --spectrum-badge-background-color-magenta: var(--spectrum-magenta-background-color-default); - - - /*** DEFAULT STYLE fallbacks if no t-shirt size - uses Medium t-shirt styles ***/ - /* badge height - fallback if no t-shirt size */ - --spectrum-badge-height: var(--spectrum-component-height-100); - - /* label font size - fallback if no t-shirt size */ - --spectrum-badge-font-size: var(--spectrum-font-size-100); - - /* label spacing - fallback if no t-shirt size */ - --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100); - --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100); - --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100); - - /* icon size - fallback if no t-shirt size */ - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); - - /* icon spacing - fallback if no t-shirt size */ - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); - --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100); - --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100); + /* badge styling for all t-shirt sizes and all themes */ + --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100); + + /* label text styles for all t-shirt sizes and all themes */ + --spectrum-badge-line-height: var(--spectrum-line-height-100); + --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); + + /* text and icon color default white for all t-shirt sizes and all themes */ + --spectrum-badge-label-icon-color: var(--spectrum-white); + + /* background color default for all t-shirt sizes and all themes */ + --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + + /* semantic background colors for all t-shirt sizes and all themes */ + --spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default); + --spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default); + --spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default); + --spectrum-badge-background-color-positive: var(--spectrum-positive-background-color-default); + --spectrum-badge-background-color-notice: var(--spectrum-notice-background-color-default); + + /* non-semantic background colors */ + --spectrum-badge-background-color-gray: var(--spectrum-gray-background-color-default); + --spectrum-badge-background-color-red: var(--spectrum-red-background-color-default); + --spectrum-badge-background-color-orange: var(--spectrum-orange-background-color-default); + --spectrum-badge-background-color-yellow: var(--spectrum-yellow-background-color-default); + --spectrum-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default); + --spectrum-badge-background-color-celery: var(--spectrum-celery-background-color-default); + --spectrum-badge-background-color-green: var(--spectrum-green-background-color-default); + --spectrum-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default); + --spectrum-badge-background-color-cyan: var(--spectrum-cyan-background-color-default); + --spectrum-badge-background-color-blue: var(--spectrum-blue-background-color-default); + --spectrum-badge-background-color-indigo: var(--spectrum-indigo-background-color-default); + --spectrum-badge-background-color-purple: var(--spectrum-purple-background-color-default); + --spectrum-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default); + --spectrum-badge-background-color-magenta: var(--spectrum-magenta-background-color-default); + + /*** DEFAULT STYLE fallbacks if no t-shirt size - uses Medium t-shirt styles ***/ + /* badge height - fallback if no t-shirt size */ + --spectrum-badge-height: var(--spectrum-component-height-100); + + /* label font size - fallback if no t-shirt size */ + --spectrum-badge-font-size: var(--spectrum-font-size-100); + + /* label spacing - fallback if no t-shirt size */ + --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100); + --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100); + --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100); + + /* icon size - fallback if no t-shirt size */ + --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); + + /* icon spacing - fallback if no t-shirt size */ + --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); + --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100); + --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100); } /* text and icon color is black for these background colors */ @@ -76,7 +74,7 @@ governing permissions and limitations under the License. .spectrum-Badge--yellow, .spectrum-Badge--chartreuse, .spectrum-Badge--celery { - --spectrum-badge-label-icon-color: var(--spectrum-black); + --spectrum-badge-label-icon-color: var(--spectrum-black); } /* dark theme all non-semantic colors are black */ @@ -90,263 +88,235 @@ governing permissions and limitations under the License. .spectrum-Badge--purple, .spectrum-Badge--fuchsia, .spectrum-Badge--magenta { - --spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary); + --spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary); } .spectrum-Badge--sizeS { - --spectrum-badge-height: var(--spectrum-component-height-75); + --spectrum-badge-height: var(--spectrum-component-height-75); - /* label */ - --spectrum-badge-font-size: var(--spectrum-font-size-75); - --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-75); - --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-75); - --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-75); + /* label */ + --spectrum-badge-font-size: var(--spectrum-font-size-75); + --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-75); + --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-75); + --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-75); - /* icon */ - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-75); - --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-75); - --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75); + /* icon */ + --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-75); + --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-75); + --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75); } .spectrum-Badge--sizeL { - --spectrum-badge-height: var(--spectrum-component-height-100); + --spectrum-badge-height: var(--spectrum-component-height-100); - /* label */ - --spectrum-badge-font-size: var(--spectrum-font-size-200); - --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-200); - --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-200); - --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-200); + /* label */ + --spectrum-badge-font-size: var(--spectrum-font-size-200); + --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-200); + --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-200); + --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-200); - /* icon */ - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-200); - --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-200); - --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-200); + /* icon */ + --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-200); + --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-200); + --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-200); } .spectrum-Badge--sizeXL { - --spectrum-badge-height: var(--spectrum-component-height-100); + --spectrum-badge-height: var(--spectrum-component-height-100); - /* label */ - --spectrum-badge-font-size: var(--spectrum-font-size-300); - --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-300); - --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-300); - --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-300); + /* label */ + --spectrum-badge-font-size: var(--spectrum-font-size-300); + --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-300); + --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-300); + --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-300); - /* icon */ - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-300); - --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-300); - --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-300); - --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300); + /* icon */ + --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-300); + --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-300); + --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300); } /* windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Badge { - border-color: CanvasText; /* stylelint-disable-line declaration-property-value-no-unknown */ - } + .spectrum-Badge { + border-color: CanvasText; /* stylelint-disable-line declaration-property-value-no-unknown */ + } } .spectrum-Badge { - min-block-size: var(--mod-badge-height, - var(--spectrum-badge-height)); - inline-size: auto; + min-block-size: var(--mod-badge-height, var(--spectrum-badge-height)); + inline-size: auto; - display: inline-flex; - vertical-align: middle; - position: relative; + display: inline-flex; + vertical-align: middle; + position: relative; - cursor: default; + cursor: default; - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; - border-radius: var(--mod-badge-corner-radius, - var(--spectrum-badge-corner-radius)); - border: 1px solid transparent; + border-radius: var(--mod-badge-corner-radius, var(--spectrum-badge-corner-radius)); + border: 1px solid transparent; - background: var(--mod-badge-background-color-default, - var(--spectrum-badge-background-color-default)); - color: var(--mod-badge-label-icon-color, - var(--spectrum-badge-label-icon-color)); + background: var(--mod-badge-background-color-default, var(--spectrum-badge-background-color-default)); + color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color)); } /* background color variants */ .spectrum-Badge--neutral { - background: var(--mod-badge-background-color-default, - var(--spectrum-badge-background-color-default)); + background: var(--mod-badge-background-color-default, var(--spectrum-badge-background-color-default)); } .spectrum-Badge--accent { - background: var(--mod-badge-background-color-accent, - var(--spectrum-badge-background-color-accent)); + background: var(--mod-badge-background-color-accent, var(--spectrum-badge-background-color-accent)); } .spectrum-Badge--informative { - background: var(--mod-badge-background-color-informative, - var(--spectrum-badge-background-color-informative)); + background: var(--mod-badge-background-color-informative, var(--spectrum-badge-background-color-informative)); } .spectrum-Badge--negative { - background: var(--mod-badge-background-color-negative, - var(--spectrum-badge-background-color-negative)); + background: var(--mod-badge-background-color-negative, var(--spectrum-badge-background-color-negative)); } .spectrum-Badge--positive { - background: var(--mod-badge-background-color-positive, - var(--spectrum-badge-background-color-positive)); + background: var(--mod-badge-background-color-positive, var(--spectrum-badge-background-color-positive)); } .spectrum-Badge--notice { - background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice)); + background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice)); } /* non-semantic colors */ .spectrum-Badge--gray { - background: var(--mod-badge-background-color-gray, var(--spectrum-badge-background-color-gray)); + background: var(--mod-badge-background-color-gray, var(--spectrum-badge-background-color-gray)); } .spectrum-Badge--red { - background: var(--mod-badge-background-color-red, var(--spectrum-badge-background-color-red)); + background: var(--mod-badge-background-color-red, var(--spectrum-badge-background-color-red)); } .spectrum-Badge--orange { - background: var(--mod-badge-background-color-orange, var(--spectrum-badge-background-color-orange)); + background: var(--mod-badge-background-color-orange, var(--spectrum-badge-background-color-orange)); } .spectrum-Badge--yellow { - background: var(--mod-badge-background-color-yellow, var(--spectrum-badge-background-color-yellow)); + background: var(--mod-badge-background-color-yellow, var(--spectrum-badge-background-color-yellow)); } .spectrum-Badge--chartreuse { - background: var(--mod-badge-background-color-chartreuse, var(--spectrum-badge-background-color-chartreuse)); + background: var(--mod-badge-background-color-chartreuse, var(--spectrum-badge-background-color-chartreuse)); } .spectrum-Badge--celery { - background: var(--mod-badge-background-color-celery, var(--spectrum-badge-background-color-celery)); + background: var(--mod-badge-background-color-celery, var(--spectrum-badge-background-color-celery)); } .spectrum-Badge--green { - background: var(--mod-badge-background-color-green, var(--spectrum-badge-background-color-green)); + background: var(--mod-badge-background-color-green, var(--spectrum-badge-background-color-green)); } .spectrum-Badge--seafoam { - background: var(--mod-badge-background-color-seafoam, var(--spectrum-badge-background-color-seafoam)); + background: var(--mod-badge-background-color-seafoam, var(--spectrum-badge-background-color-seafoam)); } .spectrum-Badge--cyan { - background: var(--mod-badge-background-color-cyan, var(--spectrum-badge-background-color-cyan)); + background: var(--mod-badge-background-color-cyan, var(--spectrum-badge-background-color-cyan)); } .spectrum-Badge--blue { - background: var(--mod-badge-background-color-blue, var(--spectrum-badge-background-color-blue)); + background: var(--mod-badge-background-color-blue, var(--spectrum-badge-background-color-blue)); } .spectrum-Badge--indigo { - background: var(--mod-badge-background-color-indigo, var(--spectrum-badge-background-color-indigo)); + background: var(--mod-badge-background-color-indigo, var(--spectrum-badge-background-color-indigo)); } .spectrum-Badge--purple { - background: var(--mod-badge-background-color-purple, var(--spectrum-badge-background-color-purple)); + background: var(--mod-badge-background-color-purple, var(--spectrum-badge-background-color-purple)); } .spectrum-Badge--fuchsia { - background: var(--mod-badge-background-color-fuchsia, var(--spectrum-badge-background-color-fuchsia)); + background: var(--mod-badge-background-color-fuchsia, var(--spectrum-badge-background-color-fuchsia)); } .spectrum-Badge--magenta { - background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta)); + background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta)); } /* fixed position variants with border radius 0 on the fixed edge of the component */ .spectrum-Badge--fixed-inline-start { - border-start-start-radius: 0; - border-end-start-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .spectrum-Badge--fixed-inline-end { - border-start-end-radius: 0; - border-end-end-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } .spectrum-Badge--fixed-block-start { - border-start-start-radius: 0; - border-start-end-radius: 0; + border-start-start-radius: 0; + border-start-end-radius: 0; } .spectrum-Badge--fixed-block-end { - border-end-start-radius: 0; - border-end-end-radius: 0; + border-end-start-radius: 0; + border-end-end-radius: 0; } - /* label */ .spectrum-Badge-label { - font-size: var(--mod-badge-font-size, - var(--spectrum-badge-font-size)); - line-height: var(--mod-badge-line-height, - var(--spectrum-badge-line-height)); - - padding-inline-end: var(--mod-badge-label-spacing-horizontal, - var(--spectrum-badge-label-spacing-horizontal)); - padding-inline-start: var(--mod-badge-label-spacing-horizontal, - var(--spectrum-badge-label-spacing-horizontal)); - padding-block-start: var(--mod-badge-label-spacing-vertical-top, - var(--spectrum-badge-label-spacing-vertical-top)); - padding-block-end: var(--mod-badge-label-spacing-vertical-bottom, - var(--spectrum-badge-label-spacing-vertical-bottom)); - - color: var(--mod-badge-label-icon-color, - var(--spectrum-badge-label-icon-color)); - - /* cjk language support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - line-height: var(--mod-badge-line-height-cjk, - var(--spectrum-badge-line-height-cjk)); - } - - /* remove left padding from label if preceded by an icon */ - .spectrum-Badge-icon + & { - padding-inline-start: 0; - } + font-size: var(--mod-badge-font-size, var(--spectrum-badge-font-size)); + line-height: var(--mod-badge-line-height, var(--spectrum-badge-line-height)); + + padding-inline-end: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal)); + padding-inline-start: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal)); + padding-block-start: var(--mod-badge-label-spacing-vertical-top, var(--spectrum-badge-label-spacing-vertical-top)); + padding-block-end: var(--mod-badge-label-spacing-vertical-bottom, var(--spectrum-badge-label-spacing-vertical-bottom)); + + color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color)); + + /* cjk language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-badge-line-height-cjk, var(--spectrum-badge-line-height-cjk)); + } + + /* remove left padding from label if preceded by an icon */ + .spectrum-Badge-icon + & { + padding-inline-start: 0; + } } /* optional icon */ .spectrum-Badge-icon { - block-size: var(--mod-badge-workflow-icon-size, - var(--spectrum-badge-workflow-icon-size)); - inline-size: var(--mod-badge-workflow-icon-size, - var(--spectrum-badge-workflow-icon-size)); + block-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); + inline-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); - /* ensures icon does not shrink when badge width is limited */ - flex: 0 0 var(--mod-badge-workflow-icon-size, - var(--spectrum-badge-workflow-icon-size)); + /* ensures icon does not shrink when badge width is limited */ + flex: 0 0 var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); - padding-inline-start: var(--mod-badge-icon-spacing-horizontal, - var(--spectrum-badge-icon-spacing-horizontal)); + padding-inline-start: var(--mod-badge-icon-spacing-horizontal, var(--spectrum-badge-icon-spacing-horizontal)); - /* icon with label has reduced padding between icon and text */ - padding-inline-end: var(--mod-badge-icon-text-spacing, - var(--spectrum-badge-icon-text-spacing)); - padding-block-start: var(--mod-badge-icon-spacing-vertical-top, - var(--spectrum-badge-icon-spacing-vertical-top)); - padding-block-end: var(--mod-badge-icon-spacing-vertical-top, - var(--spectrum-badge-icon-spacing-vertical-top)); + /* icon with label has reduced padding between icon and text */ + padding-inline-end: var(--mod-badge-icon-text-spacing, var(--spectrum-badge-icon-text-spacing)); + padding-block-start: var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top)); + padding-block-end: var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top)); - color: var(--mod-badge-label-icon-color, - var(--spectrum-badge-label-icon-color)); + color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color)); } .spectrum-Badge-icon--no-label { - /* icon without label has identical padding left and right */ - padding-inline-start: var(--mod-badge-icon-only-spacing-horizontal, - var(--spectrum-badge-icon-only-spacing-horizontal)); - padding-inline-end: var(--mod-badge-icon-only-spacing-horizontal, - var(--spectrum-badge-icon-only-spacing-horizontal)); + /* icon without label has identical padding left and right */ + padding-inline-start: var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal)); + padding-inline-end: var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal)); } diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css index 3bbd6b5cac..df36da2499 100644 --- a/components/breadcrumb/index.css +++ b/components/breadcrumb/index.css @@ -10,324 +10,317 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ - .spectrum-Breadcrumbs { - /* block size */ - --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --spectrum-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact); - --spectrum-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline); - - /* text regular */ - --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-100); - --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200); - --spectrum-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); - - /* text regular active item */ - --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --spectrum-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); - - /* text compact */ - --spectrum-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --spectrum-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight); - - /* text compact active item */ - --spectrum-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100); - --spectrum-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight); - - /* text multiline */ - --spectrum-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --spectrum-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight); - - /* text multiline active item */ - --spectrum-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300); - --spectrum-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight); - - /* hover, active, focus underline */ - --spectrum-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness); - --spectrum-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap); - - /* space between items */ - --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-text-to-visual-100); - - /* vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text); - --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text); - --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-icon); - - /* compact vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start-compact: var(--spectrum-breadcrumbs-top-to-text-compact); - --spectrum-breadcrumbs-text-spacing-block-end-compact: var(--spectrum-breadcrumbs-bottom-to-text-compact); - --spectrum-breadcrumbs-icon-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-separator-icon-compact); - - /* multiline vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-text-multiline); - --spectrum-breadcrumbs-text-spacing-block-end-multiline: var(--spectrum-breadcrumbs-bottom-to-text-multiline); - --spectrum-breadcrumbs-text-spacing-block-between-multiline: var(--spectrum-breadcrumbs-top-text-to-bottom-text); /* vertical between lines */ - --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-separator-icon-multiline); - --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline); /* vertical between lines */ - - /* horizontal outer spacing of list */ - --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text); - --spectrum-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text); - - /* menu action button icon spacing */ - --spectrum-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon); - - /* action button spacing */ - --spectrum-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu); - --spectrum-breadcrumbs-action-button-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* compact */ - - --spectrum-breadcrumbs-action-button-spacing-inline-start: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); /* if icon is first item */ - - --spectrum-breadcrumbs-action-button-spacing-block-multiline: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* multiline */ - --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); /* multiline */ - - /* Focus Indicator */ - --spectrum-breadcrumbs-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - - /* placeholder for border radius for focus indicator */ - --spectrum-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-100); - - /* Colors */ - --spectrum-breadcrumbs-text-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-breadcrumbs-text-color-current: var(--spectrum-neutral-content-color-default); - --spectrum-breadcrumbs-text-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-breadcrumbs-separator-color: var(--spectrum-neutral-content-color-default); - --spectrum-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color); + /* block size */ + --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); + --spectrum-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact); + --spectrum-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline); + + /* text regular */ + --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-100); + --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200); + --spectrum-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + + /* text regular active item */ + --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --spectrum-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack); + --spectrum-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); + + /* text compact */ + --spectrum-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); + --spectrum-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack); + --spectrum-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight); + + /* text compact active item */ + --spectrum-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100); + --spectrum-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack); + --spectrum-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight); + + /* text multiline */ + --spectrum-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); + --spectrum-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack); + --spectrum-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight); + + /* text multiline active item */ + --spectrum-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300); + --spectrum-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack); + --spectrum-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight); + + /* hover, active, focus underline */ + --spectrum-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness); + --spectrum-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap); + + /* space between items */ + --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-text-to-visual-100); + + /* vertical spacing */ + --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text); + --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text); + --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-icon); + + /* compact vertical spacing */ + --spectrum-breadcrumbs-text-spacing-block-start-compact: var(--spectrum-breadcrumbs-top-to-text-compact); + --spectrum-breadcrumbs-text-spacing-block-end-compact: var(--spectrum-breadcrumbs-bottom-to-text-compact); + --spectrum-breadcrumbs-icon-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-separator-icon-compact); + + /* multiline vertical spacing */ + --spectrum-breadcrumbs-text-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-text-multiline); + --spectrum-breadcrumbs-text-spacing-block-end-multiline: var(--spectrum-breadcrumbs-bottom-to-text-multiline); + --spectrum-breadcrumbs-text-spacing-block-between-multiline: var(--spectrum-breadcrumbs-top-text-to-bottom-text); /* vertical between lines */ + --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-separator-icon-multiline); + --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline); /* vertical between lines */ + + /* horizontal outer spacing of list */ + --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text); + --spectrum-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text); + + /* menu action button icon spacing */ + --spectrum-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon); + + /* action button spacing */ + --spectrum-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu); + --spectrum-breadcrumbs-action-button-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* compact */ + + --spectrum-breadcrumbs-action-button-spacing-inline-start: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); /* if icon is first item */ + + --spectrum-breadcrumbs-action-button-spacing-block-multiline: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* multiline */ + --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); /* multiline */ + + /* Focus Indicator */ + --spectrum-breadcrumbs-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + + /* placeholder for border radius for focus indicator */ + --spectrum-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-100); + + /* Colors */ + --spectrum-breadcrumbs-text-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-breadcrumbs-text-color-current: var(--spectrum-neutral-content-color-default); + --spectrum-breadcrumbs-text-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-breadcrumbs-separator-color: var(--spectrum-neutral-content-color-default); + --spectrum-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color); + + --spectrum-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color); } /* windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Breadcrumbs { - --highcontrast-breadcrumbs-text-color: LinkText; - --highcontrast-breadcrumbs-text-color-current: CanvasText; - --highcontrast-breadcrumbs-text-color-disabled: GrayText; - --highcontrast-breadcrumbs-separator-color: CanvasText; - --highcontrast-breadcrumbs-action-button-color: LinkText; - --highcontrast-breadcrumbs-action-button-color-disabled: GrayText; - - --highcontrast-breadcrumbs-focus-indicator-color: CanvasText; - } + .spectrum-Breadcrumbs { + --highcontrast-breadcrumbs-text-color: LinkText; + --highcontrast-breadcrumbs-text-color-current: CanvasText; + --highcontrast-breadcrumbs-text-color-disabled: GrayText; + --highcontrast-breadcrumbs-separator-color: CanvasText; + --highcontrast-breadcrumbs-action-button-color: LinkText; + --highcontrast-breadcrumbs-action-button-color-disabled: GrayText; + + --highcontrast-breadcrumbs-focus-indicator-color: CanvasText; + } } .spectrum-Breadcrumbs { - list-style-type: none; + list-style-type: none; - margin: 0; - padding-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start)); - padding-inline-end: var(--mod-breadcrumbs-inline-end, var(--spectrum-breadcrumbs-inline-end)); + margin: 0; + padding-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start)); + padding-inline-end: var(--mod-breadcrumbs-inline-end, var(--spectrum-breadcrumbs-inline-end)); - display: flex; - flex-flow: row nowrap; - align-items: center; - justify-content: flex-start; - flex: 1 0 0%; + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: flex-start; + flex: 1 0 0%; - block-size: var(--mod-breadcrumbs-block-size, var(--spectrum-breadcrumbs-block-size)); + block-size: var(--mod-breadcrumbs-block-size, var(--spectrum-breadcrumbs-block-size)); } .spectrum-Breadcrumbs--compact { - block-size: var(--mod-breadcrumbs-block-size-compact, var(--spectrum-breadcrumbs-block-size-compact)); + block-size: var(--mod-breadcrumbs-block-size-compact, var(--spectrum-breadcrumbs-block-size-compact)); } .spectrum-Breadcrumbs--multiline { - block-size: var(--mod-breadcrumbs-block-size-multiline, var(--spectrum-breadcrumbs-block-size-multiline)); + block-size: var(--mod-breadcrumbs-block-size-multiline, var(--spectrum-breadcrumbs-block-size-multiline)); - flex-wrap: wrap; - align-content: center; + flex-wrap: wrap; + align-content: center; } .spectrum-Breadcrumbs-itemSeparator { - position: relative; + position: relative; - margin-block: var(--mod-breadcrumbs-icon-spacing-block, var(--spectrum-breadcrumbs-icon-spacing-block)); - margin-inline: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); + margin-block: var(--mod-breadcrumbs-icon-spacing-block, var(--spectrum-breadcrumbs-icon-spacing-block)); + margin-inline: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); - opacity: 1; - color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color))); + opacity: 1; + color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color))); - &:dir(rtl) { - transform: scaleX(-1); - } + &:dir(rtl) { + transform: scaleX(-1); + } - .spectrum-Breadcrumbs--compact & { - margin-block: var(--mod-breadcrumbs-icon-spacing-block-compact, var(--spectrum-breadcrumbs-icon-spacing-block-compact)); - } + .spectrum-Breadcrumbs--compact & { + margin-block: var(--mod-breadcrumbs-icon-spacing-block-compact, var(--spectrum-breadcrumbs-icon-spacing-block-compact)); + } - .spectrum-Breadcrumbs--multiline & { - margin-block-start: var(--mod-breadcrumbs-icon-spacing-block-start-multiline, var(--spectrum-breadcrumbs-icon-spacing-block-start-multiline)); - margin-block-end: var(--mod-breadcrumbs-icon-spacing-block-between-multiline, var(--spectrum-breadcrumbs-icon-spacing-block-between-multiline)); - } + .spectrum-Breadcrumbs--multiline & { + margin-block-start: var(--mod-breadcrumbs-icon-spacing-block-start-multiline, var(--spectrum-breadcrumbs-icon-spacing-block-start-multiline)); + margin-block-end: var(--mod-breadcrumbs-icon-spacing-block-between-multiline, var(--spectrum-breadcrumbs-icon-spacing-block-between-multiline)); + } } .spectrum-Breadcrumbs-item { - box-sizing: border-box; - position: relative; - display: inline-flex; - white-space: nowrap; - - font-family: var(--mod-breadcrumbs-font-family, var(--spectrum-breadcrumbs-font-family)); - font-size: var(--mod-breadcrumbs-font-size, var(--spectrum-breadcrumbs-font-size)); - font-weight: var(--mod-breadcrumbs-font-weight, var(--spectrum-breadcrumbs-font-weight)); - line-height: var(--mod-breadcrumbs-line-height, var(--spectrum-breadcrumbs-line-height)); - - .spectrum-Breadcrumbs--compact & { - font-family: var(--mod-breadcrumbs-font-family-compact, var(--spectrum-breadcrumbs-font-family-compact)); - font-size: var(--mod-breadcrumbs-font-size-compact, var(--spectrum-breadcrumbs-font-size-compact)); - font-weight: var(--mod-breadcrumbs-font-weight-compact, var(--spectrum-breadcrumbs-font-weight-compact)); - - > .spectrum-ActionButton { - margin-block: var(--mod-breadcrumbs-action-button-spacing-block-compact, var(--spectrum-breadcrumbs-action-button-spacing-block-compact)); - } - } - - .spectrum-Breadcrumbs--multiline & { - font-family: var(--mod-breadcrumbs-font-family-multiline, var(--spectrum-breadcrumbs-font-family-multiline)); - font-size: var(--mod-breadcrumbs-font-size-multiline, var(--spectrum-breadcrumbs-font-size-multiline)); - font-weight: var(--mod-breadcrumbs-font-weight-multiline, var(--spectrum-breadcrumbs-font-weight-multiline)); - - &:last-of-type { - block-size: auto; - inline-size: 100%; - } - - > .spectrum-ActionButton { - margin-block-start: var(--mod-breadcrumbs-action-button-spacing-block-multiline, var(--spectrum-breadcrumbs-action-button-spacing-block-multiline)); - margin-block-end: var(--mod-breadcrumbs-action-button-spacing-block-between-multiline, var(--spectrum-breadcrumbs-action-button-spacing-block-between-multiline)); - } - } - - &:last-of-type { - font-family: var(--mod-breadcrumbs-font-family-current, var(--spectrum-breadcrumbs-font-family-current)); - font-size: var(--mod-breadcrumbs-font-size-current, var(--spectrum-breadcrumbs-font-size-current)); - font-weight: var(--mod-breadcrumbs-font-weight-current, var(--spectrum-breadcrumbs-font-weight-current)); - - .spectrum-Breadcrumbs-itemSeparator { - display: none; - } - } - - .spectrum-Breadcrumbs--compact &:last-of-type { - font-family: var(--mod-breadcrumbs-font-family-compact-current, var(--spectrum-breadcrumbs-font-family-compact-current)); - font-size: var(--mod-breadcrumbs-font-size-compact-current, var(--spectrum-breadcrumbs-font-size-compact-current)); - font-weight: var(--mod-breadcrumbs-font-weight-compact-current, var(--spectrum-breadcrumbs-font-weight-compact-current)); - } - - .spectrum-Breadcrumbs--multiline &:last-of-type { - font-family: var(--mod-breadcrumbs-font-family-multiline-current, var(--spectrum-breadcrumbs-font-family-multiline-current)); - font-size: var(--mod-breadcrumbs-font-size-multiline-current, var(--spectrum-breadcrumbs-font-size-multiline-current)); - font-weight: var(--mod-breadcrumbs-font-weight-multiline-current, var(--spectrum-breadcrumbs-font-weight-multiline-current)); - - .spectrum-Breadcrumbs-itemLink { - margin-block-start: 0; - margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end-multiline, var(--spectrum-breadcrumbs-text-spacing-block-end-multiline)); - } - } - - > .spectrum-ActionButton { - margin-inline: var(--mod-breadcrumbs-action-button-spacing-inline, var(--spectrum-breadcrumbs-action-button-spacing-inline)); - margin-block: var(--mod-breadcrumbs-action-button-spacing-block, var(--spectrum-breadcrumbs-action-button-spacing-block)); - - color: var(--highcontrast-breadcrumbs-action-button-color, var(--mod-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color))); - - &:disabled { - color: var(--highcontrast-breadcrumbs-action-button-color-disabled, var(--mod-breadcrumbs-action-button-color-disabled, var(--spectrum-breadcrumbs-action-button-color-disabled))); - } - } - - &:first-of-type { - /* if folder icon is first item */ - > .spectrum-ActionButton { - margin-inline-start: var(--mod-breadcrumbs-action-button-spacing-inline-start, var(--spectrum-breadcrumbs-action-button-spacing-inline-start)); - } - } + box-sizing: border-box; + position: relative; + display: inline-flex; + white-space: nowrap; + + font-family: var(--mod-breadcrumbs-font-family, var(--spectrum-breadcrumbs-font-family)); + font-size: var(--mod-breadcrumbs-font-size, var(--spectrum-breadcrumbs-font-size)); + font-weight: var(--mod-breadcrumbs-font-weight, var(--spectrum-breadcrumbs-font-weight)); + line-height: var(--mod-breadcrumbs-line-height, var(--spectrum-breadcrumbs-line-height)); + + .spectrum-Breadcrumbs--compact & { + font-family: var(--mod-breadcrumbs-font-family-compact, var(--spectrum-breadcrumbs-font-family-compact)); + font-size: var(--mod-breadcrumbs-font-size-compact, var(--spectrum-breadcrumbs-font-size-compact)); + font-weight: var(--mod-breadcrumbs-font-weight-compact, var(--spectrum-breadcrumbs-font-weight-compact)); + + > .spectrum-ActionButton { + margin-block: var(--mod-breadcrumbs-action-button-spacing-block-compact, var(--spectrum-breadcrumbs-action-button-spacing-block-compact)); + } + } + + .spectrum-Breadcrumbs--multiline & { + font-family: var(--mod-breadcrumbs-font-family-multiline, var(--spectrum-breadcrumbs-font-family-multiline)); + font-size: var(--mod-breadcrumbs-font-size-multiline, var(--spectrum-breadcrumbs-font-size-multiline)); + font-weight: var(--mod-breadcrumbs-font-weight-multiline, var(--spectrum-breadcrumbs-font-weight-multiline)); + + &:last-of-type { + block-size: auto; + inline-size: 100%; + } + + > .spectrum-ActionButton { + margin-block-start: var(--mod-breadcrumbs-action-button-spacing-block-multiline, var(--spectrum-breadcrumbs-action-button-spacing-block-multiline)); + margin-block-end: var(--mod-breadcrumbs-action-button-spacing-block-between-multiline, var(--spectrum-breadcrumbs-action-button-spacing-block-between-multiline)); + } + } + + &:last-of-type { + font-family: var(--mod-breadcrumbs-font-family-current, var(--spectrum-breadcrumbs-font-family-current)); + font-size: var(--mod-breadcrumbs-font-size-current, var(--spectrum-breadcrumbs-font-size-current)); + font-weight: var(--mod-breadcrumbs-font-weight-current, var(--spectrum-breadcrumbs-font-weight-current)); + + .spectrum-Breadcrumbs-itemSeparator { + display: none; + } + } + + .spectrum-Breadcrumbs--compact &:last-of-type { + font-family: var(--mod-breadcrumbs-font-family-compact-current, var(--spectrum-breadcrumbs-font-family-compact-current)); + font-size: var(--mod-breadcrumbs-font-size-compact-current, var(--spectrum-breadcrumbs-font-size-compact-current)); + font-weight: var(--mod-breadcrumbs-font-weight-compact-current, var(--spectrum-breadcrumbs-font-weight-compact-current)); + } + + .spectrum-Breadcrumbs--multiline &:last-of-type { + font-family: var(--mod-breadcrumbs-font-family-multiline-current, var(--spectrum-breadcrumbs-font-family-multiline-current)); + font-size: var(--mod-breadcrumbs-font-size-multiline-current, var(--spectrum-breadcrumbs-font-size-multiline-current)); + font-weight: var(--mod-breadcrumbs-font-weight-multiline-current, var(--spectrum-breadcrumbs-font-weight-multiline-current)); + + .spectrum-Breadcrumbs-itemLink { + margin-block-start: 0; + margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end-multiline, var(--spectrum-breadcrumbs-text-spacing-block-end-multiline)); + } + } + + > .spectrum-ActionButton { + margin-inline: var(--mod-breadcrumbs-action-button-spacing-inline, var(--spectrum-breadcrumbs-action-button-spacing-inline)); + margin-block: var(--mod-breadcrumbs-action-button-spacing-block, var(--spectrum-breadcrumbs-action-button-spacing-block)); + + color: var(--highcontrast-breadcrumbs-action-button-color, var(--mod-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color))); + + &:disabled { + color: var(--highcontrast-breadcrumbs-action-button-color-disabled, var(--mod-breadcrumbs-action-button-color-disabled, var(--spectrum-breadcrumbs-action-button-color-disabled))); + } + } + + &:first-of-type { + /* if folder icon is first item */ + > .spectrum-ActionButton { + margin-inline-start: var(--mod-breadcrumbs-action-button-spacing-inline-start, var(--spectrum-breadcrumbs-action-button-spacing-inline-start)); + } + } } .spectrum-Breadcrumbs-itemLink { - cursor: default; - position: relative; + cursor: default; + position: relative; - box-sizing: border-box; + box-sizing: border-box; - display: block; + display: block; - border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); /* placeholder for token */ - outline: none; + border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); /* placeholder for token */ + outline: none; - text-decoration: none; - color: var(--highcontrast-breadcrumbs-text-color, var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color))); + text-decoration: none; + color: var(--highcontrast-breadcrumbs-text-color, var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color))); - margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start, var(--spectrum-breadcrumbs-text-spacing-block-start)); - margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end, var(--spectrum-breadcrumbs-text-spacing-block-end)); + margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start, var(--spectrum-breadcrumbs-text-spacing-block-start)); + margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end, var(--spectrum-breadcrumbs-text-spacing-block-end)); - &.is-disabled { - color: var(--highcontrast-breadcrumbs-text-color-disabled, var(--mod-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled))); - } + &.is-disabled { + color: var(--highcontrast-breadcrumbs-text-color-disabled, var(--mod-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled))); + } - .spectrum-Breadcrumbs-item:last-of-type & { - color: var(--highcontrast-breadcrumbs-text-color-current, var(--mod-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current))); - } + .spectrum-Breadcrumbs-item:last-of-type & { + color: var(--highcontrast-breadcrumbs-text-color-current, var(--mod-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current))); + } - .spectrum-Breadcrumbs--compact & { - /* compact vertical spacing */ - margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start-compact, var(--spectrum-breadcrumbs-text-spacing-block-start-compact)); - margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end-compact, var(--spectrum-breadcrumbs-text-spacing-block-end-compact)); - } + .spectrum-Breadcrumbs--compact & { + /* compact vertical spacing */ + margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start-compact, var(--spectrum-breadcrumbs-text-spacing-block-start-compact)); + margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end-compact, var(--spectrum-breadcrumbs-text-spacing-block-end-compact)); + } - .spectrum-Breadcrumbs--multiline & { - /* multiline vertical spacing */ - margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start-multiline, var(--spectrum-breadcrumbs-text-spacing-block-start-multiline)); - margin-block-end: var(--mod-breadcrumbs-text-spacing-block-between-multiline, var(--spectrum-breadcrumbs-text-spacing-block-between-multiline)); /* vertical between lines */ - } + .spectrum-Breadcrumbs--multiline & { + /* multiline vertical spacing */ + margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start-multiline, var(--spectrum-breadcrumbs-text-spacing-block-start-multiline)); + margin-block-end: var(--mod-breadcrumbs-text-spacing-block-between-multiline, var(--spectrum-breadcrumbs-text-spacing-block-between-multiline)); /* vertical between lines */ + } - &[href], - &[tabindex="0"] { - cursor: pointer; + &[href], + &[tabindex="0"] { + cursor: pointer; - &:hover, - &:focus-visible { - text-decoration: underline; - text-decoration-thickness: var(--mod-breadcrumbs-text-decoration-thickness, var(--spectrum-breadcrumbs-text-decoration-thickness)); - text-underline-offset: var(--mod-breadcrumbs-text-decoration-gap, var(--spectrum-breadcrumbs-text-decoration-gap)); - } - } + &:hover, + &:focus-visible { + text-decoration: underline; + text-decoration-thickness: var(--mod-breadcrumbs-text-decoration-thickness, var(--spectrum-breadcrumbs-text-decoration-thickness)); + text-underline-offset: var(--mod-breadcrumbs-text-decoration-gap, var(--spectrum-breadcrumbs-text-decoration-gap)); + } + } } /* focus indicator */ .spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink::before, .spectrum-Breadcrumbs-itemLink:focus-visible::before { - position: absolute; - - margin-inline-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) - + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) - * -1); - margin-block-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) - + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) - * -1); - - box-sizing: border-box; - display: block; - inline-size: calc(100% + (var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) * 2) - + (var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)) * 2)); - block-size: calc(100% + (var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) * 2) - + (var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)) * 2)); - - border-width: var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)); - border-style: solid; - border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); - - content: ""; - pointer-events: none; - - border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))); + position: absolute; + + margin-inline-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1); + margin-block-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1); + + box-sizing: border-box; + display: block; + inline-size: calc(100% + (var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) * 2) + (var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)) * 2)); + block-size: calc(100% + (var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) * 2) + (var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)) * 2)); + + border-width: var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)); + border-style: solid; + border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); + + content: ""; + pointer-events: none; + + border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))); } diff --git a/components/button/index.css b/components/button/index.css index 748097bbc9..f61f5c7c00 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -15,334 +15,324 @@ governing permissions and limitations under the License. /* default for all buttons */ .spectrum-Button { - --spectrum-button-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-button-border-radius: var(--spectrum-corner-radius-100); - --spectrum-button-border-width: var(--spectrum-border-width-200); - --spectrum-button-line-height: 1.2; /* Hack to keep buttons at 32px */ - - --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-button-focus-ring-border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap)); - --spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); - - --mod-progress-circle-position: absolute; + --spectrum-button-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-button-border-width: var(--spectrum-border-width-200); + --spectrum-button-line-height: 1.2; /* Hack to keep buttons at 32px */ + + --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-button-focus-ring-border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap)); + --spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); + + --mod-progress-circle-position: absolute; } .spectrum-Button--sizeS { - --spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); + --spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-75); - --spectrum-button-height: var(--spectrum-component-height-75); + --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-75); + --spectrum-button-height: var(--spectrum-component-height-75); - --spectrum-button-font-size: var(--spectrum-font-size-75); + --spectrum-button-font-size: var(--spectrum-font-size-75); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small); - --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small); - --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75); + --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small); + --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75); } .spectrum-Button--sizeM { - --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); + --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-button-height: var(--spectrum-component-height-100); + --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-100); + --spectrum-button-height: var(--spectrum-component-height-100); - --spectrum-button-font-size: var(--spectrum-font-size-100); + --spectrum-button-font-size: var(--spectrum-font-size-100); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium); - --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); - --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium); + --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); } .spectrum-Button--sizeL { - --spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); + --spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-200); - --spectrum-button-height: var(--spectrum-component-height-200); + --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-200); + --spectrum-button-height: var(--spectrum-component-height-200); - --spectrum-button-font-size: var(--spectrum-font-size-200); + --spectrum-button-font-size: var(--spectrum-font-size-200); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large); - --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large); - --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200); + --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large); + --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-200); } .spectrum-Button--sizeXL { - --spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); + --spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-300); - --spectrum-button-height: var(--spectrum-component-height-300); + --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-300); + --spectrum-button-height: var(--spectrum-component-height-300); - --spectrum-button-font-size: var(--spectrum-font-size-300); + --spectrum-button-font-size: var(--spectrum-font-size-300); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large); - --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); - --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300); + --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large); + --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300); } .spectrum-Button { - @extend %spectrum-BaseButton; - @extend %spectrum-ButtonWithFocusRing; - - border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius)); - border-width: var(--mod-button-border-width, var(--spectrum-button-border-width)); - border-style: solid; - font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); - font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight)); - gap: var(--mod-button-padding-label-to-icon, var(--spectrum-button-padding-label-to-icon)); - min-inline-size: var(--mod-button-min-width, var(--spectrum-button-min-width)); - min-block-size: var(--mod-button-height, var(--spectrum-button-height)); - - /* Start with text-only padding */ - padding-block: 0; - padding-inline: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)); - position: relative; - - /* let staticColor variants inherit their color */ - color: inherit; - - margin-block: var(--mod-button-margin-block); - margin-inline-end: var(--mod-button-margin-right); - margin-inline-start: var(--mod-button-margin-left); - - &:hover, - &:active { - box-shadow: none; - } - - .spectrum-Icon { - /* Any block-size difference between the intended workflow icon size and actual icon used. + @extend %spectrum-BaseButton; + @extend %spectrum-ButtonWithFocusRing; + + border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius)); + border-width: var(--mod-button-border-width, var(--spectrum-button-border-width)); + border-style: solid; + font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); + font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight)); + gap: var(--mod-button-padding-label-to-icon, var(--spectrum-button-padding-label-to-icon)); + min-inline-size: var(--mod-button-min-width, var(--spectrum-button-min-width)); + min-block-size: var(--mod-button-height, var(--spectrum-button-height)); + + /* Start with text-only padding */ + padding-block: 0; + padding-inline: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)); + position: relative; + + /* let staticColor variants inherit their color */ + color: inherit; + + margin-block: var(--mod-button-margin-block); + margin-inline-end: var(--mod-button-margin-right); + margin-inline-start: var(--mod-button-margin-left); + + &:hover, + &:active { + box-shadow: none; + } + + .spectrum-Icon { + /* Any block-size difference between the intended workflow icon size and actual icon used. Helps support any existing use of smaller UI icons instead of intended Workflow icons. */ - --_icon-size-difference: max(0px, - var(--spectrum-button-intended-icon-size) - - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)) - ); - - margin-block-start: var(--mod-button-icon-margin-block-start, - max(0px, - var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - - var(--mod-button-border-width, var(--spectrum-button-border-width)) + - (var(--_icon-size-difference, 0px) / 2) - ) - ); - - margin-inline-start: calc( - var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)) - ); - color: inherit; - flex-shrink: 0; - align-self: flex-start; - } - - /* correct focus indicator radius for t-shirt sizing */ - &::after { - border-radius: calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))); - } - - &.spectrum-Button--iconOnly { - min-inline-size: unset; - padding: calc(var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - border-radius: 50%; - - .spectrum-Icon { - align-self: center; - margin-inline-start: 0; - margin-block-start: 0; - } - - &::after { - border-radius: 50%; - } - } + --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))); + + margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2))); + + margin-inline-start: calc(var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text))); + color: inherit; + flex-shrink: 0; + align-self: flex-start; + } + + /* correct focus indicator radius for t-shirt sizing */ + &::after { + border-radius: calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))); + } + + &.spectrum-Button--iconOnly { + min-inline-size: unset; + padding: calc(var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + border-radius: 50%; + + .spectrum-Icon { + align-self: center; + margin-inline-start: 0; + margin-block-start: 0; + } + + &::after { + border-radius: 50%; + } + } } a.spectrum-Button { - @extend %spectrum-AnchorButton; + @extend %spectrum-AnchorButton; } .spectrum-Button-label { - @extend %spectrum-ButtonLabel; - padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - line-height: var(--mod-button-line-height, var(--spectrum-button-line-height)); - align-self: start; - text-align: var(--mod-button-text-align, center); + @extend %spectrum-ButtonLabel; + padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + line-height: var(--mod-button-line-height, var(--spectrum-button-line-height)); + align-self: start; + text-align: var(--mod-button-text-align, center); } .spectrum-Button .spectrum-Icon + .spectrum-Button-label { - text-align: var(--mod-button-text-align-with-icon, start); + text-align: var(--mod-button-text-align-with-icon, start); } .spectrum-Button { - &:focus-visible, - &.is-focused { - &::after { - box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)); - } - } + &:focus-visible, + &.is-focused { + &::after { + box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)); + } + } } /* Special cases for focus indicator */ .spectrum-Button { - transition: border-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; - - &::after { - position: absolute; - inset: 0; - margin: calc((var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + var(--mod-button-border-width, var(--spectrum-button-border-width))) * -1); - border-radius: var(--mod-button-focus-ring-border-radius, var(--spectrum-button-focus-ring-border-radius)); - transition: box-shadow var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; - pointer-events: none; - content: ''; - } - - &:focus-visible { - /* Remove the default focus outline */ - box-shadow: none; - outline: none; - - &::after { - box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, - var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)))); - } - } + transition: border-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; + + &::after { + position: absolute; + inset: 0; + margin: calc((var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + var(--mod-button-border-width, var(--spectrum-button-border-width))) * -1); + border-radius: var(--mod-button-focus-ring-border-radius, var(--spectrum-button-focus-ring-border-radius)); + transition: box-shadow var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; + pointer-events: none; + content: ""; + } + + &:focus-visible { + /* Remove the default focus outline */ + box-shadow: none; + outline: none; + + &::after { + box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)))); + } + } } /* Core Token Theming */ /* former skin.css, applied / copied from actionbutton/index.css */ .spectrum-Button { - @extend %spectrum-BaseButton; - - background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))); - border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))); - color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))); - transition: border var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, - color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, - background-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear; - - &:hover { - background-color: var(--highcontrast-button-background-color-hover, var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))); - border-color: var(--highcontrast-button-border-color-hover, var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))); - color: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))); - } - - &:focus-visible { - background-color: var(--highcontrast-button-background-color-focus, var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))); - border-color: var(--highcontrast-button-border-color-focus, var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))); - color: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))); - } - - &:active { - background-color: var(--highcontrast-button-background-color-down, var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))); - border-color: var(--highcontrast-button-border-color-down, var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))); - color: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))); - } - - &:disabled, - &.is-disabled, - &[pending], - &.is-pending { - background-color: var(--highcontrast-button-background-color-disabled, var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled))); - border-color: var(--highcontrast-button-border-color-disabled, var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled))); - color: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))); - } - - .spectrum-Icon, - .spectrum-Button-label { - visibility: visible; - opacity: 1; - transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out; - } - - .spectrum-ProgressCircle { - visibility: hidden; - opacity: 0; - transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out, - visibility 0ms linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)); - } - - &[pending], - &.is-pending { - cursor: default; - - .spectrum-Icon, - .spectrum-Button-label { - visibility: hidden; - opacity: 0; - transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out, - visibility 0ms linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)); - } - - .spectrum-ProgressCircle { - visibility: visible; - opacity: 1; - transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out; - } - } + @extend %spectrum-BaseButton; + + background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))); + border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))); + color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))); + transition: + border var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, + color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, + background-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear; + + &:hover { + background-color: var(--highcontrast-button-background-color-hover, var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))); + border-color: var(--highcontrast-button-border-color-hover, var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))); + color: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))); + } + + &:focus-visible { + background-color: var(--highcontrast-button-background-color-focus, var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))); + border-color: var(--highcontrast-button-border-color-focus, var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))); + color: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))); + } + + &:active { + background-color: var(--highcontrast-button-background-color-down, var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))); + border-color: var(--highcontrast-button-border-color-down, var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))); + color: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))); + } + + &:disabled, + &.is-disabled, + &[pending], + &.is-pending { + background-color: var(--highcontrast-button-background-color-disabled, var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled))); + border-color: var(--highcontrast-button-border-color-disabled, var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled))); + color: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))); + } + + .spectrum-Icon, + .spectrum-Button-label { + visibility: visible; + opacity: 1; + transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out; + } + + .spectrum-ProgressCircle { + visibility: hidden; + opacity: 0; + transition: + opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out, + visibility 0ms linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)); + } + + &[pending], + &.is-pending { + cursor: default; + + .spectrum-Icon, + .spectrum-Button-label { + visibility: hidden; + opacity: 0; + transition: + opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out, + visibility 0ms linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)); + } + + .spectrum-ProgressCircle { + visibility: visible; + opacity: 1; + transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out; + } + } } /* Static color variants */ .spectrum-Button--staticWhite { - --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); + --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); } .spectrum-Button--staticBlack { - --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); + --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); } /* Windows High Contrast Mode */ @media (forced-colors: active) { - .spectrum-Button { - --highcontrast-button-content-color-disabled: GrayText; - --highcontrast-button-border-color-disabled: GrayText; - --mod-progress-circle-track-border-color: ButtonText; - --mod-progress-circle-track-border-color-over-background: ButtonText; - --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); - - &:focus-visible { - &::after { - forced-color-adjust: none; - box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) ButtonText; - } - } - - &.spectrum-Button--accent.spectrum-Button--fill { - --highcontrast-button-background-color-default: ButtonText; - --highcontrast-button-content-color-default: ButtonFace; - --highcontrast-button-background-color-disabled: ButtonFace; - - --highcontrast-button-background-color-hover: Highlight; - --highcontrast-button-background-color-down: Highlight; - --highcontrast-button-background-color-focus: Highlight; - --highcontrast-button-content-color-hover: ButtonFace; - --highcontrast-button-content-color-down: ButtonFace; - --highcontrast-button-content-color-focus: ButtonFace; - - .spectrum-Button-label { - forced-color-adjust: none; - } - } - } + .spectrum-Button { + --highcontrast-button-content-color-disabled: GrayText; + --highcontrast-button-border-color-disabled: GrayText; + --mod-progress-circle-track-border-color: ButtonText; + --mod-progress-circle-track-border-color-over-background: ButtonText; + --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); + + &:focus-visible { + &::after { + forced-color-adjust: none; + box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) ButtonText; + } + } + + &.spectrum-Button--accent.spectrum-Button--fill { + --highcontrast-button-background-color-default: ButtonText; + --highcontrast-button-content-color-default: ButtonFace; + --highcontrast-button-background-color-disabled: ButtonFace; + + --highcontrast-button-background-color-hover: Highlight; + --highcontrast-button-background-color-down: Highlight; + --highcontrast-button-background-color-focus: Highlight; + --highcontrast-button-content-color-hover: ButtonFace; + --highcontrast-button-content-color-down: ButtonFace; + --highcontrast-button-content-color-focus: ButtonFace; + + .spectrum-Button-label { + forced-color-adjust: none; + } + } + } } diff --git a/components/button/themes/express.css b/components/button/themes/express.css index 495d6cf1fc..76fa00c260 100644 --- a/components/button/themes/express.css +++ b/components/button/themes/express.css @@ -13,25 +13,25 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-200); - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); + .spectrum-Button { + --spectrum-button-background-color-default: var(--spectrum-gray-200); + --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-down: var(--spectrum-gray-400); + --spectrum-button-background-color-focus: var(--spectrum-gray-300); - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; - &.is-selected { - --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); - } - } - } + &.is-selected { + --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + } + } +} diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css index 2b1ded8454..bb2940f23e 100644 --- a/components/button/themes/spectrum.css +++ b/components/button/themes/spectrum.css @@ -11,452 +11,448 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-75); - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-300); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); - - --spectrum-button-border-color-default: var(--spectrum-gray-400); - --spectrum-button-border-color-hover: var(--spectrum-gray-500); - --spectrum-button-border-color-down: var(--spectrum-gray-600); - --spectrum-button-border-color-focus: var(--spectrum-gray-500); - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - - &.spectrum-Button--accent { - --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-accent-color-200); - --spectrum-button-background-color-down: var(--spectrum-accent-color-300); - --spectrum-button-background-color-focus: var(--spectrum-accent-color-200); - - --spectrum-button-border-color-default: var(--spectrum-accent-color-900); - --spectrum-button-border-color-hover: var(--spectrum-accent-color-1000); - --spectrum-button-border-color-down: var(--spectrum-accent-color-1100); - --spectrum-button-border-color-focus: var(--spectrum-accent-color-1000); - - --spectrum-button-content-color-default: var(--spectrum-accent-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-accent-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } - } - - - &.spectrum-Button--negative { - --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-negative-color-200); - --spectrum-button-background-color-down: var(--spectrum-negative-color-300); - --spectrum-button-background-color-focus: var(--spectrum-negative-color-200); - - --spectrum-button-border-color-default: var(--spectrum-negative-color-900); - --spectrum-button-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-button-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-button-border-color-focus: var(--spectrum-negative-color-1000); - - --spectrum-button-content-color-default: var(--spectrum-negative-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-negative-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } - } - - &.spectrum-Button--primary { - --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - - --spectrum-button-border-color-default: var(--spectrum-gray-800); - --spectrum-button-border-color-hover: var(--spectrum-gray-900); - --spectrum-button-border-color-down: var(--spectrum-gray-900); - --spectrum-button-border-color-focus: var(--spectrum-gray-900); - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-gray-200); - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - - --spectrum-button-border-color-default: var(--spectrum-gray-300); - --spectrum-button-border-color-hover: var(--spectrum-gray-400); - --spectrum-button-border-color-down: var(--spectrum-gray-500); - --spectrum-button-border-color-focus: var(--spectrum-gray-400); - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } - } - - &.spectrum-Button--quiet { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-300); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: transparent; - } - - &.is-selected { - --spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - - &.spectrum-Button--emphasized { - --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); - } - } - - &.spectrum-Button--staticBlack, - &.spectrum-Button--staticWhite { - &.spectrum-Button--quiet { - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-border-color-disabled: transparent; - } - } - - /* static white */ - - &.spectrum-Button--staticWhite { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - } - - &.is-selected { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); - - --spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--spectrum-black)); - --spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-black)); - --spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--spectrum-black)); - --spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-black)); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-button-border-color-disabled: transparent; - } - } - - &.spectrum-Button--staticWhite.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-200); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-500); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - } - } - - /* static black */ - &.spectrum-Button--staticBlack { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-500); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-600); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-500); - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - } - } - - - &.spectrum-Button--staticBlack.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-200); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-500); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - } - } - } + .spectrum-Button { + --spectrum-button-background-color-default: var(--spectrum-gray-75); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-button-background-color-down: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); + + --spectrum-button-border-color-default: var(--spectrum-gray-400); + --spectrum-button-border-color-hover: var(--spectrum-gray-500); + --spectrum-button-border-color-down: var(--spectrum-gray-600); + --spectrum-button-border-color-focus: var(--spectrum-gray-500); + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-Button--accent { + --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-accent-color-200); + --spectrum-button-background-color-down: var(--spectrum-accent-color-300); + --spectrum-button-background-color-focus: var(--spectrum-accent-color-200); + + --spectrum-button-border-color-default: var(--spectrum-accent-color-900); + --spectrum-button-border-color-hover: var(--spectrum-accent-color-1000); + --spectrum-button-border-color-down: var(--spectrum-accent-color-1100); + --spectrum-button-border-color-focus: var(--spectrum-accent-color-1000); + + --spectrum-button-content-color-default: var(--spectrum-accent-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-accent-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + } + } + + &.spectrum-Button--negative { + --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-negative-color-200); + --spectrum-button-background-color-down: var(--spectrum-negative-color-300); + --spectrum-button-background-color-focus: var(--spectrum-negative-color-200); + + --spectrum-button-border-color-default: var(--spectrum-negative-color-900); + --spectrum-button-border-color-hover: var(--spectrum-negative-color-1000); + --spectrum-button-border-color-down: var(--spectrum-negative-color-1100); + --spectrum-button-border-color-focus: var(--spectrum-negative-color-1000); + + --spectrum-button-content-color-default: var(--spectrum-negative-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-negative-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + } + } + + &.spectrum-Button--primary { + --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-down: var(--spectrum-gray-400); + --spectrum-button-background-color-focus: var(--spectrum-gray-300); + + --spectrum-button-border-color-default: var(--spectrum-gray-800); + --spectrum-button-border-color-hover: var(--spectrum-gray-900); + --spectrum-button-border-color-down: var(--spectrum-gray-900); + --spectrum-button-border-color-focus: var(--spectrum-gray-900); + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + } + } + + &.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-gray-200); + --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-down: var(--spectrum-gray-400); + --spectrum-button-background-color-focus: var(--spectrum-gray-300); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-down: var(--spectrum-gray-400); + --spectrum-button-background-color-focus: var(--spectrum-gray-300); + + --spectrum-button-border-color-default: var(--spectrum-gray-300); + --spectrum-button-border-color-hover: var(--spectrum-gray-400); + --spectrum-button-border-color-down: var(--spectrum-gray-500); + --spectrum-button-border-color-focus: var(--spectrum-gray-400); + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + } + } + + &.spectrum-Button--quiet { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-button-background-color-down: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: transparent; + } + + &.is-selected { + --spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; + + &.spectrum-Button--emphasized { + --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); + } + } + + &.spectrum-Button--staticBlack, + &.spectrum-Button--staticWhite { + &.spectrum-Button--quiet { + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-border-color-disabled: transparent; + } + } + + /* static white */ + + &.spectrum-Button--staticWhite { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-black); + --spectrum-button-content-color-hover: var(--spectrum-black); + --spectrum-button-content-color-down: var(--spectrum-black); + --spectrum-button-content-color-focus: var(--spectrum-black); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); + + --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + } + + &.is-selected { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--spectrum-black)); + --spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-black)); + --spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--spectrum-black)); + --spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-black)); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-button-border-color-disabled: transparent; + } + } + + &.spectrum-Button--staticWhite.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); + + --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-500); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + } + } + + /* static black */ + &.spectrum-Button--staticBlack { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-500); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-600); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-500); + + --spectrum-button-content-color-default: var(--spectrum-black); + --spectrum-button-content-color-hover: var(--spectrum-black); + --spectrum-button-content-color-down: var(--spectrum-black); + --spectrum-button-content-color-focus: var(--spectrum-black); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + } + } + + &.spectrum-Button--staticBlack.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-black); + --spectrum-button-content-color-hover: var(--spectrum-black); + --spectrum-button-content-color-down: var(--spectrum-black); + --spectrum-button-content-color-focus: var(--spectrum-black); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-500); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); + + --spectrum-button-content-color-default: var(--spectrum-black); + --spectrum-button-content-color-hover: var(--spectrum-black); + --spectrum-button-content-color-down: var(--spectrum-black); + --spectrum-button-content-color-focus: var(--spectrum-black); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + } + } + } } diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css index ebc9683da6..0863caadbc 100644 --- a/components/buttongroup/index.css +++ b/components/buttongroup/index.css @@ -11,43 +11,43 @@ governing permissions and limitations under the License. */ .spectrum-ButtonGroup { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); + --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); + --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); } .spectrum-ButtonGroup--sizeS { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-200); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-200); + --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-200); + --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-200); } .spectrum-ButtonGroup--sizeM { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); + --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); + --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); } .spectrum-ButtonGroup--sizeL { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); + --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); + --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); } .spectrum-ButtonGroup--sizeXL { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); + --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); + --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); } .spectrum-ButtonGroup { - display: flex; - flex-wrap: wrap; - gap: var(--mod-buttongroup-spacing-horizontal, var(--spectrum-buttongroup-spacing-horizontal)); - justify-content: var(--mod-buttongroup-justify-content, normal); - - .spectrum-ButtonGroup-item { - flex-shrink: 0; - } + display: flex; + flex-wrap: wrap; + gap: var(--mod-buttongroup-spacing-horizontal, var(--spectrum-buttongroup-spacing-horizontal)); + justify-content: var(--mod-buttongroup-justify-content, normal); + + .spectrum-ButtonGroup-item { + flex-shrink: 0; + } } .spectrum-ButtonGroup--vertical { - display: inline-flex; - flex-direction: column; - gap: var(--mod-buttongroup-spacing-vertical, var(--spectrum-buttongroup-spacing-vertical)); + display: inline-flex; + flex-direction: column; + gap: var(--mod-buttongroup-spacing-vertical, var(--spectrum-buttongroup-spacing-vertical)); } diff --git a/components/calendar/index.css b/components/calendar/index.css index aecc2caf50..69c508c461 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -11,43 +11,43 @@ governing permissions and limitations under the License. */ .spectrum-Calendar { - --spectrum-calendar-day-width: var(--spectrum-component-height-100); - --spectrum-calendar-day-height: var(--spectrum-component-height-100); - --spectrum-calendar-border-radius-reset: 0; - --spectrum-calendar-border-width-reset: 0; - --spectrum-calendar-day-border-size: var(--spectrum-border-width-200); - --spectrum-calendar-margin-y: 24px; - --spectrum-calendar-margin-x: 32px; - --spectrum-calendar-day-padding: 4px; - --spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7); - - --spectrum-calendar-title-text-letter-spacing: 0.06em; - --spectrum-calendar-title-height: 32px; - --spectrum-calendar-title-text-size: var(--spectrum-font-size-300); - - --spectrum-calendar-day-title-text-font-weight: var(--spectrum-bold-font-weight); - --spectrum-calendar-day-title-text-color: var(--spectrum-gray-700); - --spectrum-calendar-day-title-text-size: var(--spectrum-font-size-50); - --spectrum-calendar-day-text-size-han: var(--spectrum-font-size-50); - - --spectrum-calendar-day-text-size: var(--spectrum-font-size-100); - --spectrum-calendar-day-text-color-selected: var(--spectrum-gray-900); - --spectrum-calendar-day-text-color-hover: var(--spectrum-gray-900); - --spectrum-calendar-day-text-color-cap-selected: var(--spectrum-gray-900); - --spectrum-calendar-day-text-font-weight-selected: var(--spectrum-bold-font-weight); - --spectrum-calendar-day-text-font-weight-cap-selected: var(--spectrum-bold-font-weight); - - --spectrum-calendar-day-today-text-color: var(--spectrum-gray-800); - --spectrum-calendar-day-today-text-font-weight: var(--spectrum-bold-font-weight); - --spectrum-calendar-day-today-border-color: var(--spectrum-gray-800); - - --spectrum-calendar-day-today-text-color-disabled: var(--spectrum-gray-500); - --spectrum-calendar-day-today-border-color-disabled: var(--spectrum-gray-400); - --spectrum-calendar-day-text-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-calendar-day-text-color-key-focus: var(--spectrum-gray-900); - - --spectrum-calendar-button-icon-color: var(--spectrum-gray-700); + --spectrum-calendar-day-width: var(--spectrum-component-height-100); + --spectrum-calendar-day-height: var(--spectrum-component-height-100); + --spectrum-calendar-border-radius-reset: 0; + --spectrum-calendar-border-width-reset: 0; + --spectrum-calendar-day-border-size: var(--spectrum-border-width-200); + --spectrum-calendar-margin-y: 24px; + --spectrum-calendar-margin-x: 32px; + --spectrum-calendar-day-padding: 4px; + --spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7); + + --spectrum-calendar-title-text-letter-spacing: 0.06em; + --spectrum-calendar-title-height: 32px; + --spectrum-calendar-title-text-size: var(--spectrum-font-size-300); + + --spectrum-calendar-day-title-text-font-weight: var(--spectrum-bold-font-weight); + --spectrum-calendar-day-title-text-color: var(--spectrum-gray-700); + --spectrum-calendar-day-title-text-size: var(--spectrum-font-size-50); + --spectrum-calendar-day-text-size-han: var(--spectrum-font-size-50); + + --spectrum-calendar-day-text-size: var(--spectrum-font-size-100); + --spectrum-calendar-day-text-color-selected: var(--spectrum-gray-900); + --spectrum-calendar-day-text-color-hover: var(--spectrum-gray-900); + --spectrum-calendar-day-text-color-cap-selected: var(--spectrum-gray-900); + --spectrum-calendar-day-text-font-weight-selected: var(--spectrum-bold-font-weight); + --spectrum-calendar-day-text-font-weight-cap-selected: var(--spectrum-bold-font-weight); + + --spectrum-calendar-day-today-text-color: var(--spectrum-gray-800); + --spectrum-calendar-day-today-text-font-weight: var(--spectrum-bold-font-weight); + --spectrum-calendar-day-today-border-color: var(--spectrum-gray-800); + + --spectrum-calendar-day-today-text-color-disabled: var(--spectrum-gray-500); + --spectrum-calendar-day-today-border-color-disabled: var(--spectrum-gray-400); + --spectrum-calendar-day-text-color-disabled: var(--spectrum-disabled-content-color); + + --spectrum-calendar-day-text-color-key-focus: var(--spectrum-gray-900); + + --spectrum-calendar-button-icon-color: var(--spectrum-gray-700); &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); @@ -55,421 +55,410 @@ governing permissions and limitations under the License. } .spectrum-Calendar { - inline-size: var(--mod-calendar-width, var(--spectrum-calendar-width)); - display: inline-block; + inline-size: var(--mod-calendar-width, var(--spectrum-calendar-width)); + display: inline-block; } .spectrum-Calendar--padded { - margin: var(--mod-calendar-margin-x, var(--spectrum-calendar-margin-x)) var(--mod-calendar-margin-y, var(--spectrum-calendar-margin-y)); + margin: var(--mod-calendar-margin-x, var(--spectrum-calendar-margin-x)) var(--mod-calendar-margin-y, var(--spectrum-calendar-margin-y)); } .spectrum-Calendar-header { - display: flex; - align-items: center; - inline-size: 100%; + display: flex; + align-items: center; + inline-size: 100%; } .spectrum-Calendar-title { - color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-calendar-day-title-text-color))); - font-size: var(--mod-calendar-title-text-size, var(--spectrum-calendar-title-text-size)); - font-weight: bold; - - line-height: var(--mod-calendar-title-height, var(--spectrum-calendar-title-height)); - margin: 0; - order: 1; - flex-grow: 1; - - text-align: center; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-calendar-day-title-text-color))); + font-size: var(--mod-calendar-title-text-size, var(--spectrum-calendar-title-text-size)); + font-weight: bold; + + line-height: var(--mod-calendar-title-height, var(--spectrum-calendar-title-height)); + margin: 0; + order: 1; + flex-grow: 1; + + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .spectrum-Calendar-prevMonth, .spectrum-Calendar-nextMonth { - transform: var(--spectrum-logical-rotation); + transform: var(--spectrum-logical-rotation); - &:not([disabled]) { - color: var(--highcontrast-calendar-button-icon-color, var(--mod-calendar-button-icon-color, var(--spectrum-calendar-button-icon-color))); - } + &:not([disabled]) { + color: var(--highcontrast-calendar-button-icon-color, var(--mod-calendar-button-icon-color, var(--spectrum-calendar-button-icon-color))); + } } .spectrum-Calendar-prevMonth { - order: 0; + order: 0; } .spectrum-Calendar-nextMonth { - order: 2; + order: 2; } .spectrum-Calendar-dayOfWeek { - display: flex; - flex-direction: column; - justify-content: flex-end; - block-size: 100%; + display: flex; + flex-direction: column; + justify-content: flex-end; + block-size: 100%; - inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); + inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); - border-block-end: none !important; /* override abbr styling from normalize.css */ + border-block-end: none !important; /* override abbr styling from normalize.css */ - color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-calendar-day-title-text-color))); - font-size: var(--mod-calendar-day-title-text-size, var(--spectrum-calendar-day-title-text-size)); - font-weight: var(--mod-calendar-day-title-text-font-weight, var(--spectrum-calendar-day-title-text-font-weight)); - text-transform: uppercase; - text-decoration: none !important; /* override abbr styling from normalize.css */ + color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-calendar-day-title-text-color))); + font-size: var(--mod-calendar-day-title-text-size, var(--spectrum-calendar-day-title-text-size)); + font-weight: var(--mod-calendar-day-title-text-font-weight, var(--spectrum-calendar-day-title-text-font-weight)); + text-transform: uppercase; + text-decoration: none !important; /* override abbr styling from normalize.css */ - cursor: default; + cursor: default; - &[title] { - /* Normalize abbr[title] */ - /* Remove the bottom border in Chrome 57- and Firefox 39-. */ - border-block-end: none; + &[title] { + /* Normalize abbr[title] */ + /* Remove the bottom border in Chrome 57- and Firefox 39-. */ + border-block-end: none; - /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ - text-decoration: underline; - text-decoration: underline dotted; + /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ + text-decoration: underline; + text-decoration: underline dotted; - /* Add letter spacing of 0.66px from Typography > Detail issue #407 */ - letter-spacing: var(--mod-calendar-title-text-letter-spacing, var(--spectrum-calendar-title-text-letter-spacing)); - } + /* Add letter spacing of 0.66px from Typography > Detail issue #407 */ + letter-spacing: var(--mod-calendar-title-text-letter-spacing, var(--spectrum-calendar-title-text-letter-spacing)); + } } .spectrum-Calendar-body { - outline: none; + outline: none; } .spectrum-Calendar-table { - table-layout: fixed; + table-layout: fixed; - /* width: 100%; */ + /* width: 100%; */ - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; - user-select: none; + user-select: none; } .spectrum-Calendar-tableCell { - text-align: center; - position: relative; - box-sizing: content-box; - block-size: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height)); - inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); - padding: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)); - - &:focus { - outline: 0; - } + text-align: center; + position: relative; + box-sizing: content-box; + block-size: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height)); + inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); + padding: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)); + + &:focus { + outline: 0; + } } .spectrum-Calendar-date { - /* This is fun, but we need to trick the table so it doesn't size itself in a weird way */ - position: absolute; - display: block; - inset-block-start: 0; - inset-inline-start: 0; - - box-sizing: border-box; - - block-size: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height)); - inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); - margin: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)); - - border-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); - border: var(--mod-calendar-day-border-size, var(--spectrum-calendar-day-border-size)) solid transparent; - - font-size: var(--mod-calendar-day-text-size, var(--spectrum-calendar-day-text-size)); - line-height: calc( - var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) - - var(--mod-calendar-day-border-size, var(--spectrum-calendar-day-border-size)) * 2 - ); - white-space: nowrap; - - cursor: pointer; - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - font-size: var(--mod-calendar-day-text-size-han, var(--spectrum-calendar-day-text-size-han)); - } - - &.is-disabled { - cursor: default; - pointer-events: none; - } - - &.is-outsideMonth { - display: none; - } - - &::before { - content: ""; - position: absolute; - inset-block-start: calc(50% - calc(var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) / 2)); - inset-inline-start: calc( - 50% - calc(var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) / 2) - ); - box-sizing: border-box; - inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); - block-size: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height)); - border-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); - border: var(--mod-calendar-day-border-size, var(--spectrum-calendar-day-border-size)) solid transparent; - } - - &.is-selected:not(.is-range-selection) { - font-weight: var(--mod-calendar-day-text-font-weight-selected, var(--spectrum-calendar-day-text-font-weight-selected)); - - &::before { - /* No highlight for lone selections */ - display: none; - } - } - - &.is-today { - font-weight: var(--mod-calendar-day-today-text-font-weight, var(--spectrum-calendar-day-today-text-font-weight)); - } - - &.is-range-selection { - /* overrides to make the cells appear connected */ - margin: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) 0; - border-width: var(--mod-calendar-border-width-reset, var(--spectrum-calendar-border-width-reset)); - line-height: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height)); - border-radius: var(--mod-calendar-border-radius-reset, var(--spectrum-calendar-border-radius-reset)); - - inline-size: calc( - var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) + - calc(var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) * 2) - ); - - &.is-range-start, - &.is-range-end, - &.is-selection-start, - &.is-selection-end { - inline-size: calc( - var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) + - var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) - ); - } - - &.is-selection-start, - &.is-selection-end { - font-weight: var(--mod-calendar-day-text-font-weight-cap-selected, var(--spectrum-calendar-day-text-font-weight-cap-selected)); - - &::after { - position: absolute; - inset-block-start: 0; - - display: block; - - block-size: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height));; - inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); - - border-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); - - content: ""; - } - } - - &.is-range-start, - &.is-selection-start { - padding-inline-end: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)); - margin-inline-start: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)); - border-start-start-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); - border-end-start-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); - - &::before, - &::after { - inset-inline-start: 0; - } - } - - &.is-range-end, - &.is-selection-end { - padding-inline-start: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)); - margin-inline-end: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)); - border-start-end-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); - border-end-end-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); - - &::before, - &::after { - inset-inline-start: auto; - inset-inline-end: 0; - } - } - - &.is-selection-start.is-selection-end, - &.is-selection-start.is-range-end, - &.is-selection-end.is-range-start, - &.is-range-start.is-range-end { - inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); - border-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); - } - } + /* This is fun, but we need to trick the table so it doesn't size itself in a weird way */ + position: absolute; + display: block; + inset-block-start: 0; + inset-inline-start: 0; + + box-sizing: border-box; + + block-size: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height)); + inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); + margin: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)); + + border-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); + border: var(--mod-calendar-day-border-size, var(--spectrum-calendar-day-border-size)) solid transparent; + + font-size: var(--mod-calendar-day-text-size, var(--spectrum-calendar-day-text-size)); + line-height: calc(var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) - var(--mod-calendar-day-border-size, var(--spectrum-calendar-day-border-size)) * 2); + white-space: nowrap; + + cursor: pointer; + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + font-size: var(--mod-calendar-day-text-size-han, var(--spectrum-calendar-day-text-size-han)); + } + + &.is-disabled { + cursor: default; + pointer-events: none; + } + + &.is-outsideMonth { + display: none; + } + + &::before { + content: ""; + position: absolute; + inset-block-start: calc(50% - calc(var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) / 2)); + inset-inline-start: calc(50% - calc(var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) / 2)); + box-sizing: border-box; + inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); + block-size: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height)); + border-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); + border: var(--mod-calendar-day-border-size, var(--spectrum-calendar-day-border-size)) solid transparent; + } + + &.is-selected:not(.is-range-selection) { + font-weight: var(--mod-calendar-day-text-font-weight-selected, var(--spectrum-calendar-day-text-font-weight-selected)); + + &::before { + /* No highlight for lone selections */ + display: none; + } + } + + &.is-today { + font-weight: var(--mod-calendar-day-today-text-font-weight, var(--spectrum-calendar-day-today-text-font-weight)); + } + + &.is-range-selection { + /* overrides to make the cells appear connected */ + margin: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) 0; + border-width: var(--mod-calendar-border-width-reset, var(--spectrum-calendar-border-width-reset)); + line-height: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height)); + border-radius: var(--mod-calendar-border-radius-reset, var(--spectrum-calendar-border-radius-reset)); + + inline-size: calc(var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) + calc(var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) * 2)); + + &.is-range-start, + &.is-range-end, + &.is-selection-start, + &.is-selection-end { + inline-size: calc(var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) + var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding))); + } + + &.is-selection-start, + &.is-selection-end { + font-weight: var(--mod-calendar-day-text-font-weight-cap-selected, var(--spectrum-calendar-day-text-font-weight-cap-selected)); + + &::after { + position: absolute; + inset-block-start: 0; + + display: block; + + block-size: var(--mod-calendar-day-height, var(--spectrum-calendar-day-height)); + inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); + + border-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); + + content: ""; + } + } + + &.is-range-start, + &.is-selection-start { + padding-inline-end: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)); + margin-inline-start: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)); + border-start-start-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); + border-end-start-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); + + &::before, + &::after { + inset-inline-start: 0; + } + } + + &.is-range-end, + &.is-selection-end { + padding-inline-start: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)); + margin-inline-end: var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)); + border-start-end-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); + border-end-end-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); + + &::before, + &::after { + inset-inline-start: auto; + inset-inline-end: 0; + } + } + + &.is-selection-start.is-selection-end, + &.is-selection-start.is-range-end, + &.is-selection-end.is-range-start, + &.is-range-start.is-range-end { + inline-size: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); + border-radius: var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)); + } + } } .spectrum-Calendar-date { - color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-calendar-day-title-text-color))); - - &:hover { - color: var(--highcontrast-calendar-day-text-color-hover, var(--mod-calendar-day-text-color-hover, var(--spectrum-calendar-day-text-color-hover))); - - &:not(.is-selection-end, .is-selection-start) { - &::before { - background: var(--highcontrast-calendar-day-background-color-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))); - } - } - - &.is-selected:not(.is-selection-end, .is-selection-start)::before { - background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); - } - - &.is-range-selection { - &::before { - background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); - } - } - } - - &:active { - background-color: var(--highcontrast-calendar-day-background-color-down, var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down))); - } - - &.is-selected { - color: var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-calendar-day-text-color-selected))); - background: var(--highcontrast-calendar-day-background-color-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))); - } - - &.is-selected:not(.is-range-selection) { - background: var(--highcontrast-calendar-day-background-color-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))); - } - - &.is-today { - color: var(--highcontrast-calendar-day-today-text-color, var(--mod-calendar-day-today-text-color, var(--spectrum-calendar-day-today-text-color))); - border-color: var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-calendar-day-today-border-color))); - - &::before { - border-color: var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-calendar-day-today-border-color))); - } - - &.is-selected:not(.is-range-selection):hover::before { - background: var(--highcontrast-calendar-day-today-background-color-selected-hover, var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover))); - } - - &.is-disabled { - color: var(--highcontrast-calendar-day-today-text-color-disabled, var(--mod-calendar-day-today-text-color-disabled, var(--spectrum-calendar-day-today-text-color-disabled))); - border-color: var(--highcontrast-calendar-day-today-border-color-disabled, var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-calendar-day-today-border-color-disabled))); - - &::before { - border-color: var(--highcontrast-calendar-day-today-border-color-disabled, var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-calendar-day-today-border-color-disabled))); - } - } - } - - &.is-focused:not(.is-range-selection) { - background: var(--highcontrast-calendar-day-background-color-key-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))); - border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))); - color: var(--highcontrast-calendar-day-text-color-key-focus, var(--mod-calendar-day-text-color-key-focus, var(--spectrum-calendar-day-text-color-key-focus))); - - &.is-today { - border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))); - } - - &:active, - &.is-selected { - color: var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-calendar-day-text-color-selected))); - background: var(--highcontrast-calendar-day-background-color-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))); - border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))); - } - } - - &.is-focused { - &.is-selected { - &::before { - background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); - } - } - - &.is-range-selection { - &::before { - background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); - } - } - - &::before { - border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))); - } - } - - &.is-disabled { - color: var(--highcontrast-calendar-day-text-color-disabled, var(--mod-calendar-day-text-color-disabled, var(--spectrum-calendar-day-text-color-disabled))); - } - - &.is-selection-start, - &.is-selection-end { - color: var(--highcontrast-calendar-day-text-color-cap-selected, var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-calendar-day-text-color-cap-selected))); - - &::after { - background-color: var(--highcontrast-calendar-day-background-color-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))); - } - - &.is-disabled { - color: var(--highcontrast-calendar-day-text-color-disabled, var(--mod-calendar-day-text-color-disabled, var(--spectrum-calendar-day-text-color-disabled))); - } - } + color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-calendar-day-title-text-color))); + + &:hover { + color: var(--highcontrast-calendar-day-text-color-hover, var(--mod-calendar-day-text-color-hover, var(--spectrum-calendar-day-text-color-hover))); + + &:not(.is-selection-end, .is-selection-start) { + &::before { + background: var(--highcontrast-calendar-day-background-color-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))); + } + } + + &.is-selected:not(.is-selection-end, .is-selection-start)::before { + background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); + } + + &.is-range-selection { + &::before { + background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); + } + } + } + + &:active { + background-color: var(--highcontrast-calendar-day-background-color-down, var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down))); + } + + &.is-selected { + color: var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-calendar-day-text-color-selected))); + background: var(--highcontrast-calendar-day-background-color-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))); + } + + &.is-selected:not(.is-range-selection) { + background: var(--highcontrast-calendar-day-background-color-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))); + } + + &.is-today { + color: var(--highcontrast-calendar-day-today-text-color, var(--mod-calendar-day-today-text-color, var(--spectrum-calendar-day-today-text-color))); + border-color: var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-calendar-day-today-border-color))); + + &::before { + border-color: var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-calendar-day-today-border-color))); + } + + &.is-selected:not(.is-range-selection):hover::before { + background: var(--highcontrast-calendar-day-today-background-color-selected-hover, var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover))); + } + + &.is-disabled { + color: var(--highcontrast-calendar-day-today-text-color-disabled, var(--mod-calendar-day-today-text-color-disabled, var(--spectrum-calendar-day-today-text-color-disabled))); + border-color: var(--highcontrast-calendar-day-today-border-color-disabled, var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-calendar-day-today-border-color-disabled))); + + &::before { + border-color: var(--highcontrast-calendar-day-today-border-color-disabled, var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-calendar-day-today-border-color-disabled))); + } + } + } + + &.is-focused:not(.is-range-selection) { + background: var(--highcontrast-calendar-day-background-color-key-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))); + border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))); + color: var(--highcontrast-calendar-day-text-color-key-focus, var(--mod-calendar-day-text-color-key-focus, var(--spectrum-calendar-day-text-color-key-focus))); + + &.is-today { + border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))); + } + + &:active, + &.is-selected { + color: var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-calendar-day-text-color-selected))); + background: var(--highcontrast-calendar-day-background-color-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))); + border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))); + } + } + + &.is-focused { + &.is-selected { + &::before { + background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); + } + } + + &.is-range-selection { + &::before { + background: var(--highcontrast-calendar-day-background-color-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); + } + } + + &::before { + border-color: var(--highcontrast-calendar-day-border-color-key-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))); + } + } + + &.is-disabled { + color: var(--highcontrast-calendar-day-text-color-disabled, var(--mod-calendar-day-text-color-disabled, var(--spectrum-calendar-day-text-color-disabled))); + } + + &.is-selection-start, + &.is-selection-end { + color: var(--highcontrast-calendar-day-text-color-cap-selected, var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-calendar-day-text-color-cap-selected))); + + &::after { + background-color: var(--highcontrast-calendar-day-background-color-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))); + } + + &.is-disabled { + color: var(--highcontrast-calendar-day-text-color-disabled, var(--mod-calendar-day-text-color-disabled, var(--spectrum-calendar-day-text-color-disabled))); + } + } } @media (forced-colors: active) { - .spectrum-Calendar-prevMonth, - .spectrum-Calendar-nextMonth { - --highcontrast-calendar-button-icon-color-disabled: GrayText; - --highcontrast-calendar-button-icon-color: ButtonText; - } - - .spectrum-Calendar-date { - color: CanvasText; - forced-color-adjust: none; - - --highcontrast-calendar-day-background-color-cap-selected: Highlight; - --highcontrast-calendar-day-background-color-down: ButtonFace; - --highcontrast-calendar-day-background-color-hover: Transparent; - --highcontrast-calendar-day-background-color-key-focus: ButtonFace; - --highcontrast-calendar-day-background-color-selected-hover: Transparent; - --highcontrast-calendar-day-background-color-selected: Highlight; - --highcontrast-calendar-day-border-color-key-focus: ButtonText; - --highcontrast-calendar-day-text-color-cap-selected: HighlightText; - --highcontrast-calendar-day-text-color-disabled: GrayText; - --highcontrast-calendar-day-text-color-hover: ButtonText; - --highcontrast-calendar-day-text-color-key-focus: ButtonText; - --highcontrast-calendar-day-text-color-selected-hover: HighlightText; - --highcontrast-calendar-day-text-color-selected: HighlightText; - --highcontrast-calendar-day-title-text-color: CanvasText; - --highcontrast-calendar-day-today-background-color-selected-hover: Highlight; - --highcontrast-calendar-day-today-border-color-disabled: GrayText; - --highcontrast-calendar-day-today-border-color: ButtonText; - --highcontrast-calendar-day-today-text-color-disabled: GrayText; - --highcontrast-calendar-day-today-text-color: ButtonText; - - &.is-range-selection { - &.is-today { - color: HighlightText; - } - - &.is-selection-start::after, - &.is-selection-end::after { - content: none; - } - } - - &.is-disabled { - &.is-range-selection { - background: Highlight; - color: HighlightText; - } - - &.is-selected { - background: Highlight; - color: HighlightText; - } - } - } + .spectrum-Calendar-prevMonth, + .spectrum-Calendar-nextMonth { + --highcontrast-calendar-button-icon-color-disabled: GrayText; + --highcontrast-calendar-button-icon-color: ButtonText; + } + + .spectrum-Calendar-date { + color: CanvasText; + forced-color-adjust: none; + + --highcontrast-calendar-day-background-color-cap-selected: Highlight; + --highcontrast-calendar-day-background-color-down: ButtonFace; + --highcontrast-calendar-day-background-color-hover: Transparent; + --highcontrast-calendar-day-background-color-key-focus: ButtonFace; + --highcontrast-calendar-day-background-color-selected-hover: Transparent; + --highcontrast-calendar-day-background-color-selected: Highlight; + --highcontrast-calendar-day-border-color-key-focus: ButtonText; + --highcontrast-calendar-day-text-color-cap-selected: HighlightText; + --highcontrast-calendar-day-text-color-disabled: GrayText; + --highcontrast-calendar-day-text-color-hover: ButtonText; + --highcontrast-calendar-day-text-color-key-focus: ButtonText; + --highcontrast-calendar-day-text-color-selected-hover: HighlightText; + --highcontrast-calendar-day-text-color-selected: HighlightText; + --highcontrast-calendar-day-title-text-color: CanvasText; + --highcontrast-calendar-day-today-background-color-selected-hover: Highlight; + --highcontrast-calendar-day-today-border-color-disabled: GrayText; + --highcontrast-calendar-day-today-border-color: ButtonText; + --highcontrast-calendar-day-today-text-color-disabled: GrayText; + --highcontrast-calendar-day-today-text-color: ButtonText; + + &.is-range-selection { + &.is-today { + color: HighlightText; + } + + &.is-selection-start::after, + &.is-selection-end::after { + content: none; + } + } + + &.is-disabled { + &.is-range-selection { + background: Highlight; + color: HighlightText; + } + + &.is-selected { + background: Highlight; + color: HighlightText; + } + } + } } diff --git a/components/card/index.css b/components/card/index.css index c03b6a8c9e..1db86d2f64 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -32,12 +32,8 @@ 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); @@ -55,9 +51,7 @@ 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); @@ -65,9 +59,7 @@ 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 */ @@ -98,14 +90,8 @@ governing permissions and limitations under the License. /* Quiet/Gallery */ .spectrum-Card--quiet, .spectrum-Card--gallery { - --mod-card-content-margin-top: var( - --mod-card-content-margin-top-quiet, - var(--spectrum-spacing-100) - ); - --mod-card-minimum-width: var( - --mod-card-minimum-width-quiet, - var(--spectrum-card-minimum-width) - ); + --mod-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100)); + --mod-card-minimum-width: var(--mod-card-minimum-width-quiet, var(--spectrum-card-minimum-width)); } .spectrum-Card { @@ -115,34 +101,15 @@ 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) - ); - - 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-color: var( - --highcontrast-card-border-color, - var(--mod-card-border-color, var(--spectrum-card-border-color)) - ); + 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-color: var(--highcontrast-card-border-color, var(--mod-card-border-color, var(--spectrum-card-border-color))); /* @deprecation --mod-spectrum-card-background-color has been renamed to --mod-card-background-color. The fallback will be removed in a future version. */ - background-color: var( - --highcontrast-card-background-color, - var( - --mod-card-background-color, - var( - --mod-spectrum-card-background-color, - var(--spectrum-card-background-color) - ) - ) - ); + background-color: var(--highcontrast-card-background-color, var(--mod-card-background-color, var(--mod-spectrum-card-background-color, var(--spectrum-card-background-color)))); &::before { content: ""; @@ -165,205 +132,86 @@ 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) - ); - margin-block-start: calc( - -1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) - ); - margin-inline-start: calc( - -1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) - ); + 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))); + margin-inline-start: calc(-1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width))); } &:focus-visible { 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) - ) - ); - 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) - ) - ); + 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))); + 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))); } .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) - ) - ); - 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) - ) - ); + 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))); + 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))); } } &:hover { - border-color: var( - --highcontrast-card-border-color-hover, - var( - --mod-card-border-color-hover, - var(--spectrum-card-border-color-hover) - ) - ); + border-color: var(--highcontrast-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) - ) - ); + border-color: var(--highcontrast-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) - ) - ); + 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))); } } &.is-drop-target { - --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) - ) - ); - box-shadow: 0 0 0 1px - var( - --highcontrast-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) - ); + --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))); + box-shadow: 0 0 0 1px var(--highcontrast-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)); } - &.is-focused, - &.is-selected, - &:focus, - &:hover { - .spectrum-Card-quickActions, - .spectrum-Card-actions { - /* Ideally, this would simply apply is-open to the QuickActions component */ - visibility: visible; - opacity: 1; - pointer-events: all; - } - } + &.is-focused, + &.is-selected, + &:focus, + &:hover { + .spectrum-Card-quickActions, + .spectrum-Card-actions { + /* Ideally, this would simply apply is-open to the QuickActions component */ + visibility: visible; + opacity: 1; + pointer-events: all; + } + } } .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) - ); - 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) - ) - ); - - inset-inline-start: calc( - var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); - inset-block-start: calc( - var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); + 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))); + + inset-inline-start: calc(var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); + inset-block-start: calc(var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); } .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; @@ -371,27 +219,15 @@ governing permissions and limitations under the License. align-items: center; justify-content: center; - border-start-start-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); - border-start-end-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); + border-start-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); + border-start-end-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; border-end-start-radius: 0; 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 { @@ -401,200 +237,73 @@ 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 { /* @deprecation --mod-card-title-padding-top has been renamed to --mod-card-body-padding-block-start 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) - ) - ); - padding-inline-end: var( - --mod-card-body-padding-inline-end, - calc( - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ) - ); - padding-inline-start: var( - --mod-card-body-padding-inline-start, - calc( - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ) - ); - padding-block-end: var( - --mod-card-body-padding-block-end, - calc( - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ) - ); + padding-block-start: var(--mod-card-body-padding-block-start, var(--mod-card-title-padding-top, var(--spectrum-card-title-padding-top))); + padding-inline-end: var(--mod-card-body-padding-inline-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width)))); + padding-inline-start: var(--mod-card-body-padding-inline-start, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width)))); + padding-block-end: var(--mod-card-body-padding-block-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width)))); } .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; align-items: center; - color: var( - --highcontrast-card-body-font-color, - var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)) - ); + color: var(--highcontrast-card-body-font-color, var(--mod-card-body-font-color, var(--spectrum-card-body-font-color))); } .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) - ); - color: var( - --highcontrast-card-title-font-color, - var(--mod-card-title-font-color, var(--spectrum-card-title-font-color)) - ); + 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))); } .spectrum-Card-subtitle { - 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)) - ); + 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))); text-transform: none; } .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) - ); - color: var( - --highcontrast-card-body-font-color, - var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)) - ); + 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))); } .spectrum-Card-footer { /* Accommodate for wanting less spacing between body and footer */ - margin-block-start: var( - --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) - )) - ) - ); - margin-inline-start: var( - --mod-card-footer-margin-inline-start, - 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) - ) - ); - padding-block-end: var( - --mod-card-footer-padding-block-end, - calc( - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ) - ); + margin-block-start: var(--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))))); + margin-inline-start: var(--mod-card-footer-margin-inline-start, 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))); + padding-block-end: var(--mod-card-footer-padding-block-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width)))); /* @deprecation --mod-card-footer-margin-top has been renamed to --mod-card-footer-padding-block-start 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) - ) - ); - - 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) - ) - solid var(--mod-card-divider-color, var(--spectrum-card-divider-color)); + padding-block-start: var(--mod-card-footer-padding-block-start, 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)) solid var(--mod-card-divider-color, var(--spectrum-card-divider-color)); } .spectrum-Card-header { @@ -612,11 +321,7 @@ 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) - ) - solid transparent; + border: var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) solid transparent; } &:focus, @@ -627,10 +332,7 @@ 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)); } } @@ -638,21 +340,8 @@ governing permissions and limitations under the License. .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) - ) - ); + 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))); } } } @@ -660,10 +349,7 @@ 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; @@ -675,21 +361,9 @@ governing permissions and limitations under the License. } .spectrum-Card-preview { - border-radius: var( - --mod-card-corner-radius, - var(--spectrum-card-corner-radius) - ); - background-color: var( - --mod-card-preview-background-color, - var( - --mod-card-background-color, - var(--spectrum-card-preview-background-color) - ) - ); - min-block-size: var( - --mod-card-preview-minimum-height, - var(--spectrum-card-preview-minimum-height) - ); + border-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)); + background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-card-preview-background-color))); + min-block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height)); inline-size: 100%; flex: 1; margin: 0 auto; @@ -697,8 +371,7 @@ governing permissions and limitations under the License. position: relative; /* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */ - transition: background-color - var(--mod-card-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))); + transition: background-color var(--mod-card-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))); overflow: visible; /* Use ::before to show the selected overlay */ @@ -724,19 +397,9 @@ governing permissions and limitations under the License. border-style: solid; border-color: transparent; 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) - ) - ); - margin-block-start: calc( - -1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) - ); - margin-inline-start: calc( - -1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) - ); + 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))); + margin-block-start: calc(-1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width))); + margin-inline-start: calc(-1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width))); } } @@ -744,13 +407,7 @@ governing permissions and limitations under the License. border-color: transparent; .spectrum-Card-preview { - background-color: var( - --mod-card-preview-background-color-hover, - var( - --mod-card-background-color-hover, - var(--spectrum-card-preview-background-color-hover) - ) - ); + background-color: var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-card-preview-background-color-hover))); } } @@ -761,48 +418,23 @@ governing permissions and limitations under the License. .spectrum-Card-preview { transition: none; - background-color: var( - --mod-card-preview-background-color, - var( - --mod-card-background-color, - var(--spectrum-card-preview-background-color) - ) - ); + background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-card-preview-background-color))); } .spectrum-Card-preview::before { - 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) - ); + 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)); } } &.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) - ) - ); + 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))); } } .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 { @@ -820,10 +452,7 @@ 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)); } } @@ -839,18 +468,9 @@ 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, @@ -873,18 +493,15 @@ 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)); } } .spectrum-Card--gallery { - min-inline-size: 0; + min-inline-size: 0; - .spectrum-Card-preview { - padding: 0; - border-radius: 0; - } + .spectrum-Card-preview { + padding: 0; + border-radius: 0; + } } diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 9d467bd101..b32f5da8af 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -20,587 +20,586 @@ governing permissions and limitations under the License. /* Component tokens by t-shirt size */ .spectrum-Checkbox { - /* Color */ - --spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-checkbox-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75); - - --spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900); - --spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); - --spectrum-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - - --spectrum-checkbox-emphasized-color-default: var(--spectrum-accent-color-900); - --spectrum-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); - --spectrum-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); - --spectrum-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); - - --spectrum-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default); - --spectrum-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - /* Font */ - --spectrum-checkbox-font-size: var(--spectrum-font-size-100); - --spectrum-checkbox-line-height: var(--spectrum-line-height-100); - --spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - - /* Size */ - --spectrum-checkbox-height: var(--spectrum-component-height-100); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); - --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - - --spectrum-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - - --spectrum-checkbox-border-width: var(--spectrum-border-width-200);; - --spectrum-checkbox-selected-border-width: calc(var(--spectrum-checkbox-control-size) / 2); - - /* Spacing */ - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); - --spectrum-checkbox-animation-duration: var(--spectrum-animation-duration-100); + /* Color */ + --spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-checkbox-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color); + + --spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75); + + --spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900); + --spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); + --spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --spectrum-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); + + --spectrum-checkbox-emphasized-color-default: var(--spectrum-accent-color-900); + --spectrum-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); + --spectrum-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); + --spectrum-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); + + --spectrum-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default); + --spectrum-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --spectrum-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down); + --spectrum-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); + + /* Font */ + --spectrum-checkbox-font-size: var(--spectrum-font-size-100); + --spectrum-checkbox-line-height: var(--spectrum-line-height-100); + --spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + + /* Size */ + --spectrum-checkbox-height: var(--spectrum-component-height-100); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); + --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + + --spectrum-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + + --spectrum-checkbox-border-width: var(--spectrum-border-width-200); + --spectrum-checkbox-selected-border-width: calc(var(--spectrum-checkbox-control-size) / 2); + + /* Spacing */ + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --spectrum-checkbox-animation-duration: var(--spectrum-animation-duration-100); } .spectrum-Checkbox--sizeS { - --spectrum-checkbox-font-size: var(--spectrum-font-size-75); + --spectrum-checkbox-font-size: var(--spectrum-font-size-75); - --spectrum-checkbox-height: var(--spectrum-component-height-75); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small); + --spectrum-checkbox-height: var(--spectrum-component-height-75); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75); } .spectrum-Checkbox--sizeM { - --spectrum-checkbox-font-size: var(--spectrum-font-size-100); + --spectrum-checkbox-font-size: var(--spectrum-font-size-100); - --spectrum-checkbox-height: var(--spectrum-component-height-100); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); + --spectrum-checkbox-height: var(--spectrum-component-height-100); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); } .spectrum-Checkbox--sizeL { - --spectrum-checkbox-font-size: var(--spectrum-font-size-200); + --spectrum-checkbox-font-size: var(--spectrum-font-size-200); - --spectrum-checkbox-height: var(--spectrum-component-height-200); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large); + --spectrum-checkbox-height: var(--spectrum-component-height-200); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200); } .spectrum-Checkbox--sizeXL { - --spectrum-checkbox-font-size: var(--spectrum-font-size-300); + --spectrum-checkbox-font-size: var(--spectrum-font-size-300); - --spectrum-checkbox-height: var(--spectrum-component-height-300); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large); + --spectrum-checkbox-height: var(--spectrum-component-height-300); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300); } /* stylelint-disable max-nesting-depth */ /* Default Unchecked */ .spectrum-Checkbox { - color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); - - display: inline-flex; - align-items: flex-start; - - position: relative; - - min-block-size: var(--mod-checkbox-height, var(--spectrum-checkbox-height)); - max-inline-size: 100%; - - vertical-align: top; - - &:hover { - .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-color-hover, var(--spectrum-checkbox-control-color-hover))); - } - - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover))); - } - - .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-hover, var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))); - } - } - - &:active { - .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-color-down, var(--spectrum-checkbox-control-color-down))); - } - - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down))); - } - - .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-down, var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down))); - } - } - - /* Selected Invalid */ - &.is-invalid { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-default, var(--spectrum-checkbox-invalid-color-default))); - } - } - - &.is-indeterminate .spectrum-Checkbox-input:focus-visible, - .spectrum-Checkbox-input:focus-visible { - & + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); - } - } - } - - &:hover { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); - } - } - } - } - - /* + color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); + + display: inline-flex; + align-items: flex-start; + + position: relative; + + min-block-size: var(--mod-checkbox-height, var(--spectrum-checkbox-height)); + max-inline-size: 100%; + + vertical-align: top; + + &:hover { + .spectrum-Checkbox-box::before { + border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-color-hover, var(--spectrum-checkbox-control-color-hover))); + } + + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before { + border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover))); + } + + .spectrum-Checkbox-label { + color: var(--highcontrast-checkbox-content-color-hover, var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))); + } + } + + &:active { + .spectrum-Checkbox-box::before { + border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-color-down, var(--spectrum-checkbox-control-color-down))); + } + + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before { + border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down))); + } + + .spectrum-Checkbox-label { + color: var(--highcontrast-checkbox-content-color-down, var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down))); + } + } + + /* Selected Invalid */ + &.is-invalid { + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-default, var(--spectrum-checkbox-invalid-color-default))); + } + } + + &.is-indeterminate .spectrum-Checkbox-input:focus-visible, + .spectrum-Checkbox-input:focus-visible { + & + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); + } + } + } + + &:hover { + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); + } + } + } + } + + /* * Read-Only * * readonly is not a valid attribute for input[type="checkbox"] * so we borrow the immutability of a disabled checkbox * while using the colors of a default checkbox */ - &.is-readOnly { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - - &:hover { - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - } - } - } - - &:active { - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-selected-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - } - } - } - } - - &.is-readOnly .spectrum-Checkbox-input, - &.is-readOnly .spectrum-Checkbox-input:checked { - &:disabled + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); - } - } - - &:disabled ~ .spectrum-Checkbox-label { - forced-color-adjust: none; - color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); - } - } - - /* Indeterminate */ - &.is-indeterminate { - .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); - } - - .spectrum-Checkbox-checkmark { - display: none; - } - - .spectrum-Checkbox-partialCheckmark { - display: block; - - transform: scale(1); - opacity: 1; - } - } - - .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus))); - } - } - - &:hover { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover))); - } - } - } - } - - /* Invalid Indeterminate */ - &.is-invalid.is-indeterminate { - .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-default, var(--spectrum-checkbox-invalid-color-default))); - border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); - } - } - - &:hover { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); - } - } - - .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-hover, var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))); - } - } - } + &.is-readOnly { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); + + &:hover { + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); + } + } + } + + &:active { + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-selected-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); + } + } + } + } + + &.is-readOnly .spectrum-Checkbox-input, + &.is-readOnly .spectrum-Checkbox-input:checked { + &:disabled + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); + background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); + } + } + + &:disabled ~ .spectrum-Checkbox-label { + forced-color-adjust: none; + color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); + } + } + + /* Indeterminate */ + &.is-indeterminate { + .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); + border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); + } + + .spectrum-Checkbox-checkmark { + display: none; + } + + .spectrum-Checkbox-partialCheckmark { + display: block; + + transform: scale(1); + opacity: 1; + } + } + + .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus))); + } + } + + &:hover { + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover))); + } + } + } + } + + /* Invalid Indeterminate */ + &.is-invalid.is-indeterminate { + .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-default, var(--spectrum-checkbox-invalid-color-default))); + border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); + } + } + + &:hover { + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); + } + } + + .spectrum-Checkbox-label { + color: var(--highcontrast-checkbox-content-color-hover, var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))); + } + } + } } /* stylelint-enable max-nesting-depth */ /* Emphasized */ .spectrum-Checkbox--emphasized { - /* Checked and Indeterminate Default States */ - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-emphasized-color-default, var(--spectrum-checkbox-emphasized-color-default))); - } - } - - /* Hover for Checked and Indeterminate States */ - &:hover { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover))); - } - } - } - - /* Selected and Indeterminate Focus States */ - .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-emphasized-color-focus, var(--spectrum-checkbox-emphasized-color-focus))); - } - } - - /* Selected Invalid Focus State */ - &.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-focus, var(--spectrum-checkbox-invalid-color-focus))); - } - } - - /* Invalid Hover States */ - &.is-invalid:hover { - &.is-indeterminate .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); - } - } - } - - /* Selected and Indeterminate Hover States */ - &:hover { - &.is-indeterminate .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover))); - } - } - } - - /* Selected and Indeterminate Active States */ - &:active { - &.is-indeterminate .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-emphasized-color-down, var(--spectrum-checkbox-emphasized-color-down))); - } - } - } - - /* Invalid Active State */ - &.is-invalid:active { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-invalid-color-down, var(--spectrum-checkbox-invalid-color-down))); - } - } - } - - /* Focus State */ - &:focus-visible { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))); - } - } - } + /* Checked and Indeterminate Default States */ + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + &.is-indeterminate .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-emphasized-color-default, var(--spectrum-checkbox-emphasized-color-default))); + } + } + + /* Hover for Checked and Indeterminate States */ + &:hover { + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + &.is-indeterminate .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover))); + } + } + } + + /* Selected and Indeterminate Focus States */ + .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box, + &.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-emphasized-color-focus, var(--spectrum-checkbox-emphasized-color-focus))); + } + } + + /* Selected Invalid Focus State */ + &.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-focus, var(--spectrum-checkbox-invalid-color-focus))); + } + } + + /* Invalid Hover States */ + &.is-invalid:hover { + &.is-indeterminate .spectrum-Checkbox-box, + &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); + } + } + } + + /* Selected and Indeterminate Hover States */ + &:hover { + &.is-indeterminate .spectrum-Checkbox-box, + &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover))); + } + } + } + + /* Selected and Indeterminate Active States */ + &:active { + &.is-indeterminate .spectrum-Checkbox-box, + &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-emphasized-color-down, var(--spectrum-checkbox-emphasized-color-down))); + } + } + } + + /* Invalid Active State */ + &.is-invalid:active { + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-invalid-color-down, var(--spectrum-checkbox-invalid-color-down))); + } + } + } + + /* Focus State */ + &:focus-visible { + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))); + } + } + } } .spectrum-Checkbox-label { - text-align: start; - margin-inline-start: var(--mod-checkbox-text-to-control, var(--spectrum-checkbox-text-to-control)); - margin-block-start: var(--mod-checkbox-top-to-text, var(--spectrum-checkbox-top-to-text)); + text-align: start; + margin-inline-start: var(--mod-checkbox-text-to-control, var(--spectrum-checkbox-text-to-control)); + margin-block-start: var(--mod-checkbox-top-to-text, var(--spectrum-checkbox-top-to-text)); - font-size: var(--mod-checkbox-font-size, var(--spectrum-checkbox-font-size)); + font-size: var(--mod-checkbox-font-size, var(--spectrum-checkbox-font-size)); - /* TODO Use font-weight and font-style tokens */ - /* font-weight: var(--spectrum-checkbox-text-font-weight); */ - /* font-style: var(--spectrum-checkbox-text-font-style); */ + /* TODO Use font-weight and font-style tokens */ + /* font-weight: var(--spectrum-checkbox-text-font-weight); */ + /* font-style: var(--spectrum-checkbox-text-font-style); */ - transition: color var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; + transition: color var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; - line-height: var(--mod-checkbox-line-height, var(--spectrum-checkbox-line-height)); + line-height: var(--mod-checkbox-line-height, var(--spectrum-checkbox-line-height)); - &:lang(ja), - &:lang(zh), - &:lang(ko) { - line-height: var(--mod-checkbox-line-height-cjk, var(--spectrum-checkbox-line-height-cjk)); - } + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-checkbox-line-height-cjk, var(--spectrum-checkbox-line-height-cjk)); + } } .spectrum-Checkbox-input { - color: var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default)); - - /* Change the font styles in all browsers for input. */ - font-family: inherit; - font-size: 100%; - line-height: 1.15; - - /* Remove the margin for input in Firefox and Safari. */ - margin: 0; - - /* Show the overflow for input in Edge. */ - overflow: visible; - - /* Add the correct box sizing for [type="checkbox"] in IE 10-. */ - box-sizing: border-box; - - /* Remove the padding for [type="checkbox"] in IE 10-. */ - padding: 0; - - position: absolute; - inline-size: 100%; - block-size: 100%; - - opacity: 0.0001; - z-index: 1; - - cursor: pointer; - - &:disabled { - cursor: default; - } - - /* Selected */ - &:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - background-color: var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)); - border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); - } - - .spectrum-Checkbox-checkmark { - transform: scale(1); - opacity: 1; - } - } - - /* Focus */ - &:focus-visible + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))); - } - - &::after { - forced-color-adjust: none; - box-shadow: - 0 0 0 var(--mod-checkbox-focus-indicator-thinkness, var(--spectrum-checkbox-focus-indicator-thickness)) - var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); - margin: calc(var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)) * -1); - } - } - - &:focus-visible + .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-focus, var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus))); - } - - /* Selected and Focus */ - &:focus-visible:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus))); - } - } + color: var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default)); + + /* Change the font styles in all browsers for input. */ + font-family: inherit; + font-size: 100%; + line-height: 1.15; + + /* Remove the margin for input in Firefox and Safari. */ + margin: 0; + + /* Show the overflow for input in Edge. */ + overflow: visible; + + /* Add the correct box sizing for [type="checkbox"] in IE 10-. */ + box-sizing: border-box; + + /* Remove the padding for [type="checkbox"] in IE 10-. */ + padding: 0; + + position: absolute; + inline-size: 100%; + block-size: 100%; + + opacity: 0.0001; + z-index: 1; + + cursor: pointer; + + &:disabled { + cursor: default; + } + + /* Selected */ + &:checked + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); + background-color: var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)); + border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); + } + + .spectrum-Checkbox-checkmark { + transform: scale(1); + opacity: 1; + } + } + + /* Focus */ + &:focus-visible + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))); + } + + &::after { + forced-color-adjust: none; + box-shadow: 0 0 0 var(--mod-checkbox-focus-indicator-thinkness, var(--spectrum-checkbox-focus-indicator-thickness)) var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); + margin: calc(var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)) * -1); + } + } + + &:focus-visible + .spectrum-Checkbox-label { + color: var(--highcontrast-checkbox-content-color-focus, var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus))); + } + + /* Selected and Focus */ + &:focus-visible:checked + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus))); + } + } } .spectrum-Checkbox-box { - display: flex; - align-items: center; - justify-content: center; - - position: relative; - box-sizing: border-box; - inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - - /* Fix vertical alignment when not wrapping since we're flex-start */ - --spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size))); - margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0; - - flex-grow: 0; - flex-shrink: 0; - - &::before { - forced-color-adjust: none; - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))); - - display: block; - z-index: 0; - content: ''; - box-sizing: border-box; - position: absolute; - - inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - - border-radius: var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)); - border-width: var(--mod-checkbox-border-width, var(--spectrum-checkbox-border-width)); - border-style: solid; - - transition: - border var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out, - box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; - } - - &::after { - border-radius: calc(var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)) + var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap))); - content: ''; - display: block; - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - inset-block-end: 0; - inset-block-start: 0; - margin: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)); - - transition: - box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out, - margin var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out; - - /* force ff to render on the pixel grid */ - transform: translate(0, 0); - } + display: flex; + align-items: center; + justify-content: center; + + position: relative; + box-sizing: border-box; + inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); + block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); + + /* Fix vertical alignment when not wrapping since we're flex-start */ + --spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size))); + margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0; + + flex-grow: 0; + flex-shrink: 0; + + &::before { + forced-color-adjust: none; + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))); + + display: block; + z-index: 0; + content: ""; + box-sizing: border-box; + position: absolute; + + inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); + block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); + + border-radius: var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)); + border-width: var(--mod-checkbox-border-width, var(--spectrum-checkbox-border-width)); + border-style: solid; + + transition: + border var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out, + box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; + } + + &::after { + border-radius: calc(var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)) + var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap))); + content: ""; + display: block; + position: absolute; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; + inset-block-start: 0; + margin: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)); + + transition: + box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out, + margin var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out; + + /* force ff to render on the pixel grid */ + transform: translate(0, 0); + } } .spectrum-Checkbox { - .spectrum-Checkbox-checkmark, - .spectrum-Checkbox-partialCheckmark { - color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); - opacity: 0; - transform: scale(0); - - transition: opacity var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out, transform var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; - } - - .spectrum-Checkbox-partialCheckmark { - display: none; - } + .spectrum-Checkbox-checkmark, + .spectrum-Checkbox-partialCheckmark { + color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); + opacity: 0; + transform: scale(0); + + transition: + opacity var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out, + transform var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; + } + + .spectrum-Checkbox-partialCheckmark { + display: none; + } } /* Disabled */ .spectrum-Checkbox .spectrum-Checkbox-input, .spectrum-Checkbox .spectrum-Checkbox-input:checked { - &:disabled + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled))); - - background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); - } - } - - &:disabled ~ .spectrum-Checkbox-label { - forced-color-adjust: none; - color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-content-color-disabled))); - } + &:disabled + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled))); + + background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); + } + } + + &:disabled ~ .spectrum-Checkbox-label { + forced-color-adjust: none; + color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-content-color-disabled))); + } } /* Windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Checkbox-input { - &:focus-visible + .spectrum-Checkbox-box { - forced-color-adjust: none; - outline-color: var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); - outline-style: auto; - outline-offset: var(--highcontrast-checkbox-focus-indicator-gap, var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap))); - /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */ - outline-width: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); - - &::after { - box-shadow: - 0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); - } - } - } - - .spectrum-Checkbox { - /* Label Text */ - --highcontrast-checkbox-content-color-default: CanvasText; - --highcontrast-checkbox-content-color-hover: CanvasText; - --highcontrast-checkbox-content-color-down: CanvasText; - --highcontrast-checkbox-content-color-focus: CanvasText; - - /* Checkbox box */ - --highcontrast-checkbox-background-color-default: Canvas; - - --highcontrast-checkbox-color-default: ButtonText; - --highcontrast-checkbox-color-hover: ButtonText; - --highcontrast-checkbox-color-focus: Highlight; - - --highcontrast-checkbox-highlight-color-default: Highlight; - --highcontrast-checkbox-highlight-color-hover: Highlight; - --highcontrast-checkbox-highlight-color-down: Highlight; - --highcontrast-checkbox-highlight-color-focus: Highlight; - - --highcontrast-checkbox-disabled-color-default: GrayText; - --highcontrast-checkbox-focus-indicator-color: CanvasText; - } + .spectrum-Checkbox-input { + &:focus-visible + .spectrum-Checkbox-box { + forced-color-adjust: none; + outline-color: var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); + outline-style: auto; + outline-offset: var(--highcontrast-checkbox-focus-indicator-gap, var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap))); + /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */ + outline-width: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); + + &::after { + box-shadow: 0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); + } + } + } + + .spectrum-Checkbox { + /* Label Text */ + --highcontrast-checkbox-content-color-default: CanvasText; + --highcontrast-checkbox-content-color-hover: CanvasText; + --highcontrast-checkbox-content-color-down: CanvasText; + --highcontrast-checkbox-content-color-focus: CanvasText; + + /* Checkbox box */ + --highcontrast-checkbox-background-color-default: Canvas; + + --highcontrast-checkbox-color-default: ButtonText; + --highcontrast-checkbox-color-hover: ButtonText; + --highcontrast-checkbox-color-focus: Highlight; + + --highcontrast-checkbox-highlight-color-default: Highlight; + --highcontrast-checkbox-highlight-color-hover: Highlight; + --highcontrast-checkbox-highlight-color-down: Highlight; + --highcontrast-checkbox-highlight-color-focus: Highlight; + + --highcontrast-checkbox-disabled-color-default: GrayText; + --highcontrast-checkbox-focus-indicator-color: CanvasText; + } } diff --git a/components/checkbox/themes/express.css b/components/checkbox/themes/express.css index 02ceeaf5a8..dc1663477d 100644 --- a/components/checkbox/themes/express.css +++ b/components/checkbox/themes/express.css @@ -13,10 +13,10 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-gray-800); - --spectrum-checkbox-control-color-hover: var(--spectrum-gray-900); - --spectrum-checkbox-control-color-down: var(--spectrum-gray-900); - --spectrum-checkbox-control-color-focus: var(--spectrum-gray-900); - } + .spectrum-Checkbox { + --spectrum-checkbox-control-color-default: var(--spectrum-gray-800); + --spectrum-checkbox-control-color-hover: var(--spectrum-gray-900); + --spectrum-checkbox-control-color-down: var(--spectrum-gray-900); + --spectrum-checkbox-control-color-focus: var(--spectrum-gray-900); + } } diff --git a/components/checkbox/themes/spectrum.css b/components/checkbox/themes/spectrum.css index 62d8099dc2..7d8b6d69d5 100644 --- a/components/checkbox/themes/spectrum.css +++ b/components/checkbox/themes/spectrum.css @@ -11,10 +11,10 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-gray-600); - --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); - --spectrum-checkbox-control-color-down: var(--spectrum-gray-800); - --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); - } + .spectrum-Checkbox { + --spectrum-checkbox-control-color-default: var(--spectrum-gray-600); + --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); + --spectrum-checkbox-control-color-down: var(--spectrum-gray-800); + --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); + } } diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index fc8a4437db..4742c88ba4 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -13,125 +13,125 @@ governing permissions and limitations under the License. @import "./themes/express.css"; .spectrum-ClearButton { - --spectrum-clear-button-height: var(--spectrum-component-height-100); - --spectrum-clear-button-width: var(--spectrum-component-height-100); - --spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - - --spectrum-clear-button-icon-color: var(--spectrum-neutral-content-color-default); - --spectrum-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - &.spectrum-ClearButton--sizeS { - --spectrum-clear-button-height: var(--spectrum-component-height-75); - --spectrum-clear-button-width: var(--spectrum-component-height-75); - } - - &.spectrum-ClearButton--sizeL { - --spectrum-clear-button-height: var(--spectrum-component-height-200); - --spectrum-clear-button-width: var(--spectrum-component-height-200); - } - - &.spectrum-ClearButton--sizeXL { - --spectrum-clear-button-height: var(--spectrum-component-height-300); - --spectrum-clear-button-width: var(--spectrum-component-height-300); - } - - &.spectrum-ClearButton--quiet { - --mod-clear-button-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); - --mod-clear-button-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); - --mod-clear-button-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); - --mod-clear-button-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); - } - - &.spectrum-ClearButton--overBackground { - --mod-clear-button-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); - --mod-clear-button-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); - --mod-clear-button-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); - --mod-clear-button-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); - - --mod-clear-button-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); - --mod-clear-button-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - --mod-clear-button-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); - --mod-clear-button-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - } - - &:disabled, - &.is-disabled { - --mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --mod-clear-button-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --mod-clear-button-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent); - } + --spectrum-clear-button-height: var(--spectrum-component-height-100); + --spectrum-clear-button-width: var(--spectrum-component-height-100); + --spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); + + --spectrum-clear-button-icon-color: var(--spectrum-neutral-content-color-default); + --spectrum-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + + &.spectrum-ClearButton--sizeS { + --spectrum-clear-button-height: var(--spectrum-component-height-75); + --spectrum-clear-button-width: var(--spectrum-component-height-75); + } + + &.spectrum-ClearButton--sizeL { + --spectrum-clear-button-height: var(--spectrum-component-height-200); + --spectrum-clear-button-width: var(--spectrum-component-height-200); + } + + &.spectrum-ClearButton--sizeXL { + --spectrum-clear-button-height: var(--spectrum-component-height-300); + --spectrum-clear-button-width: var(--spectrum-component-height-300); + } + + &.spectrum-ClearButton--quiet { + --mod-clear-button-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); + --mod-clear-button-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); + --mod-clear-button-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); + --mod-clear-button-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); + } + + &.spectrum-ClearButton--overBackground { + --mod-clear-button-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); + --mod-clear-button-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); + --mod-clear-button-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); + --mod-clear-button-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); + + --mod-clear-button-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); + --mod-clear-button-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); + --mod-clear-button-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); + --mod-clear-button-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); + } + + &:disabled, + &.is-disabled { + --mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color)); + --mod-clear-button-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); + --mod-clear-button-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); + --mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent); + } } .spectrum-ClearButton { - block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height)); - inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width)); - border-radius: 100%; - cursor: pointer; - - background-color: var(--mod-clear-button-background-color, transparent); - margin: 0; - padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding)); - - border: none; - color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color)); - - > .spectrum-Icon { - /* @safari10 Workaround for https://bugs.webkit.org/show_bug.cgi?id=169700 */ - margin-block: 0; - margin-inline: auto; - } - - &:hover { - color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))); - - .spectrum-ClearButton-fill { - background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover)); - } - } - - &:active { - color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down)); - - .spectrum-ClearButton-fill { - background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down)); - } - } - - &:focus-visible, - &:focus-within { - color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus)); - - .spectrum-ClearButton-fill { - background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus)); - } - } + block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height)); + inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width)); + border-radius: 100%; + cursor: pointer; + + background-color: var(--mod-clear-button-background-color, transparent); + margin: 0; + padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding)); + + border: none; + color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color)); + + > .spectrum-Icon { + /* @safari10 Workaround for https://bugs.webkit.org/show_bug.cgi?id=169700 */ + margin-block: 0; + margin-inline: auto; + } + + &:hover { + color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))); + + .spectrum-ClearButton-fill { + background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover)); + } + } + + &:active { + color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down)); + + .spectrum-ClearButton-fill { + background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down)); + } + } + + &:focus-visible, + &:focus-within { + color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus)); + + .spectrum-ClearButton-fill { + background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus)); + } + } } .spectrum-ClearButton-fill { - background-color: var(--mod-clear-button-background-color, var(--spectrum-clear-button-background-color)); + background-color: var(--mod-clear-button-background-color, var(--spectrum-clear-button-background-color)); - inline-size: 100%; - block-size: 100%; - border-radius: 100%; + inline-size: 100%; + block-size: 100%; + border-radius: 100%; - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } .spectrum-ClearButton--overBackground { - &:focus-visible { - outline: none; - } + &:focus-visible { + outline: none; + } } @media (forced-colors: active) { - .spectrum-ClearButton { - &:not(:disabled) { - --highcontrast-clear-button-icon-color-hover: Highlight; - } - } + .spectrum-ClearButton { + &:not(:disabled) { + --highcontrast-clear-button-icon-color-hover: Highlight; + } + } } diff --git a/components/clearbutton/themes/express.css b/components/clearbutton/themes/express.css index b7e935e3ec..d450fef8be 100644 --- a/components/clearbutton/themes/express.css +++ b/components/clearbutton/themes/express.css @@ -12,10 +12,10 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-ClearButton { - --spectrum-clear-button-background-color: var(--spectrum-gray-200); - --spectrum-clear-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-clear-button-background-color-down: var(--spectrum-gray-400); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-300); - } + .spectrum-ClearButton { + --spectrum-clear-button-background-color: var(--spectrum-gray-200); + --spectrum-clear-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-clear-button-background-color-down: var(--spectrum-gray-400); + --spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-300); + } } diff --git a/components/clearbutton/themes/spectrum.css b/components/clearbutton/themes/spectrum.css index e7831a5d31..23a10da8f9 100644 --- a/components/clearbutton/themes/spectrum.css +++ b/components/clearbutton/themes/spectrum.css @@ -10,11 +10,10 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-ClearButton { - --spectrum-clear-button-background-color: transparent; - --spectrum-clear-button-background-color-hover: transparent; - --spectrum-clear-button-background-color-down: transparent; - --spectrum-clear-button-background-color-key-focus: transparent; - - } + .spectrum-ClearButton { + --spectrum-clear-button-background-color: transparent; + --spectrum-clear-button-background-color-hover: transparent; + --spectrum-clear-button-background-color-down: transparent; + --spectrum-clear-button-background-color-key-focus: transparent; + } } diff --git a/components/closebutton/index.css b/components/closebutton/index.css index 24c5eb98ca..811d7cde0b 100644 --- a/components/closebutton/index.css +++ b/components/closebutton/index.css @@ -20,268 +20,266 @@ governing permissions and limitations under the License. @import "@spectrum-css/commons/basebutton.css"; .spectrum-CloseButton { - /* Hardcoded tokens */ - --spectrum-closebutton-size-300: 24px; - --spectrum-closebutton-size-400: 32px; - --spectrum-closebutton-size-500: 40px; - --spectrum-closebutton-size-600: 48px; - - /* Cross icon */ - --spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-closebutton-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color); - - /* Focus ring */ - --spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color); - - /* Size */ - --spectrum-closebutton-height: var(--spectrum-component-height-100); - --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-400); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400); - - --spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100); + /* Hardcoded tokens */ + --spectrum-closebutton-size-300: 24px; + --spectrum-closebutton-size-400: 32px; + --spectrum-closebutton-size-500: 40px; + --spectrum-closebutton-size-600: 48px; + + /* Cross icon */ + --spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-closebutton-icon-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color); + + /* Focus ring */ + --spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color); + + /* Size */ + --spectrum-closebutton-height: var(--spectrum-component-height-100); + --spectrum-closebutton-width: var(--spectrum-closebutton-height); + --spectrum-closebutton-size: var(--spectrum-closebutton-size-400); + --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400); + + --spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100); } .spectrum-Closebutton--sizeS { - --spectrum-closebutton-height: var(--spectrum-component-height-75); - --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-300); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-300); + --spectrum-closebutton-height: var(--spectrum-component-height-75); + --spectrum-closebutton-width: var(--spectrum-closebutton-height); + --spectrum-closebutton-size: var(--spectrum-closebutton-size-300); + --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-300); } .spectrum-Closebutton--sizeM { - --spectrum-closebutton-height: var(--spectrum-component-height-100); - --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-400); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400); + --spectrum-closebutton-height: var(--spectrum-component-height-100); + --spectrum-closebutton-width: var(--spectrum-closebutton-height); + --spectrum-closebutton-size: var(--spectrum-closebutton-size-400); + --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400); } .spectrum-Closebutton--sizeL { - --spectrum-closebutton-height: var(--spectrum-component-height-200); - --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-500); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-500); + --spectrum-closebutton-height: var(--spectrum-component-height-200); + --spectrum-closebutton-width: var(--spectrum-closebutton-height); + --spectrum-closebutton-size: var(--spectrum-closebutton-size-500); + --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-500); } .spectrum-Closebutton--sizeXL { - --spectrum-closebutton-height: var(--spectrum-component-height-300); - --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-600); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-600); + --spectrum-closebutton-height: var(--spectrum-component-height-300); + --spectrum-closebutton-width: var(--spectrum-closebutton-height); + --spectrum-closebutton-size: var(--spectrum-closebutton-size-600); + --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-600); } .spectrum-CloseButton--staticWhite { - --spectrum-closebutton-static-background-color-default: transparent; - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-300); - --spectrum-closebutton-icon-color-default: var(--spectrum-white); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); - --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --spectrum-closebutton-static-background-color-default: transparent; + --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-300); + --spectrum-closebutton-icon-color-default: var(--spectrum-white); + --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); + --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); } .spectrum-CloseButton--staticBlack { - --spectrum-closebutton-static-background-color-default: transparent; - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-300); - --spectrum-closebutton-icon-color-default: var(--spectrum-black); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); - --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --spectrum-closebutton-static-background-color-default: transparent; + --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-300); + --spectrum-closebutton-icon-color-default: var(--spectrum-black); + --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); + --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); } /* Windows high contrast mode */ @media (forced-colors: active) { - .spectrum-CloseButton { - --highcontrast-closebutton-icon-color-disabled: GrayText; - --highcontrast-closebutton-icon-color-down: Highlight; - --highcontrast-closebutton-icon-color-hover: Highlight; - --highcontrast-closebutton-icon-color-focus: Highlight; - --highcontrast-closebutton-background-color-default: ButtonFace; - --highcontrast-closebutton-focus-indicator-color: ButtonText; - - &:focus-visible { - &::after { - forced-color-adjust: none; - margin: var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)); - transition: - opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out,margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out; - } - } - } - - .spectrum-CloseButton--staticBlack { - --highcontrast-closebutton-static-background-color-default: ButtonFace; - --highcontrast-closebutton-icon-color-default: Highlight; - --highcontrast-closebutton-icon-color-disabled: GrayText; - } - - .spectrum-CloseButton--staticWhite { - --highcontrast-closebutton-static-background-color-default: ButtonFace; - --highcontrast-closebutton-icon-color-default: Highlight; - --highcontrast-closebutton-icon-color-disabled: Highlight; - } + .spectrum-CloseButton { + --highcontrast-closebutton-icon-color-disabled: GrayText; + --highcontrast-closebutton-icon-color-down: Highlight; + --highcontrast-closebutton-icon-color-hover: Highlight; + --highcontrast-closebutton-icon-color-focus: Highlight; + --highcontrast-closebutton-background-color-default: ButtonFace; + --highcontrast-closebutton-focus-indicator-color: ButtonText; + + &:focus-visible { + &::after { + forced-color-adjust: none; + margin: var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)); + transition: + opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out, + margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out; + } + } + } + + .spectrum-CloseButton--staticBlack { + --highcontrast-closebutton-static-background-color-default: ButtonFace; + --highcontrast-closebutton-icon-color-default: Highlight; + --highcontrast-closebutton-icon-color-disabled: GrayText; + } + + .spectrum-CloseButton--staticWhite { + --highcontrast-closebutton-static-background-color-default: ButtonFace; + --highcontrast-closebutton-icon-color-default: Highlight; + --highcontrast-closebutton-icon-color-disabled: Highlight; + } } a.spectrum-CloseButton { - @extend %spectrum-AnchorButton; + @extend %spectrum-AnchorButton; } .spectrum-CloseButton { - @extend %spectrum-BaseButton; - - block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-height)); - inline-size: var(--mod-closebutton-width, var(--spectrum-closebutton-width)); - - position: relative; - - color: inherit; - - border-color: transparent; - border-radius: var(--mod-closebutton-border-radius, var(--spectrum-closebutton-border-radius)); - border-width: 0; - - justify-content: center; - align-items: center; - flex-direction: row; - display: inline-flex; - padding: 0; - - transition: border-color var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out; - - margin-inline: var(--mod-closebutton-margin-inline); - margin-block-start: var(--mod-closebutton-margin-top); - align-self: var(--mod-closebutton-align-self); - - &::after { - pointer-events: none; - content: ''; - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - inset-block-end: 0; - inset-block-start: 0; - margin: calc(var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)) * -1); - border-radius: calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap))); - transition: box-shadow var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out; - } - - &:focus-visible { - box-shadow: none; - outline: none; - - &::after { - box-shadow: - 0 0 0 var(--mod-closebutton-focus-indicator-thickness, var(--spectrum-closebutton-focus-indicator-thickness)) - var(--highcontrast-closebutton-focus-indicator-color, var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color))); - - } - } + @extend %spectrum-BaseButton; + + block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-height)); + inline-size: var(--mod-closebutton-width, var(--spectrum-closebutton-width)); + + position: relative; + + color: inherit; + + border-color: transparent; + border-radius: var(--mod-closebutton-border-radius, var(--spectrum-closebutton-border-radius)); + border-width: 0; + + justify-content: center; + align-items: center; + flex-direction: row; + display: inline-flex; + padding: 0; + + transition: border-color var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out; + + margin-inline: var(--mod-closebutton-margin-inline); + margin-block-start: var(--mod-closebutton-margin-top); + align-self: var(--mod-closebutton-align-self); + + &::after { + pointer-events: none; + content: ""; + position: absolute; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; + inset-block-start: 0; + margin: calc(var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)) * -1); + border-radius: calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap))); + transition: box-shadow var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out; + } + + &:focus-visible { + box-shadow: none; + outline: none; + + &::after { + box-shadow: 0 0 0 var(--mod-closebutton-focus-indicator-thickness, var(--spectrum-closebutton-focus-indicator-thickness)) var(--highcontrast-closebutton-focus-indicator-color, var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color))); + } + } } /* COLORS */ .spectrum-CloseButton:not(:disabled) { - background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))); - - &:hover { - background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover)); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))); - } - } - - &:active { - background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down)); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))); - } - } - - &:focus-visible, - &.is-keyboardFocused { - background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus)); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); - } - } - - .spectrum-CloseButton-UIIcon { - color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)); - } - - &:focus, - &.is-focused { - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); - } - } + background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))); + + &:hover { + background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover)); + + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))); + } + } + + &:active { + background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down)); + + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))); + } + } + + &:focus-visible, + &.is-keyboardFocused { + background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus)); + + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); + } + } + + .spectrum-CloseButton-UIIcon { + color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)); + } + + &:focus, + &.is-focused { + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); + } + } } .spectrum-CloseButton:disabled { - background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)); + background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)); - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))); - } + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))); + } } /* Modifier Classes */ .spectrum-CloseButton--staticBlack:not(:disabled), .spectrum-CloseButton--staticWhite:not(:disabled) { - background-color: var(--highcontrast-closebutton-static-background-color-default, var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default))); - - &:hover { - background-color: var(--highcontrast-closebutton-static-background-color-hover, var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover))); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); - } - } - - &:active { - background-color: var(--highcontrast-closebutton-static-background-color-down, var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down))); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); - } - } - - &:focus-visible, - &.is-keyboardFocused { - background-color: var(--highcontrast-closebutton-static-background-color-focus, var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus))); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); - } - } - - &:focus, - &.is-focused { - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); - } - } - - .spectrum-CloseButton-UIIcon { - color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)); - } + background-color: var(--highcontrast-closebutton-static-background-color-default, var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default))); + + &:hover { + background-color: var(--highcontrast-closebutton-static-background-color-hover, var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover))); + + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); + } + } + + &:active { + background-color: var(--highcontrast-closebutton-static-background-color-down, var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down))); + + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); + } + } + + &:focus-visible, + &.is-keyboardFocused { + background-color: var(--highcontrast-closebutton-static-background-color-focus, var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus))); + + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); + } + } + + &:focus, + &.is-focused { + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); + } + } + + .spectrum-CloseButton-UIIcon { + color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)); + } } .spectrum-CloseButton--staticBlack:disabled, .spectrum-CloseButton--staticWhite:disabled { - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))); - } + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))); + } } .spectrum-CloseButton-UIIcon { - margin: 0; + margin: 0; } diff --git a/components/closebutton/themes/express.css b/components/closebutton/themes/express.css index 482625bd92..cf34a126c0 100644 --- a/components/closebutton/themes/express.css +++ b/components/closebutton/themes/express.css @@ -12,10 +12,10 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-default: transparent; - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-400); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-300); - } + .spectrum-CloseButton { + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-gray-300); + --spectrum-closebutton-background-color-down: var(--spectrum-gray-400); + --spectrum-closebutton-background-color-focus: var(--spectrum-gray-300); + } } diff --git a/components/closebutton/themes/spectrum.css b/components/closebutton/themes/spectrum.css index e14e52e362..8582aa41a7 100644 --- a/components/closebutton/themes/spectrum.css +++ b/components/closebutton/themes/spectrum.css @@ -10,10 +10,10 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-default: transparent; - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-300); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-200); - } + .spectrum-CloseButton { + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-closebutton-background-color-down: var(--spectrum-gray-300); + --spectrum-closebutton-background-color-focus: var(--spectrum-gray-200); + } } diff --git a/components/coachindicator/animation.css b/components/coachindicator/animation.css index 0b0b8b7477..9b57e21fa4 100644 --- a/components/coachindicator/animation.css +++ b/components/coachindicator/animation.css @@ -9,32 +9,31 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -.spectrum-CoachIndicator{ - --spectrum-coach-indicator-animation-keyframe-0-scale: 1; - --spectrum-coach-indicator-animation-keyframe-0-opacity: 0; - --spectrum-coach-indicator-animation-keyframe-50-scale: 1.5; - --spectrum-coach-indicator-animation-keyframe-50-opacity: 1; - --spectrum-coach-indicator-animation-keyframe-100-scale: 2; - --spectrum-coach-indicator-animation-keyframe-100-opacity: 0; - --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; +.spectrum-CoachIndicator { + --spectrum-coach-indicator-animation-keyframe-0-scale: 1; + --spectrum-coach-indicator-animation-keyframe-0-opacity: 0; + --spectrum-coach-indicator-animation-keyframe-50-scale: 1.5; + --spectrum-coach-indicator-animation-keyframe-50-opacity: 1; + --spectrum-coach-indicator-animation-keyframe-100-scale: 2; + --spectrum-coach-indicator-animation-keyframe-100-opacity: 0; + --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; } - @keyframes pulse { - 0% { - transform: scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale)); - opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); - } + 0% { + transform: scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale)); + opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); + } - 50% { - transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale)); - opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); - } + 50% { + transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale)); + opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); + } - 100% { - transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale)); - opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); - } + 100% { + transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale)); + opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); + } } @keyframes pulse-quiet { diff --git a/components/coachindicator/index.css b/components/coachindicator/index.css index cb163962bb..2b1596e309 100644 --- a/components/coachindicator/index.css +++ b/components/coachindicator/index.css @@ -13,94 +13,91 @@ governing permissions and limitations under the License. @import "animation.css"; .spectrum-CoachIndicator { - --spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); - --spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); - --spectrum-coach-indicator-inline-size: var(--spectrum-coach-indicator-min-inline-size); - --spectrum-coach-indicator-block-size: var(--spectrum-coach-indicator-min-block-size); - --spectrum-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); - --spectrum-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); - - --spectrum-coach-indicator-top: calc((var(--spectrum-coach-indicator-block-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); - --spectrum-coach-indicator-left: calc((var(--spectrum-coach-indicator-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); - - /* animation */ - --spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); - --spectrum-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --spectrum-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --spectrum-coach-animation-indicator-ring-outer-delay-multiple: -1; - --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --spectrum-coach-indicator-animation-name: pulse; - --spectrum-coach-indicator-inner-animation-delay-multiple: var(--spectrum-coach-animation-indicator-ring-inner-delay-multiple); + --spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200); + --spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --spectrum-coach-indicator-inline-size: var(--spectrum-coach-indicator-min-inline-size); + --spectrum-coach-indicator-block-size: var(--spectrum-coach-indicator-min-block-size); + --spectrum-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); + --spectrum-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); + + --spectrum-coach-indicator-top: calc((var(--spectrum-coach-indicator-block-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); + --spectrum-coach-indicator-left: calc((var(--spectrum-coach-indicator-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); + + /* animation */ + --spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); + --spectrum-coach-animation-indicator-ring-inner-delay-multiple: -0.5; + --spectrum-coach-animation-indicator-ring-center-delay-multiple: -0.66; + --spectrum-coach-animation-indicator-ring-outer-delay-multiple: -1; + --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; + --spectrum-coach-indicator-animation-name: pulse; + --spectrum-coach-indicator-inner-animation-delay-multiple: var(--spectrum-coach-animation-indicator-ring-inner-delay-multiple); } .spectrum-CoachIndicator--quiet { - --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); - --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); - --mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); - --mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); - --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)); - --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)); - - --mod-coach-indicator-top: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); - --mod-coach-indicator-left: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); - --mod-coach-indicator-animation-name: pulse-quiet; - --mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple)); + --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); + --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); + --mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); + --mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); + --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)); + --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)); + + --mod-coach-indicator-top: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); + --mod-coach-indicator-left: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); + --mod-coach-indicator-animation-name: pulse-quiet; + --mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple)); } .spectrum-CoachIndicator { - position: relative; - margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap)); + position: relative; + margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap)); - min-inline-size: var(--mod-coach-indicator-min-inline-size, var(--spectrum-coach-indicator-min-inline-size)); - min-block-size: var(--mod-coach-indicator-min-block-size, var(--spectrum-coach-indicator-min-block-size)); + min-inline-size: var(--mod-coach-indicator-min-inline-size, var(--spectrum-coach-indicator-min-inline-size)); + min-block-size: var(--mod-coach-indicator-min-block-size, var(--spectrum-coach-indicator-min-block-size)); - inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-inline-size)); - block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-block-size)); + inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-inline-size)); + block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-block-size)); } .spectrum-CoachIndicator-ring { - display: block; - position: absolute; - - border-style: solid; - border-width: var(--mod-coach-indicator-ring-border-size, var(--spectrum-coach-indicator-ring-border-size)); - border-radius: 50%; - border-color: var(--mod-coach-indicator-ring-default-color, var(--spectrum-coach-indicator-ring-default-color)); - - inset-block-start: var(--mod-coach-indicator-top, var(--spectrum-coach-indicator-top)); - inset-inline-start: var(--mod-coach-indicator-left, var(--spectrum-coach-indicator-left)); - - inline-size: var(--mod-coach-indicator-ring-inline-size, var(--spectrum-coach-indicator-ring-inline-size)); - block-size: var(--mod-coach-indicator-ring-block-size, var(--spectrum-coach-indicator-ring-block-size)); - animation: var(--mod-coach-indicator-animation-name, var(--spectrum-coach-indicator-animation-name)) var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite; - - &:nth-child(1) { - animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) - * var(--mod-coach-indicator-inner-animation-delay-multiple, var(--spectrum-coach-indicator-inner-animation-delay-multiple))); - } - - &:nth-child(2) { - animation-delay: calc( var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) - * var(--mod-coach-animation-indicator-ring-center-delay-multiple, var(--spectrum-coach-animation-indicator-ring-center-delay-multiple))); - } - - &:nth-child(3) { - animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) - * var(--mod-coach-animation-indicator-ring-outer-delay-multiple, var(--spectrum-coach-animation-indicator-ring-outer-delay-multiple))); - } - - .spectrum-CoachIndicator--light & { - border-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-coach-indicator-ring-light-color)); - } - - .spectrum-CoachIndicator--dark & { - border-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-coach-indicator-ring-dark-color)); - } + display: block; + position: absolute; + + border-style: solid; + border-width: var(--mod-coach-indicator-ring-border-size, var(--spectrum-coach-indicator-ring-border-size)); + border-radius: 50%; + border-color: var(--mod-coach-indicator-ring-default-color, var(--spectrum-coach-indicator-ring-default-color)); + + inset-block-start: var(--mod-coach-indicator-top, var(--spectrum-coach-indicator-top)); + inset-inline-start: var(--mod-coach-indicator-left, var(--spectrum-coach-indicator-left)); + + inline-size: var(--mod-coach-indicator-ring-inline-size, var(--spectrum-coach-indicator-ring-inline-size)); + block-size: var(--mod-coach-indicator-ring-block-size, var(--spectrum-coach-indicator-ring-block-size)); + animation: var(--mod-coach-indicator-animation-name, var(--spectrum-coach-indicator-animation-name)) var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite; + + &:nth-child(1) { + animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-indicator-inner-animation-delay-multiple, var(--spectrum-coach-indicator-inner-animation-delay-multiple))); + } + + &:nth-child(2) { + animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-center-delay-multiple, var(--spectrum-coach-animation-indicator-ring-center-delay-multiple))); + } + + &:nth-child(3) { + animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-outer-delay-multiple, var(--spectrum-coach-animation-indicator-ring-outer-delay-multiple))); + } + + .spectrum-CoachIndicator--light & { + border-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-coach-indicator-ring-light-color)); + } + + .spectrum-CoachIndicator--dark & { + border-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-coach-indicator-ring-dark-color)); + } } @media (prefers-reduced-motion: reduce) { - .spectrum-CoachIndicator-ring { - animation: none; - } + .spectrum-CoachIndicator-ring { + animation: none; + } } diff --git a/components/coachmark/index.css b/components/coachmark/index.css index aac86c5419..f074f12b51 100644 --- a/components/coachmark/index.css +++ b/components/coachmark/index.css @@ -11,8 +11,8 @@ governing permissions and limitations under the License. */ .spectrum-CoachMark { - --spectrum-coachmark-min-width: var(--spectrum-coach-mark-minimum-width); - --spectrum-coachmark-width: var(--spectrum-coach-mark-width); + --spectrum-coachmark-min-width: var(--spectrum-coach-mark-minimum-width); + --spectrum-coachmark-width: var(--spectrum-coach-mark-width); --spectrum-coachmark-max-width: var(--spectrum-coach-mark-maximum-width); --spectrum-coachmark-media-height: var(--spectrum-coach-mark-media-height); @@ -59,7 +59,7 @@ governing permissions and limitations under the License. } .spectrum-CoachMark { - position: relative; + position: relative; min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coachmark-min-width)); max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coachmark-max-width)); inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width)); @@ -108,7 +108,6 @@ governing permissions and limitations under the License. padding-inline: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)); } - .spectrum-CoachMark-header { padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)); display: flex; @@ -120,7 +119,7 @@ governing permissions and limitations under the License. .spectrum-CoachMark-action-menu { white-space: nowrap; z-index: 1; - margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-coachmark-heading-to-action-button)) + margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-coachmark-heading-to-action-button)); } .spectrum-CoachMark-content { diff --git a/components/colorarea/index.css b/components/colorarea/index.css index 80de34efd0..bdbfb2ac0c 100644 --- a/components/colorarea/index.css +++ b/components/colorarea/index.css @@ -9,87 +9,87 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ .spectrum-ColorArea { - --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding); - --spectrum-colorarea-border-color: rgba(0, 0, 0, 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */ - --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color); - --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width); - --spectrum-colorarea-height: var(--spectrum-color-area-height); - --spectrum-colorarea-width: var(--spectrum-color-area-width); - --spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width); - --spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height); + --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding); + --spectrum-colorarea-border-color: rgba(0, 0, 0, 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */ + --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color); + --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width); + --spectrum-colorarea-height: var(--spectrum-color-area-height); + --spectrum-colorarea-width: var(--spectrum-color-area-width); + --spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width); + --spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height); } /* Windows High Contrast Mode */ @media (forced-colors: active) { - .spectrum-ColorArea { - --highcontrast-colorarea-border-color-disabled: GrayText; - --highcontrast-colorarea-border-color: Canvas; - --highcontrast-colorarea-fill-color-disabled: Canvas; - } + .spectrum-ColorArea { + --highcontrast-colorarea-border-color-disabled: GrayText; + --highcontrast-colorarea-border-color: Canvas; + --highcontrast-colorarea-fill-color-disabled: Canvas; + } - .spectrum-ColorArea { - &.is-disabled { - forced-color-adjust: none; - } - } + .spectrum-ColorArea { + &.is-disabled { + forced-color-adjust: none; + } + } - .spectrum-ColorArea-gradient, - .spectrum-ColorHandle-color { - forced-color-adjust: none; - } + .spectrum-ColorArea-gradient, + .spectrum-ColorHandle-color { + forced-color-adjust: none; + } } .spectrum-ColorArea { - position: relative; - display: inline-block; - cursor: default; - user-select: none; - min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width)); - min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height)); - inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width)); - block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height)); - box-sizing: border-box; - border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)); - border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))); + position: relative; + display: inline-block; + cursor: default; + user-select: none; + min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width)); + min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height)); + inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width)); + block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height)); + box-sizing: border-box; + border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)); + border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))); - &.is-focused { - z-index: 2; - } + &.is-focused { + z-index: 2; + } - &.is-disabled { - pointer-events: none; - background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color))); - border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled); + &.is-disabled { + pointer-events: none; + background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color))); + border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled); - .spectrum-ColorArea-gradient { - display: none; - } - } + .spectrum-ColorArea-gradient { + display: none; + } + } } .spectrum-ColorArea-handle { - transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0); - inset-block-start: 0; + transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0); + inset-block-start: 0; - &:dir(rtl) { - inset-inline-end: 0; - } + &:dir(rtl) { + inset-inline-end: 0; + } } .spectrum-ColorArea-gradient { - inline-size: 100%; - block-size: 100%; - border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)); + inline-size: 100%; + block-size: 100%; + border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)); } .spectrum-ColorArea-slider { - opacity: 0; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - inline-size: 100%; - block-size: 100%; - z-index: 0; - margin: 0; - pointer-events: none; + opacity: 0; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 100%; + block-size: 100%; + z-index: 0; + margin: 0; + pointer-events: none; } diff --git a/components/colorhandle/index.css b/components/colorhandle/index.css index 510561c974..2e3d0eeb2c 100644 --- a/components/colorhandle/index.css +++ b/components/colorhandle/index.css @@ -9,109 +9,102 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ .spectrum-ColorHandle { - --spectrum-colorhandle-size: var(--spectrum-color-handle-size); - --spectrum-colorhandle-focused-size: var(--spectrum-color-handle-size-key-focus); - --spectrum-colorhandle-hitarea-size: var(--spectrum-color-control-track-width); - - --spectrum-colorhandle-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-colorhandle-animation-easing: ease-in-out; - - /* outer border as box shadow on the colorhandle */ - --spectrum-colorhandle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */ - --spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width); - - /* inner border as inset boxshadow on the colorhandle-inner */ - --spectrum-colorhandle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */ - --spectrum-colorhandle-inner-border-width: var(--spectrum-color-handle-inner-border-width); - - /* primary border on color handle */ - --spectrum-colorhandle-border-width: var(--spectrum-color-handle-border-width); - --spectrum-colorhandle-border-color: var(--spectrum-white); - - --spectrum-colorhandle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-colorhandle-fill-color-disabled: var( - --spectrum-disabled-background-color - ); + --spectrum-colorhandle-size: var(--spectrum-color-handle-size); + --spectrum-colorhandle-focused-size: var(--spectrum-color-handle-size-key-focus); + --spectrum-colorhandle-hitarea-size: var(--spectrum-color-control-track-width); + + --spectrum-colorhandle-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-colorhandle-animation-easing: ease-in-out; + + /* outer border as box shadow on the colorhandle */ + --spectrum-colorhandle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */ + --spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width); + + /* inner border as inset boxshadow on the colorhandle-inner */ + --spectrum-colorhandle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */ + --spectrum-colorhandle-inner-border-width: var(--spectrum-color-handle-inner-border-width); + + /* primary border on color handle */ + --spectrum-colorhandle-border-width: var(--spectrum-color-handle-border-width); + --spectrum-colorhandle-border-color: var(--spectrum-white); + + --spectrum-colorhandle-border-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-colorhandle-fill-color-disabled: var(--spectrum-disabled-background-color); --mod-opacity-checkerboard-position: 50%; } .spectrum-ColorHandle { - display: block; - position: absolute; - z-index: 1; /* Be above */ - box-sizing: border-box; - inline-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)); - block-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)); - - margin-inline: calc(-1 * calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2)); - margin-block: calc(-1 * calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2)); - - border-width: var(--mod-colorhandle-border-width, var(--spectrum-colorhandle-border-width)); - border-color: var(--highcontrast-colorhandle-border-color, var(--mod-colorhandle-border-color, var(--spectrum-colorhandle-border-color))); - border-style: solid; - - box-shadow: - 0 0 0 - var(--mod-colorhandle-outer-border-width, var(--spectrum-colorhandle-outer-border-width)) - var(--mod-colorhandle-outer-border-color, var(--spectrum-colorhandle-outer-border-color)); - - border-radius: 100%; - - &::after { - content: ''; - inset-inline: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2)); - inset-block: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2)); - position: absolute; - display: block; - inline-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)); - block-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)); - border-radius: var(--mod-colorhandle-hitarea-border-radius, 100%); - } - - transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing)); - - &.is-focused, - &:focus-visible { - /* Bigger handle when focused */ - inline-size: var(--mod-colorhandle-focused-size, var(--spectrum-colorhandle-focused-size)); - block-size: var(--mod-colorhandle-focused-size, var(--spectrum-colorhandle-focused-size)); - - margin-inline: calc(-1 * var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))); - margin-block: calc(-1 * var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))); - outline: none; - } - - &.is-disabled { - pointer-events: none; - border-color: var(--highcontrast-colorhandle-border-color-disabled, var(--mod-colorhandle-border-color-disabled, var(--spectrum-colorhandle-border-color-disabled))); - background: var(--highcontrast-colorhandle-fill-color-disabled, var(--mod-colorhandle-fill-color-disabled, var(--spectrum-colorhandle-fill-color-disabled))); - box-shadow: none; - - .spectrum-ColorHandle-inner { - display: none; - } - } + display: block; + position: absolute; + z-index: 1; /* Be above */ + box-sizing: border-box; + inline-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)); + block-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)); + + margin-inline: calc(-1 * calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2)); + margin-block: calc(-1 * calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2)); + + border-width: var(--mod-colorhandle-border-width, var(--spectrum-colorhandle-border-width)); + border-color: var(--highcontrast-colorhandle-border-color, var(--mod-colorhandle-border-color, var(--spectrum-colorhandle-border-color))); + border-style: solid; + + box-shadow: 0 0 0 var(--mod-colorhandle-outer-border-width, var(--spectrum-colorhandle-outer-border-width)) var(--mod-colorhandle-outer-border-color, var(--spectrum-colorhandle-outer-border-color)); + + border-radius: 100%; + + &::after { + content: ""; + inset-inline: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2)); + inset-block: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2)); + position: absolute; + display: block; + inline-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)); + block-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)); + border-radius: var(--mod-colorhandle-hitarea-border-radius, 100%); + } + + transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing)); + + &.is-focused, + &:focus-visible { + /* Bigger handle when focused */ + inline-size: var(--mod-colorhandle-focused-size, var(--spectrum-colorhandle-focused-size)); + block-size: var(--mod-colorhandle-focused-size, var(--spectrum-colorhandle-focused-size)); + + margin-inline: calc(-1 * var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))); + margin-block: calc(-1 * var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))); + outline: none; + } + + &.is-disabled { + pointer-events: none; + border-color: var(--highcontrast-colorhandle-border-color-disabled, var(--mod-colorhandle-border-color-disabled, var(--spectrum-colorhandle-border-color-disabled))); + background: var(--highcontrast-colorhandle-fill-color-disabled, var(--mod-colorhandle-fill-color-disabled, var(--spectrum-colorhandle-fill-color-disabled))); + box-shadow: none; + + .spectrum-ColorHandle-inner { + display: none; + } + } } .spectrum-ColorHandle-inner { - border-radius: 100%; - inline-size: 100%; - block-size: 100%; - box-shadow: inset 0 0 0 var(--mod-colorhandle-inner-border-width, var(--spectrum-colorhandle-inner-border-width)) var(--mod-colorhandle-inner-border-color, var(--spectrum-colorhandle-inner-border-color)); + border-radius: 100%; + inline-size: 100%; + block-size: 100%; + box-shadow: inset 0 0 0 var(--mod-colorhandle-inner-border-width, var(--spectrum-colorhandle-inner-border-width)) var(--mod-colorhandle-inner-border-color, var(--spectrum-colorhandle-inner-border-color)); - /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ - background-color: var(--spectrum-picked-color); + /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ + background-color: var(--spectrum-picked-color); } @media (forced-colors: active) { - .spectrum-ColorHandle { - forced-color-adjust: none; - - &.is-disabled { - --highcontrast-colorhandle-border-color-disabled : GrayText; - --highcontrast-colorhandle-fill-color-disabled: Canvas; - } - } + .spectrum-ColorHandle { + forced-color-adjust: none; + + &.is-disabled { + --highcontrast-colorhandle-border-color-disabled: GrayText; + --highcontrast-colorhandle-fill-color-disabled: Canvas; + } + } } diff --git a/components/colorloupe/index.css b/components/colorloupe/index.css index 287f6640bd..cce442ef96 100644 --- a/components/colorloupe/index.css +++ b/components/colorloupe/index.css @@ -9,87 +9,84 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ .spectrum-ColorLoupe { - --spectrum-colorloupe-width: var(--spectrum-color-loupe-width); - --spectrum-colorloupe-height: var(--spectrum-color-loupe-height); + --spectrum-colorloupe-width: var(--spectrum-color-loupe-width); + --spectrum-colorloupe-height: var(--spectrum-color-loupe-height); - --spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle); - --spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */ + --spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle); + --spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */ - --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-x); - --spectrum-colorloupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y); - --spectrum-colorloupe-drop-shadow-blur: var(--spectrum-color-loupe-drop-shadow-blur); - --spectrum-colorloupe-drop-shadow-color: var(--spectrum-color-loupe-drop-shadow-color); + --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-x); + --spectrum-colorloupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y); + --spectrum-colorloupe-drop-shadow-blur: var(--spectrum-color-loupe-drop-shadow-blur); + --spectrum-colorloupe-drop-shadow-color: var(--spectrum-color-loupe-drop-shadow-color); - --spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width); - --spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width); - --spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border); - --spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border); + --spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width); + --spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width); + --spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border); + --spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border); - --spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); - --spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); + --spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); + --spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); } .spectrum-ColorLoupe { - inline-size: var(--spectrum-colorloupe-width); - block-size: var(--spectrum-colorloupe-height); - - position: absolute; - transform: translate(0, var(--mod-colorloupe-animation-distance, var(--spectrum-colorloupe-animation-distance))); - opacity: 0; - transform-origin: bottom center; - inset-block-end: calc((var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width)) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset))); - inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2)); - - transition: transform 100ms ease-in-out, opacity 125ms ease-in-out; - pointer-events: none; - - filter:drop-shadow( - var(--mod-colorloupe-drop-shadow-x, var(--spectrum-colorloupe-drop-shadow-x)) - var(--mod-colorloupe-drop-shadow-y, var(--spectrum-colorloupe-drop-shadow-y)) - var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-colorloupe-drop-shadow-blur)) - var(--mod-colorloupe-drop-shadow-color, var(--spectrum-colorloupe-drop-shadow-color)) - ); - - &:dir(rtl) { - inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2) - 1px);; - } - - &.is-open { - transform: translate(0, 0); - opacity: 1; - } + inline-size: var(--spectrum-colorloupe-width); + block-size: var(--spectrum-colorloupe-height); + + position: absolute; + transform: translate(0, var(--mod-colorloupe-animation-distance, var(--spectrum-colorloupe-animation-distance))); + opacity: 0; + transform-origin: bottom center; + inset-block-end: calc((var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width)) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset))); + inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2)); + + transition: + transform 100ms ease-in-out, + opacity 125ms ease-in-out; + pointer-events: none; + + filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-colorloupe-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-colorloupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-colorloupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-colorloupe-drop-shadow-color))); + + &:dir(rtl) { + inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2) - 1px); + } + + &.is-open { + transform: translate(0, 0); + opacity: 1; + } } .spectrum-ColorLoupe-inner-border { - /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ - fill: var(--spectrum-picked-color); - stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-colorloupe-inner-border-color)); - stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-colorloupe-inner-border-width)); + /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ + fill: var(--spectrum-picked-color); + stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-colorloupe-inner-border-color)); + stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-colorloupe-inner-border-width)); } .spectrum-ColorLoupe-outer-border { - fill: none; - stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color))); - stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-colorloupe-outer-border-width)) + 2px); + fill: none; + stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color))); + stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-colorloupe-outer-border-width)) + 2px); } /* The checkerboard classes use opacity checkerboard tokens for dark and light color. The opacity-checkerboard-square-size token is not able to be used witin the SVG pattern and instead colorloupe.yml is using two different patterns toggled by --spectrum-colorloupe-checkerboard-fill */ .spectrum-ColorLoupe-checkerboard-pattern { - fill: var(--spectrum-colorloupe-checkerboard-dark-color); + fill: var(--spectrum-colorloupe-checkerboard-dark-color); } .spectrum-ColorLoupe-checkerboard-background { - fill: var(--spectrum-colorloupe-checkerboard-light-color); + fill: var(--spectrum-colorloupe-checkerboard-light-color); } .spectrum-ColorLoupe-checkerboard-fill { - fill: var(--spectrum-colorloupe-checkerboard-fill); + fill: var(--spectrum-colorloupe-checkerboard-fill); } @media (forced-colors: active) { - .spectrum-ColorLoupe { - --highcontrast-colorloupe-outer-border-color: CanvasText; - } + .spectrum-ColorLoupe { + --highcontrast-colorloupe-outer-border-color: CanvasText; + } } diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index 6750face81..1a7d3e1cd1 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -10,126 +10,126 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ .spectrum-ColorWheel { - --spectrum-colorwheel-width: var(--spectrum-color-wheel-width); - --spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width); - --spectrum-colorwheel-height: var(--spectrum-color-wheel-width); - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200); - --spectrum-colorwheel-border-width: var(--spectrum-border-width-100); - --spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width); - --spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin); - --spectrum-colorwheel-colorhandle-position: calc((var(--spectrum-colorwheel-width) / 2) - (var(--spectrum-colorwheel-track-width) / 2)); + --spectrum-colorwheel-width: var(--spectrum-color-wheel-width); + --spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width); + --spectrum-colorwheel-height: var(--spectrum-color-wheel-width); + --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200); + --spectrum-colorwheel-border-width: var(--spectrum-border-width-100); + --spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width); + --spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin); + --spectrum-colorwheel-colorhandle-position: calc((var(--spectrum-colorwheel-width) / 2) - (var(--spectrum-colorwheel-track-width) / 2)); } /* Windows High Contrast Mode */ @media (forced-colors: active) { - .spectrum-ColorWheel { - --highcontrast-colorwheel-border-color-disabled: GrayText; - --highcontrast-colorwheel-fill-color-disabled: Canvas; - } - - .spectrum-ColorWheel { - forced-color-adjust: none; - } + .spectrum-ColorWheel { + --highcontrast-colorwheel-border-color-disabled: GrayText; + --highcontrast-colorwheel-fill-color-disabled: Canvas; + } + + .spectrum-ColorWheel { + forced-color-adjust: none; + } } .spectrum-ColorWheel { - position: relative; - display: block; - min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-colorwheel-min-width)); - inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); - block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); - user-select: none; - cursor: default; - - &.is-focused { - z-index: 2; - } - - /* --track-width and --border-width to be used with JS in calculating the clip-path paths and colorarea-container-size */ - --track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)); - --border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width)); - - &.is-disabled { - pointer-events: none; - } - - &.is-dragged { - /* Be on top when dragging so loupe can overlap */ - z-index: 2; - } + position: relative; + display: block; + min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-colorwheel-min-width)); + inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); + block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); + user-select: none; + cursor: default; + + &.is-focused { + z-index: 2; + } + + /* --track-width and --border-width to be used with JS in calculating the clip-path paths and colorarea-container-size */ + --track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)); + --border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width)); + + &.is-disabled { + pointer-events: none; + } + + &.is-dragged { + /* Be on top when dragging so loupe can overlap */ + z-index: 2; + } } .spectrum-ColorWheel-inner { - display: flex; - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - inset-block-start: 0; - inset-block-end: 0; - inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)); - block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)); - margin: auto; + display: flex; + position: absolute; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; + inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)); + block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)); + margin: auto; } .spectrum-ColorWheel-colorarea-container { - block-size: auto; - inline-size: 100%; - display: flex; - align-items: center; - justify-content: center; - margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-colorwheel-colorarea-margin)); + block-size: auto; + inline-size: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-colorwheel-colorarea-margin)); } .spectrum-ColorWheel-slider { - opacity: 0; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - inline-size: 100%; - block-size: 100%; - z-index: 0; - margin: 0; - pointer-events: none; + opacity: 0; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 100%; + block-size: 100%; + z-index: 0; + margin: 0; + pointer-events: none; } .spectrum-ColorWheel-handle { - transform: translate(var(--spectrum-colorwheel-colorhandle-position), 0); - inset-block-start: 50%; - inset-inline: 50% + transform: translate(var(--spectrum-colorwheel-colorhandle-position), 0); + inset-block-start: 50%; + inset-inline: 50%; } .spectrum-ColorWheel-ColorArea-handle { - inset-block-start: 0; - inset-inline-end: 0; + inset-block-start: 0; + inset-inline-end: 0; - &:dir(rtl) { - inset-inline-start: 0; - } + &:dir(rtl) { + inset-inline-start: 0; + } } /* a clip-path set border-width wider than than spectrum-colorwheel-wheel to create the appreance of a border */ .spectrum-ColorWheel-border { - position: relative; - background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color)); - inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); - block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); - clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders))); - - &.is-disabled { - background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))); - } + position: relative; + background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color)); + inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); + block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); + clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders))); + + &.is-disabled { + background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))); + } } .spectrum-ColorWheel-wheel { - position: absolute; - background: conic-gradient(from 90deg, red, rgb(255, 128, 0), rgb(255, 255, 0), rgb(128, 255, 0), rgb(0, 255, 0), rgb(0, 255, 128), rgb(0, 255, 255), rgb(0, 128, 255), rgb(0, 0, 255), rgb(128, 0, 255), rgb(255, 0, 255), rgb(255, 0, 128), red); - inset-block: var(--spectrum-colorwheel-border-width); - inset-inline: var(--spectrum-colorwheel-border-width); - clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path))); - - &.is-disabled { - pointer-events: none; - background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))); - } + position: absolute; + background: conic-gradient(from 90deg, red, rgb(255, 128, 0), rgb(255, 255, 0), rgb(128, 255, 0), rgb(0, 255, 0), rgb(0, 255, 128), rgb(0, 255, 255), rgb(0, 128, 255), rgb(0, 0, 255), rgb(128, 0, 255), rgb(255, 0, 255), rgb(255, 0, 128), red); + inset-block: var(--spectrum-colorwheel-border-width); + inset-inline: var(--spectrum-colorwheel-border-width); + clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path))); + + &.is-disabled { + pointer-events: none; + background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))); + } } diff --git a/components/combobox/index.css b/components/combobox/index.css index 6a7df843ad..e5ad1472ea 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -13,425 +13,383 @@ governing permissions and limitations under the License. @import "./themes/express.css"; .spectrum-Combobox { - --spectrum-combobox-inline-size: var(--spectrum-field-width); - --spectrum-combobox-block-size: var(--spectrum-component-height-100); - --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); - --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-combobox-font-size: var(--spectrum-font-size-100); - - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); - - --spectrum-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-combobox-border-radius: var(--spectrum-corner-radius-100); - --spectrum-combobox-border-width: var(--spectrum-border-width-100); - - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component); - - --spectrum-combobox-font-style: var(--spectrum-default-font-style); - --spectrum-combobox-line-height: var(--spectrum-line-height-100); - - --spectrum-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default); - --spectrum-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); - --spectrum-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); - --spectrum-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); - --spectrum-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); - - /* Settings for nested Textfield component. */ - --mod-textfield-focus-indicator-gap: var(--mod-combobox-focus-indicator-gap, var(--spectrum-combobox-focus-indicator-gap)); - --mod-textfield-focus-indicator-width: var(--mod-combobox-focus-indicator-thickness, var(--spectrum-combobox-focus-indicator-thickness)); - --mod-textfield-focus-indicator-color: var(--mod-combobox-focus-indicator-color, var(--spectrum-combobox-focus-indicator-color)); - - --mod-textfield-background-color: var(--mod-combobox-background-color-default); - --mod-textfield-background-color-disabled: var(--mod-combobox-background-color-disabled); - - --mod-textfield-font-family: var(--mod-combobox-font-family); - --mod-textfield-font-weight: var(--mod-combobox-font-weight); - - --mod-textfield-text-color-default: var(--mod-combobox-font-color-default); - --mod-textfield-text-color-hover: var(--mod-combobox-font-color-hover); - --mod-textfield-text-color-focus: var(--mod-combobox-font-color-focus); - --mod-textfield-text-color-focus-hover: var(--mod-combobox-font-color-focus-hover); - --mod-textfield-text-color-keyboard-focus: var(--mod-combobox-font-color-key-focus); - --mod-textfield-text-color-disabled: var(--mod-combobox-font-color-disabled); - - --mod-textfield-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)); - --mod-textfield-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default)); - --mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled); - --mod-textfield-border-color-focus: var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus)); - --mod-textfield-border-color-focus-hover: var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover)); - --mod-textfield-border-color-hover: var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover)); - --mod-textfield-border-color-keyboard-focus: var(--mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus)); - - --mod-textfield-border-color-invalid-default: var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default)); - --mod-textfield-border-color-invalid-hover: var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover)); - --mod-textfield-border-color-invalid-focus: var(--mod-combobox-border-color-invalid-focus, var(--spectrum-combobox-border-color-invalid-focus)); - --mod-textfield-border-color-invalid-focus-hover: var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover)); - --mod-textfield-border-color-invalid-keyboard-focus: var(--mod-combobox-border-color-invalid-key-focus, var(--spectrum-combobox-border-color-invalid-key-focus)); - - --mod-textfield-icon-color-invalid: var(--mod-combobox-alert-icon-color); - - /* Settings for nested Picker Button component. */ - --mod-picker-button-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)); - --mod-picker-button-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default)); - --mod-picker-button-background-color: var(--mod-combobox-background-color-default); - --mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled); - --mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled); + --spectrum-combobox-inline-size: var(--spectrum-field-width); + --spectrum-combobox-block-size: var(--spectrum-component-height-100); + --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); + --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-combobox-font-size: var(--spectrum-font-size-100); + + --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); + --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); + + --spectrum-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color); + + --spectrum-combobox-border-radius: var(--spectrum-corner-radius-100); + --spectrum-combobox-border-width: var(--spectrum-border-width-100); + + --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component); + + --spectrum-combobox-font-style: var(--spectrum-default-font-style); + --spectrum-combobox-line-height: var(--spectrum-line-height-100); + + --spectrum-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default); + --spectrum-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); + --spectrum-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); + --spectrum-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); + --spectrum-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); + + /* Settings for nested Textfield component. */ + --mod-textfield-focus-indicator-gap: var(--mod-combobox-focus-indicator-gap, var(--spectrum-combobox-focus-indicator-gap)); + --mod-textfield-focus-indicator-width: var(--mod-combobox-focus-indicator-thickness, var(--spectrum-combobox-focus-indicator-thickness)); + --mod-textfield-focus-indicator-color: var(--mod-combobox-focus-indicator-color, var(--spectrum-combobox-focus-indicator-color)); + + --mod-textfield-background-color: var(--mod-combobox-background-color-default); + --mod-textfield-background-color-disabled: var(--mod-combobox-background-color-disabled); + + --mod-textfield-font-family: var(--mod-combobox-font-family); + --mod-textfield-font-weight: var(--mod-combobox-font-weight); + + --mod-textfield-text-color-default: var(--mod-combobox-font-color-default); + --mod-textfield-text-color-hover: var(--mod-combobox-font-color-hover); + --mod-textfield-text-color-focus: var(--mod-combobox-font-color-focus); + --mod-textfield-text-color-focus-hover: var(--mod-combobox-font-color-focus-hover); + --mod-textfield-text-color-keyboard-focus: var(--mod-combobox-font-color-key-focus); + --mod-textfield-text-color-disabled: var(--mod-combobox-font-color-disabled); + + --mod-textfield-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)); + --mod-textfield-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default)); + --mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled); + --mod-textfield-border-color-focus: var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus)); + --mod-textfield-border-color-focus-hover: var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover)); + --mod-textfield-border-color-hover: var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover)); + --mod-textfield-border-color-keyboard-focus: var(--mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus)); + + --mod-textfield-border-color-invalid-default: var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default)); + --mod-textfield-border-color-invalid-hover: var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover)); + --mod-textfield-border-color-invalid-focus: var(--mod-combobox-border-color-invalid-focus, var(--spectrum-combobox-border-color-invalid-focus)); + --mod-textfield-border-color-invalid-focus-hover: var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover)); + --mod-textfield-border-color-invalid-keyboard-focus: var(--mod-combobox-border-color-invalid-key-focus, var(--spectrum-combobox-border-color-invalid-key-focus)); + + --mod-textfield-icon-color-invalid: var(--mod-combobox-alert-icon-color); + + /* Settings for nested Picker Button component. */ + --mod-picker-button-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)); + --mod-picker-button-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default)); + --mod-picker-button-background-color: var(--mod-combobox-background-color-default); + --mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled); + --mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled); } .spectrum-Combobox--sizeS { - --spectrum-combobox-block-size: var(--spectrum-component-height-75); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-combobox-font-size: var(--spectrum-font-size-75); - - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-small); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-combobox-block-size: var(--spectrum-component-height-75); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-combobox-font-size: var(--spectrum-font-size-75); + + --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); + --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small); + --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-small); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75); } .spectrum-Combobox--sizeM { - --spectrum-combobox-block-size: var(--spectrum-component-height-100); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-combobox-font-size: var(--spectrum-font-size-100); - - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-combobox-block-size: var(--spectrum-component-height-100); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-combobox-font-size: var(--spectrum-font-size-100); + + --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); + --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); } .spectrum-Combobox--sizeL { - --spectrum-combobox-block-size: var(--spectrum-component-height-200); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-combobox-font-size: var(--spectrum-font-size-200); - - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-large); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-combobox-block-size: var(--spectrum-component-height-200); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-combobox-font-size: var(--spectrum-font-size-200); + + --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); + --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large); + --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-large); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); } .spectrum-Combobox--sizeXL { - --spectrum-combobox-block-size: var(--spectrum-component-height-300); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-combobox-font-size: var(--spectrum-font-size-300); - - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); + --spectrum-combobox-block-size: var(--spectrum-component-height-300); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-combobox-font-size: var(--spectrum-font-size-300); + + --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); + --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large); + --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); } .spectrum-Combobox--quiet { - --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-quiet-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-combobox-button-inline-offset: calc( - (var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2) - (var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / 2) - ); - - &.spectrum-Combobox--sizeS { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small); - } - - &.spectrum-Combobox--sizeM { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); - } - - &.spectrum-Combobox--sizeL { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-large); - } - - &.spectrum-Combobox--sizeXL { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large); - } - - /* Settings for nested Picker Button component. */ - --mod-picker-button-background-color-quiet: transparent; - --mod-picker-button-border-color-quiet: transparent; + --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-quiet-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); + --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); + --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); + --spectrum-combobox-button-inline-offset: calc((var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2) - (var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / 2)); + + &.spectrum-Combobox--sizeS { + --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small); + } + + &.spectrum-Combobox--sizeM { + --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); + } + + &.spectrum-Combobox--sizeL { + --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-large); + } + + &.spectrum-Combobox--sizeXL { + --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large); + } + + /* Settings for nested Picker Button component. */ + --mod-picker-button-background-color-quiet: transparent; + --mod-picker-button-border-color-quiet: transparent; } @media (forced-colors: active) { - .spectrum-Combobox { - --highcontrast-combobox-border-color-highlight: Highlight; - --highcontrast-combobox-border-color-invalid: Highlight; - - .spectrum-Combobox-button.spectrum-PickerButton--quiet { - .spectrum-PickerButton-fill { - forced-color-adjust: none; - } - - .spectrum-PickerButton-icon { - /* Should match foreground color of the Textfield. */ - color: CanvasText; - } - } - } + .spectrum-Combobox { + --highcontrast-combobox-border-color-highlight: Highlight; + --highcontrast-combobox-border-color-invalid: Highlight; + + .spectrum-Combobox-button.spectrum-PickerButton--quiet { + .spectrum-PickerButton-fill { + forced-color-adjust: none; + } + + .spectrum-PickerButton-icon { + /* Should match foreground color of the Textfield. */ + color: CanvasText; + } + } + } } .spectrum-Combobox { - position: relative; - display: inline-flex; - flex-flow: row nowrap; + position: relative; + display: inline-flex; + flex-flow: row nowrap; - inline-size: var(--mod-combobox-inline-size, var(--spectrum-combobox-inline-size)); - min-inline-size: var(--mod-combobox-min-inline-size, var(--spectrum-combobox-min-inline-size)); - block-size: var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)); - margin-block-start: var(--mod-combobox-spacing-label-to-combobox, var(--spectrum-combobox-spacing-label-to-combobox)); + inline-size: var(--mod-combobox-inline-size, var(--spectrum-combobox-inline-size)); + min-inline-size: var(--mod-combobox-min-inline-size, var(--spectrum-combobox-min-inline-size)); + block-size: var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)); + margin-block-start: var(--mod-combobox-spacing-label-to-combobox, var(--spectrum-combobox-spacing-label-to-combobox)); - border-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius)); + border-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius)); - .spectrum-Popover.is-open { - transform: translateY(var(--mod-combobox-spacing-edge-to-menu, var(--spectrum-combobox-spacing-edge-to-menu))); - } + .spectrum-Popover.is-open { + transform: translateY(var(--mod-combobox-spacing-edge-to-menu, var(--spectrum-combobox-spacing-edge-to-menu))); + } } /* LOADING INDICATOR */ .spectrum-Combobox-progress-circle { - position: absolute; - inset-inline-end: calc( - var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) - ); - inset-block-start: var(--mod-combobox-block-spacing-edge-to-progress-circle, var(--spectrum-combobox-block-spacing-edge-to-progress-circle)); - inset-block-end: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); - - &:dir(rtl) { - inset-inline-end: inherit; - inset-inline-start: calc( - var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) - ); - } + position: absolute; + inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width))); + inset-block-start: var(--mod-combobox-block-spacing-edge-to-progress-circle, var(--spectrum-combobox-block-spacing-edge-to-progress-circle)); + inset-block-end: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); + + &:dir(rtl) { + inset-inline-end: inherit; + inset-inline-start: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width))); + } } - /* PICKER BUTTON */ /* stylelint-disable max-nesting-depth */ .spectrum-Combobox-button { - position: absolute; - inset-inline-end: calc(-1 * var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px))); - - /* Default */ - &:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default)); - - &.is-focused, - &:focus, - .spectrum-Combobox.is-focused &, - .spectrum-Combobox:has(:focus) & { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus))); - } - - &.is-keyboardFocused, - &:focus-visible, - .spectrum-Combobox.is-keyboardFocused & { - --mod-picker-button-border-color: var(--mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus)); - } - - &:hover, - &:active, - .spectrum-Combobox:hover &, - .spectrum-Combobox:has(:active) & { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover))); - } - - &:focus:hover, - &.is-focused:hover, - .spectrum-Combobox:hover:has(:focus) &, - .spectrum-Combobox.is-focused:hover & { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover))); - } - } - - /* Invalid */ - &.is-invalid:not(:disabled, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default))); - - &.is-focused, - &:focus, - .spectrum-Combobox.is-focused &, - .spectrum-Combobox:has(:focus) & { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-focus, var(--spectrum-combobox-border-color-invalid-focus))); - } - - &.is-keyboardFocused, - &:focus-visible, - .spectrum-Combobox.is-keyboardFocused & { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-key-focus, var(--spectrum-combobox-border-color-invalid-key-focus))); - } - - &:hover, - &:active, - .spectrum-Combobox:hover &, - .spectrum-Combobox:has(:active) & { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover))); - } - - &:focus:hover, - &.is-focused:hover, - .spectrum-Combobox:hover:has(:focus) &, - .spectrum-Combobox.is-focused:hover & { - --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover))); - } - } + position: absolute; + inset-inline-end: calc(-1 * var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px))); + + /* Default */ + &:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet) { + --mod-picker-button-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default)); + + &.is-focused, + &:focus, + .spectrum-Combobox.is-focused &, + .spectrum-Combobox:has(:focus) & { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus))); + } + + &.is-keyboardFocused, + &:focus-visible, + .spectrum-Combobox.is-keyboardFocused & { + --mod-picker-button-border-color: var(--mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus)); + } + + &:hover, + &:active, + .spectrum-Combobox:hover &, + .spectrum-Combobox:has(:active) & { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover))); + } + + &:focus:hover, + &.is-focused:hover, + .spectrum-Combobox:hover:has(:focus) &, + .spectrum-Combobox.is-focused:hover & { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover))); + } + } + + /* Invalid */ + &.is-invalid:not(:disabled, .spectrum-PickerButton--quiet) { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default))); + + &.is-focused, + &:focus, + .spectrum-Combobox.is-focused &, + .spectrum-Combobox:has(:focus) & { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-focus, var(--spectrum-combobox-border-color-invalid-focus))); + } + + &.is-keyboardFocused, + &:focus-visible, + .spectrum-Combobox.is-keyboardFocused & { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-key-focus, var(--spectrum-combobox-border-color-invalid-key-focus))); + } + + &:hover, + &:active, + .spectrum-Combobox:hover &, + .spectrum-Combobox:has(:active) & { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover))); + } + + &:focus:hover, + &.is-focused:hover, + .spectrum-Combobox:hover:has(:focus) &, + .spectrum-Combobox.is-focused:hover & { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover))); + } + } } /* stylelint-enable max-nesting-depth */ /* TEXTFIELD (wrapper) */ .spectrum-Combobox-textfield { - inline-size: 100%; + inline-size: 100%; } /* TEXT INPUT */ .spectrum-Combobox-input { - padding-block-start: calc( - var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)) - - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) - ); - padding-block-end: calc( - var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) - ); - padding-inline-start: calc( - var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)) - - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) - ); - padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + - var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - - (var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2) - ); - backface-visibility: hidden; - line-height: var(--mod-combobox-line-height, var(--spectrum-combobox-line-height)); - font-size: var(--mod-combobox-font-size, var(--spectrum-combobox-font-size)); - font-style: var(--mod-combobox-font-style, var(--spectrum-combobox-font-style)); - - &::placeholder { - --mod-textfield-text-color-default: var(--mod-combobox-font-color-placeholder); - } - - /* Hover */ - .spectrum-Combobox-textfield:hover &, - &:hover, - &:active { - --mod-textfield-background-color: var(--mod-combobox-background-color-hover); - } - - /* Focus */ - .spectrum-Combobox-textfield.is-focused &, - &:focus { - --mod-textfield-background-color: var(--mod-combobox-background-color-focus); - - /* Focus + Hover */ - &:hover { - --mod-textfield-background-color: var(--mod-combobox-background-color-focus-hover); - } - } - - /* Keyboard Focus */ - .spectrum-Combobox-textfield.is-keyboardFocused & { - --mod-textfield-background-color: var(--mod-combobox-background-color-key-focus); - } - - /* ****** Invalid & Loading ****** */ - .spectrum-Combobox-textfield.is-invalid &, - .spectrum-Combobox-textfield.is-loading & { - padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + - var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + - var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + - var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px)) - - (var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2) - ); - } + padding-block-start: calc(var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); + padding-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); + padding-inline-start: calc(var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); + padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - (var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2)); + backface-visibility: hidden; + line-height: var(--mod-combobox-line-height, var(--spectrum-combobox-line-height)); + font-size: var(--mod-combobox-font-size, var(--spectrum-combobox-font-size)); + font-style: var(--mod-combobox-font-style, var(--spectrum-combobox-font-style)); + + &::placeholder { + --mod-textfield-text-color-default: var(--mod-combobox-font-color-placeholder); + } + + /* Hover */ + .spectrum-Combobox-textfield:hover &, + &:hover, + &:active { + --mod-textfield-background-color: var(--mod-combobox-background-color-hover); + } + + /* Focus */ + .spectrum-Combobox-textfield.is-focused &, + &:focus { + --mod-textfield-background-color: var(--mod-combobox-background-color-focus); + + /* Focus + Hover */ + &:hover { + --mod-textfield-background-color: var(--mod-combobox-background-color-focus-hover); + } + } + + /* Keyboard Focus */ + .spectrum-Combobox-textfield.is-keyboardFocused & { + --mod-textfield-background-color: var(--mod-combobox-background-color-key-focus); + } + + /* ****** Invalid & Loading ****** */ + .spectrum-Combobox-textfield.is-invalid &, + .spectrum-Combobox-textfield.is-loading & { + padding-inline-end: calc( + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px)) - + (var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2) + ); + } } /* VALIDATION ICON */ .spectrum-Textfield-validationIcon { - .spectrum-Combobox-textfield.is-invalid & { - inline-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)); - block-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)); - - inset-block-start: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); - inset-block-end: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); - inset-inline-end: calc( - var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) - ); - } - - .spectrum-Textfield.is-disabled &, - .spectrum-Textfield.is-readOnly &, - .spectrum-Textfield.is-loading & { - display: none; - } + .spectrum-Combobox-textfield.is-invalid & { + inline-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)); + block-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)); + + inset-block-start: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); + inset-block-end: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); + inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width))); + } + + .spectrum-Textfield.is-disabled &, + .spectrum-Textfield.is-readOnly &, + .spectrum-Textfield.is-loading & { + display: none; + } } /* QUIET VARIATION (no visible background) */ .spectrum-Combobox--quiet { - border-radius: 0; - - .spectrum-Combobox-textfield { - &.is-invalid .spectrum-Textfield-validationIcon { - inset-inline-end: var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)); - } - } - - .spectrum-Combobox-input { - border-block-end-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)); - - padding-block-start: var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)); - padding-block-end: calc( - var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) - ); - - padding-inline-start: var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)); - padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + - var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px)) - ); - } - - .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, - .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input { - padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + - var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + - var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + - var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px)) - ); - } + border-radius: 0; + + .spectrum-Combobox-textfield { + &.is-invalid .spectrum-Textfield-validationIcon { + inset-inline-end: var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)); + } + } + + .spectrum-Combobox-input { + border-block-end-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)); + + padding-block-start: var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)); + padding-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); + + padding-inline-start: var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)); + padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px))); + } + + .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, + .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input { + padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px))); + } } diff --git a/components/combobox/themes/express.css b/components/combobox/themes/express.css index 698df728eb..22950009d3 100644 --- a/components/combobox/themes/express.css +++ b/components/combobox/themes/express.css @@ -13,11 +13,11 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Combobox { - --spectrum-combobox-border-color-default: var(--spectrum-gray-400); - --spectrum-combobox-border-color-hover: var(--spectrum-gray-500); - --spectrum-combobox-border-color-focus: var(--spectrum-gray-900); - --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-800); - --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-900); - } + .spectrum-Combobox { + --spectrum-combobox-border-color-default: var(--spectrum-gray-400); + --spectrum-combobox-border-color-hover: var(--spectrum-gray-500); + --spectrum-combobox-border-color-focus: var(--spectrum-gray-900); + --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-800); + --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-900); + } } diff --git a/components/combobox/themes/spectrum.css b/components/combobox/themes/spectrum.css index beff3bc80d..3bdf1eb57c 100644 --- a/components/combobox/themes/spectrum.css +++ b/components/combobox/themes/spectrum.css @@ -11,11 +11,11 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Combobox { - --spectrum-combobox-border-color-default: var(--spectrum-gray-500); - --spectrum-combobox-border-color-hover: var(--spectrum-gray-600); - --spectrum-combobox-border-color-focus: var(--spectrum-gray-500); - --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-600); - --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); - } + .spectrum-Combobox { + --spectrum-combobox-border-color-default: var(--spectrum-gray-500); + --spectrum-combobox-border-color-hover: var(--spectrum-gray-600); + --spectrum-combobox-border-color-focus: var(--spectrum-gray-500); + --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-600); + --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); + } } diff --git a/components/contextualhelp/index.css b/components/contextualhelp/index.css index 506abad51e..1d4a4bb7b6 100644 --- a/components/contextualhelp/index.css +++ b/components/contextualhelp/index.css @@ -11,56 +11,56 @@ governing permissions and limitations under the License. */ .spectrum-ContextualHelp { - /* Layout Variables */ - --spectrum-contextual-help-padding: var(--spectrum-spacing-400); - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); - --spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300); + /* Layout Variables */ + --spectrum-contextual-help-padding: var(--spectrum-spacing-400); + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); + --spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300); - /* Typography Variables */ - --spectrum-contextual-help-heading-size: var(--spectrum-contextual-help-title-size); - --spectrum-contextual-help-heading-color: var(--spectrum-heading-color); - --spectrum-contextual-help-body-color: var(--spectrum-body-color); + /* Typography Variables */ + --spectrum-contextual-help-heading-size: var(--spectrum-contextual-help-title-size); + --spectrum-contextual-help-heading-color: var(--spectrum-heading-color); + --spectrum-contextual-help-body-color: var(--spectrum-body-color); - /* Mobile styling */ - .spectrum--large & { - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); - } + /* Mobile styling */ + .spectrum--large & { + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); + } } .spectrum-ContextualHelp { - position: relative; - min-inline-size: var(--mod-spectrum-contextual-help-minimum-width, var(--spectrum-contextual-help-minimum-width)); + position: relative; + min-inline-size: var(--mod-spectrum-contextual-help-minimum-width, var(--spectrum-contextual-help-minimum-width)); } .spectrum-ContextualHelp-button { - display: flex; + display: flex; } .spectrum-ContextualHelp-popover { - padding-block: var(--mod-spectrum-contextual-help-padding, var(--spectrum-contextual-help-padding)); - padding-inline: var(--mod-spectrum-contextual-help-padding, var(--spectrum-contextual-help-padding)); - font-size: var(--mod-spectrum-contextual-help-body-size, var(--spectrum-contextual-help-body-size)); - color: var(--highcontrast-contextual-help-body-color, var(--mod-contextual-help-body-color, var(--spectrum-contextual-help-body-color))); + padding-block: var(--mod-spectrum-contextual-help-padding, var(--spectrum-contextual-help-padding)); + padding-inline: var(--mod-spectrum-contextual-help-padding, var(--spectrum-contextual-help-padding)); + font-size: var(--mod-spectrum-contextual-help-body-size, var(--spectrum-contextual-help-body-size)); + color: var(--highcontrast-contextual-help-body-color, var(--mod-contextual-help-body-color, var(--spectrum-contextual-help-body-color))); + .spectrum-ContextualHelp-heading, + .spectrum-ContextualHelp-body { + margin: 0; + } - .spectrum-ContextualHelp-heading, .spectrum-ContextualHelp-body { - margin: 0; - } - - .spectrum-ContextualHelp-heading { - margin-block-end: var(--mod-spectrum-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing)); - font-size: var(--mod-spectrum-contextual-help-heading-size, var(--spectrum-contextual-help-heading-size)); - color: var(--highcontrast-contextual-help-heading-color, var(--mod-contextual-help-heading-color, var(--spectrum-contextual-help-heading-color))); - } + .spectrum-ContextualHelp-heading { + margin-block-end: var(--mod-spectrum-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing)); + font-size: var(--mod-spectrum-contextual-help-heading-size, var(--spectrum-contextual-help-heading-size)); + color: var(--highcontrast-contextual-help-heading-color, var(--mod-contextual-help-heading-color, var(--spectrum-contextual-help-heading-color))); + } } .spectrum-ContextualHelp-link { - margin-block-start: var(--mod-spectrum-contextual-help-link-spacing, var(--spectrum-contextual-help-link-spacing)); + margin-block-start: var(--mod-spectrum-contextual-help-link-spacing, var(--spectrum-contextual-help-link-spacing)); } @media (forced-colors: active) { - .spectrum-ContextualHelp { - --highcontrast-contextual-help-heading-color: CanvasText; - --highcontrast-contextual-help-body-color: CanvasText; - } + .spectrum-ContextualHelp { + --highcontrast-contextual-help-heading-color: CanvasText; + --highcontrast-contextual-help-body-color: CanvasText; + } } diff --git a/components/datepicker/themes/express.css b/components/datepicker/themes/express.css index b292b5b103..0e30009bd9 100644 --- a/components/datepicker/themes/express.css +++ b/components/datepicker/themes/express.css @@ -13,7 +13,7 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-DatePicker { - --spectrum-datepicker-initial-height: var(--spectrum-component-height-75); - } + .spectrum-DatePicker { + --spectrum-datepicker-initial-height: var(--spectrum-component-height-75); + } } diff --git a/components/datepicker/themes/spectrum.css b/components/datepicker/themes/spectrum.css index ceea2ff22b..c2a48351ac 100644 --- a/components/datepicker/themes/spectrum.css +++ b/components/datepicker/themes/spectrum.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-DatePicker { - --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); - } + .spectrum-DatePicker { + --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); + } } diff --git a/components/dial/index.css b/components/dial/index.css index 8d3f6dd8a9..ad53ab6caf 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -11,292 +11,292 @@ governing permissions and limitations under the License. */ .spectrum-Dial { - --spectrum-dial-background-color-default: var(--spectrum-gray-100); + --spectrum-dial-background-color-default: var(--spectrum-gray-100); - --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300); - --spectrum-dial-border-color-disabled: var(--spectrum-gray-300); + --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300); + --spectrum-dial-border-color-disabled: var(--spectrum-gray-300); - --spectrum-dial-handle-marker-color: var(--spectrum-gray-700); - --spectrum-dial-border-color: var(--spectrum-gray-700); + --spectrum-dial-handle-marker-color: var(--spectrum-gray-700); + --spectrum-dial-border-color: var(--spectrum-gray-700); - --spectrum-dial-handle-marker-color-down: var(--spectrum-gray-800); - --spectrum-dial-border-color-down: var(--spectrum-gray-800); - --spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800); - --spectrum-dial-border-color-hover: var(--spectrum-gray-800); + --spectrum-dial-handle-marker-color-down: var(--spectrum-gray-800); + --spectrum-dial-border-color-down: var(--spectrum-gray-800); + --spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800); + --spectrum-dial-border-color-hover: var(--spectrum-gray-800); - --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); - --spectrum-dial-border-color-key-focus: var(--spectrum-gray-50); + --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); + --spectrum-dial-border-color-key-focus: var(--spectrum-gray-50); - --spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700); - --spectrum-dial-border-color-mouse-focus: var(--spectrum-gray-700); + --spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700); + --spectrum-dial-border-color-mouse-focus: var(--spectrum-gray-700); - --spectrum-dial-min-max-tick-color: var(--spectrum-gray-600); + --spectrum-dial-min-max-tick-color: var(--spectrum-gray-600); - --spectrum-dial-label-text-color: var(--spectrum-gray-700); - --spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700); - --spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400); + --spectrum-dial-label-text-color: var(--spectrum-gray-700); + --spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700); + --spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400); - --spectrum-dial-container-width: 48px; + --spectrum-dial-container-width: 48px; - --spectrum-dial-handle-marker-width: 12px; - --spectrum-dial-handle-marker-height: 2px; + --spectrum-dial-handle-marker-width: 12px; + --spectrum-dial-handle-marker-height: 2px; - --spectrum-dial-handle-marker-border-radius: 1px; + --spectrum-dial-handle-marker-border-radius: 1px; - --spectrum-dial-handle-size: 100%; - --spectrum-dial-min-height: 0; - --spectrum-dial-controls-min-height: 0; + --spectrum-dial-handle-size: 100%; + --spectrum-dial-min-height: 0; + --spectrum-dial-controls-min-height: 0; - --spectrum-dial-min-max-tick-angles: 45deg; + --spectrum-dial-min-max-tick-angles: 45deg; - --spectrum-dial-width: 32px; - --spectrum-dial-height: 32px; + --spectrum-dial-width: 32px; + --spectrum-dial-height: 32px; - --spectrum-dial-handle-border-size: var(--spectrum-border-width-200); - --spectrum-dial-label-text-size: var(--spectrum-font-size-75); - --spectrum-dial-label-line-height: var(--spectrum-line-height-200); + --spectrum-dial-handle-border-size: var(--spectrum-border-width-200); + --spectrum-dial-label-text-size: var(--spectrum-font-size-75); + --spectrum-dial-label-line-height: var(--spectrum-line-height-200); } .spectrum-Dial--small { - --spectrum-dial-width: 24px; - --spectrum-dial-height: 24px; + --spectrum-dial-width: 24px; + --spectrum-dial-height: 24px; } .spectrum-Dial { - position: relative; - - /* Don't let z-index'd child elements float above other things on the page */ - z-index: 1; - user-select: none; - display: inline-flex; - flex-direction: column; - block-size: auto; - min-inline-size: var(--mod-dial-min-height, var(--spectrum-dial-min-height)); - min-block-size: var(--mod-dial-min-height, var(--spectrum-dial-min-height)); - inline-size: var(--mod-dial-container-width, var(--spectrum-dial-container-width)); + position: relative; + + /* Don't let z-index'd child elements float above other things on the page */ + z-index: 1; + user-select: none; + display: inline-flex; + flex-direction: column; + block-size: auto; + min-inline-size: var(--mod-dial-min-height, var(--spectrum-dial-min-height)); + min-block-size: var(--mod-dial-min-height, var(--spectrum-dial-min-height)); + inline-size: var(--mod-dial-container-width, var(--spectrum-dial-container-width)); } .spectrum-Dial-label { - padding-inline-start: 0; - flex-grow: 1; + padding-inline-start: 0; + flex-grow: 1; - &:only-child { - /* Only center if we don't have a value */ - text-align: center; - } + &:only-child { + /* Only center if we don't have a value */ + text-align: center; + } } .spectrum-Dial-value { - flex-grow: 0; - padding-inline-end: 0; - cursor: default; + flex-grow: 0; + padding-inline-end: 0; + cursor: default; } .spectrum-Dial-labelContainer { - color: var(--highcontrast-dial-label-text-color, var(--mod-dial-label-text-color, var(--spectrum-dial-label-text-color))); - display: flex; - position: relative; - inline-size: auto; - padding-block-start: var(--mod-dial-label-container-top-to-text, var(--spectrum-dial-label-container-top-to-text)); - font-size: var(--mod-dial-label-text-size, var(--spectrum-dial-label-text-size)); - line-height: var(--mod-dial-label-line-height, var(--spectrum-dial-label-line-height)); - margin-block-end: var(--mod-dial-label-gap-y, var(--spectrum-dial-label-gap-y)); + color: var(--highcontrast-dial-label-text-color, var(--mod-dial-label-text-color, var(--spectrum-dial-label-text-color))); + display: flex; + position: relative; + inline-size: auto; + padding-block-start: var(--mod-dial-label-container-top-to-text, var(--spectrum-dial-label-container-top-to-text)); + font-size: var(--mod-dial-label-text-size, var(--spectrum-dial-label-text-size)); + line-height: var(--mod-dial-label-line-height, var(--spectrum-dial-label-line-height)); + margin-block-end: var(--mod-dial-label-gap-y, var(--spectrum-dial-label-gap-y)); } .spectrum-Dial-controls { - display: inline-block; - box-sizing: border-box; - - position: relative; - z-index: auto; - - vertical-align: top; - - inline-size: var(--mod-dial-width, var(--spectrum-dial-width)); - block-size: var(--mod-dial-height, var(--spectrum-dial-height)); - min-block-size: var(--mod-dial-controls-min-height, var(--spectrum-dial-controls-min-height)); - margin-inline-start: var(--mod-dial-controls-margin, var(--spectrum-dial-controls-margin)); - - border-radius: var(--mod-dial-border-radius, var(--spectrum-dial-border-radius)); - margin-block: 0; - - outline: none; - - &::before, - &::after { - background-color: var(--highcontrast-dial-min-max-tick-color, var(--mod-dial-min-max-tick-color, var(--spectrum-dial-min-max-tick-color))); - content: ""; - inline-size: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * 2); - block-size: var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)); - border-radius: var(--mod-dial-handle-marker-border-radius, var(--spectrum-dial-handle-marker-border-radius)); - position: absolute; - inset-block-end: 0; - } - - &::before { - inset-inline-start: auto; - inset-inline-end: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1); - transform: rotate(var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles))); - } - - &::after { - inset-inline-start: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1); - transform: rotate(calc(-1 * var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles)))); - } + display: inline-block; + box-sizing: border-box; + + position: relative; + z-index: auto; + + vertical-align: top; + + inline-size: var(--mod-dial-width, var(--spectrum-dial-width)); + block-size: var(--mod-dial-height, var(--spectrum-dial-height)); + min-block-size: var(--mod-dial-controls-min-height, var(--spectrum-dial-controls-min-height)); + margin-inline-start: var(--mod-dial-controls-margin, var(--spectrum-dial-controls-margin)); + + border-radius: var(--mod-dial-border-radius, var(--spectrum-dial-border-radius)); + margin-block: 0; + + outline: none; + + &::before, + &::after { + background-color: var(--highcontrast-dial-min-max-tick-color, var(--mod-dial-min-max-tick-color, var(--spectrum-dial-min-max-tick-color))); + content: ""; + inline-size: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * 2); + block-size: var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)); + border-radius: var(--mod-dial-handle-marker-border-radius, var(--spectrum-dial-handle-marker-border-radius)); + position: absolute; + inset-block-end: 0; + } + + &::before { + inset-inline-start: auto; + inset-inline-end: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1); + transform: rotate(var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles))); + } + + &::after { + inset-inline-start: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1); + transform: rotate(calc(-1 * var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles)))); + } } .spectrum-Dial-handle { - box-shadow: none; - border-color: var(--highcontrast-dial-border-color, var(--mod-dial-border-color, var(--spectrum-dial-border-color))); - position: absolute; - z-index: 2; - display: inline-block; - box-sizing: border-box; - - /* large 20px, med 16px */ - - margin-block: calc(var(--mod-dial-handle-block-margin, var(--spectrum-dial-handle-block-margin)) / -2) 0; - margin-inline: calc(var(--mod-dial-handle-inline-margin, var(--spectrum-dial-handle-inline-margin)) / -2) 0; - - outline: none; - - inline-size: var(--mod-dial-handle-size, var(--spectrum-dial-handle-size)); - block-size: var(--mod-dial-handle-size, var(--spectrum-dial-handle-size)); - border-width: var(--mod-dial-handle-border-size, var(--spectrum-dial-handle-border-size)); - border-style: solid; - inset-block-start: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position)); - inset-inline-start: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position)); - inset-inline-end: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position)); - inset-block-end: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position)); - border-radius: var(--mod-dial-border-radius, var(--spectrum-dial-border-radius)); - transform: rotate(calc(-1 * var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles)))); - cursor: grab; - - &::before { - display: none; - } - - &::after { - content: ""; - position: absolute; - inset-block-start: 50%; - inset-inline-start: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1); - inline-size: var(--mod-dial-handle-marker-width, var(--spectrum-dial-handle-marker-width)); - block-size: var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)); - border-radius: var(--mod-dial-handle-marker-border-radius, var(--spectrum-dial-handle-marker-border-radius)); - transform: translateY(-50%); - background-color: var(--highcontrast-dial-handle-marker-color, var(--mod-dial-handle-marker-color, var(--spectrum-dial-handle-marker-color))); - } - - &:active, - &:focus-visible, - &:focus-within, - &.is-dragged { - border-width: var(--mod-dial-handle-border-size, var(--spectrum-dial-handle-border-size)); - cursor: ns-resize; - cursor: grabbing; - } - - &:hover { - border-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))); - - &::after { - background-color: var(--highcontrast-dial-handle-marker-color-hover, var(--mod-dial-handle-marker-color-hover, var(--spectrum-dial-handle-marker-color-hover))); - } - } - - &:focus-visible, - &:focus-within { - background-color: var(--highcontrast-dial-handle-marker-color-mouse-focus, var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus))); - border-color: var(--highcontrast-dial-handle-marker-color-mouse-focus, var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus))); - - &::after { - background-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus))); - } - } - - &:active, - &.is-dragged { - background-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))); - border-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))); - - &::after { - background-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus))); - } - } + box-shadow: none; + border-color: var(--highcontrast-dial-border-color, var(--mod-dial-border-color, var(--spectrum-dial-border-color))); + position: absolute; + z-index: 2; + display: inline-block; + box-sizing: border-box; + + /* large 20px, med 16px */ + + margin-block: calc(var(--mod-dial-handle-block-margin, var(--spectrum-dial-handle-block-margin)) / -2) 0; + margin-inline: calc(var(--mod-dial-handle-inline-margin, var(--spectrum-dial-handle-inline-margin)) / -2) 0; + + outline: none; + + inline-size: var(--mod-dial-handle-size, var(--spectrum-dial-handle-size)); + block-size: var(--mod-dial-handle-size, var(--spectrum-dial-handle-size)); + border-width: var(--mod-dial-handle-border-size, var(--spectrum-dial-handle-border-size)); + border-style: solid; + inset-block-start: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position)); + inset-inline-start: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position)); + inset-inline-end: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position)); + inset-block-end: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position)); + border-radius: var(--mod-dial-border-radius, var(--spectrum-dial-border-radius)); + transform: rotate(calc(-1 * var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles)))); + cursor: grab; + + &::before { + display: none; + } + + &::after { + content: ""; + position: absolute; + inset-block-start: 50%; + inset-inline-start: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1); + inline-size: var(--mod-dial-handle-marker-width, var(--spectrum-dial-handle-marker-width)); + block-size: var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)); + border-radius: var(--mod-dial-handle-marker-border-radius, var(--spectrum-dial-handle-marker-border-radius)); + transform: translateY(-50%); + background-color: var(--highcontrast-dial-handle-marker-color, var(--mod-dial-handle-marker-color, var(--spectrum-dial-handle-marker-color))); + } + + &:active, + &:focus-visible, + &:focus-within, + &.is-dragged { + border-width: var(--mod-dial-handle-border-size, var(--spectrum-dial-handle-border-size)); + cursor: ns-resize; + cursor: grabbing; + } + + &:hover { + border-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))); + + &::after { + background-color: var(--highcontrast-dial-handle-marker-color-hover, var(--mod-dial-handle-marker-color-hover, var(--spectrum-dial-handle-marker-color-hover))); + } + } + + &:focus-visible, + &:focus-within { + background-color: var(--highcontrast-dial-handle-marker-color-mouse-focus, var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus))); + border-color: var(--highcontrast-dial-handle-marker-color-mouse-focus, var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus))); + + &::after { + background-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus))); + } + } + + &:active, + &.is-dragged { + background-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))); + border-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))); + + &::after { + background-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus))); + } + } } .spectrum-Dial-input { - /* Remove the margin for input in Firefox and Safari. */ - margin: 0; - padding: 0; - position: absolute; - overflow: hidden; - opacity: 0.000001; - cursor: default; - appearance: none; - border: 0; - pointer-events: none; - inline-size: var(--spectrum-dial-handle-size); - block-size: var(--spectrum-dial-handle-size); - inset-inline-start: 0; - inset-block-start: 0; - - &:focus { - outline: none; - } + /* Remove the margin for input in Firefox and Safari. */ + margin: 0; + padding: 0; + position: absolute; + overflow: hidden; + opacity: 0.000001; + cursor: default; + appearance: none; + border: 0; + pointer-events: none; + inline-size: var(--spectrum-dial-handle-size); + block-size: var(--spectrum-dial-handle-size); + inset-inline-start: 0; + inset-block-start: 0; + + &:focus { + outline: none; + } } .spectrum-Dial { - &.is-disabled { - .spectrum-Dial-labelContainer { - color: var(--highcontrast-dial-label-text-color-disabled, var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled))); - } - - .spectrum-Dial-controls { - &::after, - &::before { - background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); - } - } - - .spectrum-Dial-handle { - cursor: default; - border-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); - background: var(--highcontrast-dial-background-color-default, var(--mod-dial-background-color-default, var(--spectrum-dial-background-color-default))); - - &::after, - &::before { - background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); - } - } - } + &.is-disabled { + .spectrum-Dial-labelContainer { + color: var(--highcontrast-dial-label-text-color-disabled, var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled))); + } + + .spectrum-Dial-controls { + &::after, + &::before { + background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); + } + } + + .spectrum-Dial-handle { + cursor: default; + border-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); + background: var(--highcontrast-dial-background-color-default, var(--mod-dial-background-color-default, var(--spectrum-dial-background-color-default))); + + &::after, + &::before { + background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); + } + } + } } .u-isGrabbing { - cursor: ns-resize; - cursor: -webkit-grabbing; - cursor: grabbing; - - user-select: none; - - .spectrum-Dial { - .spectrum-Dial-label, - .spectrum-Dial-value { - cursor: inherit; - } - } + cursor: ns-resize; + cursor: -webkit-grabbing; + cursor: grabbing; + + user-select: none; + + .spectrum-Dial { + .spectrum-Dial-label, + .spectrum-Dial-value { + cursor: inherit; + } + } } @media (forced-colors: active) { - .spectrum-Dial { - --highcontrast-dial-min-max-tick-color: Highlight; - --highcontrast-dial-border-color: Highlight; - --highcontrast-dial-handle-marker-color: Highlight; - --highcontrast-dial-border-color-hover: Highlight; - --highcontrast-dial-handle-marker-color-hover: Highlight; - --highcontrast-dial-handle-marker-color-key-focus: HighlightText; - --highcontrast-dial-label-text-color-disabled: GrayText; - --highcontrast-dial-handle-border-color-disabled: GrayText; - } + .spectrum-Dial { + --highcontrast-dial-min-max-tick-color: Highlight; + --highcontrast-dial-border-color: Highlight; + --highcontrast-dial-handle-marker-color: Highlight; + --highcontrast-dial-border-color-hover: Highlight; + --highcontrast-dial-handle-marker-color-hover: Highlight; + --highcontrast-dial-handle-marker-color-key-focus: HighlightText; + --highcontrast-dial-label-text-color-disabled: GrayText; + --highcontrast-dial-handle-border-color-disabled: GrayText; + } } diff --git a/components/dialog/index.css b/components/dialog/index.css index 30fe156565..c1e4f89d19 100644 --- a/components/dialog/index.css +++ b/components/dialog/index.css @@ -11,377 +11,351 @@ governing permissions and limitations under the License. */ .spectrum-Dialog { - /* The font-size of the fullscreen dialog header */ - --spectrum-dialog-fullscreen-header-text-size: 28px; - --spectrum-dialog-min-inline-size: 288px; - --spectrum-dialog-confirm-small-width: 400px; - --spectrum-dialog-confirm-medium-width: 480px; - --spectrum-dialog-confirm-large-width: 640px; - --spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); - --spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); - --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --spectrum-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --spectrum-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); - --spectrum-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); - --spectrum-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - - - --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --spectrum-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); - --spectrum-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); - --spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100); - --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); - --spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50); + /* The font-size of the fullscreen dialog header */ + --spectrum-dialog-fullscreen-header-text-size: 28px; + --spectrum-dialog-min-inline-size: 288px; + --spectrum-dialog-confirm-small-width: 400px; + --spectrum-dialog-confirm-medium-width: 480px; + --spectrum-dialog-confirm-large-width: 640px; + --spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); + --spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); + --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --spectrum-dialog-confirm-title-text-color: var(--spectrum-gray-900); + --spectrum-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); + --spectrum-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); + --spectrum-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + + --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --spectrum-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); + --spectrum-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); + --spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); + --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); + --spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100); + --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); + --spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50); } .spectrum-Dialog { - /* Be a flexbox to allow a full sized content area that scrolls */ - display: flex; + /* Be a flexbox to allow a full sized content area that scrolls */ + display: flex; - /* Allow 100% width, taking into account padding */ - box-sizing: border-box; + /* Allow 100% width, taking into account padding */ + box-sizing: border-box; - /* Be no bigger than max-width, but also be 90% if the viewport is smaller than max-width */ - inline-size: fit-content; - min-inline-size: var(--mod-dialog-min-inline-size, var(--spectrum-dialog-min-inline-size)); - max-inline-size: 100%; + /* Be no bigger than max-width, but also be 90% if the viewport is smaller than max-width */ + inline-size: fit-content; + min-inline-size: var(--mod-dialog-min-inline-size, var(--spectrum-dialog-min-inline-size)); + max-inline-size: 100%; - max-block-size: inherit; + max-block-size: inherit; - outline: none; + outline: none; } .spectrum-Dialog--small { - inline-size: var(--mod-dialog-confirm-small-width, var(--spectrum-dialog-confirm-small-width)); + inline-size: var(--mod-dialog-confirm-small-width, var(--spectrum-dialog-confirm-small-width)); } .spectrum-Dialog--medium { - inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width)); + inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width)); } .spectrum-Dialog--large { - inline-size: var(--mod-dialog-confirm-large-width, var(--spectrum-dialog-confirm-large-width)); + inline-size: var(--mod-dialog-confirm-large-width, var(--spectrum-dialog-confirm-large-width)); } .spectrum-Dialog-hero { - grid-area: hero; - block-size: var(--mod-dialog-confirm-hero-height, var(--spectrum-dialog-confirm-hero-height)); + grid-area: hero; + block-size: var(--mod-dialog-confirm-hero-height, var(--spectrum-dialog-confirm-hero-height)); - border-start-start-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius)); - border-start-end-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius)); + border-start-start-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius)); + border-start-end-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius)); - background-size: cover; - background-position: center center; - overflow: hidden; + background-size: cover; + background-position: center center; + overflow: hidden; } .spectrum-Dialog .spectrum-Dialog-grid { - display: grid; - grid-template-columns: - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var( - --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-areas: - "hero hero hero hero hero hero" - ". . . . . ." - ". heading header header header ." - ". divider divider divider divider ." - ". content content content content ." - ". footer footer buttonGroup buttonGroup ." - ". . . . . ."; - inline-size: 100%; + display: grid; + grid-template-columns: + var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) + var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-areas: + "hero hero hero hero hero hero" + ". . . . . ." + ". heading header header header ." + ". divider divider divider divider ." + ". content content content content ." + ". footer footer buttonGroup buttonGroup ." + ". . . . . ."; + inline-size: 100%; } .spectrum-Dialog-heading { - grid-area: heading; + grid-area: heading; - margin: 0; + margin: 0; - font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); - font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-dialog-heading-font-weight)); - line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-dialog-confirm-title-text-line-height)); - color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-dialog-confirm-title-text-color)); - outline: none; /* Hide focus outline */ + font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); + font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-dialog-heading-font-weight)); + line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-dialog-confirm-title-text-line-height)); + color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-dialog-confirm-title-text-color)); + outline: none; /* Hide focus outline */ - padding-inline-end: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size)); + padding-inline-end: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size)); - &.spectrum-Dialog-heading--noHeader { - grid-area: heading-start / heading-start / header-end / header-end; - padding-inline-end: 0; - } + &.spectrum-Dialog-heading--noHeader { + grid-area: heading-start / heading-start / header-end / header-end; + padding-inline-end: 0; + } } .spectrum-Dialog-header { - grid-area: header; - display: flex; + grid-area: header; + display: flex; - /* Without this, buttons will be stretched */ - align-items: center; - justify-content: flex-end; + /* Without this, buttons will be stretched */ + align-items: center; + justify-content: flex-end; - box-sizing: border-box; + box-sizing: border-box; - outline: none; /* Hide focus outline around header */ + outline: none; /* Hide focus outline around header */ } .spectrum-Dialog .spectrum-Dialog-divider { - grid-area: divider; - inline-size: 100%; - margin-block-start: var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)); - margin-block-end: var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)); + grid-area: divider; + inline-size: 100%; + margin-block-start: var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)); + margin-block-end: var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)); } /* remove top vertical padding of spectrum-Dialog-content from bottom margin of first divider after heading */ .spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider { - margin-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) - (var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2)); + margin-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) - (var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2)); } .spectrum-Dialog--noDivider { - .spectrum-Dialog-divider { - display: none; - } - - .spectrum-Dialog-heading { - padding-block-end: calc( - var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + - var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + - var(--mod-dialog-confirm-divider-height, var(--spectrum-dialog-confirm-divider-height)) - ); - } + .spectrum-Dialog-divider { + display: none; + } + + .spectrum-Dialog-heading { + padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-dialog-confirm-divider-height))); + } } .spectrum-Dialog-content { - grid-area: content; - box-sizing: border-box; + grid-area: content; + box-sizing: border-box; - /* + /* v2 is currently worse, inputs that get focus rings get a slight clipping unless overflow: visible replaces this line we should think of a better way to handle this, see padding/margin below for fix */ - overflow-y: auto; - -webkit-overflow-scrolling: touch; - - outline: none; /* Hide focus outline */ + overflow-y: auto; + -webkit-overflow-scrolling: touch; - font-size: var(--mod-dialog-confirm-description-text-size, var(--spectrum-dialog-confirm-description-text-size)); - font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight)); - line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-dialog-confirm-description-text-line-height)); - color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); + outline: none; /* Hide focus outline */ + font-size: var(--mod-dialog-confirm-description-text-size, var(--spectrum-dialog-confirm-description-text-size)); + font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight)); + line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-dialog-confirm-description-text-line-height)); + color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); - /* this is kinda dumb, but needed for the keyboard focus rings so they don't get clipped. is there a better way to treat this */ - padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2); - margin: 0 var(--mod-dialog-confirm-description-margin, var(--spectrum-dialog-confirm-description-margin)); + /* this is kinda dumb, but needed for the keyboard focus rings so they don't get clipped. is there a better way to treat this */ + padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2); + margin: 0 var(--mod-dialog-confirm-description-margin, var(--spectrum-dialog-confirm-description-margin)); } .spectrum-Dialog-footer { - grid-area: footer; + grid-area: footer; - /* this padding isn't built into the grid because it disappears with this footer */ - padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-dialog-confirm-footer-padding-top)); + /* this padding isn't built into the grid because it disappears with this footer */ + padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-dialog-confirm-footer-padding-top)); - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; - outline: none; /* Hide focus outline */ + outline: none; /* Hide focus outline */ - /* Both selectors are required to override the button + button rule */ - > *, - > .spectrum-Button + .spectrum-Button { - margin-block-end: 0; - } + /* Both selectors are required to override the button + button rule */ + > *, + > .spectrum-Button + .spectrum-Button { + margin-block-end: 0; + } } .spectrum-Dialog-buttonGroup { - grid-area: buttonGroup; + grid-area: buttonGroup; - /* this padding isn't built into the grid because it disappears with this buttonGroup */ - padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)); - display: flex; - justify-content: flex-end; + /* this padding isn't built into the grid because it disappears with this buttonGroup */ + padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)); + display: flex; + justify-content: flex-end; - /* this padding should be safe as button group is always end aligned */ - padding-inline-start: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size)); + /* this padding should be safe as button group is always end aligned */ + padding-inline-start: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size)); - &.spectrum-Dialog-buttonGroup--noFooter { - grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end; - } + &.spectrum-Dialog-buttonGroup--noFooter { + grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end; + } } .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { - grid-template-columns: - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) - minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var( - --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-areas: - "hero hero hero hero hero hero hero" - ". . . . . closeButton closeButton" - ". heading header header typeIcon closeButton closeButton" - ". divider divider divider divider divider ." - ". content content content content content ." - ". footer footer buttonGroup buttonGroup buttonGroup ." - ". . . . . . ."; - - .spectrum-Dialog-buttonGroup { - display: none; - } - - .spectrum-Dialog-footer { - grid-area: footer / footer/ buttonGroup / buttonGroup; - color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); - } + grid-template-columns: + var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) + minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-areas: + "hero hero hero hero hero hero hero" + ". . . . . closeButton closeButton" + ". heading header header typeIcon closeButton closeButton" + ". divider divider divider divider divider ." + ". content content content content content ." + ". footer footer buttonGroup buttonGroup buttonGroup ." + ". . . . . . ."; + + .spectrum-Dialog-buttonGroup { + display: none; + } + + .spectrum-Dialog-footer { + grid-area: footer / footer/ buttonGroup / buttonGroup; + color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); + } } .spectrum-Dialog-closeButton { - grid-area: closeButton; + grid-area: closeButton; - /* align and justify so it doesn't do the default 'stretch' and end up with forced height/width */ - align-self: start; - justify-self: end; + /* align and justify so it doesn't do the default 'stretch' and end up with forced height/width */ + align-self: start; + justify-self: end; - margin-inline-end: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding)); - margin-block-start: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding)); + margin-inline-end: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding)); + margin-block-start: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding)); } .spectrum-Dialog--fullscreen { - inline-size: 100%; - block-size: 100%; + inline-size: 100%; + block-size: 100%; } .spectrum-Dialog--fullscreenTakeover { - inline-size: 100%; - block-size: 100%; + inline-size: 100%; + block-size: 100%; - border-radius: 0; + border-radius: 0; } .spectrum-Dialog--fullscreen, .spectrum-Dialog--fullscreenTakeover { - max-block-size: none; - max-inline-size: none; - - &.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-areas: - ". . . . ." - ". heading header buttonGroup ." - ". divider divider divider ." - ". content content content ." - ". . . . ."; - } - - .spectrum-Dialog-heading { - font-size: var(--mod-dialog-fullscreen-header-text-size, var(--spectrum-dialog-fullscreen-header-text-size)); - } - - .spectrum-Dialog-content { - max-block-size: none; - - - } - - .spectrum-Dialog-footer, - .spectrum-Dialog-buttonGroup { - padding-block-start: 0; - } - - .spectrum-Dialog-footer { - display: none; - } - - .spectrum-Dialog-buttonGroup { - grid-area: buttonGroup; - align-self: start; - } + max-block-size: none; + max-inline-size: none; + + &.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-areas: + ". . . . ." + ". heading header buttonGroup ." + ". divider divider divider ." + ". content content content ." + ". . . . ."; + } + + .spectrum-Dialog-heading { + font-size: var(--mod-dialog-fullscreen-header-text-size, var(--spectrum-dialog-fullscreen-header-text-size)); + } + + .spectrum-Dialog-content { + max-block-size: none; + } + + .spectrum-Dialog-footer, + .spectrum-Dialog-buttonGroup { + padding-block-start: 0; + } + + .spectrum-Dialog-footer { + display: none; + } + + .spectrum-Dialog-buttonGroup { + grid-area: buttonGroup; + align-self: start; + } } @media screen and (width <= 700px) { - .spectrum-Dialog .spectrum-Dialog-grid { - 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-areas: - "hero hero hero hero hero hero" - ". . . . . ." - ". heading heading heading heading ." - ". header header header header ." - ". divider divider divider divider ." - ". content content content content ." - ". footer footer buttonGroup buttonGroup ." - ". . . . . ."; - } - - .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { - 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-areas: - "hero hero hero hero hero hero hero" - ". . . . . closeButton closeButton" - ". heading heading heading heading closeButton closeButton" - ". header header header header header ." - ". divider divider divider divider divider ." - ". content content content content content ." - ". footer footer buttonGroup buttonGroup buttonGroup ." - ". . . . . . ."; - } - - .spectrum-Dialog .spectrum-Dialog-header { - justify-content: flex-start; - } - - .spectrum-Dialog--fullscreen, - .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-areas: - ". . ." - ". heading ." - ". header ." - ". divider ." - ". content ." - ". buttonGroup ." - ". . ."; - } - - .spectrum-Dialog-buttonGroup { - padding-block-start: var( - --mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top) - ); - } - - .spectrum-Dialog-heading { - font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); - } - } + .spectrum-Dialog .spectrum-Dialog-grid { + 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-areas: + "hero hero hero hero hero hero" + ". . . . . ." + ". heading heading heading heading ." + ". header header header header ." + ". divider divider divider divider ." + ". content content content content ." + ". footer footer buttonGroup buttonGroup ." + ". . . . . ."; + } + + .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { + 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-areas: + "hero hero hero hero hero hero hero" + ". . . . . closeButton closeButton" + ". heading heading heading heading closeButton closeButton" + ". header header header header header ." + ". divider divider divider divider divider ." + ". content content content content content ." + ". footer footer buttonGroup buttonGroup buttonGroup ." + ". . . . . . ."; + } + + .spectrum-Dialog .spectrum-Dialog-header { + justify-content: flex-start; + } + + .spectrum-Dialog--fullscreen, + .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-areas: + ". . ." + ". heading ." + ". header ." + ". divider ." + ". content ." + ". buttonGroup ." + ". . ."; + } + + .spectrum-Dialog-buttonGroup { + padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)); + } + + .spectrum-Dialog-heading { + font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); + } + } } @media (forced-colors: active) { - .spectrum-Dialog { - border: solid; - } + .spectrum-Dialog { + border: solid; + } } diff --git a/components/divider/index.css b/components/divider/index.css index d8e69872ba..1555ca922d 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -11,110 +11,110 @@ governing permissions and limitations under the License. */ .spectrum-Divider { - /* default thickness no size */ - --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); - - /* default background color no size */ - --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium); - - /* background colors */ - --spectrum-divider-background-color-small: var(--spectrum-gray-300); - --spectrum-divider-background-color-medium: var(--spectrum-gray-300); - --spectrum-divider-background-color-large: var(--spectrum-gray-800); - - /* static white background colors */ - --spectrum-divider-background-color-small-static-white: var(--spectrum-transparent-white-300); - --spectrum-divider-background-color-medium-static-white: var(--spectrum-transparent-white-300); - --spectrum-divider-background-color-large-static-white: var(--spectrum-transparent-white-800); - - /* static black background colors */ - --spectrum-divider-background-color-small-static-black: var(--spectrum-transparent-black-300); - --spectrum-divider-background-color-medium-static-black: var(--spectrum-transparent-black-300); - --spectrum-divider-background-color-large-static-black: var(--spectrum-transparent-black-800); + /* default thickness no size */ + --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); + + /* default background color no size */ + --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium); + + /* background colors */ + --spectrum-divider-background-color-small: var(--spectrum-gray-300); + --spectrum-divider-background-color-medium: var(--spectrum-gray-300); + --spectrum-divider-background-color-large: var(--spectrum-gray-800); + + /* static white background colors */ + --spectrum-divider-background-color-small-static-white: var(--spectrum-transparent-white-300); + --spectrum-divider-background-color-medium-static-white: var(--spectrum-transparent-white-300); + --spectrum-divider-background-color-large-static-white: var(--spectrum-transparent-white-800); + + /* static black background colors */ + --spectrum-divider-background-color-small-static-black: var(--spectrum-transparent-black-300); + --spectrum-divider-background-color-medium-static-black: var(--spectrum-transparent-black-300); + --spectrum-divider-background-color-large-static-black: var(--spectrum-transparent-black-800); } /* small divider */ .spectrum-Divider--sizeS { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-small); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-small); + --spectrum-divider-thickness: var(--spectrum-divider-thickness-small); + --spectrum-divider-background-color: var(--spectrum-divider-background-color-small); } /* medium divider */ .spectrum-Divider--sizeM { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium); + --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); + --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium); } /* large divider */ .spectrum-Divider--sizeL { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-large); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-large); + --spectrum-divider-thickness: var(--spectrum-divider-thickness-large); + --spectrum-divider-background-color: var(--spectrum-divider-background-color-large); } /* windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Divider, - .spectrum-Divider--sizeS, - .spectrum-Divider--sizeM, - .spectrum-Divider--sizeL { - --spectrum-divider-background-color: CanvasText; - --spectrum-divider-background-color-small-static-white: CanvasText; - --spectrum-divider-background-color-medium-static-white: CanvasText; - --spectrum-divider-background-color-large-static-white: CanvasText; - --spectrum-divider-background-color-small-static-black: CanvasText; - --spectrum-divider-background-color-medium-static-black: CanvasText; - --spectrum-divider-background-color-large-static-black: CanvasText; - } + .spectrum-Divider, + .spectrum-Divider--sizeS, + .spectrum-Divider--sizeM, + .spectrum-Divider--sizeL { + --spectrum-divider-background-color: CanvasText; + --spectrum-divider-background-color-small-static-white: CanvasText; + --spectrum-divider-background-color-medium-static-white: CanvasText; + --spectrum-divider-background-color-large-static-white: CanvasText; + --spectrum-divider-background-color-small-static-black: CanvasText; + --spectrum-divider-background-color-medium-static-black: CanvasText; + --spectrum-divider-background-color-large-static-black: CanvasText; + } } .spectrum-Divider { - block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); - inline-size: 100%; + block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + inline-size: 100%; - /* Show the overflow for hr in Edge and IE. */ - overflow: visible; + /* Show the overflow for hr in Edge and IE. */ + overflow: visible; - border: none; - border-width: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); - border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + border: none; + border-width: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); - background-color: var(--mod-divider-background-color, var(--spectrum-divider-background-color)); + background-color: var(--mod-divider-background-color, var(--spectrum-divider-background-color)); } /* static white variant colors */ .spectrum-Divider--staticWhite { - &.spectrum-Divider--sizeS { - --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-small-static-white)); - } + &.spectrum-Divider--sizeS { + --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-small-static-white)); + } - &.spectrum-Divider--sizeM { - --spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-medium-static-white)); - } + &.spectrum-Divider--sizeM { + --spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-medium-static-white)); + } - &.spectrum-Divider--sizeL { - --spectrum-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-divider-background-color-large-static-white)); - } + &.spectrum-Divider--sizeL { + --spectrum-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-divider-background-color-large-static-white)); + } } /* static black variant colors */ .spectrum-Divider--staticBlack { - &.spectrum-Divider--sizeS { - --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-small-static-black)); - } + &.spectrum-Divider--sizeS { + --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-small-static-black)); + } - &.spectrum-Divider--sizeM { - --spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-medium-static-black)); - } + &.spectrum-Divider--sizeM { + --spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-medium-static-black)); + } - &.spectrum-Divider--sizeL { - --spectrum-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-divider-background-color-large-static-black)); - } + &.spectrum-Divider--sizeL { + --spectrum-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-divider-background-color-large-static-black)); + } } /* vertical dividers */ .spectrum-Divider--vertical { - inline-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); - margin-block: var(--mod-divider-vertical-margin); - block-size: var(--mod-divider-vertical-height, 100%); - align-self: var(--mod-divider-vertical-align); + inline-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + margin-block: var(--mod-divider-vertical-margin); + block-size: var(--mod-divider-vertical-height, 100%); + align-self: var(--mod-divider-vertical-align); } diff --git a/components/dropindicator/index.css b/components/dropindicator/index.css index 8b66dfbc83..78bba8d26a 100644 --- a/components/dropindicator/index.css +++ b/components/dropindicator/index.css @@ -11,94 +11,68 @@ governing permissions and limitations under the License. */ @media (forced-colors: active) { - .spectrum-DropIndicator { - --highcontrast-dropindicator-color: Highlight; - } + .spectrum-DropIndicator { + --highcontrast-dropindicator-color: Highlight; + } } .spectrum-DropIndicator { - --spectrum-dropindicator-border-color: var(--spectrum-dropindicator-color); - --spectrum-dropindicator-circle-color: var(--spectrum-dropindicator-color); - --spectrum-dropindicator-border-size: var(--spectrum-border-width-200); - --spectrum-dropindicator-circle-size: 12px; + --spectrum-dropindicator-border-color: var(--spectrum-dropindicator-color); + --spectrum-dropindicator-circle-color: var(--spectrum-dropindicator-color); + --spectrum-dropindicator-border-size: var(--spectrum-border-width-200); + --spectrum-dropindicator-circle-size: 12px; } .spectrum-DropIndicator { - position: relative; - background: var( - --highcontrast-dropindicator-color, - var(--mod-dropindicator-border-color, var(--spectrum-dropindicator-border-color)) - ); + position: relative; + background: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-border-color, var(--spectrum-dropindicator-border-color))); - &::before, - &::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) - ); - border-radius: 50%; - border: var( - --mod-dropindicator-border-size, - var(--spectrum-dropindicator-border-size)) solid; - box-sizing: border-box; - border-color: var( - --highcontrast-dropindicator-color, - var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-circle-color)) - ); - } + &::before, + &::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)); + border-radius: 50%; + border: var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)) solid; + box-sizing: border-box; + border-color: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-circle-color))); + } } .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 { - inset-block-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)) / 2 + var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)) / 2); - } + &::before, + &::after { + inset-block-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)) / 2 + var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)) / 2); + } - &::before { - inset-inline-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size))); - } + &::before { + inset-inline-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size))); + } - &::after { - inset-inline-end: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size))); - } + &::after { + inset-inline-end: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size))); + } } .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) - ); - margin-inline: 0; + 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, - &::after { - inset-inline-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)) / 2 + var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)) / 2); - } + &::before, + &::after { + inset-inline-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)) / 2 + var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)) / 2); + } - &::before { - inset-block-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size))); - } + &::before { + inset-block-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size))); + } - &::after { - inset-block-end: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size))); - } + &::after { + inset-block-end: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size))); + } } diff --git a/components/dropzone/index.css b/components/dropzone/index.css index df0e8e8e71..abecdc131d 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -11,161 +11,161 @@ governing permissions and limitations under the License. */ .spectrum-DropZone { - --spectrum-drop-zone-padding: var(--spectrum-spacing-400); - --spectrum-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); - --spectrum-drop-zone-heading-to-body: var(--spectrum-spacing-75); - - --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); - --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-drop-zone-border-color: var(--spectrum-gray-300); - - --spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); - --spectrum-drop-zone-heading-line-height: var(--spectrum-heading-line-height); - --spectrum-drop-zone-heading-color: var(--spectrum-heading-color); - - --spectrum-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); - --spectrum-drop-zone-body-line-height: var(--spectrum-body-line-height); - --spectrum-drop-zone-body-color: var(--spectrum-body-color); - - --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); - --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); - --spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color); - - - /* Filled styles */ - --spectrum-drop-zone-content-height: var(--spectrum-component-height-300); - --spectrum-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width); - --spectrum-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - - --spectrum-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); - --spectrum-drop-zone-content-font-style: var(--spectrum-default-font-style); - --spectrum-drop-zone-content-font-size: var(--spectrum-font-size-300); - --spectrum-drop-zone-content-line-height: var(--spectrum-line-height-100); - - --spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-content-color: var(--spectrum-white); - - /* Settings for a nested illustrated message */ - --mod-illustrated-message-content-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width)); - --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color, var(--spectrum-drop-zone-illustration-color)); - --mod-illustrated-message-title-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-drop-zone-illustration-to-heading)); - --mod-illustrated-message-heading-to-body: var(--mod-drop-zone-heading-to-body, var(--spectrum-drop-zone-heading-to-body)); - --mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-drop-zone-heading-font-family)); - --mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-drop-zone-heading-font-weight)); - --mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-drop-zone-heading-font-style)); - --mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-heading-font-size)); - --mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-drop-zone-heading-line-height)); - --mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-drop-zone-heading-color)); - --mod-illustrated-message-description-position: relative; - --mod-illustrated-message-description-z-index: 10; - --mod-illustrated-message-heading-to-description: 0; - --mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-drop-zone-body-font-family)); - --mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-drop-zone-body-font-weight)); - --mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-drop-zone-body-font-style)); - --mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-font-size)); - --mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-drop-zone-body-line-height)); - --mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-drop-zone-body-color)); - - /* Settings for a nested actionbutton */ - --mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-drop-zone-content-font-size)); - --mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-drop-zone-content-color)); - --mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-drop-zone-content-edge-to-text)); - - /* cjk language support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-cjk-title-size); - } + --spectrum-drop-zone-padding: var(--spectrum-spacing-400); + --spectrum-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); + --spectrum-drop-zone-heading-to-body: var(--spectrum-spacing-75); + + --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); + --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-drop-zone-border-color: var(--spectrum-gray-300); + + --spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --spectrum-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style); + --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); + --spectrum-drop-zone-heading-line-height: var(--spectrum-heading-line-height); + --spectrum-drop-zone-heading-color: var(--spectrum-heading-color); + + --spectrum-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); + --spectrum-drop-zone-body-line-height: var(--spectrum-body-line-height); + --spectrum-drop-zone-body-color: var(--spectrum-body-color); + + --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); + --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); + --spectrum-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + --spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color); + + /* Filled styles */ + --spectrum-drop-zone-content-height: var(--spectrum-component-height-300); + --spectrum-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width); + --spectrum-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300); + --spectrum-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + + --spectrum-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --spectrum-drop-zone-content-font-style: var(--spectrum-default-font-style); + --spectrum-drop-zone-content-font-size: var(--spectrum-font-size-300); + --spectrum-drop-zone-content-line-height: var(--spectrum-line-height-100); + + --spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color); + --spectrum-drop-zone-content-color: var(--spectrum-white); + + /* Settings for a nested illustrated message */ + --mod-illustrated-message-content-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width)); + --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color, var(--spectrum-drop-zone-illustration-color)); + --mod-illustrated-message-title-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-drop-zone-illustration-to-heading)); + --mod-illustrated-message-heading-to-body: var(--mod-drop-zone-heading-to-body, var(--spectrum-drop-zone-heading-to-body)); + --mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-drop-zone-heading-font-family)); + --mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-drop-zone-heading-font-weight)); + --mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-drop-zone-heading-font-style)); + --mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-heading-font-size)); + --mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-drop-zone-heading-line-height)); + --mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-drop-zone-heading-color)); + --mod-illustrated-message-description-position: relative; + --mod-illustrated-message-description-z-index: 10; + --mod-illustrated-message-heading-to-description: 0; + --mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-drop-zone-body-font-family)); + --mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-drop-zone-body-font-weight)); + --mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-drop-zone-body-font-style)); + --mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-font-size)); + --mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-drop-zone-body-line-height)); + --mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-drop-zone-body-color)); + + /* Settings for a nested actionbutton */ + --mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-drop-zone-content-font-size)); + --mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-drop-zone-content-color)); + --mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-drop-zone-content-edge-to-text)); + + /* cjk language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-cjk-title-size); + } } .spectrum-DropZone { - box-sizing: border-box; - inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width)); - padding: calc(var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width))); - text-align: center; - border-color: var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color)); - border-width: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)); - border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-drop-zone-corner-radius)); - border-style: var(--mod-drop-zone-border-style, dashed); - background-size: cover; - background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color)); - - &.is-dragged { - /* @deprecation --mod-drop-zone-border-style--dragged will be removed during the S2 migration; please update your code to --mod-drop-zone-border-style-dragged */ - --mod-drop-zone-border-style: var(--mod-drop-zone-border-style--dragged, var(--mod-drop-zone-border-style-dragged, solid)); - --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-background-color-opacity))); - --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); - - /* Updated values for a nested illustrated message when state changes */ - --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover)); - } - - &.is-filled { - /* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */ - --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled))); - - /* Updated values for a nested illustrated message when state changes */ - --mod-illustrated-message-display: none; - } - - &.is-filled.is-dragged { - --mod-drop-zone-content-display: flex; - } - - &:focus-visible { - --mod-drop-zone-border-style: solid; - --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); - outline: 0; - } + box-sizing: border-box; + inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width)); + padding: calc(var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width))); + text-align: center; + border-color: var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color)); + border-width: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)); + border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-drop-zone-corner-radius)); + border-style: var(--mod-drop-zone-border-style, dashed); + background-size: cover; + background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color)); + + &.is-dragged { + /* @deprecation --mod-drop-zone-border-style--dragged will be removed during the S2 migration; please update your code to --mod-drop-zone-border-style-dragged */ + --mod-drop-zone-border-style: var(--mod-drop-zone-border-style--dragged, var(--mod-drop-zone-border-style-dragged, solid)); + --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-background-color-opacity))); + --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); + + /* Updated values for a nested illustrated message when state changes */ + --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover)); + } + + &.is-filled { + /* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */ + --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled))); + + /* Updated values for a nested illustrated message when state changes */ + --mod-illustrated-message-display: none; + } + + &.is-filled.is-dragged { + --mod-drop-zone-content-display: flex; + } + + &:focus-visible { + --mod-drop-zone-border-style: solid; + --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); + outline: 0; + } } .spectrum-DropZone-content { - display: var(--mod-drop-zone-content-display, none); - block-size: 100%; - align-items: center; - justify-content: center; - position: relative; - z-index: 10; + display: var(--mod-drop-zone-content-display, none); + block-size: 100%; + align-items: center; + justify-content: center; + position: relative; + z-index: 10; } .spectrum-DropZone-button { - box-sizing: border-box; - border: none; - block-size: var(--mod-drop-zone-content-height, var(--spectrum-drop-zone-content-height)); - max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-max-width)); - padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-drop-zone-content-top-to-text)); - padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-drop-zone-content-bottom-to-text)); - background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color)); - - font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-drop-zone-content-font-family)); - font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-drop-zone-content-font-weight)); - font-style: var(--mod-drop-zone-content-font-style, var(--spectrum-drop-zone-content-font-style)); - line-height: var(--mod-drop-zone-content-line-height, var(--spectrum-drop-zone-content-line-height)); - - &:hover, &:focus { - background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color)); - } + box-sizing: border-box; + border: none; + block-size: var(--mod-drop-zone-content-height, var(--spectrum-drop-zone-content-height)); + max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-max-width)); + padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-drop-zone-content-top-to-text)); + padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-drop-zone-content-bottom-to-text)); + background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color)); + + font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-drop-zone-content-font-family)); + font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-drop-zone-content-font-weight)); + font-style: var(--mod-drop-zone-content-font-style, var(--spectrum-drop-zone-content-font-style)); + line-height: var(--mod-drop-zone-content-line-height, var(--spectrum-drop-zone-content-line-height)); + + &:hover, + &:focus { + background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color)); + } } /********* WHCM *********/ @media (forced-colors: active) { - .spectrum-DropZone { - --highcontrast-drop-zone-illustration-color: CanvasText; + .spectrum-DropZone { + --highcontrast-drop-zone-illustration-color: CanvasText; - --highcontrast-drop-zone-border-color-hover: Highlight; + --highcontrast-drop-zone-border-color-hover: Highlight; - /* Updated values for a nested illustrated message when in a high contrast state */ - --highcontrast-illustrated-message-illustration-color: var(--highcontrast-drop-zone-illustration-color); - } + /* Updated values for a nested illustrated message when in a high contrast state */ + --highcontrast-illustrated-message-illustration-color: var(--highcontrast-drop-zone-illustration-color); + } } diff --git a/components/fieldgroup/index.css b/components/fieldgroup/index.css index 1b49fa7331..c5757a7202 100644 --- a/components/fieldgroup/index.css +++ b/components/fieldgroup/index.css @@ -10,7 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ - /* fieldgroup/index.css * * fieldgroup contains four component dependences: @@ -20,62 +19,62 @@ governing permissions and limitations under the License. /* custom properties */ .spectrum-FieldGroup { - --spectrum-fieldgroup-margin: var(--spectrum-spacing-300); - --spectrum-fieldgroup-readonly-delimiter: '\002c'; + --spectrum-fieldgroup-margin: var(--spectrum-spacing-300); + --spectrum-fieldgroup-readonly-delimiter: "\002c"; } /* field group */ .spectrum-FieldGroup { - display: flex; - flex-flow: column wrap; + display: flex; + flex-flow: column wrap; } /* field group label top aligned */ .spectrum-FieldGroup--toplabel { - flex-direction: column; + flex-direction: column; } /* field group label side aligned */ .spectrum-FieldGroup--sidelabel { - flex-direction: row; + flex-direction: row; } /* input fields layout */ .spectrum-FieldGroupInputLayout { - display: flex; - flex-flow: column wrap; + display: flex; + flex-flow: column wrap; - /* input fields stacked vertically */ - .spectrum-FieldGroup--vertical & { - flex-direction: column; - } + /* input fields stacked vertically */ + .spectrum-FieldGroup--vertical & { + flex-direction: column; + } - /* input fields aligned horizontally */ - .spectrum-FieldGroup--horizontal & { - flex-direction: row; + /* input fields aligned horizontally */ + .spectrum-FieldGroup--horizontal & { + flex-direction: row; - /* space between horizontal fields */ - .spectrum-FieldGroup-item:not(:last-child) { - margin-inline-end: var(--spectrum-fieldgroup-margin); - } + /* space between horizontal fields */ + .spectrum-FieldGroup-item:not(:last-child) { + margin-inline-end: var(--spectrum-fieldgroup-margin); + } - /* move help text down to new row */ - .spectrum-HelpText { - flex-basis: 100%; - } - } + /* move help text down to new row */ + .spectrum-HelpText { + flex-basis: 100%; + } + } } /* read-only checkbox group */ .spectrum-FieldGroup { - .spectrum-Checkbox.is-readOnly { - .spectrum-Checkbox-box { - display: none; - } + .spectrum-Checkbox.is-readOnly { + .spectrum-Checkbox-box { + display: none; + } - /* read-only checkbox fields delimited by commas */ - &:not(:last-child) .spectrum-Checkbox-label::after { - content: var(--spectrum-fieldgroup-readonly-delimiter); - } - } + /* read-only checkbox fields delimited by commas */ + &:not(:last-child) .spectrum-Checkbox-label::after { + content: var(--spectrum-fieldgroup-readonly-delimiter); + } + } } diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css index fd4b63b2f4..d2b1194be9 100644 --- a/components/fieldlabel/index.css +++ b/components/fieldlabel/index.css @@ -11,176 +11,176 @@ governing permissions and limitations under the License. */ .spectrum-FieldLabel { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); - --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); + --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); - --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight); - --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100); - --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight); + --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100); + --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100); } .spectrum-FieldLabel--sizeS { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100); - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); } .spectrum-FieldLabel--sizeM { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); } .spectrum-FieldLabel--sizeL { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100); + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100); - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); } .spectrum-FieldLabel--sizeXL { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200); + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200); - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); } .spectrum-FieldLabel { - display: block; - box-sizing: border-box; - min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height)); + display: block; + box-sizing: border-box; + min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height)); - padding-block: var(--mod-field-label-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text)); - padding-inline: 0; + padding-block: var(--mod-field-label-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text)); + padding-inline: 0; - font-size: var(--mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size)); - font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-fieldlabel-font-weight)); + font-size: var(--mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size)); + font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-fieldlabel-font-weight)); - line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height)); + line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height)); - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; - color: var(--spectrum-fieldlabel-color); + color: var(--spectrum-fieldlabel-color); - /* CJK (Chinese, Japanese, and Korean) language support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-fieldlabel-line-height-cjk)); - } + /* CJK (Chinese, Japanese, and Korean) language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-fieldlabel-line-height-cjk)); + } } .spectrum-FieldLabel-requiredIcon { - margin-block: 0; - margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0; - vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline); + margin-block: 0; + margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0; + vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline); } .spectrum-FieldLabel--left, .spectrum-FieldLabel--right { - display: inline-block; + display: inline-block; - margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-fieldlabel-side-margin-block-start)); - margin-block-end: 0; - margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right)); + margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-fieldlabel-side-margin-block-start)); + margin-block-end: 0; + margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right)); - vertical-align: top; + vertical-align: top; } .spectrum-FieldLabel--right { - text-align: end; + text-align: end; } /********* Form *********/ .spectrum-Form { - --spectrum-tableform-item-block-spacing: var(--spectrum-spacing-300); + --spectrum-tableform-item-block-spacing: var(--spectrum-spacing-300); - margin: 0; - display: grid; - grid-template-columns: var(--mod-form-grid-template-columns, auto auto); - inline-size: var(--mod-form-inline-size, fit-content); - justify-content: start; + margin: 0; + display: grid; + grid-template-columns: var(--mod-form-grid-template-columns, auto auto); + inline-size: var(--mod-form-inline-size, fit-content); + justify-content: start; - /* @deprecation --mod-tableform-item-block-spacing has been renamed to + /* @deprecation --mod-tableform-item-block-spacing has been renamed to --mod-form-item-block-spacing. The fallback will be removed in a future version. */ - row-gap: var(--mod-form-item-block-spacing, var(--mod-tableform-item-block-spacing, var(--spectrum-tableform-item-block-spacing))); + row-gap: var(--mod-form-item-block-spacing, var(--mod-tableform-item-block-spacing, var(--spectrum-tableform-item-block-spacing))); } /* Row */ .spectrum-Form-item { - display: contents; + display: contents; } -@supports(grid-template-columns: subgrid){ - .spectrum-Form-item { - display: grid; - grid-column: span 2; - grid-template-columns: subgrid; - } +@supports (grid-template-columns: subgrid) { + .spectrum-Form-item { + display: grid; + grid-column: span 2; + grid-template-columns: subgrid; + } } .spectrum-Form-itemLabel, .spectrum-Form-itemField { - display: block; + display: block; } /* Fix extra space after inline-flex elements such as stepper. */ .spectrum-Form-itemField > * { - vertical-align: top; + vertical-align: top; } /* Rows with stacked alignment */ .spectrum-Form--labelsAbove { - /* @deprecation --mod-tableform-item-block-spacing-labels-above has been renamed to + /* @deprecation --mod-tableform-item-block-spacing-labels-above has been renamed to --mod-form-item-block-spacing-labels-above. The fallback will be removed in a future version. */ - --mod-form-item-block-spacing: var(--mod-form-item-block-spacing-labels-above, var(--mod-tableform-item-block-spacing-labels-above, var(--spectrum-spacing-200))); - --mod-form-grid-template-columns: var(--mod-form-grid-template-columns-labels-above, auto); + --mod-form-item-block-spacing: var(--mod-form-item-block-spacing-labels-above, var(--mod-tableform-item-block-spacing-labels-above, var(--spectrum-spacing-200))); + --mod-form-grid-template-columns: var(--mod-form-grid-template-columns-labels-above, auto); - .spectrum-Form-item { - display: block; - } + .spectrum-Form-item { + display: block; + } } /********* Disabled state *********/ .spectrum-FieldLabel, .spectrum-Form-itemLabel { - &.is-disabled { - color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color))); + &.is-disabled { + color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color))); - .spectrum-FieldLabel-requiredIcon { - color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color))); - } - } + .spectrum-FieldLabel-requiredIcon { + color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color))); + } + } } /********* WHCM *********/ @media (forced-colors: active) { - .spectrum-FieldLabel { - --highcontrast-disabled-content-color: GrayText; - } + .spectrum-FieldLabel { + --highcontrast-disabled-content-color: GrayText; + } } diff --git a/components/floatingactionbutton/index.css b/components/floatingactionbutton/index.css index b22bd972ce..c06a08a62a 100644 --- a/components/floatingactionbutton/index.css +++ b/components/floatingactionbutton/index.css @@ -11,111 +11,110 @@ governing permissions and limitations under the License. */ .spectrum-FloatingActionButton { - --spectrum-floating-action-button-size: var(--spectrum-component-height-200); - --spectrum-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-floating-action-button-padding: var(--spectrum-component-pill-edge-to-visual-only-200); - --spectrum-floating-action-button-margin: var(--spectrum-spacing-200); - --spectrum-floating-action-button-drop-shadow-x: var(--spectrum-drop-shadow-x); - - --spectrum-floating-action-button-focus-ring-width: var(--spectrum-focus-indicator-thickness); - --spectrum-floating-action-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-floating-action-button-focus-ring-color: var(--spectrum-focus-indicator-color); - - --spectrum-floating-action-button-background-color: var(--spectrum-accent-background-color-default); - --spectrum-floating-action-button-background-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-floating-action-button-background-color-down: var(--spectrum-accent-background-color-down); - --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-accent-background-color-key-focus); - --spectrum-floating-action-button-icon-color: var(--spectrum-white); - --spectrum-floating-action-button-icon-color-hover: var(--spectrum-white); - --spectrum-floating-action-button-icon-color-down: var(--spectrum-white); - --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-white); + --spectrum-floating-action-button-size: var(--spectrum-component-height-200); + --spectrum-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-floating-action-button-padding: var(--spectrum-component-pill-edge-to-visual-only-200); + --spectrum-floating-action-button-margin: var(--spectrum-spacing-200); + --spectrum-floating-action-button-drop-shadow-x: var(--spectrum-drop-shadow-x); + + --spectrum-floating-action-button-focus-ring-width: var(--spectrum-focus-indicator-thickness); + --spectrum-floating-action-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-floating-action-button-focus-ring-color: var(--spectrum-focus-indicator-color); + + --spectrum-floating-action-button-background-color: var(--spectrum-accent-background-color-default); + --spectrum-floating-action-button-background-color-hover: var(--spectrum-accent-background-color-hover); + --spectrum-floating-action-button-background-color-down: var(--spectrum-accent-background-color-down); + --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-accent-background-color-key-focus); + --spectrum-floating-action-button-icon-color: var(--spectrum-white); + --spectrum-floating-action-button-icon-color-hover: var(--spectrum-white); + --spectrum-floating-action-button-icon-color-down: var(--spectrum-white); + --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-white); } .spectrum-FloatingActionButton--secondary { - --spectrum-floating-action-button-background-color: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-background-color-hover: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-background-color-down: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-icon-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-floating-action-button-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-floating-action-button-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-floating-action-button-background-color: var(--spectrum-background-layer-2-color); + --spectrum-floating-action-button-background-color-hover: var(--spectrum-background-layer-2-color); + --spectrum-floating-action-button-background-color-down: var(--spectrum-background-layer-2-color); + --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-background-layer-2-color); + --spectrum-floating-action-button-icon-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-floating-action-button-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-floating-action-button-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); } @media (forced-colors: active) { - .spectrum-FloatingActionButton { - &::after { - /* make sure focus-ring renders */ - forced-color-adjust: none; - } - - --highcontrast-floating-action-button-background-color: ButtonText; - --highcontrast-floating-action-button-background-color-hover: Highlight; - --highcontrast-floating-action-button-background-color-down: Highlight; - --highcontrast-floating-action-button-background-color-key-focus: Highlight; - - --highcontrast-floating-action-button-icon-color: ButtonFace; - --highcontrast-floating-action-button-icon-color-hover: ButtonFace; - --highcontrast-floating-action-button-icon-color-down: ButtonFace; - --highcontrast-floating-action-button-icon-color-key-focus: ButtonFace; - - } + .spectrum-FloatingActionButton { + &::after { + /* make sure focus-ring renders */ + forced-color-adjust: none; + } + + --highcontrast-floating-action-button-background-color: ButtonText; + --highcontrast-floating-action-button-background-color-hover: Highlight; + --highcontrast-floating-action-button-background-color-down: Highlight; + --highcontrast-floating-action-button-background-color-key-focus: Highlight; + + --highcontrast-floating-action-button-icon-color: ButtonFace; + --highcontrast-floating-action-button-icon-color-hover: ButtonFace; + --highcontrast-floating-action-button-icon-color-down: ButtonFace; + --highcontrast-floating-action-button-icon-color-key-focus: ButtonFace; + } } .spectrum-FloatingActionButton { - cursor: pointer; - block-size: var(--mod-floating-action-button-size, var(--spectrum-floating-action-button-size)); - inline-size: var(--mod-floating-action-button-size, var(--spectrum-floating-action-button-size)); - border-radius: var(--mod-floating-action-button-border-radius, 50%); - padding-inline: var(--mod-floating-action-button-padding, var(--spectrum-floating-action-button-padding)); - padding-block: var(--mod-floating-action-button-padding, var(--spectrum-floating-action-button-padding)); - margin-inline-end: var(--mod-floating-action-button-margin, var(--spectrum-floating-action-button-margin)); - margin-block-end: var(--mod-floating-action-button-margin, var(--spectrum-floating-action-button-margin)); - border: none; - box-shadow: var(--mod-floating-action-button-drop-shadow-x, var(--spectrum-floating-action-button-drop-shadow-x)) var(--mod-floating-action-button-drop-shadow-y, var(--spectrum-floating-action-button-drop-shadow-y)) var(--mod-floating-action-button-drop-shadow-blur, var(--spectrum-floating-action-button-drop-shadow-blur)) var(--mod-floating-action-button-drop-shadow-color, var(--spectrum-floating-action-button-drop-shadow-color)); - position: relative; - - /* default is primary */ - background-color: var(--highcontrast-floating-action-button-background-color, var(--mod-floating-action-button-background-color, var(--spectrum-floating-action-button-background-color))); - - &:hover { - background-color: var(--highcontrast-floating-action-button-background-color-hover, var(--mod-floating-action-button-background-color-hover, var(--spectrum-floating-action-button-background-color-hover))); - - .spectrum-FloatingActionButton-icon { - fill: var(--highcontrast-floating-action-button-icon-color-hover, var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))); - } - } - - &:active { - background-color: var(--highcontrast-floating-action-button-background-color-down, var(--mod-floating-action-button-background-color-down, var(--spectrum-floating-action-button-background-color-down))); - - .spectrum-FloatingActionButton-icon { - fill: var(--highcontrast-floating-action-button-icon-color-down, var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))); - } - } - - &:focus-visible { - background-color: var(--highcontrast-floating-action-button-background-color-key-focus, var(--mod-floating-action-button-background-color-key-focus, var(--spectrum-floating-action-button-background-color-key-focus))); - outline: 0; - - .spectrum-FloatingActionButton-icon { - fill: var(--highcontrast-floating-action-button-icon-color-key-focus, var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))); - } - - &::after { - position: absolute; - inset: 0; - margin: calc(-1 * var(--mod-floating-action-button-focus-ring-gap, var(--spectrum-floating-action-button-focus-ring-gap))); - box-shadow: 0 0 0 var(--mod-floating-action-button-focus-ring-width, var(--spectrum-floating-action-button-focus-ring-width)) var(--highcontrast-floating-action-button-focus-ring-color, var(--mod-afloating-action-button-focus-ring-color, var(--spectrum-floating-action-button-focus-ring-color))); - border-radius: var(--mod-floating-action-button-border-radius, 50%); - pointer-events: none; - content: ''; - } - } + cursor: pointer; + block-size: var(--mod-floating-action-button-size, var(--spectrum-floating-action-button-size)); + inline-size: var(--mod-floating-action-button-size, var(--spectrum-floating-action-button-size)); + border-radius: var(--mod-floating-action-button-border-radius, 50%); + padding-inline: var(--mod-floating-action-button-padding, var(--spectrum-floating-action-button-padding)); + padding-block: var(--mod-floating-action-button-padding, var(--spectrum-floating-action-button-padding)); + margin-inline-end: var(--mod-floating-action-button-margin, var(--spectrum-floating-action-button-margin)); + margin-block-end: var(--mod-floating-action-button-margin, var(--spectrum-floating-action-button-margin)); + border: none; + box-shadow: var(--mod-floating-action-button-drop-shadow-x, var(--spectrum-floating-action-button-drop-shadow-x)) var(--mod-floating-action-button-drop-shadow-y, var(--spectrum-floating-action-button-drop-shadow-y)) var(--mod-floating-action-button-drop-shadow-blur, var(--spectrum-floating-action-button-drop-shadow-blur)) var(--mod-floating-action-button-drop-shadow-color, var(--spectrum-floating-action-button-drop-shadow-color)); + position: relative; + + /* default is primary */ + background-color: var(--highcontrast-floating-action-button-background-color, var(--mod-floating-action-button-background-color, var(--spectrum-floating-action-button-background-color))); + + &:hover { + background-color: var(--highcontrast-floating-action-button-background-color-hover, var(--mod-floating-action-button-background-color-hover, var(--spectrum-floating-action-button-background-color-hover))); + + .spectrum-FloatingActionButton-icon { + fill: var(--highcontrast-floating-action-button-icon-color-hover, var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))); + } + } + + &:active { + background-color: var(--highcontrast-floating-action-button-background-color-down, var(--mod-floating-action-button-background-color-down, var(--spectrum-floating-action-button-background-color-down))); + + .spectrum-FloatingActionButton-icon { + fill: var(--highcontrast-floating-action-button-icon-color-down, var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))); + } + } + + &:focus-visible { + background-color: var(--highcontrast-floating-action-button-background-color-key-focus, var(--mod-floating-action-button-background-color-key-focus, var(--spectrum-floating-action-button-background-color-key-focus))); + outline: 0; + + .spectrum-FloatingActionButton-icon { + fill: var(--highcontrast-floating-action-button-icon-color-key-focus, var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))); + } + + &::after { + position: absolute; + inset: 0; + margin: calc(-1 * var(--mod-floating-action-button-focus-ring-gap, var(--spectrum-floating-action-button-focus-ring-gap))); + box-shadow: 0 0 0 var(--mod-floating-action-button-focus-ring-width, var(--spectrum-floating-action-button-focus-ring-width)) var(--highcontrast-floating-action-button-focus-ring-color, var(--mod-afloating-action-button-focus-ring-color, var(--spectrum-floating-action-button-focus-ring-color))); + border-radius: var(--mod-floating-action-button-border-radius, 50%); + pointer-events: none; + content: ""; + } + } } .spectrum-Icon.spectrum-FloatingActionButton-icon { - block-size: var(--mod-floating-action-button-icon-size, var(--spectrum-floating-action-button-icon-size)); - inline-size: var(--mod-floating-action-button-icon-size, var(--spectrum-floating-action-button-icon-size)); - fill: var(--highcontrast-floating-action-button-icon-color, var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))); + block-size: var(--mod-floating-action-button-icon-size, var(--spectrum-floating-action-button-icon-size)); + inline-size: var(--mod-floating-action-button-icon-size, var(--spectrum-floating-action-button-icon-size)); + fill: var(--highcontrast-floating-action-button-icon-color, var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))); } diff --git a/components/helptext/index.css b/components/helptext/index.css index dcf2189be8..313c15f693 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -11,147 +11,147 @@ governing permissions and limitations under the License. */ .spectrum-HelpText { - --spectrum-helptext-line-height: var(--spectrum-line-height-100); - --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-disabled-content-color: var(--spectrum-disabled-content-color); - - &.spectrum-HelpText--neutral { - --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - } - - &.spectrum-HelpText--negative { - --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900); - --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900); - } - - &.is-disabled { - --spectrum-helptext-content-color-default: var(--spectrum-helptext-disabled-content-color); - --spectrum-helptext-icon-color-default: var(--spectrum-helptext-disabled-content-color); - } - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-helptext-line-height-cjk: var(--spectrum-cjk-line-height-100); - } + --spectrum-helptext-line-height: var(--spectrum-line-height-100); + --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-helptext-disabled-content-color: var(--spectrum-disabled-content-color); + + &.spectrum-HelpText--neutral { + --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + } + + &.spectrum-HelpText--negative { + --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900); + --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900); + } + + &.is-disabled { + --spectrum-helptext-content-color-default: var(--spectrum-helptext-disabled-content-color); + --spectrum-helptext-icon-color-default: var(--spectrum-helptext-disabled-content-color); + } + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-helptext-line-height-cjk: var(--spectrum-cjk-line-height-100); + } } .spectrum-HelpText--sizeS { - --spectrum-helptext-min-height: var(--spectrum-component-height-75); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-helptext-font-size: var(--spectrum-font-size-75); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-helptext-min-height: var(--spectrum-component-height-75); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-helptext-font-size: var(--spectrum-font-size-75); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small); + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); } .spectrum-HelpText--sizeM { - --spectrum-helptext-min-height: var(--spectrum-component-height-75); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-helptext-font-size: var(--spectrum-font-size-75); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-helptext-min-height: var(--spectrum-component-height-75); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-helptext-font-size: var(--spectrum-font-size-75); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium); + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); } .spectrum-HelpText--sizeL { - --spectrum-helptext-min-height: var(--spectrum-component-height-100); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-helptext-font-size: var(--spectrum-font-size-100); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-helptext-min-height: var(--spectrum-component-height-100); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-helptext-font-size: var(--spectrum-font-size-100); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large); + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100); } .spectrum-HelpText--sizeXL { - --spectrum-helptext-min-height: var(--spectrum-component-height-200); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-helptext-font-size: var(--spectrum-font-size-200); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-helptext-min-height: var(--spectrum-component-height-200); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-helptext-font-size: var(--spectrum-font-size-200); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large); + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200); } @media (forced-colors: active) { - .spectrum-HelpText { - --highcontrast-helptext-content-color-default: CanvasText; - --highcontrast-helptext-icon-color-default: CanvasText; + .spectrum-HelpText { + --highcontrast-helptext-content-color-default: CanvasText; + --highcontrast-helptext-icon-color-default: CanvasText; - forced-color-adjust: none; + forced-color-adjust: none; - .spectrum-HelpText-validationIcon, - .spectrum-HelpText-text { - forced-color-adjust: none; - } - } + .spectrum-HelpText-validationIcon, + .spectrum-HelpText-text { + forced-color-adjust: none; + } + } } .spectrum-HelpText { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); - display: flex; - font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); - min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); - - .spectrum-HelpText-validationIcon { - margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual)); - padding-block-start: var(--mod-helptext-top-to-workflow-icon, var(--spectrum-helptext-top-to-workflow-icon)); - padding-block-end: var(--mod-helptext-bottom-to-workflow-icon, var(--spectrum-helptext-bottom-to-workflow-icon)); - flex-shrink: 0; - block-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); - inline-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); - } - - .spectrum-HelpText-text { - padding-block-start: var(--mod-helptext-top-to-text, var(--spectrum-helptext-top-to-text)); - padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text)); - line-height: var(--mod-helptext-line-height, var(--spectrum-helptext-line-height)); - } - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - .spectrum-HelpText-text { - line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-helptext-line-height-cjk)); - } - } - - &.spectrum-HelpText--neutral { - .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); - } - - .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); - } - } - - &.spectrum-HelpText--negative { - .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); - } - - .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); - } - } - - &.is-disabled { - .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); - } - - .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); - } - } + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + display: flex; + font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); + min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); + + .spectrum-HelpText-validationIcon { + margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual)); + padding-block-start: var(--mod-helptext-top-to-workflow-icon, var(--spectrum-helptext-top-to-workflow-icon)); + padding-block-end: var(--mod-helptext-bottom-to-workflow-icon, var(--spectrum-helptext-bottom-to-workflow-icon)); + flex-shrink: 0; + block-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); + inline-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); + } + + .spectrum-HelpText-text { + padding-block-start: var(--mod-helptext-top-to-text, var(--spectrum-helptext-top-to-text)); + padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text)); + line-height: var(--mod-helptext-line-height, var(--spectrum-helptext-line-height)); + } + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + .spectrum-HelpText-text { + line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-helptext-line-height-cjk)); + } + } + + &.spectrum-HelpText--neutral { + .spectrum-HelpText-text { + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + } + + .spectrum-HelpText-validationIcon { + color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + } + } + + &.spectrum-HelpText--negative { + .spectrum-HelpText-text { + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + } + + .spectrum-HelpText-validationIcon { + color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + } + } + + &.is-disabled { + .spectrum-HelpText-text { + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + } + + .spectrum-HelpText-validationIcon { + color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + } + } } diff --git a/components/icon/icons.css b/components/icon/icons.css index 33318286cb..4cd2e440b9 100644 --- a/components/icon/icons.css +++ b/components/icon/icons.css @@ -12,32 +12,32 @@ governing permissions and limitations under the License. .spectrum-Icon, .spectrum-UIIcon { - --spectrum-icon-inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size))); - --spectrum-icon-block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size))); + --spectrum-icon-inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size))); + --spectrum-icon-block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size))); - display: inline-block; - inline-size: var(--spectrum-icon-inline-size); - block-size: var(--spectrum-icon-block-size); + display: inline-block; + inline-size: var(--spectrum-icon-inline-size); + block-size: var(--spectrum-icon-block-size); - /* Use custom pass through or inherit the text color. */ - color: var(--mod-icon-color, inherit); + /* Use custom pass through or inherit the text color. */ + color: var(--mod-icon-color, inherit); - /* Fill should match the current text color. */ - fill: currentColor; + /* Fill should match the current text color. */ + fill: currentColor; - /* Hide the SVG overflow in IE. */ - &:not(:root) { - overflow: hidden; - } + /* Hide the SVG overflow in IE. */ + &:not(:root) { + overflow: hidden; + } - /* Don't catch clicks or hover, otherwise they may not escape the SVG. */ - pointer-events: none; + /* Don't catch clicks or hover, otherwise they may not escape the SVG. */ + pointer-events: none; } @media (forced-colors: active) { - .spectrum-Icon, - .spectrum-UIIcon { - /* Automatically adjust the SVG to pick up the text color for High Contrast mode */ - forced-color-adjust: auto; - } + .spectrum-Icon, + .spectrum-UIIcon { + /* Automatically adjust the SVG to pick up the text color for High Contrast mode */ + forced-color-adjust: auto; + } } diff --git a/components/icon/index.css b/components/icon/index.css index 5568b4ab27..e52ae8ee2e 100644 --- a/components/icon/index.css +++ b/components/icon/index.css @@ -10,6 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import 'icons.css'; -@import 'workflow-icons.css'; -@import 'ui-icons.css'; +@import "icons.css"; +@import "workflow-icons.css"; +@import "ui-icons.css"; diff --git a/components/icon/ui-icons.css b/components/icon/ui-icons.css index 33fd98d49f..2d18e604b2 100644 --- a/components/icon/ui-icons.css +++ b/components/icon/ui-icons.css @@ -19,11 +19,11 @@ governing permissions and limitations under the License. */ .spectrum-UIIcon--medium { - display: var(--mod-ui-icon-medium-display, var(--spectrum-ui-icon-medium-display, block)); + display: var(--mod-ui-icon-medium-display, var(--spectrum-ui-icon-medium-display, block)); } .spectrum-UIIcon--large { - display: var(--mod-ui-icon-large-display, var(--spectrum-ui-icon-large-display, none)); + display: var(--mod-ui-icon-large-display, var(--spectrum-ui-icon-large-display, none)); } /* @@ -35,397 +35,397 @@ governing permissions and limitations under the License. /* Chevron */ .spectrum-UIIcon-ChevronRight50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); } .spectrum-UIIcon-ChevronRight75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); } .spectrum-UIIcon-ChevronRight100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); } .spectrum-UIIcon-ChevronRight200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); } .spectrum-UIIcon-ChevronRight300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); } .spectrum-UIIcon-ChevronRight400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); } .spectrum-UIIcon-ChevronRight500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); } .spectrum-UIIcon-ChevronDown50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); + transform: rotate(90deg); } .spectrum-UIIcon-ChevronDown75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); + transform: rotate(90deg); } .spectrum-UIIcon-ChevronDown100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); + transform: rotate(90deg); } .spectrum-UIIcon-ChevronDown200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); + transform: rotate(90deg); } .spectrum-UIIcon-ChevronDown300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); + transform: rotate(90deg); } .spectrum-UIIcon-ChevronDown400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); + transform: rotate(90deg); } .spectrum-UIIcon-ChevronDown500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); + transform: rotate(90deg); } .spectrum-UIIcon-ChevronLeft50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - transform: rotate(180deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); + transform: rotate(180deg); } .spectrum-UIIcon-ChevronLeft75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - transform: rotate(180deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); + transform: rotate(180deg); } .spectrum-UIIcon-ChevronLeft100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - transform: rotate(180deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); + transform: rotate(180deg); } .spectrum-UIIcon-ChevronLeft200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - transform: rotate(180deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); + transform: rotate(180deg); } .spectrum-UIIcon-ChevronLeft300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - transform: rotate(180deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); + transform: rotate(180deg); } .spectrum-UIIcon-ChevronLeft400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - transform: rotate(180deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); + transform: rotate(180deg); } .spectrum-UIIcon-ChevronLeft500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - transform: rotate(180deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); + transform: rotate(180deg); } .spectrum-UIIcon-ChevronUp50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - transform: rotate(270deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); + transform: rotate(270deg); } .spectrum-UIIcon-ChevronUp75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - transform: rotate(270deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); + transform: rotate(270deg); } .spectrum-UIIcon-ChevronUp100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - transform: rotate(270deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); + transform: rotate(270deg); } .spectrum-UIIcon-ChevronUp200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - transform: rotate(270deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); + transform: rotate(270deg); } .spectrum-UIIcon-ChevronUp300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - transform: rotate(270deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); + transform: rotate(270deg); } .spectrum-UIIcon-ChevronUp400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - transform: rotate(270deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); + transform: rotate(270deg); } .spectrum-UIIcon-ChevronUp500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - transform: rotate(270deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); + transform: rotate(270deg); } /* Arrow */ .spectrum-UIIcon-ArrowRight75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); } .spectrum-UIIcon-ArrowRight100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); } .spectrum-UIIcon-ArrowRight200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); } .spectrum-UIIcon-ArrowRight300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); } .spectrum-UIIcon-ArrowRight400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); } .spectrum-UIIcon-ArrowRight500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); } .spectrum-UIIcon-ArrowRight600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); } .spectrum-UIIcon-ArrowDown75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); + transform: rotate(90deg); } .spectrum-UIIcon-ArrowDown100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); + transform: rotate(90deg); } .spectrum-UIIcon-ArrowDown200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); + transform: rotate(90deg); } .spectrum-UIIcon-ArrowDown300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); + transform: rotate(90deg); } .spectrum-UIIcon-ArrowDown400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); + transform: rotate(90deg); } .spectrum-UIIcon-ArrowDown500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); + transform: rotate(90deg); } .spectrum-UIIcon-ArrowDown600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); + transform: rotate(90deg); } .spectrum-UIIcon-ArrowLeft75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - transform: rotate(180deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); + transform: rotate(180deg); } .spectrum-UIIcon-ArrowLeft100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - transform: rotate(180deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); + transform: rotate(180deg); } .spectrum-UIIcon-ArrowLeft200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - transform: rotate(180deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); + transform: rotate(180deg); } .spectrum-UIIcon-ArrowLeft300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - transform: rotate(180deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); + transform: rotate(180deg); } .spectrum-UIIcon-ArrowLeft400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - transform: rotate(180deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); + transform: rotate(180deg); } .spectrum-UIIcon-ArrowLeft500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - transform: rotate(180deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); + transform: rotate(180deg); } .spectrum-UIIcon-ArrowLeft600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - transform: rotate(180deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); + transform: rotate(180deg); } .spectrum-UIIcon-ArrowUp75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - transform: rotate(270deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); + transform: rotate(270deg); } .spectrum-UIIcon-ArrowUp100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - transform: rotate(270deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); + transform: rotate(270deg); } .spectrum-UIIcon-ArrowUp200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - transform: rotate(270deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); + transform: rotate(270deg); } .spectrum-UIIcon-ArrowUp300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - transform: rotate(270deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); + transform: rotate(270deg); } .spectrum-UIIcon-ArrowUp400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - transform: rotate(270deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); + transform: rotate(270deg); } .spectrum-UIIcon-ArrowUp500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - transform: rotate(270deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); + transform: rotate(270deg); } .spectrum-UIIcon-ArrowUp600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - transform: rotate(270deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); + transform: rotate(270deg); } /* Checkmark */ .spectrum-UIIcon-Checkmark50 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-50); + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-50); } .spectrum-UIIcon-Checkmark75 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-75); + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-75); } .spectrum-UIIcon-Checkmark100 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-100); + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-100); } .spectrum-UIIcon-Checkmark200 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-200); + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-200); } .spectrum-UIIcon-Checkmark300 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-300); + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-300); } .spectrum-UIIcon-Checkmark400 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-400); + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-400); } .spectrum-UIIcon-Checkmark500 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-500); + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-500); } .spectrum-UIIcon-Checkmark600 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-600); + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-600); } /* Dash */ .spectrum-UIIcon-Dash50 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-50); + --spectrum-icon-size: var(--spectrum-dash-icon-size-50); } .spectrum-UIIcon-Dash75 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-75); + --spectrum-icon-size: var(--spectrum-dash-icon-size-75); } .spectrum-UIIcon-Dash100 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-100); + --spectrum-icon-size: var(--spectrum-dash-icon-size-100); } .spectrum-UIIcon-Dash200 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-200); + --spectrum-icon-size: var(--spectrum-dash-icon-size-200); } .spectrum-UIIcon-Dash300 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-300); + --spectrum-icon-size: var(--spectrum-dash-icon-size-300); } .spectrum-UIIcon-Dash400 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-400); + --spectrum-icon-size: var(--spectrum-dash-icon-size-400); } .spectrum-UIIcon-Dash500 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-500); + --spectrum-icon-size: var(--spectrum-dash-icon-size-500); } .spectrum-UIIcon-Dash600 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-600); + --spectrum-icon-size: var(--spectrum-dash-icon-size-600); } /* Cross */ .spectrum-UIIcon-Cross75 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-75); + --spectrum-icon-size: var(--spectrum-cross-icon-size-75); } .spectrum-UIIcon-Cross100 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-100); + --spectrum-icon-size: var(--spectrum-cross-icon-size-100); } .spectrum-UIIcon-Cross200 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-200); + --spectrum-icon-size: var(--spectrum-cross-icon-size-200); } .spectrum-UIIcon-Cross300 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-300); + --spectrum-icon-size: var(--spectrum-cross-icon-size-300); } .spectrum-UIIcon-Cross400 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-400); + --spectrum-icon-size: var(--spectrum-cross-icon-size-400); } .spectrum-UIIcon-Cross500 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-500); + --spectrum-icon-size: var(--spectrum-cross-icon-size-500); } .spectrum-UIIcon-Cross600 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-600); + --spectrum-icon-size: var(--spectrum-cross-icon-size-600); } /* Corner Triangle */ .spectrum-UIIcon-CornerTriangle75 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-75); + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-75); } .spectrum-UIIcon-CornerTriangle100 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-100); + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-100); } .spectrum-UIIcon-CornerTriangle200 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-200); + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-200); } .spectrum-UIIcon-CornerTriangle300 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-300); + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-300); } /* Asterisk */ .spectrum-UIIcon-Asterisk75 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-75); + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-75); } .spectrum-UIIcon-Asterisk100 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-100); + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-100); } .spectrum-UIIcon-Asterisk200 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-200); + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-200); } .spectrum-UIIcon-Asterisk300 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-300); + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-300); } diff --git a/components/icon/workflow-icons.css b/components/icon/workflow-icons.css index 17a0ef4273..c8f978a81a 100644 --- a/components/icon/workflow-icons.css +++ b/components/icon/workflow-icons.css @@ -11,39 +11,39 @@ governing permissions and limitations under the License. */ .spectrum-Icon { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-icon-size: var(--spectrum-workflow-icon-size-100); } /* XXS icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */ .spectrum-Icon--sizeXXS { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxs); + --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxs); } .spectrum-Icon--sizeXS { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-50); + --spectrum-icon-size: var(--spectrum-workflow-icon-size-50); } .spectrum-Icon--sizeS { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-icon-size: var(--spectrum-workflow-icon-size-75); } .spectrum-Icon--sizeL { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-icon-size: var(--spectrum-workflow-icon-size-200); } .spectrum-Icon--sizeXL { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-icon-size: var(--spectrum-workflow-icon-size-300); } /* XXL icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */ .spectrum-Icon--sizeXXL { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxl); + --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxl); } .spectrum-Icon { - img, - svg { - inline-size: var(--spectrum-icon-inline-size); - block-size: var(--spectrum-icon-block-size); - } -} \ No newline at end of file + img, + svg { + inline-size: var(--spectrum-icon-inline-size); + block-size: var(--spectrum-icon-block-size); + } +} diff --git a/components/illustratedmessage/index.css b/components/illustratedmessage/index.css index 5e8ae9c2f0..92406f09db 100644 --- a/components/illustratedmessage/index.css +++ b/components/illustratedmessage/index.css @@ -11,103 +11,103 @@ governing permissions and limitations under the License. */ .spectrum-IllustratedMessage { - /* Size & Spacing */ - --spectrum-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width); - --spectrum-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width); - --spectrum-illustrated-message-title-to-heading: var(--spectrum-spacing-400); - --spectrum-illustrated-message-heading-to-description: var(--spectrum-spacing-75); - - /* Illustration */ - --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color); - --spectrum-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color); - - /* Title */ - --spectrum-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size); - --spectrum-illustrated-message-title-line-height: var(--spectrum-heading-line-height); - --spectrum-illustrated-message-title-color: var(--spectrum-heading-color); - - /* Description */ - --spectrum-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size); - --spectrum-illustrated-message-description-line-height: var(--spectrum-body-line-height); - --spectrum-illustrated-message-description-color: var(--spectrum-body-color); - - /* CJK (Chinese, Japanese, and Korean) language support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); - } + /* Size & Spacing */ + --spectrum-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width); + --spectrum-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width); + --spectrum-illustrated-message-title-to-heading: var(--spectrum-spacing-400); + --spectrum-illustrated-message-heading-to-description: var(--spectrum-spacing-75); + + /* Illustration */ + --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color); + --spectrum-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color); + + /* Title */ + --spectrum-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --spectrum-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size); + --spectrum-illustrated-message-title-line-height: var(--spectrum-heading-line-height); + --spectrum-illustrated-message-title-color: var(--spectrum-heading-color); + + /* Description */ + --spectrum-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size); + --spectrum-illustrated-message-description-line-height: var(--spectrum-body-line-height); + --spectrum-illustrated-message-description-color: var(--spectrum-body-color); + + /* CJK (Chinese, Japanese, and Korean) language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); + } } @media (forced-colors: active) { - .spectrum-IllustratedMessage { - --highcontrast-illustrated-message-illustration-color: CanvasText; - --highcontrast-illustrated-message-illustration-accent-color: Highlight; - } + .spectrum-IllustratedMessage { + --highcontrast-illustrated-message-illustration-color: CanvasText; + --highcontrast-illustrated-message-illustration-accent-color: Highlight; + } } .spectrum-IllustratedMessage { - block-size: 100%; + block-size: 100%; - display: var(--mod-illustrated-message-display, flex); - flex-direction: column; - align-items: center; - justify-content: center; + display: var(--mod-illustrated-message-display, flex); + flex-direction: column; + align-items: center; + justify-content: center; - text-align: center; - pointer-events: var(--mod-illustrated-message-pointer-events, auto); - max-inline-size: var(--mod-illustrated-message-content-maximum-width); + text-align: center; + pointer-events: var(--mod-illustrated-message-pointer-events, auto); + max-inline-size: var(--mod-illustrated-message-content-maximum-width); } .spectrum-IllustratedMessage-illustration { - margin-block-end: var(--mod-illustrated-message-title-to-heading, var(--spectrum-illustrated-message-title-to-heading)); - color: var(--highcontrast-illustrated-message-illustration-color, var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))); - fill: currentColor; - stroke: currentColor; + margin-block-end: var(--mod-illustrated-message-title-to-heading, var(--spectrum-illustrated-message-title-to-heading)); + color: var(--highcontrast-illustrated-message-illustration-color, var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))); + fill: currentColor; + stroke: currentColor; } .spectrum-IllustratedMessage-accent { - color: var(--highcontrast-illustrated-message-illustration-accent-color, var(--mod-illustrated-message-illustration-accent-color, var(--spectrum-illustrated-message-illustration-accent-color))); + color: var(--highcontrast-illustrated-message-illustration-accent-color, var(--mod-illustrated-message-illustration-accent-color, var(--spectrum-illustrated-message-illustration-accent-color))); - /* Safari 16.3 🐛🛠️: Repeated stroke/fill properties is a workaround for a currentcolor bug that was fixed in 16.4. */ - fill: currentColor; - stroke: currentColor; + /* Safari 16.3 🐛🛠️: Repeated stroke/fill properties is a workaround for a currentcolor bug that was fixed in 16.4. */ + fill: currentColor; + stroke: currentColor; } .spectrum-IllustratedMessage-heading { - font-family: var(--mod-illustrated-message-title-font-family, var(--spectrum-illustrated-message-title-font-family)); - font-weight: var(--mod-illustrated-message-title-font-weight, var(--spectrum-illustrated-message-title-font-weight)); - font-style: var(--mod-illustrated-message-title-font-style, var(--spectrum-illustrated-message-title-font-style)); - font-size: var(--mod-illustrated-message-title-font-size, var(--spectrum-illustrated-message-title-font-size)); - line-height: var(--mod-illustrated-message-title-line-height, var(--spectrum-illustrated-message-title-line-height)); + font-family: var(--mod-illustrated-message-title-font-family, var(--spectrum-illustrated-message-title-font-family)); + font-weight: var(--mod-illustrated-message-title-font-weight, var(--spectrum-illustrated-message-title-font-weight)); + font-style: var(--mod-illustrated-message-title-font-style, var(--spectrum-illustrated-message-title-font-style)); + font-size: var(--mod-illustrated-message-title-font-size, var(--spectrum-illustrated-message-title-font-size)); + line-height: var(--mod-illustrated-message-title-line-height, var(--spectrum-illustrated-message-title-line-height)); - color: var(--mod-illustrated-message-title-color, var(--spectrum-illustrated-message-title-color)); + color: var(--mod-illustrated-message-title-color, var(--spectrum-illustrated-message-title-color)); - max-inline-size: var(--mod-illustrated-message-heading-max-inline-size, var(--spectrum-illustrated-message-heading-max-inline-size)); - margin-block-start: 0; - margin-block-end: var(--mod-illustrated-message-heading-to-body, 0); + max-inline-size: var(--mod-illustrated-message-heading-max-inline-size, var(--spectrum-illustrated-message-heading-max-inline-size)); + margin-block-start: 0; + margin-block-end: var(--mod-illustrated-message-heading-to-body, 0); } .spectrum-IllustratedMessage-description { - position: var(--mod-illustrated-message-description-position); - z-index: var(--mod-illustrated-message-description-z-index); - pointer-events: var(--mod-illustrated-message-description-pointer-events, auto); + position: var(--mod-illustrated-message-description-position); + z-index: var(--mod-illustrated-message-description-z-index); + pointer-events: var(--mod-illustrated-message-description-pointer-events, auto); - font-family: var(--mod-illustrated-message-description-font-family, var(--spectrum-illustrated-message-description-font-family)); - font-weight: var(--mod-illustrated-message-description-font-weight, var(--spectrum-illustrated-message-description-font-weight)); - font-style: var(--mod-illustrated-message-description-font-style, var(--spectrum-illustrated-message-description-font-style)); - font-size: var(--mod-illustrated-message-description-font-size, var(--spectrum-illustrated-message-description-font-size)); - line-height: var(--mod-illustrated-message-description-line-height, var(--spectrum-illustrated-message-description-line-height)); + font-family: var(--mod-illustrated-message-description-font-family, var(--spectrum-illustrated-message-description-font-family)); + font-weight: var(--mod-illustrated-message-description-font-weight, var(--spectrum-illustrated-message-description-font-weight)); + font-style: var(--mod-illustrated-message-description-font-style, var(--spectrum-illustrated-message-description-font-style)); + font-size: var(--mod-illustrated-message-description-font-size, var(--spectrum-illustrated-message-description-font-size)); + line-height: var(--mod-illustrated-message-description-line-height, var(--spectrum-illustrated-message-description-line-height)); - color: var(--mod-illustrated-message-description-color, var(--spectrum-illustrated-message-description-color)); + color: var(--mod-illustrated-message-description-color, var(--spectrum-illustrated-message-description-color)); - max-inline-size: var(--mod-illustrated-message-description-max-inline-size, var(--spectrum-illustrated-message-description-max-inline-size)); - margin-block-start: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description)); - margin-block-end: 0; + max-inline-size: var(--mod-illustrated-message-description-max-inline-size, var(--spectrum-illustrated-message-description-max-inline-size)); + margin-block-start: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description)); + margin-block-end: 0; } diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index fcbbaa9a4e..83d00c6438 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -18,70 +18,32 @@ 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-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-animation-duration: var(--spectrum-animation-duration-100); + + --spectrum-infield-button-icon-color: var(--spectrum-neutral-content-color-default); + --spectrum-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); --spectrum-infield-button-fill-justify-content: center; &:disabled { - --mod-infield-button-background-color: var( - --mod-infield-button-background-color-disabled, - var(--spectrum-disabled-background-color) - ); - --mod-infield-button-background-color-hover: var( - --mod-infield-button-background-color-hover-disabled, - var(--spectrum-disabled-background-color) - ); - --mod-infield-button-background-color-down: var( - --mod-infield-button-background-color-down-disabled, - var(--spectrum-disabled-background-color) - ); - --mod-infield-button-border-color: var( - --mod-infield-button-border-color-disabled, - var(--spectrum-disabled-background-color) - ); - - --mod-infield-button-icon-color: var( - --mod-infield-button-icon-color-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-infield-button-icon-color-hover: var( - --mod-infield-button-icon-color-hover-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-infield-button-icon-color-down: var( - --mod-infield-button-icon-color-down-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-infield-button-icon-color-key-focus: var( - --mod-infield-button-icon-color-key-focus-disabled, - var(--spectrum-disabled-content-color) - ); + --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 { @@ -90,7 +52,6 @@ governing permissions and limitations under the License. --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small); --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small); - } &.spectrum-InfieldButton--sizeL { @@ -99,7 +60,6 @@ governing permissions and limitations under the License. --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large); --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large); - } &.spectrum-InfieldButton--sizeXL { @@ -108,74 +68,37 @@ governing permissions and limitations under the License. --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large); --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large); - } &.spectrum-InfieldButton--top, &.spectrum-InfieldButton--bottom { - --mod-infield-button-width: var( - --mod-infield-button-width-stacked, - var(--spectrum-in-field-button-width-stacked-medium) - ); + --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-border-color: var( - --mod-infield-border-color-quiet, - transparent - ); - --mod-infield-button-border-width: var( - --mod-infield-button-border-width-quiet, - 0 - ); + --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent); + --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent); + --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent); + --mod-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent); + + --mod-infield-border-color: var(--mod-infield-border-color-quiet, transparent); + --mod-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0); &:disabled { - --mod-infield-button-background-color: var( - --mod-infield-button-background-color-quiet-disabled, - transparent - ); - --mod-infield-button-border-color: var( - --mod-infield-button-border-color-quiet-disabled, - transparent - ); + --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); } } @@ -197,92 +120,43 @@ 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) - ); - - padding: var( - --mod-infield-button-fill-padding, - var(--spectrum-infield-button-fill-padding) - ); + 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)); + + 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)); } } @@ -292,33 +166,21 @@ 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)); } } @@ -326,40 +188,29 @@ 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)); } } } .spectrum-InfieldButton-fill { - /* center icon */ - display: flex; - align-items: center; - justify-content: var( - --mod-infield-button-fill-justify-content, - var(--spectrum-infield-button-fill-justify-content) - ); - - transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out; + /* center icon */ + display: flex; + align-items: center; + justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content)); + + transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out; } /* Stacked in-field buttons */ /* Not currently in use (stepper uses Action Buttons) but adding the CSS so the option is there */ .spectrum-InfieldButton--top, .spectrum-InfieldButton--bottom { - block-size: calc( - var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2 - ); + block-size: calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2); .spectrum-InfieldButton-fill { box-sizing: border-box; @@ -369,68 +220,38 @@ 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-end-radius: var( - --mod-infield-button-stacked-bottom-border-radius-end-end, - var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)) - ); - border-block-end-width: var( - --mod-infield-button-stacked-bottom-border-block-end-width, - 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-end-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-end, var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius))); + border-block-end-width: var(--mod-infield-button-stacked-bottom-border-block-end-width, var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); } } .spectrum-InfieldButton-icon { display: initial; - /* don't be small, ever */ + /* don't be small, ever */ flex-shrink: 0; - /* remove margin used for centering */ + /* remove margin used for centering */ margin: 0 !important; } diff --git a/components/infieldbutton/themes/express.css b/components/infieldbutton/themes/express.css index d08bbd8cc6..238ec7c634 100644 --- a/components/infieldbutton/themes/express.css +++ b/components/infieldbutton/themes/express.css @@ -13,19 +13,19 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-InfieldButton { - --spectrum-infield-button-border-width: 0; - --spectrum-infield-button-border-color: transparent; + .spectrum-InfieldButton { + --spectrum-infield-button-border-width: 0; + --spectrum-infield-button-border-color: transparent; - --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-75); - --spectrum-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); + --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-75); + --spectrum-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); - --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); - --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); + --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); + --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); - --spectrum-infield-button-background-color: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-infield-button-background-color-down: var(--spectrum-gray-400); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-300); - } + --spectrum-infield-button-background-color: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-infield-button-background-color-down: var(--spectrum-gray-400); + --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-300); + } } diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css index ae22ee7244..50df93a4ba 100644 --- a/components/infieldbutton/themes/spectrum.css +++ b/components/infieldbutton/themes/spectrum.css @@ -11,20 +11,20 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-InfieldButton { - --spectrum-infield-button-border-width: var(--spectrum-border-width-100); - --spectrum-infield-button-border-color: inherit; + .spectrum-InfieldButton { + --spectrum-infield-button-border-width: var(--spectrum-border-width-100); + --spectrum-infield-button-border-color: inherit; - --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100); - --spectrum-infield-button-border-radius-reset: 0; + --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-infield-button-border-radius-reset: 0; - /* Have to call these out specifically due to Express differences */ - --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset); - --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); + /* Have to call these out specifically due to Express differences */ + --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset); + --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); - --spectrum-infield-button-background-color: var(--spectrum-gray-75); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-down: var(--spectrum-gray-300); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); - } + --spectrum-infield-button-background-color: var(--spectrum-gray-75); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-down: var(--spectrum-gray-300); + --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); + } } diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css index 98e85f1010..bf6ea32239 100644 --- a/components/inlinealert/index.css +++ b/components/inlinealert/index.css @@ -11,152 +11,152 @@ governing permissions and limitations under the License. */ .spectrum-InLineAlert { - /* Font */ - --spectrum-inlinealert-heading-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-inlinealert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-inlinealert-heading-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-inlinealert-heading-font-size: var(--spectrum-heading-size-xxs); - --spectrum-inlinealert-heading-line-height: var(--spectrum-heading-line-height); - - --spectrum-inlinealert-content-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-inlinealert-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-inlinealert-content-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-inlinealert-content-font-size: var(--spectrum-body-size-s); - --spectrum-inlinealert-content-line-height: var(--spectrum-body-line-height); - - /* Size */ - --spectrum-inlinealert-border-width: var(--spectrum-border-width-200); - --spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-100); - --spectrum-inlinealert-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-inlinealert-min-inline-size: var(--spectrum-in-line-alert-minimum-width); - --spectrum-inlinealert-header-min-block-size: var(--spectrum-component-height-50); - - /* Spacing */ - --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400); - --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400); - --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-spacing-300); - - /* Color */ - --spectrum-inlinealert-background-color: var(--spectrum-background-layer-2-color); - --spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color); - --spectrum-inlinealert-header-color: var(--spectrum-heading-color); - --spectrum-inlinealert-content-color: var(--spectrum-body-color); - --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-informative-visual-color); - --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color); - --spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color); - --spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color); + /* Font */ + --spectrum-inlinealert-heading-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-inlinealert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --spectrum-inlinealert-heading-font-style: var(--spectrum-heading-sans-serif-font-style); + --spectrum-inlinealert-heading-font-size: var(--spectrum-heading-size-xxs); + --spectrum-inlinealert-heading-line-height: var(--spectrum-heading-line-height); + + --spectrum-inlinealert-content-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-inlinealert-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-inlinealert-content-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-inlinealert-content-font-size: var(--spectrum-body-size-s); + --spectrum-inlinealert-content-line-height: var(--spectrum-body-line-height); + + /* Size */ + --spectrum-inlinealert-border-width: var(--spectrum-border-width-200); + --spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-100); + --spectrum-inlinealert-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-inlinealert-min-inline-size: var(--spectrum-in-line-alert-minimum-width); + --spectrum-inlinealert-header-min-block-size: var(--spectrum-component-height-50); + + /* Spacing */ + --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400); + --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400); + --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-spacing-300); + + /* Color */ + --spectrum-inlinealert-background-color: var(--spectrum-background-layer-2-color); + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color); + --spectrum-inlinealert-header-color: var(--spectrum-heading-color); + --spectrum-inlinealert-content-color: var(--spectrum-body-color); + --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-informative-visual-color); + --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color); + --spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color); + --spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color); } .spectrum-InLineAlert { - position: relative; + position: relative; - display: inline-block; - box-sizing: border-box; - min-inline-size: var(--mod-inlinealert-min-inline-size, var(--spectrum-inlinealert-min-inline-size)); + display: inline-block; + box-sizing: border-box; + min-inline-size: var(--mod-inlinealert-min-inline-size, var(--spectrum-inlinealert-min-inline-size)); - padding-block: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text)); - padding-inline: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text)); + padding-block: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text)); + padding-inline: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text)); - border-block-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width)); - border-inline-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width)); - border-style: solid; - border-radius: var(--mod-inlinealert-border-radius, var(--spectrum-inlinealert-border-radius)); + border-block-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width)); + border-inline-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width)); + border-style: solid; + border-radius: var(--mod-inlinealert-border-radius, var(--spectrum-inlinealert-border-radius)); - background-color: var(--highcontrast-inlinealert-background-color, var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color))); - border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color))); + background-color: var(--highcontrast-inlinealert-background-color, var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color))); + border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color))); } @media (forced-colors: active) { - .spectrum-InLineAlert { - --highcontrast-inlinealert-background-color: Background; - --highcontrast-inlinealert-header-color: CanvasText; - --highcontrast-inlinealert-content-color: CanvasText; - --highcontrast-inlinealert-border-and-icon-color: ButtonBorder; - } + .spectrum-InLineAlert { + --highcontrast-inlinealert-background-color: Background; + --highcontrast-inlinealert-header-color: CanvasText; + --highcontrast-inlinealert-content-color: CanvasText; + --highcontrast-inlinealert-border-and-icon-color: ButtonBorder; + } } .spectrum-InLineAlert-icon { - inline-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size)); - block-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size)); + inline-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size)); + block-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size)); } .spectrum-InLineAlert-header { - display: flex; - align-items: center; - justify-content: space-between; + display: flex; + align-items: center; + justify-content: space-between; - /* Minimum space between header and icon */ - gap: var(--mod-inlinealert-spacing-header-to-icon, var(--spectrum-inlinealert-spacing-header-to-icon)); + /* Minimum space between header and icon */ + gap: var(--mod-inlinealert-spacing-header-to-icon, var(--spectrum-inlinealert-spacing-header-to-icon)); - font-weight: var(--mod-inlinealert-heading-font-weight, var(--spectrum-inlinealert-heading-font-weight)); - font-family: var(--mod-inlinealert-heading-font-family, var(--spectrum-inlinealert-heading-font-family)); - font-style: var(--mod-inlinealert-heading-font-style, var(--spectrum-inlinealert-heading-font-style)); - font-size: var(--mod-inlinealert-heading-font-size, var(--spectrum-inlinealert-heading-font-size)); - line-height: var(--mod-inlinealert-heading-line-height, var(--spectrum-inlinealert-heading-line-height)); - text-transform: none; + font-weight: var(--mod-inlinealert-heading-font-weight, var(--spectrum-inlinealert-heading-font-weight)); + font-family: var(--mod-inlinealert-heading-font-family, var(--spectrum-inlinealert-heading-font-family)); + font-style: var(--mod-inlinealert-heading-font-style, var(--spectrum-inlinealert-heading-font-style)); + font-size: var(--mod-inlinealert-heading-font-size, var(--spectrum-inlinealert-heading-font-size)); + line-height: var(--mod-inlinealert-heading-line-height, var(--spectrum-inlinealert-heading-line-height)); + text-transform: none; - min-block-size: var(--mod-inlinealert-header-min-block-size, var(--spectrum-inlinealert-header-min-block-size)); + min-block-size: var(--mod-inlinealert-header-min-block-size, var(--spectrum-inlinealert-header-min-block-size)); - color: var(--highcontrast-inlinealert-header-color, var(--mod-inlinealert-header-color, var(--spectrum-inlinealert-header-color))); + color: var(--highcontrast-inlinealert-header-color, var(--mod-inlinealert-header-color, var(--spectrum-inlinealert-header-color))); } .spectrum-InLineAlert-content { - display: block; - margin-block-start: var(--mod-inlinealert-spacing-header-content-button, var(--spectrum-inlinealert-spacing-header-content-button)); - margin-block-end: 0; - margin-inline-start: 0; - margin-inline-end: 0; - padding: 0; - - word-wrap: break-word; - - font-weight: var(--mod-inlinealert-content-font-weight, var(--spectrum-inlinealert-content-font-weight)); - font-family: var(--mod-inlinealert-content-font-family, var(--spectrum-inlinealert-content-font-family)); - font-style: var(--mod-inlinealert-content-font-style, var(--spectrum-inlinealert-content-font-style)); - font-size: var(--mod-inlinealert-content-font-size, var(--spectrum-inlinealert-content-font-size)); - line-height: var(--mod-inlinealert-content-line-height, var(--spectrum-inlinealert-content-line-height)); - - color: var(--highcontrast-inlinealert-content-color, var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color))); + display: block; + margin-block-start: var(--mod-inlinealert-spacing-header-content-button, var(--spectrum-inlinealert-spacing-header-content-button)); + margin-block-end: 0; + margin-inline-start: 0; + margin-inline-end: 0; + padding: 0; + + word-wrap: break-word; + + font-weight: var(--mod-inlinealert-content-font-weight, var(--spectrum-inlinealert-content-font-weight)); + font-family: var(--mod-inlinealert-content-font-family, var(--spectrum-inlinealert-content-font-family)); + font-style: var(--mod-inlinealert-content-font-style, var(--spectrum-inlinealert-content-font-style)); + font-size: var(--mod-inlinealert-content-font-size, var(--spectrum-inlinealert-content-font-size)); + line-height: var(--mod-inlinealert-content-line-height, var(--spectrum-inlinealert-content-line-height)); + + color: var(--highcontrast-inlinealert-content-color, var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color))); } .spectrum-InLineAlert-footer { - display: flex; - justify-content: flex-end; - margin-block-start: var(--mod-inlinealert-spacing-header-content-button, var(--spectrum-inlinealert-spacing-header-content-button)); + display: flex; + justify-content: flex-end; + margin-block-start: var(--mod-inlinealert-spacing-header-content-button, var(--spectrum-inlinealert-spacing-header-content-button)); - &:empty { - display: none; - } + &:empty { + display: none; + } } .spectrum-InLineAlert--info { - border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-info, var(--spectrum-inlinealert-border-and-icon-color-info))); + border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-info, var(--spectrum-inlinealert-border-and-icon-color-info))); - .spectrum-InLineAlert-icon { - color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-info, var(--spectrum-inlinealert-border-and-icon-color-info))); - } + .spectrum-InLineAlert-icon { + color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-info, var(--spectrum-inlinealert-border-and-icon-color-info))); + } } .spectrum-InLineAlert--notice { - border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice))); + border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice))); - .spectrum-InLineAlert-icon { - color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice))); - } + .spectrum-InLineAlert-icon { + color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice))); + } } .spectrum-InLineAlert--positive { - border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-positive, var(--spectrum-inlinealert-border-and-icon-color-positive))); + border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-positive, var(--spectrum-inlinealert-border-and-icon-color-positive))); - .spectrum-InLineAlert-icon { - color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-positive, var(--spectrum-inlinealert-border-and-icon-color-positive))); - } + .spectrum-InLineAlert-icon { + color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-positive, var(--spectrum-inlinealert-border-and-icon-color-positive))); + } } .spectrum-InLineAlert--negative { - border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative))); + border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative))); - .spectrum-InLineAlert-icon { - color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative))); - } + .spectrum-InLineAlert-icon { + color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative))); + } } diff --git a/components/link/index.css b/components/link/index.css index 47aaf9c7cd..6f63d500ba 100644 --- a/components/link/index.css +++ b/components/link/index.css @@ -11,112 +11,112 @@ governing permissions and limitations under the License. */ .spectrum-Link { - --spectrum-link-animation-duration: var(--spectrum-animation-duration-100); - - /* Colors */ - /* Primary */ - --spectrum-link-text-color-primary-default: var(--spectrum-accent-content-color-default); - --spectrum-link-text-color-primary-hover: var(--spectrum-accent-content-color-hover); - --spectrum-link-text-color-primary-active: var(--spectrum-accent-content-color-down); - --spectrum-link-text-color-primary-focus: var(--spectrum-accent-content-color-key-focus); - - /* Secondary */ - --spectrum-link-text-color-secondary-default: var(--spectrum-neutral-content-color-default); - --spectrum-link-text-color-secondary-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-link-text-color-secondary-active: var(--spectrum-neutral-content-color-down); - --spectrum-link-text-color-secondary-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-link-text-color-white: var(--spectrum-white); - --spectrum-link-text-color-black: var(--spectrum-black); + --spectrum-link-animation-duration: var(--spectrum-animation-duration-100); + + /* Colors */ + /* Primary */ + --spectrum-link-text-color-primary-default: var(--spectrum-accent-content-color-default); + --spectrum-link-text-color-primary-hover: var(--spectrum-accent-content-color-hover); + --spectrum-link-text-color-primary-active: var(--spectrum-accent-content-color-down); + --spectrum-link-text-color-primary-focus: var(--spectrum-accent-content-color-key-focus); + + /* Secondary */ + --spectrum-link-text-color-secondary-default: var(--spectrum-neutral-content-color-default); + --spectrum-link-text-color-secondary-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-link-text-color-secondary-active: var(--spectrum-neutral-content-color-down); + --spectrum-link-text-color-secondary-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-link-text-color-white: var(--spectrum-white); + --spectrum-link-text-color-black: var(--spectrum-black); } /* Windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Link { - --highcontrast-link-text-color-primary-default: LinkText; - --highcontrast-link-text-color-primary-hover: LinkText; - --highcontrast-link-text-color-primary-active: LinkText; - --highcontrast-link-text-color-primary-focus: LinkText; - - --highcontrast-link-text-color-secondary-default: LinkText; - --highcontrast-link-text-color-secondary-hover: LinkText; - --highcontrast-link-text-color-secondary-active: LinkText; - --highcontrast-link-text-color-secondary-focus: LinkText; - - --highcontrast-link-text-color-white: LinkText; - --highcontrast-link-text-color-black: LinkText; - } + .spectrum-Link { + --highcontrast-link-text-color-primary-default: LinkText; + --highcontrast-link-text-color-primary-hover: LinkText; + --highcontrast-link-text-color-primary-active: LinkText; + --highcontrast-link-text-color-primary-focus: LinkText; + + --highcontrast-link-text-color-secondary-default: LinkText; + --highcontrast-link-text-color-secondary-hover: LinkText; + --highcontrast-link-text-color-secondary-active: LinkText; + --highcontrast-link-text-color-secondary-focus: LinkText; + + --highcontrast-link-text-color-white: LinkText; + --highcontrast-link-text-color-black: LinkText; + } } .spectrum-Link { - /* Remove the gray background on active links in IE 10. */ - background-color: transparent; - - /* Remove gaps in links underline in iOS 8+ and Safari 8+. */ - text-decoration-skip: objects; - text-decoration: underline; - transition: color var(--mod-link-animation-duration, var(--spectrum-link-animation-duration)) ease-in-out; - outline: none; - cursor: pointer; - - color: var(--highcontrast-link-text-color-primary-default, var(--mod-link-text-color-primary-default, var(--spectrum-link-text-color-primary-default))); - - &:hover { - color: var(--highcontrast-link-text-color-primary-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-link-text-color-primary-hover))); - } - - &:active { - color: var(--highcontrast-link-text-color-primary-active, var(--mod-link-text-color-primary-active, var(--spectrum-link-text-color-primary-active))); - } - - &:focus-visible { - color: var(--highcontrast-link-text-color-primary-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-link-text-color-primary-focus))); - text-decoration: underline; - text-decoration-style: double; - text-decoration-color: var(--highcontrast-link-focus-color, inherit); - } + /* Remove the gray background on active links in IE 10. */ + background-color: transparent; + + /* Remove gaps in links underline in iOS 8+ and Safari 8+. */ + text-decoration-skip: objects; + text-decoration: underline; + transition: color var(--mod-link-animation-duration, var(--spectrum-link-animation-duration)) ease-in-out; + outline: none; + cursor: pointer; + + color: var(--highcontrast-link-text-color-primary-default, var(--mod-link-text-color-primary-default, var(--spectrum-link-text-color-primary-default))); + + &:hover { + color: var(--highcontrast-link-text-color-primary-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-link-text-color-primary-hover))); + } + + &:active { + color: var(--highcontrast-link-text-color-primary-active, var(--mod-link-text-color-primary-active, var(--spectrum-link-text-color-primary-active))); + } + + &:focus-visible { + color: var(--highcontrast-link-text-color-primary-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-link-text-color-primary-focus))); + text-decoration: underline; + text-decoration-style: double; + text-decoration-color: var(--highcontrast-link-focus-color, inherit); + } } .spectrum-Link--secondary { - color: var(--highcontrast-link-text-color-secondary-default, var(--mod-link-text-color-secondary-default, var(--spectrum-link-text-color-secondary-default))); + color: var(--highcontrast-link-text-color-secondary-default, var(--mod-link-text-color-secondary-default, var(--spectrum-link-text-color-secondary-default))); - &:hover { - color: var(--highcontrast-link-text-color-secondary-hover, var(--mod-link-text-color-secondary-hover, var(--spectrum-link-text-color-secondary-hover))); - } + &:hover { + color: var(--highcontrast-link-text-color-secondary-hover, var(--mod-link-text-color-secondary-hover, var(--spectrum-link-text-color-secondary-hover))); + } - &:active { - color: var(--highcontrast-link-text-color-secondary-active, var(--mod-link-text-color-secondary-active, var(--spectrum-link-text-color-secondary-active))); - } + &:active { + color: var(--highcontrast-link-text-color-secondary-active, var(--mod-link-text-color-secondary-active, var(--spectrum-link-text-color-secondary-active))); + } - &:focus { - color: var(--highcontrast-link-text-color-secondary-focus, var(--mod-link-text-color-secondary-focus, var(--spectrum-link-text-color-secondary-focus))); - } + &:focus { + color: var(--highcontrast-link-text-color-secondary-focus, var(--mod-link-text-color-secondary-focus, var(--spectrum-link-text-color-secondary-focus))); + } } .spectrum-Link--quiet { - text-decoration: none; + text-decoration: none; - &:hover { - text-decoration: underline; - } + &:hover { + text-decoration: underline; + } } .spectrum-Link--staticWhite { - color: var(--highcontrast-link-text-color-white, var(--mod-link-text-color-white, var(--spectrum-link-text-color-white))); + color: var(--highcontrast-link-text-color-white, var(--mod-link-text-color-white, var(--spectrum-link-text-color-white))); - &:hover, - &:active, - &:focus { - color: var(--highcontrast-link-text-color-white, var(--mod-link-text-color-white, var(--spectrum-link-text-color-white))); - } + &:hover, + &:active, + &:focus { + color: var(--highcontrast-link-text-color-white, var(--mod-link-text-color-white, var(--spectrum-link-text-color-white))); + } } .spectrum-Link--staticBlack { - color: var(--highcontrast-link-text-color-black, var(--mod-link-text-color-black, var(--spectrum-link-text-color-black))); + color: var(--highcontrast-link-text-color-black, var(--mod-link-text-color-black, var(--spectrum-link-text-color-black))); - &:hover, - &:active, - &:focus { - color: var(--highcontrast-link-text-color-black, var(--mod-link-text-color-black, var(--spectrum-link-text-color-black))); - } + &:hover, + &:active, + &:focus { + color: var(--highcontrast-link-text-color-black, var(--mod-link-text-color-black, var(--spectrum-link-text-color-black))); + } } diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index dee858148c..40e185af11 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -13,125 +13,120 @@ governing permissions and limitations under the License. @import "@spectrum-css/commons/basebutton.css"; .spectrum-LogicButton { - --spectrum-logic-button-height: 24px; - --spectrum-logic-button-padding: var(--spectrum-component-edge-to-text-50); - --spectrum-logic-button-font-size: var(--spectrum-font-size-100); - --spectrum-logic-button-font-weight: var(--spectrum-bold-font-weight); - - --spectrum-logic-button-border-width: var(--spectrum-border-width-200); - --spectrum-logic-button-border-radius: var(--spectrum-corner-radius-100); - - --spectrum-logic-button-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --spectrum-logic-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-logic-button-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-logic-button-and-text-color: var(--spectrum-white); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - - --spectrum-logic-button-or-text-color: var(--spectrum-white); - - &:disabled, - &.is-disabled { - --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-gray-200)); - --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-gray-200)); - --mod-logic-button-and-text-color: var(--mod-logic-button-and-text-color-disabled, var(--spectrum-gray-500)); - --mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-gray-200)); - --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-gray-200)); - - --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-gray-200)); - --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-gray-200)); - --mod-logic-button-or-text-color: var(--mod-logic-button-or-text-color-disabled, var(--spectrum-gray-500)); - --mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-gray-200)); - --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-gray-200)); - } + --spectrum-logic-button-height: 24px; + --spectrum-logic-button-padding: var(--spectrum-component-edge-to-text-50); + --spectrum-logic-button-font-size: var(--spectrum-font-size-100); + --spectrum-logic-button-font-weight: var(--spectrum-bold-font-weight); + + --spectrum-logic-button-border-width: var(--spectrum-border-width-200); + --spectrum-logic-button-border-radius: var(--spectrum-corner-radius-100); + + --spectrum-logic-button-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --spectrum-logic-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-logic-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + + --spectrum-logic-button-and-text-color: var(--spectrum-white); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + + --spectrum-logic-button-or-text-color: var(--spectrum-white); + + &:disabled, + &.is-disabled { + --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-gray-200)); + --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-gray-200)); + --mod-logic-button-and-text-color: var(--mod-logic-button-and-text-color-disabled, var(--spectrum-gray-500)); + --mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-gray-200)); + --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-gray-200)); + + --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-gray-200)); + --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-gray-200)); + --mod-logic-button-or-text-color: var(--mod-logic-button-or-text-color-disabled, var(--spectrum-gray-500)); + --mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-gray-200)); + --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-gray-200)); + } } .spectrum-LogicButton { - @extend %spectrum-BaseButton; - @extend %spectrum-ButtonWithFocusRing; - - block-size: var(--mod-logic-button-height, var(--spectrum-logic-button-height)); - padding: var(--mod-logic-button-padding, var(--spectrum-logic-button-padding)); - - border-width: var(--mod-logic-button-border-width, var(--spectrum-logic-button-border-width)); - border-radius: var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius)); - - font-size: var(--mod-logic-button-font-size, var(--spectrum-logic-button-font-size)); - font-weight: var(--mod-logic-button-font-weight, var(--spectrum-logic-button-font-weight)); - line-height: 0; - - &::after { - /* Override border-radius set in %spectrum-ButtonWithFocusRing since this is not a pill button */ - border-radius: calc( - var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius)) + - var(--mod-logic-button-focus-indicator-gap, var(--spectrum-logic-button-focus-indicator-gap)) - ); - } + @extend %spectrum-BaseButton; + @extend %spectrum-ButtonWithFocusRing; + + block-size: var(--mod-logic-button-height, var(--spectrum-logic-button-height)); + padding: var(--mod-logic-button-padding, var(--spectrum-logic-button-padding)); + + border-width: var(--mod-logic-button-border-width, var(--spectrum-logic-button-border-width)); + border-radius: var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius)); + + font-size: var(--mod-logic-button-font-size, var(--spectrum-logic-button-font-size)); + font-weight: var(--mod-logic-button-font-weight, var(--spectrum-logic-button-font-weight)); + line-height: 0; + + &::after { + /* Override border-radius set in %spectrum-ButtonWithFocusRing since this is not a pill button */ + border-radius: calc(var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius)) + var(--mod-logic-button-focus-indicator-gap, var(--spectrum-logic-button-focus-indicator-gap))); + } } .spectrum-LogicButton { - &:focus-visible { - outline: none; - - &::after { - box-shadow: 0 0 0 var(--mod-logic-button-focus-indicator-width, var(--spectrum-logic-button-focus-indicator-width)) - var(--highcontrast-logic-button-focus-indicator-color, var(--mod-logic-button-focus-indicator-color, var(--spectrum-logic-button-focus-indicator-color))); - } - } + &:focus-visible { + outline: none; + + &::after { + box-shadow: 0 0 0 var(--mod-logic-button-focus-indicator-width, var(--spectrum-logic-button-focus-indicator-width)) var(--highcontrast-logic-button-focus-indicator-color, var(--mod-logic-button-focus-indicator-color, var(--spectrum-logic-button-focus-indicator-color))); + } + } } .spectrum-LogicButton--and { - background-color: var(--highcontrast-logic-button-and-background-color, var(--mod-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color))); - border-color: var(--highcontrast-logic-button-and-border-color, var(--mod-logic-button-and-border-color, var(--spectrum-logic-button-and-border-color))); - color: var(--highcontrast-logic-button-and-text-color, var(--mod-logic-button-and-text-color, var(--spectrum-logic-button-and-text-color))); - - &:hover:not([disabled]) { - background-color: var(--highcontrast-logic-button-and-background-color-hover, var(--mod-logic-button-and-background-color-hover, var(--spectrum-logic-button-and-background-color-hover))); - border-color: var(--highcontrast-logic-button-and-border-color-hover, var(--mod-logic-button-and-border-color-hover, var(--spectrum-logic-button-and-border-color-hover))); - } + background-color: var(--highcontrast-logic-button-and-background-color, var(--mod-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color))); + border-color: var(--highcontrast-logic-button-and-border-color, var(--mod-logic-button-and-border-color, var(--spectrum-logic-button-and-border-color))); + color: var(--highcontrast-logic-button-and-text-color, var(--mod-logic-button-and-text-color, var(--spectrum-logic-button-and-text-color))); + + &:hover:not([disabled]) { + background-color: var(--highcontrast-logic-button-and-background-color-hover, var(--mod-logic-button-and-background-color-hover, var(--spectrum-logic-button-and-background-color-hover))); + border-color: var(--highcontrast-logic-button-and-border-color-hover, var(--mod-logic-button-and-border-color-hover, var(--spectrum-logic-button-and-border-color-hover))); + } } .spectrum-LogicButton--or { - background-color: var(--highcontrast-logic-button-or-background-color, var(--mod-logic-button-or-background-color, var(--spectrum-logic-button-or-background-color))); - border-color: var(--highcontrast-logic-button-or-border-color, var(--mod-logic-button-or-border-color, var(--spectrum-logic-button-or-border-color))); - color: var(--highcontrast-logic-button-or-text-color, var(--mod-logic-button-or-text-color, var(--spectrum-logic-button-or-text-color))); - - &:hover:not([disabled]) { - background-color: var(--highcontrast-logic-button-or-background-color-hover, var(--mod-logic-button-or-background-color-hover, var(--spectrum-logic-button-or-background-color-hover))); - border-color: var(--highcontrast-logic-button-or-border-color-hover, var(--mod-logic-button-or-border-color-hover, var(--spectrum-logic-button-or-border-color-hover))); - } + background-color: var(--highcontrast-logic-button-or-background-color, var(--mod-logic-button-or-background-color, var(--spectrum-logic-button-or-background-color))); + border-color: var(--highcontrast-logic-button-or-border-color, var(--mod-logic-button-or-border-color, var(--spectrum-logic-button-or-border-color))); + color: var(--highcontrast-logic-button-or-text-color, var(--mod-logic-button-or-text-color, var(--spectrum-logic-button-or-text-color))); + + &:hover:not([disabled]) { + background-color: var(--highcontrast-logic-button-or-background-color-hover, var(--mod-logic-button-or-background-color-hover, var(--spectrum-logic-button-or-background-color-hover))); + border-color: var(--highcontrast-logic-button-or-border-color-hover, var(--mod-logic-button-or-border-color-hover, var(--spectrum-logic-button-or-border-color-hover))); + } } - @media (forced-colors: active) { - .spectrum-LogicButton::after { - --highcontrast-logic-button-focus-indicator-color: Highlight; - forced-color-adjust: none; - } - - .spectrum-LogicButton { - forced-color-adjust: none; - - &:disabled, - &.is-disabled { - --highcontrast-logic-button-and-background-color: ButtonFace; - --highcontrast-logic-button-and-border-color: GrayText; - --highcontrast-logic-button-and-text-color: GrayText; - --highcontrast-logic-button-or-background-color: ButtonFace; - --highcontrast-logic-button-or-border-color: GrayText; - --highcontrast-logic-button-or-text-color: GrayText; - } - - --highcontrast-logic-button-and-background-color: ButtonFace; - --highcontrast-logic-button-and-background-color-hover: ButtonFace; - --highcontrast-logic-button-and-border-color: ButtonText; - --highcontrast-logic-button-and-border-color-hover: Highlight; - --highcontrast-logic-button-and-text-color: ButtonText; - --highcontrast-logic-button-or-background-color: ButtonFace; - --highcontrast-logic-button-or-background-color-hover: ButtonFace; - --highcontrast-logic-button-or-border-color: ButtonText; - --highcontrast-logic-button-or-border-color-hover: Highlight; - --highcontrast-logic-button-or-text-color: ButtonText; - } + .spectrum-LogicButton::after { + --highcontrast-logic-button-focus-indicator-color: Highlight; + forced-color-adjust: none; + } + + .spectrum-LogicButton { + forced-color-adjust: none; + + &:disabled, + &.is-disabled { + --highcontrast-logic-button-and-background-color: ButtonFace; + --highcontrast-logic-button-and-border-color: GrayText; + --highcontrast-logic-button-and-text-color: GrayText; + --highcontrast-logic-button-or-background-color: ButtonFace; + --highcontrast-logic-button-or-border-color: GrayText; + --highcontrast-logic-button-or-text-color: GrayText; + } + + --highcontrast-logic-button-and-background-color: ButtonFace; + --highcontrast-logic-button-and-background-color-hover: ButtonFace; + --highcontrast-logic-button-and-border-color: ButtonText; + --highcontrast-logic-button-and-border-color-hover: Highlight; + --highcontrast-logic-button-and-text-color: ButtonText; + --highcontrast-logic-button-or-background-color: ButtonFace; + --highcontrast-logic-button-or-background-color-hover: ButtonFace; + --highcontrast-logic-button-or-border-color: ButtonText; + --highcontrast-logic-button-or-border-color-hover: Highlight; + --highcontrast-logic-button-or-text-color: ButtonText; + } } diff --git a/components/menu/index.css b/components/menu/index.css index 77f2da11af..fe890aae61 100644 --- a/components/menu/index.css +++ b/components/menu/index.css @@ -11,701 +11,676 @@ governing permissions and limitations under the License. */ .spectrum-Menu { - --spectrum-menu-item-min-height: var(--spectrum-component-height-100); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); - - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100); - - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75); - - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100); - - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); - - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); - - --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50); - --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50); - - --spectrum-menu-item-label-line-height: var(--spectrum-line-height-100); - --spectrum-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description); - --spectrum-menu-item-focus-indicator-width: var(--spectrum-border-width-200); - --spectrum-menu-item-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100); - - --spectrum-menu-item-label-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-menu-item-label-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-menu-item-label-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-menu-item-label-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-menu-item-label-icon-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-menu-item-label-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-menu-item-label-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-menu-item-label-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-menu-item-label-content-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-menu-item-label-icon-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-menu-item-description-line-height: var(--spectrum-line-height-100); - --spectrum-menu-item-description-line-height-cjk: var(--spectrum-cjk-line-height-100); - - --spectrum-menu-item-description-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-menu-item-description-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-menu-item-description-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-menu-item-description-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-menu-item-description-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-menu-section-header-line-height: var(--spectrum-line-height-100); - --spectrum-menu-section-header-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-menu-section-header-font-weight: var(--spectrum-bold-font-weight); - --spectrum-menu-section-header-color: var(--spectrum-gray-900); - --spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900); - - --spectrum-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900); - --spectrum-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); - --spectrum-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); - --spectrum-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); - - --spectrum-menu-drillin-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-menu-drillin-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-menu-drillin-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-menu-drillin-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - - --spectrum-menu-item-value-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-menu-item-value-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-menu-item-value-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-menu-item-value-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - - --spectrum-menu-checkmark-display-hidden: none; - --spectrum-menu-checkmark-display-shown: block; - --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown); - - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); - - /* "one" icon: chevron + additional icon (we don't count the chevron as an icon because it HAS to be there for a collapsible) */ - --spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start: - calc(( - var(--spectrum-menu-item-label-inline-edge-to-content) - + var(--spectrum-menu-item-checkmark-width) - + var(--spectrum-menu-item-text-to-control) - + var(--spectrum-menu-item-icon-width) - + var(--spectrum-menu-item-label-text-to-visual) - + var(--spectrum-menu-item-focus-indicator-width) - )); - - /* "no" icon: just the chevron (we're not counting it because it HAS to be there for a collapsible) */ - --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: - calc(( - var(--spectrum-menu-item-label-inline-edge-to-content) - + var(--spectrum-menu-item-checkmark-width) - + var(--spectrum-menu-item-label-text-to-visual) - + var(--spectrum-menu-item-focus-indicator-width) - )); + --spectrum-menu-item-min-height: var(--spectrum-component-height-100); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); + + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100); + + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75); + + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100); + + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); + + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); + + --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50); + --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + + --spectrum-menu-item-label-line-height: var(--spectrum-line-height-100); + --spectrum-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description); + --spectrum-menu-item-focus-indicator-width: var(--spectrum-border-width-200); + --spectrum-menu-item-focus-indicator-color: var(--spectrum-blue-800); + --spectrum-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100); + + --spectrum-menu-item-label-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-menu-item-label-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-menu-item-label-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-menu-item-label-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-menu-item-label-icon-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-menu-item-label-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-menu-item-label-icon-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-menu-item-label-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-menu-item-label-content-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-menu-item-label-icon-color-disabled: var(--spectrum-disabled-content-color); + + --spectrum-menu-item-description-line-height: var(--spectrum-line-height-100); + --spectrum-menu-item-description-line-height-cjk: var(--spectrum-cjk-line-height-100); + + --spectrum-menu-item-description-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-menu-item-description-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-menu-item-description-color-down: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-menu-item-description-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-menu-item-description-color-disabled: var(--spectrum-disabled-content-color); + + --spectrum-menu-section-header-line-height: var(--spectrum-line-height-100); + --spectrum-menu-section-header-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-menu-section-header-font-weight: var(--spectrum-bold-font-weight); + --spectrum-menu-section-header-color: var(--spectrum-gray-900); + --spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900); + + --spectrum-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900); + --spectrum-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); + --spectrum-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); + --spectrum-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); + + --spectrum-menu-drillin-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-menu-drillin-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-menu-drillin-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-menu-drillin-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + + --spectrum-menu-item-value-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-menu-item-value-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-menu-item-value-color-down: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-menu-item-value-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + + --spectrum-menu-checkmark-display-hidden: none; + --spectrum-menu-checkmark-display-shown: block; + --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown); + + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); + + /* "one" icon: chevron + additional icon (we don't count the chevron as an icon because it HAS to be there for a collapsible) */ + --spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-text-to-control) + var(--spectrum-menu-item-icon-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))); + + /* "no" icon: just the chevron (we're not counting it because it HAS to be there for a collapsible) */ + --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))); } .spectrum-Menu--sizeS { - --spectrum-menu-item-min-height: var(--spectrum-component-height-75); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-menu-item-min-height: var(--spectrum-component-height-75); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75); - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50); + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small); - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); } .spectrum-Menu--sizeL { - --spectrum-menu-item-min-height: var(--spectrum-component-height-200); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200); + --spectrum-menu-item-min-height: var(--spectrum-component-height-200); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200); - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100); + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large); - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large); + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large); - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large); + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large); } .spectrum-Menu--sizeXL { - --spectrum-menu-item-min-height: var(--spectrum-component-height-300); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300); + --spectrum-menu-item-min-height: var(--spectrum-component-height-300); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300); - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300); - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200); + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large); - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large); + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large); - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); } @media (forced-colors: active) { - .spectrum-Menu { - --highcontrast-menu-item-background-color-default: ButtonFace; - --highcontrast-menu-item-color-default: ButtonText; - - --highcontrast-menu-item-background-color-focus: Highlight; - --highcontrast-menu-item-color-focus: HighlightText; - - --highcontrast-menu-checkmark-icon-color-default: Highlight; - - --highcontrast-menu-item-color-disabled: GrayText; - --highcontrast-menu-item-focus-indicator-color: Highlight; - - --highcontrast-menu-item-selected-background-color: Highlight; - --highcontrast-menu-item-selected-color: HighlightText; - - @supports (color: SelectedItem) { - --highcontrast-menu-item-selected-background-color: SelectedItem; - --highcontrast-menu-item-selected-color: SelectedItemText; - } - - .spectrum-Menu-item { - /* Hide unstylable readability backplates. */ - forced-color-adjust: none; - } - - .spectrum-Menu-item:hover, .spectrum-Menu-item:focus { - .spectrum-Menu-itemCheckbox { - --highcontrast-checkbox-highlight-color-hover: ButtonText; - --highcontrast-checkbox-highlight-color-default: ButtonText; - } - - .spectrum-Menu-itemSwitch { - --highcontrast-switch-handle-border-color-hover: ButtonText; - --highcontrast-switch-handle-border-color-selected-default: ButtonText; - --highcontrast-switch-handle-border-color-selected-hover: ButtonText; - --highcontrast-switch-background-color-selected-default: ButtonText; - --highcontrast-switch-background-color-selected-hover: ButtonText; - } - } - - .spectrum-Menu-item--drillIn.is-open { - --highcontrast-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color); - --highcontrast-menu-item-color-default: var(--highcontrast-menu-item-selected-color); - } - - .spectrum-Menu-item--collapsible.is-open { - &:hover, - &:focus-within { - box-shadow: inset - calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) - 0 0 0 - var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); - } - - &:hover, - &:active, - &:focus, - &.is-focused { - --highcontrast-menu-item-color-focus: var(--highcontrast-menu-item-color-default); - } - } - } + .spectrum-Menu { + --highcontrast-menu-item-background-color-default: ButtonFace; + --highcontrast-menu-item-color-default: ButtonText; + + --highcontrast-menu-item-background-color-focus: Highlight; + --highcontrast-menu-item-color-focus: HighlightText; + + --highcontrast-menu-checkmark-icon-color-default: Highlight; + + --highcontrast-menu-item-color-disabled: GrayText; + --highcontrast-menu-item-focus-indicator-color: Highlight; + + --highcontrast-menu-item-selected-background-color: Highlight; + --highcontrast-menu-item-selected-color: HighlightText; + + @supports (color: SelectedItem) { + --highcontrast-menu-item-selected-background-color: SelectedItem; + --highcontrast-menu-item-selected-color: SelectedItemText; + } + + .spectrum-Menu-item { + /* Hide unstylable readability backplates. */ + forced-color-adjust: none; + } + + .spectrum-Menu-item:hover, + .spectrum-Menu-item:focus { + .spectrum-Menu-itemCheckbox { + --highcontrast-checkbox-highlight-color-hover: ButtonText; + --highcontrast-checkbox-highlight-color-default: ButtonText; + } + + .spectrum-Menu-itemSwitch { + --highcontrast-switch-handle-border-color-hover: ButtonText; + --highcontrast-switch-handle-border-color-selected-default: ButtonText; + --highcontrast-switch-handle-border-color-selected-hover: ButtonText; + --highcontrast-switch-background-color-selected-default: ButtonText; + --highcontrast-switch-background-color-selected-hover: ButtonText; + } + } + + .spectrum-Menu-item--drillIn.is-open { + --highcontrast-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color); + --highcontrast-menu-item-color-default: var(--highcontrast-menu-item-selected-color); + } + + .spectrum-Menu-item--collapsible.is-open { + &:hover, + &:focus-within { + box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); + } + + &:hover, + &:active, + &:focus, + &.is-focused { + --highcontrast-menu-item-color-focus: var(--highcontrast-menu-item-color-default); + } + } + } } .spectrum-Menu { - display: inline-block; - inline-size: var(--mod-menu-inline-size, auto); - box-sizing: border-box; - margin: 0; - padding: 0; - list-style-type: none; - overflow: auto; - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-menu-item-label-line-height: var(--mod-menu-item-label-line-height-cjk, var(--spectrum-menu-item-label-line-height-cjk)); - --spectrum-menu-item-description-line-height: var(--mod-menu-item-description-line-height-cjk, var(--spectrum-menu-item-description-line-height-cjk)); - --spectrum-menu-section-header-line-height: var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk)); - } - - .spectrum-Menu-divider { - --spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium); - - &.spectrum-Divider--sizeS { - --spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-small); - } - - overflow: visible; - inline-size: auto; - margin-block: var( - --mod-menu-section-divider-margin-block, - max(0px, (var(--spectrum-menu-item-section-divider-height) - var(--spectrum-menu-divider-thickness)) / 2) - ); - margin-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); - } + display: inline-block; + inline-size: var(--mod-menu-inline-size, auto); + box-sizing: border-box; + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-menu-item-label-line-height: var(--mod-menu-item-label-line-height-cjk, var(--spectrum-menu-item-label-line-height-cjk)); + --spectrum-menu-item-description-line-height: var(--mod-menu-item-description-line-height-cjk, var(--spectrum-menu-item-description-line-height-cjk)); + --spectrum-menu-section-header-line-height: var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk)); + } + + .spectrum-Menu-divider { + --spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium); + + &.spectrum-Divider--sizeS { + --spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-small); + } + + overflow: visible; + inline-size: auto; + margin-block: var(--mod-menu-section-divider-margin-block, max(0px, (var(--spectrum-menu-item-section-divider-height) - var(--spectrum-menu-divider-thickness)) / 2)); + margin-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); + } } /* Menus with "selectable" menu items. */ .spectrum-Menu.is-selectable { - /* Provide inline-start spacing for potential checkmarks. */ - .spectrum-Menu-item { - --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-hidden); - padding-inline-start: var(--mod-menu-item-selectable-edge-to-text-not-selected, var(--spectrum-menu-item-selectable-edge-to-text-not-selected)); + /* Provide inline-start spacing for potential checkmarks. */ + .spectrum-Menu-item { + --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-hidden); + padding-inline-start: var(--mod-menu-item-selectable-edge-to-text-not-selected, var(--spectrum-menu-item-selectable-edge-to-text-not-selected)); - /* Remove inline-start spacing once an item is selected and a checkmark appears. */ - &.is-selected { - --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown); - padding-inline-start: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); - } - } + /* Remove inline-start spacing once an item is selected and a checkmark appears. */ + &.is-selected { + --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown); + padding-inline-start: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); + } + } } .spectrum-Menu-itemIcon { - fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default))); - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default))); + fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default))); + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default))); } .spectrum-Menu-checkmark { - align-self: center; - display: var(--mod-menu-checkmark-display, var(--spectrum-menu-checkmark-display)); - fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default))); - color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default))); - opacity: 1; + align-self: center; + display: var(--mod-menu-checkmark-display, var(--spectrum-menu-checkmark-display)); + fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default))); + color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default))); + opacity: 1; } /* Presentational list items for sections and dividers. */ .spectrum-Menu li:not(.spectrum-Menu-item, .spectrum-Menu-divider) { - display: block; - position: relative; - box-sizing: border-box; - margin: 0; - padding: 0; + display: block; + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; } .spectrum-Menu-item { - cursor: pointer; - position: relative; - align-items: center; + cursor: pointer; + position: relative; + align-items: center; - box-sizing: border-box; + box-sizing: border-box; - background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))); + background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))); - line-height: var(--mod-menu-item-label-line-height, var(--spectrum-menu-item-label-line-height)); + line-height: var(--mod-menu-item-label-line-height, var(--spectrum-menu-item-label-line-height)); - min-block-size: var(--mod-menu-item-min-height, var(--spectrum-menu-item-min-height)); - padding-block-start: var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)); - padding-block-end: var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)); - padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); + min-block-size: var(--mod-menu-item-min-height, var(--spectrum-menu-item-min-height)); + padding-block-start: var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)); + padding-block-end: var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)); + padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); - margin: 0; - text-decoration: none; + margin: 0; + text-decoration: none; - .spectrum-Menu-itemCheckbox { - --mod-checkbox-top-to-text: 0; - --mod-checkbox-text-to-control: 0; - min-block-size: 0; + .spectrum-Menu-itemCheckbox { + --mod-checkbox-top-to-text: 0; + --mod-checkbox-text-to-control: 0; + min-block-size: 0; - .spectrum-Checkbox-box { - margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control)); + .spectrum-Checkbox-box { + margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control)); - margin-block-start: var(--mod-menu-item-top-to-checkbox, var(--spectrum-menu-item-top-to-checkbox)); - margin-block-end: 0; - } - } + margin-block-start: var(--mod-menu-item-top-to-checkbox, var(--spectrum-menu-item-top-to-checkbox)); + margin-block-end: 0; + } + } - .spectrum-Menu-itemSwitch { - min-block-size: 0; + .spectrum-Menu-itemSwitch { + min-block-size: 0; - .spectrum-Switch-switch { - margin-block-start: var(--mod-menu-item-top-to-action, var(--spectrum-menu-item-top-to-action));; - margin-block-end: 0; - } - } + .spectrum-Switch-switch { + margin-block-start: var(--mod-menu-item-top-to-action, var(--spectrum-menu-item-top-to-action)); + margin-block-end: 0; + } + } } .spectrum-Menu-item { - display: grid; - /* stylelint-disable declaration-block-no-redundant-longhand-properties */ - grid-template-areas: - ". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . . " - "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn" - ". . . . descriptionArea . . . " - ". . . . submenuArea . . . "; + display: grid; + /* stylelint-disable declaration-block-no-redundant-longhand-properties */ + grid-template-areas: + ". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . . " + "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn" + ". . . . descriptionArea . . . " + ". . . . submenuArea . . . "; - grid-template-columns: auto auto auto auto 1fr auto auto auto; - grid-template-rows: 1fr auto; + grid-template-columns: auto auto auto auto 1fr auto auto auto; + grid-template-rows: 1fr auto; } .spectrum-Menu-item .spectrum-Menu-item { - display: grid; - grid-template-areas: "submenuItemLabelArea submenuItemValueArea"; - grid-template-columns: auto auto; - grid-template-rows: 1fr auto; + display: grid; + grid-template-areas: "submenuItemLabelArea submenuItemValueArea"; + grid-template-columns: auto auto; + grid-template-rows: 1fr auto; } /* stylelint-enable declaration-block-no-redundant-longhand-properties */ .spectrum-Menu-item .spectrum-Menu-item .spectrum-Menu-itemLabel { - grid-area: submenuItemLabelArea; + grid-area: submenuItemLabelArea; } .spectrum-Menu-item .spectrum-Menu-item .spectrum-Menu-itemValue { - grid-area: submenuItemValueArea; + grid-area: submenuItemValueArea; } .spectrum-Menu-item:focus, .spectrum-Menu-item.is-focused { - background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-key-focus, var(--spectrum-menu-item-background-color-key-focus))); - outline: none; + background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-key-focus, var(--spectrum-menu-item-background-color-key-focus))); + outline: none; - > .spectrum-Menu-itemLabel { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-focus, var(--spectrum-menu-item-label-content-color-focus))); - } + > .spectrum-Menu-itemLabel { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-focus, var(--spectrum-menu-item-label-content-color-focus))); + } - > .spectrum-Menu-sectionHeading { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); - } + > .spectrum-Menu-sectionHeading { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + } - > .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-focus, var(--spectrum-menu-item-description-color-focus))); - } + > .spectrum-Menu-itemDescription { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-focus, var(--spectrum-menu-item-description-color-focus))); + } - > .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus))); - } + > .spectrum-Menu-itemValue { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus))); + } - > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus))); - } + > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus))); + } - > .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); - } + > .spectrum-Menu-chevron { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + } - > .spectrum-Menu-checkmark { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus))); - } + > .spectrum-Menu-checkmark { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus))); + } } .spectrum-Menu-item:focus-visible, .spectrum-Menu-back:focus-visible { - box-shadow: inset - calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) - 0 0 0 - var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); + box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); } .spectrum-Menu-item:dir(rtl) { - --spectrum-menu-item-focus-indicator-direction-scalar: -1; + --spectrum-menu-item-focus-indicator-direction-scalar: -1; } .spectrum-Menu-item:hover { - background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))); + background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))); - > .spectrum-Menu-itemLabel { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-hover, var(--spectrum-menu-item-label-content-color-hover))); - } + > .spectrum-Menu-itemLabel { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-hover, var(--spectrum-menu-item-label-content-color-hover))); + } - > .spectrum-Menu-sectionHeading { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); - } + > .spectrum-Menu-sectionHeading { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + } - > .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-hover, var(--spectrum-menu-item-description-color-hover))); - } + > .spectrum-Menu-itemDescription { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-hover, var(--spectrum-menu-item-description-color-hover))); + } - > .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover))); - } + > .spectrum-Menu-itemValue { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover))); + } - > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); - } + > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); + } - > .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); - } + > .spectrum-Menu-chevron { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + } - > .spectrum-Menu-checkmark { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); - } + > .spectrum-Menu-checkmark { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); + } } .spectrum-Menu-item:active { - background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-down, var(--spectrum-menu-item-background-color-down))); + background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-down, var(--spectrum-menu-item-background-color-down))); - > .spectrum-Menu-itemLabel { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down))); - } + > .spectrum-Menu-itemLabel { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down))); + } - > .spectrum-Menu-sectionHeading { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); - } + > .spectrum-Menu-sectionHeading { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + } - > .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-down, var(--spectrum-menu-item-description-color-down))); - } + > .spectrum-Menu-itemDescription { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-down, var(--spectrum-menu-item-description-color-down))); + } - > .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down))); - } + > .spectrum-Menu-itemValue { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down))); + } - > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down))); - } + > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down))); + } - > .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); - } + > .spectrum-Menu-chevron { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + } - > .spectrum-Menu-checkmark { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down))); - } + > .spectrum-Menu-checkmark { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down))); + } } .spectrum-Menu-itemIcon { - grid-area: iconArea; - align-self: start; + grid-area: iconArea; + align-self: start; } .spectrum-Menu-item--collapsible .spectrum-Menu-itemIcon { - grid-area: headingIconArea; + grid-area: headingIconArea; } .is-selectableMultiple .spectrum-Menu-item { - align-items: start; + align-items: start; } .is-selectableMultiple .spectrum-Menu-itemCheckbox { - grid-area: iconArea; + grid-area: iconArea; } .spectrum-Menu-checkmark { - grid-area: checkmarkArea; - align-self: start; + grid-area: checkmarkArea; + align-self: start; } .spectrum-Menu-itemSelection { - grid-area: selectedArea; + grid-area: selectedArea; } .spectrum-Menu-itemLabel { - grid-area: labelArea; - font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size)); - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-content-color-default, var(--spectrum-menu-item-label-content-color-default))); + grid-area: labelArea; + font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size)); + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-content-color-default, var(--spectrum-menu-item-label-content-color-default))); } .spectrum-Menu-itemValue { - grid-area: valueArea; + grid-area: valueArea; } .spectrum-Menu-itemActions { - grid-area: actionsArea; - align-self: start; - margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing)); + grid-area: actionsArea; + align-self: start; + margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing)); } .spectrum-Menu-chevron { - grid-area: chevronArea; - align-self: center; - block-size: var(--spectrum-menu-item-checkmark-height); - inline-size: var(--spectrum-menu-item-checkmark-width); + grid-area: chevronArea; + align-self: center; + block-size: var(--spectrum-menu-item-checkmark-height); + inline-size: var(--spectrum-menu-item-checkmark-width); } .spectrum-Menu-item--collapsible .spectrum-Menu-chevron { - grid-area: chevronAreaCollapsible; + grid-area: chevronAreaCollapsible; } .spectrum-Menu-sectionHeading { - grid-area: sectionHeadingArea; - grid-column: 1 / -1; + grid-area: sectionHeadingArea; + grid-column: 1 / -1; } .spectrum-Menu-item--collapsible .spectrum-Menu-sectionHeading { - /* + /* start at 5th column, to account for icons & match sectionHeadingArea ". chevronAreaCollapsible . iconArea sectionHeadingArea . . ." stretch to last column */ - grid-column: 5 / -1; + grid-column: 5 / -1; } .spectrum-Menu-itemDescription { - grid-area: descriptionArea; + grid-area: descriptionArea; } .spectrum-Menu-item--collapsible .spectrum-Menu, .spectrum-Menu-item .spectrum-Menu { - grid-area: submenuArea; - grid-column: 1 / -1; + grid-area: submenuArea; + grid-column: 1 / -1; } .spectrum-Menu-item--drillIn .spectrum-Menu-chevron { - grid-area: chevronAreaDrillIn; + grid-area: chevronAreaDrillIn; } .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { - block-size: var(--mod-menu-item-icon-height, var(--spectrum-menu-item-icon-height)); - inline-size: var(--mod-menu-item-icon-width, var(--spectrum-menu-item-icon-width)); + block-size: var(--mod-menu-item-icon-height, var(--spectrum-menu-item-icon-height)); + inline-size: var(--mod-menu-item-icon-width, var(--spectrum-menu-item-icon-width)); } .spectrum-Menu-checkmark { - block-size: var(--mod-menu-item-checkmark-height, var(--spectrum-menu-item-checkmark-height)); - inline-size: var(--mod-menu-item-checkmark-width, var(--spectrum-menu-item-checkmark-width)); - margin-block-start: calc( - var(--mod-menu-item-top-to-checkmark, var(--spectrum-menu-item-top-to-checkmark)) - - var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)) - ); + block-size: var(--mod-menu-item-checkmark-height, var(--spectrum-menu-item-checkmark-height)); + inline-size: var(--mod-menu-item-checkmark-width, var(--spectrum-menu-item-checkmark-width)); + margin-block-start: calc(var(--mod-menu-item-top-to-checkmark, var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); - /* Checkmarks have text or an icon directly next to them. */ - margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control)); + /* Checkmarks have text or an icon directly next to them. */ + margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control)); } .spectrum-Menu-itemIcon--workflowIcon { - /* Always provide space at the end of a workflow icon. */ - margin-inline-end: var(--mod-menu-item-label-text-to-visual, var(--spectrum-menu-item-label-text-to-visual)); + /* Always provide space at the end of a workflow icon. */ + margin-inline-end: var(--mod-menu-item-label-text-to-visual, var(--spectrum-menu-item-label-text-to-visual)); } .spectrum-Menu-chevron { - /* Chevrons (aka collapsibles) have text or an icon directly next to them. */ - margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control)); + /* Chevrons (aka collapsibles) have text or an icon directly next to them. */ + margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control)); } .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-description-color-default, var(--spectrum-menu-item-description-color-default))); - font-size: var(--mod-menu-item-description-font-size, var(--spectrum-menu-item-description-font-size)); - hyphens: auto; - overflow-wrap: break-word; - margin-block-start: var(--mod-menu-item-label-to-description-spacing, var(--spectrum-menu-item-label-to-description-spacing)); - line-height: var(--mod-menu-item-description-line-height, var(--spectrum-menu-item-description-line-height)); + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-description-color-default, var(--spectrum-menu-item-description-color-default))); + font-size: var(--mod-menu-item-description-font-size, var(--spectrum-menu-item-description-font-size)); + hyphens: auto; + overflow-wrap: break-word; + margin-block-start: var(--mod-menu-item-label-to-description-spacing, var(--spectrum-menu-item-label-to-description-spacing)); + line-height: var(--mod-menu-item-description-line-height, var(--spectrum-menu-item-description-line-height)); } .spectrum-Menu-itemLabel { - hyphens: auto; - overflow-wrap: break-word; + hyphens: auto; + overflow-wrap: break-word; } .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-value-color-default, var(--spectrum-menu-item-value-color-default))); - font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size)); - justify-self: end; - align-self: start; - margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing)); + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-value-color-default, var(--spectrum-menu-item-value-color-default))); + font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size)); + justify-self: end; + align-self: start; + margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing)); } .spectrum-Menu-itemLabel--truncate { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .spectrum-Menu-sectionHeading { - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); - display: block; - font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); - font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); - line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); - min-inline-size: var(--mod-menu-section-header-min-width, var(--spectrum-menu-section-header-min-width)); - padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); - padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))); - padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + display: block; + font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); + font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); + line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); + min-inline-size: var(--mod-menu-section-header-min-width, var(--spectrum-menu-section-header-min-width)); + padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); + padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))); + padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); } /* collapsible sub-menus */ .spectrum-Menu-item--collapsible { - &.is-open { - padding-block-end: 0; + &.is-open { + padding-block-end: 0; - .spectrum-Menu-chevron { - transform: rotate(90deg); - } - } + .spectrum-Menu-chevron { + transform: rotate(90deg); + } + } - &.is-open:hover, - &.is-open:active, - &.is-open:focus, - &.is-open.is-focused { - background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))); - } + &.is-open:hover, + &.is-open:active, + &.is-open:focus, + &.is-open.is-focused { + background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))); + } - .spectrum-Menu { - display: none; - } + .spectrum-Menu { + display: none; + } - .spectrum-Menu.is-open { - display: block; - } + .spectrum-Menu.is-open { + display: block; + } - .spectrum-Menu-sectionHeading { - padding-inline: 0; - } + .spectrum-Menu-sectionHeading { + padding-inline: 0; + } - > .spectrum-Menu-itemIcon { - padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); - padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))); - } + > .spectrum-Menu-itemIcon { + padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); + padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))); + } } .spectrum-Menu-chevron:dir(rtl) { - transform: rotate(-180deg); + transform: rotate(-180deg); } /* @@ -713,147 +688,147 @@ governing permissions and limitations under the License. have a chevron and we need to adjust position of submenu items to account for that */ .spectrum-Menu-item--collapsible .spectrum-Menu { - /* reposition the entire submenu to be flush left with the parent menu item via negative margins */ - margin-inline: calc(var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)) * -1); + /* reposition the entire submenu to be flush left with the parent menu item via negative margins */ + margin-inline: calc(var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)) * -1); - .spectrum-Menu-item { - /* + .spectrum-Menu-item { + /* allow item to take up full width of parent, but make the content start where the parent item's label text starts */ - padding-inline-start: var(--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start, var(--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start)); - } + padding-inline-start: var(--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start, var(--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start)); + } } .spectrum-Menu-item--drillIn { - .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default))); - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default))); - margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing)); - margin-inline-end: 0; - } - - &.is-open { - --spectrum-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))); - - .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); - } - - .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); - } - - .spectrum-Menu-checkmark { - fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); - color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); - } - } - - &:hover { - .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); - } - } - - &:focus, - &.is-focused { - .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus))); - } - } - - &:active { - .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))); - } - } + .spectrum-Menu-chevron { + fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default))); + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default))); + margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing)); + margin-inline-end: 0; + } + + &.is-open { + --spectrum-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))); + + .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); + } + + .spectrum-Menu-chevron { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); + } + + .spectrum-Menu-checkmark { + fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); + color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); + } + } + + &:hover { + .spectrum-Menu-chevron { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); + } + } + + &:focus, + &.is-focused { + .spectrum-Menu-chevron { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus))); + } + } + + &:active { + .spectrum-Menu-chevron { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))); + } + } } /* Disabled menu items */ .spectrum-Menu-item.is-disabled, .spectrum-Menu-item[aria-disabled="true"] { - background-color: transparent; + background-color: transparent; - .spectrum-Menu-itemLabel, - .spectrum-Menu-sectionHeading, - .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled))); - } + .spectrum-Menu-itemLabel, + .spectrum-Menu-sectionHeading, + .spectrum-Menu-itemValue { + color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled))); + } - .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled))); - } + .spectrum-Menu-itemDescription { + color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled))); + } - .spectrum-Menu-itemIcon { - fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); - } + .spectrum-Menu-itemIcon { + fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); + color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); + } - &:hover { - cursor: default; - background-color: transparent; + &:hover { + cursor: default; + background-color: transparent; - .spectrum-Menu-itemLabel, - .spectrum-Menu-sectionHeading, - .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled))); - } + .spectrum-Menu-itemLabel, + .spectrum-Menu-sectionHeading, + .spectrum-Menu-itemValue { + color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled))); + } - .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled))); - } + .spectrum-Menu-itemDescription { + color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled))); + } - .spectrum-Menu-itemIcon { - fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); - } - } + .spectrum-Menu-itemIcon { + fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); + color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); + } + } } /* Tray submenu */ .spectrum-Menu-back { - display: flex; - flex-flow: row wrap; - align-items: center; - padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); - padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); + display: flex; + flex-flow: row wrap; + align-items: center; + padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); - .spectrum-Menu-sectionHeading { - padding: 0; - } + .spectrum-Menu-sectionHeading { + padding: 0; + } } .spectrum-Menu-backButton { - padding: 0; - margin: 0; - background: transparent; - border: 0; - display: inline-flex; - cursor: pointer; + padding: 0; + margin: 0; + background: transparent; + border: 0; + display: inline-flex; + cursor: pointer; - &:focus-visible { - outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color); - outline-offset: calc(-1 * (var(--spectrum-focus-indicator-thickness) + 1px)); - } + &:focus-visible { + outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color); + outline-offset: calc(-1 * (var(--spectrum-focus-indicator-thickness) + 1px)); + } } .spectrum-Menu-backHeading { - display: block; - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))); - font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); - font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); - line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); + display: block; + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))); + font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); + font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); + line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); } .spectrum-Menu-backIcon { - margin-block: var(--mod-menu-back-icon-margin-block, var(--spectrum-menu-back-icon-margin)); - margin-inline: var(--mod-menu-back-icon-margin-inline, var(--spectrum-menu-back-icon-margin)); - fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default)); - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default)); + margin-block: var(--mod-menu-back-icon-margin-block, var(--spectrum-menu-back-icon-margin)); + margin-inline: var(--mod-menu-back-icon-margin-inline, var(--spectrum-menu-back-icon-margin)); + fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default)); + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default)); } diff --git a/components/miller/index.css b/components/miller/index.css index 0d68c67fdd..08a14dd3de 100644 --- a/components/miller/index.css +++ b/components/miller/index.css @@ -11,31 +11,31 @@ governing permissions and limitations under the License. */ .spectrum-MillerColumns { - --spectrum-millercolumns-inline-size: 272px; - --spectrum-millercolumns-padding: var(--spectrum-spacing-100); - --spectrum-millercolumns-margin-inline-start: var(--spectrum-spacing-100); - --spectrum-millercolumns-margin-inline-end: var(--spectrum-spacing-100); + --spectrum-millercolumns-inline-size: 272px; + --spectrum-millercolumns-padding: var(--spectrum-spacing-100); + --spectrum-millercolumns-margin-inline-start: var(--spectrum-spacing-100); + --spectrum-millercolumns-margin-inline-end: var(--spectrum-spacing-100); } .spectrum-MillerColumns { - overflow-x: auto; - white-space: nowrap; - user-select: none; - padding: var(--mod-millercolumns-padding, var(--spectrum-millercolumns-padding)) 0; + overflow-x: auto; + white-space: nowrap; + user-select: none; + padding: var(--mod-millercolumns-padding, var(--spectrum-millercolumns-padding)) 0; } .spectrum-MillerColumns-item { - display: inline-block; - inline-size: var(--mod-millercolumns-inline-size, var(--spectrum-millercolumns-inline-size)); - vertical-align: top; - outline: none; - margin: 0; - padding: 0; - margin-inline-end: var(--mod-millercolumns-margin-inline-end, var(--spectrum-millercolumns-margin-inline-end)); - overflow: auto; - block-size: 100%; + display: inline-block; + inline-size: var(--mod-millercolumns-inline-size, var(--spectrum-millercolumns-inline-size)); + vertical-align: top; + outline: none; + margin: 0; + padding: 0; + margin-inline-end: var(--mod-millercolumns-margin-inline-end, var(--spectrum-millercolumns-margin-inline-end)); + overflow: auto; + block-size: 100%; - &:first-child { - margin-inline-start: var(--mod-millercolumns-margin-inline-start, var(--spectrum-millercolumns-margin-inline-start)); - } + &:first-child { + margin-inline-start: var(--mod-millercolumns-margin-inline-start, var(--spectrum-millercolumns-margin-inline-start)); + } } diff --git a/components/modal/index.css b/components/modal/index.css index ada0663393..97b6d0c873 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -92,28 +92,19 @@ governing permissions and limitations under the License. pointer-events: auto; /* Exit animations */ - transition: opacity var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)) var(--spectrum-animation-ease-in) - var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)), - visibility 0ms linear - calc( - var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) + - var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)) - ), - transform 0ms linear - calc( - var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) + - var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)) - ); + transition: + opacity var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)) var(--spectrum-animation-ease-in) var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)), + visibility 0ms linear calc(var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) + var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))), + transform 0ms linear calc(var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) + var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))); } .spectrum-Modal.is-open { @extend %spectrum-overlay--open; /* Entry animations */ - transition: transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) - var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)), - opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) - var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)); + transition: + transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)), + opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)); transform: translateY(0); } diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css index 5d9e7c78b0..38557f79cb 100644 --- a/components/opacitycheckerboard/index.css +++ b/components/opacitycheckerboard/index.css @@ -8,47 +8,14 @@ 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) - ) - 0% 25%, - var( - --mod-opacity-checkerboard-dark, - var(--spectrum-opacity-checkerboard-dark) - ) - 0% 50% - ) - var( - --mod-opacity-checkerboard-position, - var(--spectrum-opacity-checkerboard-position) - ) / - calc( - var( - --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) - ) * 2 - ) - calc( - var( - --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) - ) * 2 - ); + background: repeating-conic-gradient(var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-light)) 0% 25%, var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-dark)) 0% 50%) var(--mod-opacity-checkerboard-position, var(--spectrum-opacity-checkerboard-position)) / calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2) calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2); } @media (forced-colors: active) { diff --git a/components/page/index.css b/components/page/index.css index 513b114a58..575bad2855 100644 --- a/components/page/index.css +++ b/components/page/index.css @@ -11,8 +11,8 @@ governing permissions and limitations under the License. */ :root { - background-color: var(--spectrum-gray-100); + background-color: var(--spectrum-gray-100); - /* Prevent tap highlights */ - -webkit-tap-highlight-color: var(--spectrum-transparent-black-100); + /* Prevent tap highlights */ + -webkit-tap-highlight-color: var(--spectrum-transparent-black-100); } diff --git a/components/pagination/index.css b/components/pagination/index.css index f0a6dd5188..0bc7d2668b 100644 --- a/components/pagination/index.css +++ b/components/pagination/index.css @@ -11,11 +11,11 @@ governing permissions and limitations under the License. */ .spectrum-Pagination { - --spectrum-pagination-counter-margin-inline-start: var(--spectrum-pagination-item-inline-spacing); - --spectrum-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing); - --spectrum-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-pagination-counter-font-size: var(--spectrum-font-size-100); - --spectrum-pagination-counter-line-height: var(--spectrum-line-height-100); + --spectrum-pagination-counter-margin-inline-start: var(--spectrum-pagination-item-inline-spacing); + --spectrum-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing); + --spectrum-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-pagination-counter-font-size: var(--spectrum-font-size-100); + --spectrum-pagination-counter-line-height: var(--spectrum-line-height-100); &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); @@ -24,38 +24,38 @@ governing permissions and limitations under the License. .spectrum-Pagination--explicit, .spectrum-Pagination--listing { - display: flex; - flex-direction: row; - align-items: center; + display: flex; + flex-direction: row; + align-items: center; } /* Explicit variant elements */ .spectrum-Pagination-textfield { - --mod-textfield-width: var(--mod-pagination-textfield-width, var(--spectrum-pagination-textfield-width)); - --mod-textfield-min-width: var(--mod-pagination-textfield-width, var(--spectrum-pagination-textfield-width)); + --mod-textfield-width: var(--mod-pagination-textfield-width, var(--spectrum-pagination-textfield-width)); + --mod-textfield-min-width: var(--mod-pagination-textfield-width, var(--spectrum-pagination-textfield-width)); } .spectrum-Pagination-counter { - font-size: var(--mod-pagination-counter-font-size, var(--spectrum-pagination-counter-font-size)); - line-height: var(--mod-pagination-counter-line-height, var(--spectrum-pagination-counter-line-height)); - margin-inline-start: var(--mod-pagination-counter-margin-inline-start, var(--spectrum-pagination-counter-margin-inline-start)); - color: var(--mod-pagination-counter-color, var(--spectrum-pagination-counter-color)); + font-size: var(--mod-pagination-counter-font-size, var(--spectrum-pagination-counter-font-size)); + line-height: var(--mod-pagination-counter-line-height, var(--spectrum-pagination-counter-line-height)); + margin-inline-start: var(--mod-pagination-counter-margin-inline-start, var(--spectrum-pagination-counter-margin-inline-start)); + color: var(--mod-pagination-counter-color, var(--spectrum-pagination-counter-color)); } /* Previous and next buttons */ .spectrum-Pagination-prevButton { - margin-inline-end: var(--mod-pagination-page-button-inline-spacing, var(--spectrum-pagination-page-button-inline-spacing)); + margin-inline-end: var(--mod-pagination-page-button-inline-spacing, var(--spectrum-pagination-page-button-inline-spacing)); } .spectrum-Pagination-nextButton { - margin-inline-start: var(--mod-pagination-page-button-inline-spacing, var(--spectrum-pagination-page-button-inline-spacing)); + margin-inline-start: var(--mod-pagination-page-button-inline-spacing, var(--spectrum-pagination-page-button-inline-spacing)); } /* Correct the direction of the arrows when viewing right-to-left */ .spectrum-Pagination-prevButton .spectrum-Icon { - transform: var(--spectrum-logical-rotation,) rotate(180deg); + transform: var(--spectrum-logical-rotation,) rotate(180deg); } .spectrum-Pagination-nextButton .spectrum-Icon { - transform: var(--spectrum-logical-rotation); + transform: var(--spectrum-logical-rotation); } diff --git a/components/picker/index.css b/components/picker/index.css index 8d9ba48d32..045efa74ca 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -14,488 +14,480 @@ governing permissions and limitations under the License. @import "@spectrum-css/commons/basebutton.css"; .spectrum-Picker { - /* font */ - --spectrum-picker-font-size: var(--spectrum-font-size-100); - --spectrum-picker-font-weight: var(--spectrum-regular-font-weight); - --spectrum-picker-placeholder-font-style: var(--spectrum-default-font-style); - --spectrum-picker-line-height: var(--spectrum-line-height-100); - - /* height */ - --spectrum-picker-block-size: var(--spectrum-component-height-100); - --spectrum-picker-inline-size: var(--spectrum-field-width); - - /* border */ - --spectrum-picker-border-radius: var(--spectrum-corner-radius-100); - - /* spacing */ - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-100); - --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component); - - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); - --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium); - } - - /* animation */ - --spectrum-picker-animation-duration: var(--spectrum-animation-duration-100); - - /* color */ - --spectrum-picker-font-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus); - --spectrum-picker-font-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-picker-font-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); - --spectrum-picker-font-color-active: var(--spectrum-neutral-content-color-down); - --spectrum-picker-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-picker-icon-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-picker-icon-color-default-open: var(--spectrum-neutral-content-color-focus); - --spectrum-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-picker-icon-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); - --spectrum-picker-icon-color-active: var(--spectrum-neutral-content-color-down); - --spectrum-picker-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-picker-border-color-error-default: var(--spectrum-negative-border-color-default); - --spectrum-picker-border-color-error-default-open: var(--spectrum-negative-border-color-focus); - --spectrum-picker-border-color-error-hover: var(--spectrum-negative-border-color-hover); - --spectrum-picker-border-color-error-hover-open: var(--spectrum-negative-border-color-focus-hover); - --spectrum-picker-border-color-error-active: var(--spectrum-negative-border-color-down); - --spectrum-picker-border-color-error-key-focus: var(--spectrum-negative-border-color-key-focus); - - --spectrum-picker-icon-color-error: var(--spectrum-negative-visual-color); - - --spectrum-picker-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - - /* special cases for focus indicator */ - --spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); + /* font */ + --spectrum-picker-font-size: var(--spectrum-font-size-100); + --spectrum-picker-font-weight: var(--spectrum-regular-font-weight); + --spectrum-picker-placeholder-font-style: var(--spectrum-default-font-style); + --spectrum-picker-line-height: var(--spectrum-line-height-100); + + /* height */ + --spectrum-picker-block-size: var(--spectrum-component-height-100); + --spectrum-picker-inline-size: var(--spectrum-field-width); + + /* border */ + --spectrum-picker-border-radius: var(--spectrum-corner-radius-100); + + /* spacing */ + --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet); + --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-100); + --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component); + + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium); + --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); + --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet); + + & + .spectrum-Popover--bottom.is-open { + --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium); + } + + /* animation */ + --spectrum-picker-animation-duration: var(--spectrum-animation-duration-100); + + /* color */ + --spectrum-picker-font-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus); + --spectrum-picker-font-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-picker-font-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); + --spectrum-picker-font-color-active: var(--spectrum-neutral-content-color-down); + --spectrum-picker-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-picker-icon-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-picker-icon-color-default-open: var(--spectrum-neutral-content-color-focus); + --spectrum-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-picker-icon-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); + --spectrum-picker-icon-color-active: var(--spectrum-neutral-content-color-down); + --spectrum-picker-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-picker-border-color-error-default: var(--spectrum-negative-border-color-default); + --spectrum-picker-border-color-error-default-open: var(--spectrum-negative-border-color-focus); + --spectrum-picker-border-color-error-hover: var(--spectrum-negative-border-color-hover); + --spectrum-picker-border-color-error-hover-open: var(--spectrum-negative-border-color-focus-hover); + --spectrum-picker-border-color-error-active: var(--spectrum-negative-border-color-down); + --spectrum-picker-border-color-error-key-focus: var(--spectrum-negative-border-color-key-focus); + + --spectrum-picker-icon-color-error: var(--spectrum-negative-visual-color); + + --spectrum-picker-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-picker-font-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-picker-icon-color-disabled: var(--spectrum-disabled-content-color); + + /* special cases for focus indicator */ + --spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); } .spectrum-Picker--sizeS { - --spectrum-picker-font-size: var(--spectrum-font-size-75); - --spectrum-picker-block-size: var(--spectrum-component-height-75); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-75); - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small); - } + --spectrum-picker-font-size: var(--spectrum-font-size-75); + --spectrum-picker-block-size: var(--spectrum-component-height-75); + --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-75); + --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); + --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); + + & + .spectrum-Popover--bottom.is-open { + --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small); + } } .spectrum-Picker--sizeL { - --spectrum-picker-font-size: var(--spectrum-font-size-200); - --spectrum-picker-block-size: var(--spectrum-component-height-200); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-200); - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large); - } + --spectrum-picker-font-size: var(--spectrum-font-size-200); + --spectrum-picker-block-size: var(--spectrum-component-height-200); + --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-200); + --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); + --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); + + & + .spectrum-Popover--bottom.is-open { + --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large); + } } .spectrum-Picker--sizeXL { - --spectrum-picker-font-size: var(--spectrum-font-size-300); - --spectrum-picker-block-size: var(--spectrum-component-height-300); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-300); - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large); - } + --spectrum-picker-font-size: var(--spectrum-font-size-300); + --spectrum-picker-block-size: var(--spectrum-component-height-300); + --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-300); + --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); + --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); + + & + .spectrum-Popover--bottom.is-open { + --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large); + } } /* Windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Picker { - --highcontrast-picker-focus-indicator-color: Highlight; - - --highcontrast-picker-border-color-default: ButtonBorder; - --highcontrast-picker-border-color-hover: Highlight; - --highcontrast-picker-border-color-disabled: GrayText; - - --highcontrast-picker-content-color-default: ButtonText; - --highcontrast-picker-content-color-disabled: GrayText; - --highcontrast-picker-background-color: ButtonFace; - - &:focus-visible, - &.is-keyboardFocused { - --highcontrast-picker-border-color-hover: ButtonText; - } - - /* Focus indicator */ - &::after { - /* Make sure default transparent border stays transparent. */ - forced-color-adjust: none; - } - - .spectrum-Picker-label { - /* Remove additional text backplate added in WHCM (Edge). */ - forced-color-adjust: none; - } - } + .spectrum-Picker { + --highcontrast-picker-focus-indicator-color: Highlight; + + --highcontrast-picker-border-color-default: ButtonBorder; + --highcontrast-picker-border-color-hover: Highlight; + --highcontrast-picker-border-color-disabled: GrayText; + + --highcontrast-picker-content-color-default: ButtonText; + --highcontrast-picker-content-color-disabled: GrayText; + --highcontrast-picker-background-color: ButtonFace; + + &:focus-visible, + &.is-keyboardFocused { + --highcontrast-picker-border-color-hover: ButtonText; + } + + /* Focus indicator */ + &::after { + /* Make sure default transparent border stays transparent. */ + forced-color-adjust: none; + } + + .spectrum-Picker-label { + /* Remove additional text backplate added in WHCM (Edge). */ + forced-color-adjust: none; + } + } } .spectrum-Picker { - @extend %spectrum-BaseButton; - - /* Layout */ - display: flex; - box-sizing: border-box; - - /* Minimum width is 2 times the height */ - max-inline-size: 100%; - min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size))); - inline-size: var(--mod-picker-inline-size, var(--spectrum-picker-inline-size)); - block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size)); - padding-block: 0; - margin-block-start: var(--mod-picker-spacing-label-to-picker, var(--spectrum-picker-spacing-label-to-picker)); - - padding-inline-start: var(--mod-picker-spacing-edge-to-text, var(--spectrum-picker-spacing-edge-to-text)); - padding-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon, var(--spectrum-picker-spacing-edge-to-disclosure-icon)); - - border-width: var(--mod-picker-border-width, var(--spectrum-picker-border-width)); - border-style: solid; - border-radius: var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)); - - transition: background-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), - box-shadow var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), - border-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; - - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default))); - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-default, var(--spectrum-picker-border-color-default))); - - /* Focus indicator */ - &::after { - pointer-events: none; - content: ''; - position: absolute; - block-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) - + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)); - - inline-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) - + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)); - - margin-block-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) - + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) - + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); - - margin-inline-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) - + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) - + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); - - inset-inline: 0; - inset-block: 0; - border-style: solid; - border-width: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)); - border-color: transparent; - border-radius: calc( - var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + - var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); - } - - &:hover { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))); - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover, var(--spectrum-picker-background-color-hover))); - border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover, var(--spectrum-picker-border-color-hover))); - - .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover, var(--spectrum-picker-icon-color-hover))); - } - } - - &:active { - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-active, var(--spectrum-picker-background-color-active))); - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-active, var(--spectrum-picker-border-color-active))); - - /* Focus indicator */ - &::after { - border-color: transparent; - } - - &.is-placeholder .spectrum-Picker-label { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active))); - } - } - - &:focus-visible, - &.is-keyboardFocused { - outline: none; - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-key-focus, var(--spectrum-picker-background-color-key-focus))); - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-key-focus, var(--spectrum-picker-border-color-key-focus))); - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus))); - - /* Focus indicator */ - &::after { - border-color: var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))); - } - - &.is-placeholder { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus))); - } - - .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-key-focus, var(--spectrum-picker-icon-color-key-focus))); - } - } - - &.is-invalid:not(:disabled, .is-disabled) { - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default, var(--spectrum-picker-border-color-error-default))); - - .spectrum-Picker-validationIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-error, var(--spectrum-picker-icon-color-error))); - } - - &:hover { - border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover, var(--spectrum-picker-border-color-error-hover))); - } - - &:active { - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-active, var(--spectrum-picker-border-color-error-active))); - } - - &.is-open { - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default-open, var(--spectrum-picker-border-color-error-default-open))); - } - - &.is-open:hover { - border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover-open, var(--spectrum-picker-border-color-error-hover-open))); - } - - &:focus-visible, - &.is-keyboardFocused { - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus))); - } - } - - &.is-loading { - .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); - } - } - - &.is-loading, &.is-invalid { - .spectrum-Picker-label { - /* @deprecation --mod-picker-spacing-text-to-alert-icon-inline-start has been renamed to --mod-picker-spacing-text-to-icon-inline-end + @extend %spectrum-BaseButton; + + /* Layout */ + display: flex; + box-sizing: border-box; + + /* Minimum width is 2 times the height */ + max-inline-size: 100%; + min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size))); + inline-size: var(--mod-picker-inline-size, var(--spectrum-picker-inline-size)); + block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size)); + padding-block: 0; + margin-block-start: var(--mod-picker-spacing-label-to-picker, var(--spectrum-picker-spacing-label-to-picker)); + + padding-inline-start: var(--mod-picker-spacing-edge-to-text, var(--spectrum-picker-spacing-edge-to-text)); + padding-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon, var(--spectrum-picker-spacing-edge-to-disclosure-icon)); + + border-width: var(--mod-picker-border-width, var(--spectrum-picker-border-width)); + border-style: solid; + border-radius: var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)); + + transition: + background-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), + box-shadow var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), + border-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; + + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default))); + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-default, var(--spectrum-picker-border-color-default))); + + /* Focus indicator */ + &::after { + pointer-events: none; + content: ""; + position: absolute; + block-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)); + + inline-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)); + + margin-block-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); + + margin-inline-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); + + inset-inline: 0; + inset-block: 0; + border-style: solid; + border-width: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)); + border-color: transparent; + border-radius: calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + } + + &:hover { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))); + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover, var(--spectrum-picker-background-color-hover))); + border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover, var(--spectrum-picker-border-color-hover))); + + .spectrum-Picker-menuIcon { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover, var(--spectrum-picker-icon-color-hover))); + } + } + + &:active { + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-active, var(--spectrum-picker-background-color-active))); + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-active, var(--spectrum-picker-border-color-active))); + + /* Focus indicator */ + &::after { + border-color: transparent; + } + + &.is-placeholder .spectrum-Picker-label { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active))); + } + } + + &:focus-visible, + &.is-keyboardFocused { + outline: none; + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-key-focus, var(--spectrum-picker-background-color-key-focus))); + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-key-focus, var(--spectrum-picker-border-color-key-focus))); + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus))); + + /* Focus indicator */ + &::after { + border-color: var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))); + } + + &.is-placeholder { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus))); + } + + .spectrum-Picker-menuIcon { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-key-focus, var(--spectrum-picker-icon-color-key-focus))); + } + } + + &.is-invalid:not(:disabled, .is-disabled) { + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default, var(--spectrum-picker-border-color-error-default))); + + .spectrum-Picker-validationIcon { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-error, var(--spectrum-picker-icon-color-error))); + } + + &:hover { + border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover, var(--spectrum-picker-border-color-error-hover))); + } + + &:active { + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-active, var(--spectrum-picker-border-color-error-active))); + } + + &.is-open { + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default-open, var(--spectrum-picker-border-color-error-default-open))); + } + + &.is-open:hover { + border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover-open, var(--spectrum-picker-border-color-error-hover-open))); + } + + &:focus-visible, + &.is-keyboardFocused { + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus))); + } + } + + &.is-loading { + .spectrum-Picker-menuIcon { + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); + } + } + + &.is-loading, + &.is-invalid { + .spectrum-Picker-label { + /* @deprecation --mod-picker-spacing-text-to-alert-icon-inline-start has been renamed to --mod-picker-spacing-text-to-icon-inline-end and will be removed in a future version. */ - margin-inline-end: var(--mod-picker-spacing-text-to-icon-inline-end, var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-icon-inline-end))); - } - } - - &:disabled, - &.is-disabled { - cursor: default; - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))); - border-color: var(--highcontrast-picker-border-color-disabled, transparent); - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); - - .spectrum-Picker-icon, - .spectrum-Picker-menuIcon, - .spectrum-Picker-validationIcon { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); - } - - .spectrum-Picker-label.is-placeholder { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); - } - } - - .spectrum-Picker-icon { - flex-shrink: 0; - margin-inline-end: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon)); - } + margin-inline-end: var(--mod-picker-spacing-text-to-icon-inline-end, var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-icon-inline-end))); + } + } + + &:disabled, + &.is-disabled { + cursor: default; + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))); + border-color: var(--highcontrast-picker-border-color-disabled, transparent); + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); + + .spectrum-Picker-icon, + .spectrum-Picker-menuIcon, + .spectrum-Picker-validationIcon { + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); + } + + .spectrum-Picker-label.is-placeholder { + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); + } + } + + .spectrum-Picker-icon { + flex-shrink: 0; + margin-inline-end: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon)); + } } .spectrum-Picker.is-open:not(.spectrum-Picker--quiet) { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default-open, var(--spectrum-picker-font-color-default-open))); - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default-open, var(--spectrum-picker-background-color-default-open))); - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-default-open, var(--spectrum-picker-border-color-default-open))); - - &:hover { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover-open, var(--spectrum-picker-font-color-hover-open))); - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover-open, var(--spectrum-picker-background-color-hover-open))); - border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover-open, var(--spectrum-picker-border-color-hover-open))); - - .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover-open, var(--spectrum-picker-icon-color-hover-open))); - } - } - - .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default-open, var(--spectrum-picker-icon-color-default-open))); - } + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default-open, var(--spectrum-picker-font-color-default-open))); + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default-open, var(--spectrum-picker-background-color-default-open))); + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-default-open, var(--spectrum-picker-border-color-default-open))); + + &:hover { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover-open, var(--spectrum-picker-font-color-hover-open))); + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover-open, var(--spectrum-picker-background-color-hover-open))); + border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover-open, var(--spectrum-picker-border-color-hover-open))); + + .spectrum-Picker-menuIcon { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover-open, var(--spectrum-picker-icon-color-hover-open))); + } + } + + .spectrum-Picker-menuIcon { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default-open, var(--spectrum-picker-icon-color-default-open))); + } } .spectrum-Picker-label { - /* Be the biggest, but also shrink! */ - flex: 1 1 auto; + /* Be the biggest, but also shrink! */ + flex: 1 1 auto; - white-space: nowrap; - overflow: hidden; + white-space: nowrap; + overflow: hidden; - font-size: var(--mod-picker-font-size, var(--spectrum-picker-font-size)); - line-height: var(--mod-picker-line-height, var(--spectrum-picker-line-height)); - font-weight: var(--mod-picker-font-weight, var(--spectrum-picker-font-weight)); + font-size: var(--mod-picker-font-size, var(--spectrum-picker-font-size)); + line-height: var(--mod-picker-line-height, var(--spectrum-picker-line-height)); + font-weight: var(--mod-picker-font-weight, var(--spectrum-picker-font-weight)); - text-overflow: ellipsis; - text-align: start; + text-overflow: ellipsis; + text-align: start; - margin-block-start: var(--mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text)); - margin-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + margin-block-start: var(--mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text)); + margin-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); - &.is-placeholder { - font-weight: var(--mod-picker-placeholder-font-weight, var(--spectrum-picker-font-weight)); - font-style: var(--mod-picker-placeholder-font-style, var(--spectrum-picker-placeholder-font-style)); - transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; + &.is-placeholder { + font-weight: var(--mod-picker-placeholder-font-weight, var(--spectrum-picker-font-weight)); + font-style: var(--mod-picker-placeholder-font-style, var(--spectrum-picker-placeholder-font-style)); + transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); - &:hover { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))); - } + &:hover { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))); + } - &:active { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active))); - } - } + &:active { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active))); + } + } } /* The picker chevron */ .spectrum-Picker-menuIcon { - display: inline-block; - position: relative; - vertical-align: top; - transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out; - flex-shrink: 0; + display: inline-block; + position: relative; + vertical-align: top; + transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out; + flex-shrink: 0; - margin-inline-start: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); - margin-block: var(--mod-picker-spacing-top-to-disclosure-icon, var(--spectrum-picker-spacing-top-to-disclosure-icon)); + margin-inline-start: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); + margin-block: var(--mod-picker-spacing-top-to-disclosure-icon, var(--spectrum-picker-spacing-top-to-disclosure-icon)); - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default, var(--spectrum-picker-icon-color-default))); + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default, var(--spectrum-picker-icon-color-default))); - &:active { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-active, var(--spectrum-picker-icon-color-active))); - } + &:active { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-active, var(--spectrum-picker-icon-color-active))); + } } .spectrum-Picker-validationIcon { - margin-block-start: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); - margin-block-end: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + margin-block-start: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + margin-block-end: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); } .spectrum-Picker .spectrum-ProgressCircle { - margin-block-start: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); - margin-block-end: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + margin-block-start: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + margin-block-end: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); } .spectrum-Picker-label ~ .spectrum-Picker-menuIcon { - margin-inline-start: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon)); + margin-inline-start: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon)); } .spectrum-Picker + .spectrum-Popover--bottom.is-open { - transform: translateY(var(--mod-picker-spacing-picker-to-popover, var(--spectrum-picker-spacing-picker-to-popover))); + transform: translateY(var(--mod-picker-spacing-picker-to-popover, var(--spectrum-picker-spacing-picker-to-popover))); } .spectrum-Picker--quiet { - inline-size: auto; - min-inline-size: 0; - border: none; - border-radius: 0; - padding-inline: var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-picker-spacing-edge-to-text-quiet)); - margin-block-start: calc( var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet)) + (1px)); - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); - background-color: var(--highcontrast-picker-background-color, transparent); - - &.spectrum-Picker--sideLabel { - margin-block-start: 0; - } - - .spectrum-Picker-menuIcon { - margin-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)); - } - - &::after { - border: none; - block-size: auto; - inline-size: auto; - } - - &:hover { - background-color: var(--highcontrast-picker-background-color, transparent); - } - - &:focus-visible, - &.is-keyboardFocused { - background-color: var(--highcontrast-picker-background-color, transparent); - - /* Focus indicator changes from a ring to a line underneath. */ - &::after { - border: none; - border-radius: 0; - box-shadow: 0 var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) 0 0 var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))); - margin: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1) 0; - } - } - - &:active, - &.is-open { - background-color: var(--highcontrast-picker-background-color, transparent); - } - - &:disabled, - &.is-disabled { - background-color: var(--highcontrast-picker-background-color, transparent); - } + inline-size: auto; + min-inline-size: 0; + border: none; + border-radius: 0; + padding-inline: var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-picker-spacing-edge-to-text-quiet)); + margin-block-start: calc(var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet)) + (1px)); + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); + background-color: var(--highcontrast-picker-background-color, transparent); + + &.spectrum-Picker--sideLabel { + margin-block-start: 0; + } + + .spectrum-Picker-menuIcon { + margin-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)); + } + + &::after { + border: none; + block-size: auto; + inline-size: auto; + } + + &:hover { + background-color: var(--highcontrast-picker-background-color, transparent); + } + + &:focus-visible, + &.is-keyboardFocused { + background-color: var(--highcontrast-picker-background-color, transparent); + + /* Focus indicator changes from a ring to a line underneath. */ + &::after { + border: none; + border-radius: 0; + box-shadow: 0 var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) 0 0 var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))); + margin: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1) 0; + } + } + + &:active, + &.is-open { + background-color: var(--highcontrast-picker-background-color, transparent); + } + + &:disabled, + &.is-disabled { + background-color: var(--highcontrast-picker-background-color, transparent); + } } .spectrum-Picker--sideLabel { - display: inline-flex; - vertical-align: top; + display: inline-flex; + vertical-align: top; } diff --git a/components/picker/themes/express.css b/components/picker/themes/express.css index 4b305b4846..277c53ee71 100644 --- a/components/picker/themes/express.css +++ b/components/picker/themes/express.css @@ -12,21 +12,21 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Picker { - --spectrum-picker-background-color-default: var(--spectrum-gray-200); - --spectrum-picker-background-color-default-open: var(--spectrum-gray-300); - --spectrum-picker-background-color-hover: var(--spectrum-gray-300); - --spectrum-picker-background-color-hover-open: var(--spectrum-gray-300); - --spectrum-picker-background-color-active: var(--spectrum-gray-400); - --spectrum-picker-background-color-key-focus: var(--spectrum-gray-300); + .spectrum-Picker { + --spectrum-picker-background-color-default: var(--spectrum-gray-200); + --spectrum-picker-background-color-default-open: var(--spectrum-gray-300); + --spectrum-picker-background-color-hover: var(--spectrum-gray-300); + --spectrum-picker-background-color-hover-open: var(--spectrum-gray-300); + --spectrum-picker-background-color-active: var(--spectrum-gray-400); + --spectrum-picker-background-color-key-focus: var(--spectrum-gray-300); - --spectrum-picker-border-color-default: transparent; - --spectrum-picker-border-color-default-open: transparent; - --spectrum-picker-border-color-hover: transparent; - --spectrum-picker-border-color-hover-open: transparent; - --spectrum-picker-border-color-active: transparent; - --spectrum-picker-border-color-key-focus: transparent; + --spectrum-picker-border-color-default: transparent; + --spectrum-picker-border-color-default-open: transparent; + --spectrum-picker-border-color-hover: transparent; + --spectrum-picker-border-color-hover-open: transparent; + --spectrum-picker-border-color-active: transparent; + --spectrum-picker-border-color-key-focus: transparent; - --spectrum-picker-border-width: 0px; - } + --spectrum-picker-border-width: 0px; + } } diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css index c945275458..81482c6036 100644 --- a/components/picker/themes/spectrum.css +++ b/components/picker/themes/spectrum.css @@ -10,21 +10,21 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Picker { - --spectrum-picker-background-color-default: var(--spectrum-gray-75); - --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); - --spectrum-picker-background-color-active: var(--spectrum-gray-300); - --spectrum-picker-background-color-hover: var(--spectrum-gray-200); - --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); - --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); + .spectrum-Picker { + --spectrum-picker-background-color-default: var(--spectrum-gray-75); + --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-active: var(--spectrum-gray-300); + --spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); - --spectrum-picker-border-color-default: var(--spectrum-gray-500); - --spectrum-picker-border-color-default-open: var(--spectrum-gray-500); - --spectrum-picker-border-color-hover: var(--spectrum-gray-600); - --spectrum-picker-border-color-hover-open: var(--spectrum-gray-600); - --spectrum-picker-border-color-active: var(--spectrum-gray-700); - --spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); + --spectrum-picker-border-color-default: var(--spectrum-gray-500); + --spectrum-picker-border-color-default-open: var(--spectrum-gray-500); + --spectrum-picker-border-color-hover: var(--spectrum-gray-600); + --spectrum-picker-border-color-hover-open: var(--spectrum-gray-600); + --spectrum-picker-border-color-active: var(--spectrum-gray-700); + --spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); - --spectrum-picker-border-width: var(--spectrum-border-width-100); - } + --spectrum-picker-border-width: var(--spectrum-border-width-100); + } } diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css index 47c289ec04..72d815c684 100644 --- a/components/pickerbutton/index.css +++ b/components/pickerbutton/index.css @@ -21,114 +21,47 @@ 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 { @@ -159,63 +92,39 @@ 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)); } } @@ -224,76 +133,43 @@ 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)); } } } @@ -301,38 +177,17 @@ 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 { @@ -344,81 +199,37 @@ 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) - ); - - transition: border-color - var( - --mod-picker-button-background-animation-duration, - var(--spectrum-picker-button-background-animation-duration) - ) - ease-in-out; + 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)) 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/pickerbutton/themes/express.css b/components/pickerbutton/themes/express.css index 76d7a370cf..6e7ff17142 100644 --- a/components/pickerbutton/themes/express.css +++ b/components/pickerbutton/themes/express.css @@ -13,16 +13,16 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--spectrum-gray-200); - --spectrum-picker-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-picker-button-background-color-down: var(--spectrum-gray-400); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-300); + .spectrum-PickerButton { + --spectrum-picker-button-background-color: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-picker-button-background-color-down: var(--spectrum-gray-400); + --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-300); - --spectrum-picker-button-border-color: none; - --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); - --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-width: 0px; - } + --spectrum-picker-button-border-color: none; + --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); + --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); + --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); + --spectrum-picker-button-border-width: 0px; + } } diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css index 5250be4186..a7c9df5768 100644 --- a/components/pickerbutton/themes/spectrum.css +++ b/components/pickerbutton/themes/spectrum.css @@ -11,16 +11,16 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--spectrum-gray-75); - --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-picker-button-background-color-down: var(--spectrum-gray-300); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); + .spectrum-PickerButton { + --spectrum-picker-button-background-color: var(--spectrum-gray-75); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-down: var(--spectrum-gray-300); + --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); - --spectrum-picker-button-border-color: inherit; - --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100); - --spectrum-picker-button-border-radius-rounded-sided: 0; - --spectrum-picker-button-border-radius-sided: 0; - --spectrum-picker-button-border-width: var(--spectrum-border-width-100); - } + --spectrum-picker-button-border-color: inherit; + --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-picker-button-border-radius-rounded-sided: 0; + --spectrum-picker-button-border-radius-sided: 0; + --spectrum-picker-button-border-width: var(--spectrum-border-width-100); + } } diff --git a/components/popover/index.css b/components/popover/index.css index 3e6ad5e71c..afe5db7ec2 100644 --- a/components/popover/index.css +++ b/components/popover/index.css @@ -14,94 +14,94 @@ governing permissions and limitations under the License. @import "@spectrum-css/commons/overlay.css"; .spectrum-Popover { - /* Used in positioning popover for storybook */ - --flow-direction: 1; + /* Used in positioning popover for storybook */ + --flow-direction: 1; - &:dir(rtl) { - --flow-direction: -1; - } + &:dir(rtl) { + --flow-direction: -1; + } - /* animation distance is equal to and responsible for popover offset */ - --spectrum-popover-animation-distance: var(--spectrum-spacing-100); + /* animation distance is equal to and responsible for popover offset */ + --spectrum-popover-animation-distance: var(--spectrum-spacing-100); - --spectrum-popover-background-color: var(--spectrum-background-layer-2-color); - --spectrum-popover-border-color: var(--spectrum-gray-400); + --spectrum-popover-background-color: var(--spectrum-background-layer-2-color); + --spectrum-popover-border-color: var(--spectrum-gray-400); - /* popover inner padding */ - --spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area); + /* popover inner padding */ + --spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area); - /* popover drop shadow */ - --spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color); + /* popover drop shadow */ + --spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color); - /* popover corner radius */ - --spectrum-popover-corner-radius: var(--spectrum-corner-radius-100); + /* popover corner radius */ + --spectrum-popover-corner-radius: var(--spectrum-corner-radius-100); - /* pointer tip dimensions */ - --spectrum-popover-pointer-width: var(--spectrum-popover-tip-width); - --spectrum-popover-pointer-height: var(--spectrum-popover-tip-height); + /* pointer tip dimensions */ + --spectrum-popover-pointer-width: var(--spectrum-popover-tip-width); + --spectrum-popover-pointer-height: var(--spectrum-popover-tip-height); - /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ - --spectrum-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + (var(--spectrum-popover-tip-width) / 2)); + /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ + --spectrum-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + (var(--spectrum-popover-tip-width) / 2)); - /* pointer tip - spacing to edge will center pointer to source - apply in markup by setting '--spectrum-popover-pointer-edge-offset' value == half of source */ - --spectrum-popover-pointer-edge-spacing: calc(var(--spectrum-popover-pointer-edge-offset) - (var(--spectrum-popover-tip-width) / 2)); + /* pointer tip - spacing to edge will center pointer to source - apply in markup by setting '--spectrum-popover-pointer-edge-offset' value == half of source */ + --spectrum-popover-pointer-edge-spacing: calc(var(--spectrum-popover-pointer-edge-offset) - (var(--spectrum-popover-tip-width) / 2)); } /* windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Popover { - --highcontrast-popover-border-color: CanvasText; - } + .spectrum-Popover { + --highcontrast-popover-border-color: CanvasText; + } } .spectrum-Popover { - --spectrum-popover-filter: drop-shadow(var(--mod-popover-shadow-horizontal, var(--spectrum-popover-shadow-horizontal)) var(--mod-popover-shadow-vertical, var(--spectrum-popover-shadow-vertical)) var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur)) var(--mod-popover-shadow-color, var(--spectrum-popover-shadow-color))); - @extend %spectrum-overlay; - - box-sizing: border-box; - position: absolute; - - outline: none; /* Hide focus outline */ - - padding: var(--mod-popover-content-area-spacing-vertical, var(--spectrum-popover-content-area-spacing-vertical)) 0; - - display: inline-flex; - flex-direction: column; - - border-style: solid; - border-radius: var(--mod-popover-corner-radius, var(--spectrum-popover-corner-radius)); - border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color))); - border-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width)); - - background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color)); - filter: var(--mod-popover-filter, var(--spectrum-popover-filter)); - - /* has tip triangle */ - &.spectrum-Popover--withTip { - .spectrum-Popover-tip { - /* triangle polygon */ - .spectrum-Popover-tip-triangle { - stroke-linecap: square; - stroke-linejoin: miter; - fill: var(--highcontrast-popover-background-color, var(--mod-popover-background-color, var(--spectrum-popover-background-color))); - stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color))); - stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width)); - } - } - } + --spectrum-popover-filter: drop-shadow(var(--mod-popover-shadow-horizontal, var(--spectrum-popover-shadow-horizontal)) var(--mod-popover-shadow-vertical, var(--spectrum-popover-shadow-vertical)) var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur)) var(--mod-popover-shadow-color, var(--spectrum-popover-shadow-color))); + @extend %spectrum-overlay; + + box-sizing: border-box; + position: absolute; + + outline: none; /* Hide focus outline */ + + padding: var(--mod-popover-content-area-spacing-vertical, var(--spectrum-popover-content-area-spacing-vertical)) 0; + + display: inline-flex; + flex-direction: column; + + border-style: solid; + border-radius: var(--mod-popover-corner-radius, var(--spectrum-popover-corner-radius)); + border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color))); + border-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width)); + + background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color)); + filter: var(--mod-popover-filter, var(--spectrum-popover-filter)); + + /* has tip triangle */ + &.spectrum-Popover--withTip { + .spectrum-Popover-tip { + /* triangle polygon */ + .spectrum-Popover-tip-triangle { + stroke-linecap: square; + stroke-linejoin: miter; + fill: var(--highcontrast-popover-background-color, var(--mod-popover-background-color, var(--spectrum-popover-background-color))); + stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color))); + stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width)); + } + } + } } /* default opens and animates upward */ .spectrum-Popover.is-open { - @extend %spectrum-overlay--open; + @extend %spectrum-overlay--open; } /* prevent nested popovers from affecting each others drop shadow filters */ .spectrum-Popover * { - --mod-popover-filter: none; + --mod-popover-filter: none; } /* position naming - first position term is popover position, second term is source position */ @@ -113,16 +113,16 @@ governing permissions and limitations under the License. .spectrum-Popover--top-right, .spectrum-Popover--top-start, .spectrum-Popover--top-end { - /* spacing to include tip in calculation of offset from source */ - &.spectrum-Popover--withTip { - /* tip size minus where it overlaps with popover border */ - margin-block-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); - } - - /* popover animates upward ⬆ */ - &.is-open { - transform: translateY(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))); - } + /* spacing to include tip in calculation of offset from source */ + &.spectrum-Popover--withTip { + /* tip size minus where it overlaps with popover border */ + margin-block-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + } + + /* popover animates upward ⬆ */ + &.is-open { + transform: translateY(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))); + } } /* popover position is at bottom of source */ @@ -131,285 +131,284 @@ governing permissions and limitations under the License. .spectrum-Popover--bottom-right, .spectrum-Popover--bottom-start, .spectrum-Popover--bottom-end { - /* spacing to include tip in calculation of offset from source */ - &.spectrum-Popover--withTip { - /* tip size minus where it overlaps with popover border */ - margin-block-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); - } - - /* popover animates downward ⬇ */ - &.is-open { - transform: translateY(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))); - } + /* spacing to include tip in calculation of offset from source */ + &.spectrum-Popover--withTip { + /* tip size minus where it overlaps with popover border */ + margin-block-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + } + + /* popover animates downward ⬇ */ + &.is-open { + transform: translateY(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))); + } } /* popover position is right of source */ .spectrum-Popover--right, .spectrum-Popover--right-bottom, .spectrum-Popover--right-top { - /* spacing to include tip in calculation of offset from source */ - &.spectrum-Popover--withTip { - /* tip size minus where it overlaps with popover border */ - margin-inline-start: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); - } - - /* popover animates towards right ⮕ */ - &.is-open { - transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))); - } + /* spacing to include tip in calculation of offset from source */ + &.spectrum-Popover--withTip { + /* tip size minus where it overlaps with popover border */ + margin-inline-start: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + } + + /* popover animates towards right ⮕ */ + &.is-open { + transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))); + } } /* popover position is left of source */ .spectrum-Popover--left, .spectrum-Popover--left-bottom, .spectrum-Popover--left-top { - /* spacing to include tip in calculation of offset from source */ - &.spectrum-Popover--withTip { - /* tip size minus where it overlaps with popover border */ - margin-inline-end: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); - } - - /* popover animates towards left ⬅ */ - &.is-open { - transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))); - } + /* spacing to include tip in calculation of offset from source */ + &.spectrum-Popover--withTip { + /* tip size minus where it overlaps with popover border */ + margin-inline-end: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + } + + /* popover animates towards left ⬅ */ + &.is-open { + transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))); + } } /* logical property - popover is horizontally at start */ .spectrum-Popover--start, .spectrum-Popover--start-top, .spectrum-Popover--start-bottom { - /* spacing to include tip in calculation of offset from source */ - &.spectrum-Popover--withTip { - /* tip size minus where it overlaps with popover border */ - margin-inline-end: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); - } - - /* LTR read, popover animates towards left ⬅ */ - &.is-open { - transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))); - } - - /* RTL read, popover animates towards right ⮕ */ - &.is-open:dir(rtl) { - transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))); - } + /* spacing to include tip in calculation of offset from source */ + &.spectrum-Popover--withTip { + /* tip size minus where it overlaps with popover border */ + margin-inline-end: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + } + + /* LTR read, popover animates towards left ⬅ */ + &.is-open { + transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))); + } + + /* RTL read, popover animates towards right ⮕ */ + &.is-open:dir(rtl) { + transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))); + } } /* logical property - popover is horizontally at end */ .spectrum-Popover--end, .spectrum-Popover--end-top, .spectrum-Popover--end-bottom { - /* spacing to include tip in calculation of offset from source */ - &.spectrum-Popover--withTip { - /* tip size minus where it overlaps with popover border */ - margin-inline-start: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); - } - - /* LTR read, popover animates towards right ⮕ */ - &.is-open { - transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))); - } - - /* RTL read, popover animates towards left ⬅ */ - &:dir(rtl) { - &.is-open { - transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))); - } - } + /* spacing to include tip in calculation of offset from source */ + &.spectrum-Popover--withTip { + /* tip size minus where it overlaps with popover border */ + margin-inline-start: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + } + + /* LTR read, popover animates towards right ⮕ */ + &.is-open { + transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))); + } + + /* RTL read, popover animates towards left ⬅ */ + &:dir(rtl) { + &.is-open { + transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))); + } + } } /* HAS TIP - popover with triangle pointer */ /* default, top, and bottom position tip - tip defaults to pointing down ▽ */ .spectrum-Popover--withTip { - &.spectrum-Popover, - &.spectrum-Popover--top, - &.spectrum-Popover--top-left, - &.spectrum-Popover--top-right, - &.spectrum-Popover--top-start, - &.spectrum-Popover--top-end, - &.spectrum-Popover--bottom, - &.spectrum-Popover--bottom-left, - &.spectrum-Popover--bottom-right, - &.spectrum-Popover--bottom-start, - &.spectrum-Popover--bottom-end { - .spectrum-Popover-tip { - inline-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)); - block-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)); - position: absolute; - inset-block-start: 100%; - inset-inline: 0; - margin: auto; - - /* https://stackoverflow.com/questions/44170229/how-to-prevent-half-pixel-svg-shift-on-high-pixel-ratio-devices-retina */ - transform: translate(0, 0); - } - } - - /* popover is at top of source, tip left and pointing down ▽ */ - &.spectrum-Popover--top-left { - .spectrum-Popover-tip { - inset-inline: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto; - } - } - - /* popover is at top of source, tip right and pointing down ▽ */ - &.spectrum-Popover--top-right { - .spectrum-Popover-tip { - inset-inline: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); - } - } - - /* logical property - popover is above, source and tip are at start, tip pointing down ▽ */ - &.spectrum-Popover--top-start { - .spectrum-Popover-tip { - margin-inline-start: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); - } - } - - /* logical property - popover is above, source and tip are at end, tip pointing down ▽ */ - &.spectrum-Popover--top-end { - .spectrum-Popover-tip { - margin-inline-end: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); - } - } - - /* popover position is bottom of source with tip pointing up △ */ - &.spectrum-Popover--bottom, - &.spectrum-Popover--bottom-left, - &.spectrum-Popover--bottom-right, - &.spectrum-Popover--bottom-start, - &.spectrum-Popover--bottom-end { - .spectrum-Popover-tip { - inset-block: auto 100%; - - /* flip triangle to face up */ - transform: scaleY(-1); - } - } - - /* popover position is bottom, source is at left, tip pointing up △ */ - &.spectrum-Popover--bottom-left { - .spectrum-Popover-tip { - inset-inline: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto; - } - } - - /* popover position is bottom, source is at right, tip pointing up △ */ - &.spectrum-Popover--bottom-right { - .spectrum-Popover-tip { - inset-inline: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); - } - } - - /* logical property - popover is below, source is at start, tip pointing up △ */ - &.spectrum-Popover--bottom-start { - .spectrum-Popover-tip { - margin-inline-start: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); - } - } - - /* logical property - popover is below, source is at end, tip pointing up △ */ - &.spectrum-Popover--bottom-end { - .spectrum-Popover-tip { - margin-inline-end: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); - } - } - - /* right, left, start, end popover position with tip default to pointing right ▷ */ - &.spectrum-Popover--left, - &.spectrum-Popover--left-bottom, - &.spectrum-Popover--left-top, - &.spectrum-Popover--right, - &.spectrum-Popover--right-bottom, - &.spectrum-Popover--right-top, - &.spectrum-Popover--start, - &.spectrum-Popover--start-top, - &.spectrum-Popover--start-bottom, - &.spectrum-Popover--end, - &.spectrum-Popover--end-top, - &.spectrum-Popover--end-bottom { - .spectrum-Popover-tip { - /* swap height and width for vertical triangle */ - inline-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)); - block-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)); - inset-block: 0; - } - - /* left popover with tip pointing right ▷ */ - &.spectrum-Popover--left, - &.spectrum-Popover--left-bottom, - &.spectrum-Popover--left-top { - .spectrum-Popover-tip { - inset-inline: 100% auto; - } - } - - /* right popover with tip pointing left ◁ */ - &.spectrum-Popover--right, - &.spectrum-Popover--right-bottom, - &.spectrum-Popover--right-top { - .spectrum-Popover-tip { - inset-inline: auto 100%; - - /* flip tip to point left ◁ */ - transform: scaleX(-1); - } - } - - - /* popover with tip at top */ - &.spectrum-Popover--right-top, - &.spectrum-Popover--left-top, - &.spectrum-Popover--start-top, - &.spectrum-Popover--end-top { - .spectrum-Popover-tip { - inset-block: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto; - } - } - - /* popover with tip at bottom */ - &.spectrum-Popover--right-bottom, - &.spectrum-Popover--left-bottom, - &.spectrum-Popover--start-bottom, - &.spectrum-Popover--end-bottom { - .spectrum-Popover-tip { - inset-block: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); - } - } - } - - /* logical property - start popover position with tip pointing toward end - LTR default is ▷ */ - &.spectrum-Popover--start, - &.spectrum-Popover--start-top, - &.spectrum-Popover--start-bottom { - .spectrum-Popover-tip { - margin-inline-start: 100%; - - &:dir(rtl) { - transform: none; - - /* flip tip to point left ◁ */ - transform: scaleX(-1); - } - } - } - - /* logical property - end popover position with tip pointing toward start - LTR default is ◁ **/ - &.spectrum-Popover--end, - &.spectrum-Popover--end-top, - &.spectrum-Popover--end-bottom { - /* tip triangle */ - .spectrum-Popover-tip { - margin-inline-end: 100%; - - /* flip tip to point right ▷ */ - transform: scaleX(-1); - - &:dir(rtl) { - /* flip tip to point left ◁ */ - transform: scaleX(1); - } - } - } + &.spectrum-Popover, + &.spectrum-Popover--top, + &.spectrum-Popover--top-left, + &.spectrum-Popover--top-right, + &.spectrum-Popover--top-start, + &.spectrum-Popover--top-end, + &.spectrum-Popover--bottom, + &.spectrum-Popover--bottom-left, + &.spectrum-Popover--bottom-right, + &.spectrum-Popover--bottom-start, + &.spectrum-Popover--bottom-end { + .spectrum-Popover-tip { + inline-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)); + block-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)); + position: absolute; + inset-block-start: 100%; + inset-inline: 0; + margin: auto; + + /* https://stackoverflow.com/questions/44170229/how-to-prevent-half-pixel-svg-shift-on-high-pixel-ratio-devices-retina */ + transform: translate(0, 0); + } + } + + /* popover is at top of source, tip left and pointing down ▽ */ + &.spectrum-Popover--top-left { + .spectrum-Popover-tip { + inset-inline: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto; + } + } + + /* popover is at top of source, tip right and pointing down ▽ */ + &.spectrum-Popover--top-right { + .spectrum-Popover-tip { + inset-inline: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + } + } + + /* logical property - popover is above, source and tip are at start, tip pointing down ▽ */ + &.spectrum-Popover--top-start { + .spectrum-Popover-tip { + margin-inline-start: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + } + } + + /* logical property - popover is above, source and tip are at end, tip pointing down ▽ */ + &.spectrum-Popover--top-end { + .spectrum-Popover-tip { + margin-inline-end: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + } + } + + /* popover position is bottom of source with tip pointing up △ */ + &.spectrum-Popover--bottom, + &.spectrum-Popover--bottom-left, + &.spectrum-Popover--bottom-right, + &.spectrum-Popover--bottom-start, + &.spectrum-Popover--bottom-end { + .spectrum-Popover-tip { + inset-block: auto 100%; + + /* flip triangle to face up */ + transform: scaleY(-1); + } + } + + /* popover position is bottom, source is at left, tip pointing up △ */ + &.spectrum-Popover--bottom-left { + .spectrum-Popover-tip { + inset-inline: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto; + } + } + + /* popover position is bottom, source is at right, tip pointing up △ */ + &.spectrum-Popover--bottom-right { + .spectrum-Popover-tip { + inset-inline: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + } + } + + /* logical property - popover is below, source is at start, tip pointing up △ */ + &.spectrum-Popover--bottom-start { + .spectrum-Popover-tip { + margin-inline-start: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + } + } + + /* logical property - popover is below, source is at end, tip pointing up △ */ + &.spectrum-Popover--bottom-end { + .spectrum-Popover-tip { + margin-inline-end: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + } + } + + /* right, left, start, end popover position with tip default to pointing right ▷ */ + &.spectrum-Popover--left, + &.spectrum-Popover--left-bottom, + &.spectrum-Popover--left-top, + &.spectrum-Popover--right, + &.spectrum-Popover--right-bottom, + &.spectrum-Popover--right-top, + &.spectrum-Popover--start, + &.spectrum-Popover--start-top, + &.spectrum-Popover--start-bottom, + &.spectrum-Popover--end, + &.spectrum-Popover--end-top, + &.spectrum-Popover--end-bottom { + .spectrum-Popover-tip { + /* swap height and width for vertical triangle */ + inline-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)); + block-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)); + inset-block: 0; + } + + /* left popover with tip pointing right ▷ */ + &.spectrum-Popover--left, + &.spectrum-Popover--left-bottom, + &.spectrum-Popover--left-top { + .spectrum-Popover-tip { + inset-inline: 100% auto; + } + } + + /* right popover with tip pointing left ◁ */ + &.spectrum-Popover--right, + &.spectrum-Popover--right-bottom, + &.spectrum-Popover--right-top { + .spectrum-Popover-tip { + inset-inline: auto 100%; + + /* flip tip to point left ◁ */ + transform: scaleX(-1); + } + } + + /* popover with tip at top */ + &.spectrum-Popover--right-top, + &.spectrum-Popover--left-top, + &.spectrum-Popover--start-top, + &.spectrum-Popover--end-top { + .spectrum-Popover-tip { + inset-block: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto; + } + } + + /* popover with tip at bottom */ + &.spectrum-Popover--right-bottom, + &.spectrum-Popover--left-bottom, + &.spectrum-Popover--start-bottom, + &.spectrum-Popover--end-bottom { + .spectrum-Popover-tip { + inset-block: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + } + } + } + + /* logical property - start popover position with tip pointing toward end - LTR default is ▷ */ + &.spectrum-Popover--start, + &.spectrum-Popover--start-top, + &.spectrum-Popover--start-bottom { + .spectrum-Popover-tip { + margin-inline-start: 100%; + + &:dir(rtl) { + transform: none; + + /* flip tip to point left ◁ */ + transform: scaleX(-1); + } + } + } + + /* logical property - end popover position with tip pointing toward start - LTR default is ◁ **/ + &.spectrum-Popover--end, + &.spectrum-Popover--end-top, + &.spectrum-Popover--end-bottom { + /* tip triangle */ + .spectrum-Popover-tip { + margin-inline-end: 100%; + + /* flip tip to point right ▷ */ + transform: scaleX(-1); + + &:dir(rtl) { + /* flip tip to point left ◁ */ + transform: scaleX(1); + } + } + } } diff --git a/components/popover/themes/express.css b/components/popover/themes/express.css index d32007014d..5c5e561a3e 100644 --- a/components/popover/themes/express.css +++ b/components/popover/themes/express.css @@ -13,7 +13,7 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Popover { - --spectrum-popover-border-width: 0; - } + .spectrum-Popover { + --spectrum-popover-border-width: 0; + } } diff --git a/components/popover/themes/spectrum.css b/components/popover/themes/spectrum.css index 49785169d5..752fa669d1 100644 --- a/components/popover/themes/spectrum.css +++ b/components/popover/themes/spectrum.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Popover { - --spectrum-popover-border-width: var(--spectrum-border-width-100); - } + .spectrum-Popover { + --spectrum-popover-border-width: var(--spectrum-border-width-100); + } } diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 252f0d7e57..dfbcc0eda1 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -11,270 +11,267 @@ governing permissions and limitations under the License. */ .spectrum-ProgressBar { - /* Static tokens */ - --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); - --spectrum-progressbar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); - --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100); - - --spectrum-progressbar-fill-size-indeterminate: 70%; - - /* --spectrum-global-dimension-static-size-2400 */ - --spectrum-progressbar-size-2400: 192px; - - /* --spectrum-global-dimension-static-size-2500 */ - --spectrum-progressbar-size-2500: 200px; - - /* --spectrum-global-dimension-static-size-2800 */ - --spectrum-progressbar-size-2800: 224px; - - /* Size */ - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100); - - --spectrum-progressbar-min-size: var(--spectrum-progress-bar-minimum-width); - --spectrum-progressbar-max-size: var(--spectrum-progress-bar-maximum-width); - - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-medium); - --spectrum-progressbar-line-height: var(--spectrum-line-height-100); - - /* Spacing */ - --spectrum-progressbar-spacing-label-to-progressbar: var(--spectrum-spacing-75); - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-progressbar-spacing-label-to-text: var(--spectrum-spacing-200); - - /* Color */ - --spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default); - --spectrum-progressbar-track-color: var(--spectrum-gray-300); - --spectrum-progressbar-fill-color: var(--spectrum-accent-color-900); - --spectrum-progressbar-fill-color-positive: var(--spectrum-positive-visual-color); - --spectrum-progressbar-fill-color-notice: var(--spectrum-notice-visual-color); - --spectrum-progressbar-fill-color-negative: var(--spectrum-negative-visual-color); - --spectrum-progressbar-label-and-value-white: var(--spectrum-white); - --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300); - --spectrum-progressbar-fill-color-white: var(--spectrum-white); - - /* Meter */ - --spectrum-meter-min-width: var(--spectrum-meter-minimum-width); - --spectrum-meter-max-width: var(--spectrum-meter-maximum-width); - --spectrum-meter-inline-size: var(--spectrum-meter-default-width); - --spectrum-meter-thickness-s: var(--spectrum-meter-thickness-small); - --spectrum-meter-thickness-l: var(--spectrum-meter-thickness-large); - --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text); + /* Static tokens */ + --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); + --spectrum-progressbar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); + --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100); + + --spectrum-progressbar-fill-size-indeterminate: 70%; + + /* --spectrum-global-dimension-static-size-2400 */ + --spectrum-progressbar-size-2400: 192px; + + /* --spectrum-global-dimension-static-size-2500 */ + --spectrum-progressbar-size-2500: 200px; + + /* --spectrum-global-dimension-static-size-2800 */ + --spectrum-progressbar-size-2800: 224px; + + /* Size */ + --spectrum-progressbar-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100); + + --spectrum-progressbar-min-size: var(--spectrum-progress-bar-minimum-width); + --spectrum-progressbar-max-size: var(--spectrum-progress-bar-maximum-width); + + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-medium); + --spectrum-progressbar-line-height: var(--spectrum-line-height-100); + + /* Spacing */ + --spectrum-progressbar-spacing-label-to-progressbar: var(--spectrum-spacing-75); + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-progressbar-spacing-label-to-text: var(--spectrum-spacing-200); + + /* Color */ + --spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default); + --spectrum-progressbar-track-color: var(--spectrum-gray-300); + --spectrum-progressbar-fill-color: var(--spectrum-accent-color-900); + --spectrum-progressbar-fill-color-positive: var(--spectrum-positive-visual-color); + --spectrum-progressbar-fill-color-notice: var(--spectrum-notice-visual-color); + --spectrum-progressbar-fill-color-negative: var(--spectrum-negative-visual-color); + --spectrum-progressbar-label-and-value-white: var(--spectrum-white); + --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300); + --spectrum-progressbar-fill-color-white: var(--spectrum-white); + + /* Meter */ + --spectrum-meter-min-width: var(--spectrum-meter-minimum-width); + --spectrum-meter-max-width: var(--spectrum-meter-maximum-width); + --spectrum-meter-inline-size: var(--spectrum-meter-default-width); + --spectrum-meter-thickness-s: var(--spectrum-meter-thickness-small); + --spectrum-meter-thickness-l: var(--spectrum-meter-thickness-large); + --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text); } -.spectrum-ProgressBar--sizeS, .spectrum-Meter--sizeS { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); +.spectrum-ProgressBar--sizeS, +.spectrum-Meter--sizeS { + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small); + --spectrum-progressbar-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small); - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); } .spectrum-ProgressBar--sizeM { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); + --spectrum-progressbar-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); } -.spectrum-ProgressBar--sizeL, .spectrum-Meter--sizeL { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500); +.spectrum-ProgressBar--sizeL, +.spectrum-Meter--sizeL { + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500); - --spectrum-progressbar-font-size: var(--spectrum-font-size-100); - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); + --spectrum-progressbar-font-size: var(--spectrum-font-size-100); + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); } .spectrum-ProgressBar--sizeXL { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800); + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800); - --spectrum-progressbar-font-size: var(--spectrum-font-size-200); - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large); + --spectrum-progressbar-font-size: var(--spectrum-font-size-200); + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large); - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300); } .spectrum-Meter { - --spectrum-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-inline-size)); - --spectrum-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-max-width)); - --spectrum-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-min-width)); - - /* Meter only supports size S and L */ - &.spectrum-Meter--sizeS { - --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-s); - } - - &.spectrum-Meter--sizeL { - --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-l); - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - } - - &.is-positive .spectrum-ProgressBar-fill { - background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive))); - } - - &.is-notice .spectrum-ProgressBar-fill { - background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice))); - } - - &.is-negative .spectrum-ProgressBar-fill { - background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative))); - } + --spectrum-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-inline-size)); + --spectrum-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-max-width)); + --spectrum-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-min-width)); + + /* Meter only supports size S and L */ + &.spectrum-Meter--sizeS { + --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-s); + } + + &.spectrum-Meter--sizeL { + --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-l); + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + } + + &.is-positive .spectrum-ProgressBar-fill { + background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive))); + } + + &.is-notice .spectrum-ProgressBar-fill { + background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice))); + } + + &.is-negative .spectrum-ProgressBar-fill { + background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative))); + } } - .spectrum-ProgressBar { - position: relative; - display: inline-flex; - flex-flow: row wrap; - justify-content: space-between; - align-items: center; - font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size)); - vertical-align: top; - - inline-size: var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); - max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size)); - min-inline-size: var(--mod-progressbar-min-size, var(--spectrum-progressbar-min-size)); - - /* Label and Percentage */ - .spectrum-ProgressBar-label, - .spectrum-ProgressBar-percentage { - text-align: start; - margin-block-start: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-spacing-top-to-text)); - margin-block-end: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-progressbar-spacing-label-to-progressbar)); - - line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height)); - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk)); - } - - color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color)); - } - - /* Label */ - .spectrum-ProgressBar-label { - flex: 1 1 0%; - } - - /* Percentage */ - .spectrum-ProgressBar-percentage { - align-self: flex-start; - margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); - } - - /* Track */ - .spectrum-ProgressBar-track { - /* Visually apply border radius to child elements */ - overflow: hidden; - inline-size: 100%; - block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); - border-radius: var(--spectrum-progressbar-corner-radius); - - background-color: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); - } - - .spectrum-ProgressBar-fill { - border: none; - block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); - transition: width 1s; - background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))); - } + position: relative; + display: inline-flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; + font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size)); + vertical-align: top; + + inline-size: var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); + max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size)); + min-inline-size: var(--mod-progressbar-min-size, var(--spectrum-progressbar-min-size)); + + /* Label and Percentage */ + .spectrum-ProgressBar-label, + .spectrum-ProgressBar-percentage { + text-align: start; + margin-block-start: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-spacing-top-to-text)); + margin-block-end: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-progressbar-spacing-label-to-progressbar)); + + line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height)); + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk)); + } + + color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color)); + } + + /* Label */ + .spectrum-ProgressBar-label { + flex: 1 1 0%; + } + + /* Percentage */ + .spectrum-ProgressBar-percentage { + align-self: flex-start; + margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); + } + + /* Track */ + .spectrum-ProgressBar-track { + /* Visually apply border radius to child elements */ + overflow: hidden; + inline-size: 100%; + block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); + border-radius: var(--spectrum-progressbar-corner-radius); + + background-color: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); + } + + .spectrum-ProgressBar-fill { + border: none; + block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); + transition: width 1s; + background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))); + } } .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill { - inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)); - position: relative; - animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate)); - will-change: transform; + inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)); + position: relative; + animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate)); + will-change: transform; } /* Variants */ /* Side Label */ .spectrum-ProgressBar--sideLabel { - display: inline-flex; - flex-flow: row; - justify-content: space-between; - - .spectrum-ProgressBar-track { - flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); - } - - .spectrum-ProgressBar-label { - flex-grow: 0; - margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); - margin-block-end: 0; - } - - .spectrum-ProgressBar-percentage { - order: 3; - text-align: end; - margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); - margin-block-end: 0; - } + display: inline-flex; + flex-flow: row; + justify-content: space-between; + + .spectrum-ProgressBar-track { + flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); + } + + .spectrum-ProgressBar-label { + flex-grow: 0; + margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); + margin-block-end: 0; + } + + .spectrum-ProgressBar-percentage { + order: 3; + text-align: end; + margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); + margin-block-end: 0; + } } /* Static White */ .spectrum-ProgressBar--staticWhite { - .spectrum-ProgressBar-fill { - color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); - background-color: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)); - } - - .spectrum-ProgressBar-label, - .spectrum-ProgressBar-percentage { - color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); - } - - .spectrum-ProgressBar-track { - background-color: var(--spectrum-progressbar-track-color-white); - } + .spectrum-ProgressBar-fill { + color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); + background-color: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)); + } + + .spectrum-ProgressBar-label, + .spectrum-ProgressBar-percentage { + color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); + } + + .spectrum-ProgressBar-track { + background-color: var(--spectrum-progressbar-track-color-white); + } } /* Animations */ .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill { - animation: indeterminate-loop-ltr - var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)) infinite; + animation: indeterminate-loop-ltr var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)) infinite; } .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl) { - animation: indeterminate-loop-rtl - var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)) infinite; + animation: indeterminate-loop-rtl var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)) infinite; } @keyframes indeterminate-loop-ltr { - from { - transform: translate( - calc(-1 * var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate))) - ); - } - - to { - transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default))); - } + from { + transform: translate(calc(-1 * var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)))); + } + + to { + transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default))); + } } @keyframes indeterminate-loop-rtl { - from { - transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate))); - } + from { + transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate))); + } - to { - transform: translate(calc(-1 * var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)))); - } + to { + transform: translate(calc(-1 * var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)))); + } } @media (forced-colors: active) { - .spectrum-ProgressBar-track { - forced-color-adjust: none; - --highcontrast-progressbar-fill-color: ButtonText; - --highcontrast-progressbar-track-color: ButtonFace; - border: 1px solid ButtonText; - } + .spectrum-ProgressBar-track { + forced-color-adjust: none; + --highcontrast-progressbar-fill-color: ButtonText; + --highcontrast-progressbar-track-color: ButtonFace; + border: 1px solid ButtonText; + } } diff --git a/components/progresscircle/animation.css b/components/progresscircle/animation.css index 4bce74df7e..9bcc3e8839 100644 --- a/components/progresscircle/animation.css +++ b/components/progresscircle/animation.css @@ -11,499 +11,499 @@ governing permissions and limitations under the License. */ .spectrum-ProgressCircle--indeterminate-fill-submask-2 { - animation: 1s infinite linear spectrum-fill-mask-2; + animation: 1s infinite linear spectrum-fill-mask-2; } @keyframes spectrum-fill-mask-1 { - 0% { - transform: rotate(90deg); - } + 0% { + transform: rotate(90deg); + } - 1.69% { - transform: rotate(72.3deg); - } + 1.69% { + transform: rotate(72.3deg); + } - 3.39% { - transform: rotate(55.5deg); - } + 3.39% { + transform: rotate(55.5deg); + } - 5.08% { - transform: rotate(40.3deg); - } + 5.08% { + transform: rotate(40.3deg); + } - 6.78% { - transform: rotate(25deg); - } + 6.78% { + transform: rotate(25deg); + } - 8.47% { - transform: rotate(10.6deg); - } + 8.47% { + transform: rotate(10.6deg); + } - 10.17% { - transform: rotate(0deg); - } + 10.17% { + transform: rotate(0deg); + } - 11.86% { - transform: rotate(0deg); - } + 11.86% { + transform: rotate(0deg); + } - 13.56% { - transform: rotate(0deg); - } + 13.56% { + transform: rotate(0deg); + } - 15.25% { - transform: rotate(0deg); - } + 15.25% { + transform: rotate(0deg); + } - 16.95% { - transform: rotate(0deg); - } + 16.95% { + transform: rotate(0deg); + } - 18.64% { - transform: rotate(0deg); - } + 18.64% { + transform: rotate(0deg); + } - 20.34% { - transform: rotate(0deg); - } + 20.34% { + transform: rotate(0deg); + } - 22.03% { - transform: rotate(0deg); - } + 22.03% { + transform: rotate(0deg); + } - 23.73% { - transform: rotate(0deg); - } + 23.73% { + transform: rotate(0deg); + } - 25.42% { - transform: rotate(0deg); - } + 25.42% { + transform: rotate(0deg); + } - 27.12% { - transform: rotate(0deg); - } + 27.12% { + transform: rotate(0deg); + } - 28.81% { - transform: rotate(0deg); - } + 28.81% { + transform: rotate(0deg); + } - 30.51% { - transform: rotate(0deg); - } + 30.51% { + transform: rotate(0deg); + } - 32.2% { - transform: rotate(0deg); - } + 32.2% { + transform: rotate(0deg); + } - 33.9% { - transform: rotate(0deg); - } + 33.9% { + transform: rotate(0deg); + } - 35.59% { - transform: rotate(0deg); - } + 35.59% { + transform: rotate(0deg); + } - 37.29% { - transform: rotate(0deg); - } + 37.29% { + transform: rotate(0deg); + } - 38.98% { - transform: rotate(0deg); - } + 38.98% { + transform: rotate(0deg); + } - 40.68% { - transform: rotate(0deg); - } + 40.68% { + transform: rotate(0deg); + } - 42.37% { - transform: rotate(5.3deg); - } + 42.37% { + transform: rotate(5.3deg); + } - 44.07% { - transform: rotate(13.4deg); - } + 44.07% { + transform: rotate(13.4deg); + } - 45.76% { - transform: rotate(20.6deg); - } + 45.76% { + transform: rotate(20.6deg); + } - 47.46% { - transform: rotate(29deg); - } + 47.46% { + transform: rotate(29deg); + } - 49.15% { - transform: rotate(36.5deg); - } + 49.15% { + transform: rotate(36.5deg); + } - 50.85% { - transform: rotate(42.6deg); - } + 50.85% { + transform: rotate(42.6deg); + } - 52.54% { - transform: rotate(48.8deg); - } + 52.54% { + transform: rotate(48.8deg); + } - 54.24% { - transform: rotate(54.2deg); - } + 54.24% { + transform: rotate(54.2deg); + } - 55.93% { - transform: rotate(59.4deg); - } + 55.93% { + transform: rotate(59.4deg); + } - 57.63% { - transform: rotate(63.2deg); - } + 57.63% { + transform: rotate(63.2deg); + } - 59.32% { - transform: rotate(67.2deg); - } + 59.32% { + transform: rotate(67.2deg); + } - 61.02% { - transform: rotate(70.8deg); - } + 61.02% { + transform: rotate(70.8deg); + } - 62.71% { - transform: rotate(73.8deg); - } + 62.71% { + transform: rotate(73.8deg); + } - 64.41% { - transform: rotate(76.2deg); - } + 64.41% { + transform: rotate(76.2deg); + } - 66.1% { - transform: rotate(78.7deg); - } + 66.1% { + transform: rotate(78.7deg); + } - 67.8% { - transform: rotate(80.6deg); - } + 67.8% { + transform: rotate(80.6deg); + } - 69.49% { - transform: rotate(82.6deg); - } + 69.49% { + transform: rotate(82.6deg); + } - 71.19% { - transform: rotate(83.7deg); - } + 71.19% { + transform: rotate(83.7deg); + } - 72.88% { - transform: rotate(85deg); - } + 72.88% { + transform: rotate(85deg); + } - 74.58% { - transform: rotate(86.3deg); - } + 74.58% { + transform: rotate(86.3deg); + } - 76.27% { - transform: rotate(87deg); - } + 76.27% { + transform: rotate(87deg); + } - 77.97% { - transform: rotate(87.7deg); - } + 77.97% { + transform: rotate(87.7deg); + } - 79.66% { - transform: rotate(88.3deg); - } + 79.66% { + transform: rotate(88.3deg); + } - 81.36% { - transform: rotate(88.6deg); - } + 81.36% { + transform: rotate(88.6deg); + } - 83.05% { - transform: rotate(89.2deg); - } + 83.05% { + transform: rotate(89.2deg); + } - 84.75% { - transform: rotate(89.2deg); - } + 84.75% { + transform: rotate(89.2deg); + } - 86.44% { - transform: rotate(89.5deg); - } + 86.44% { + transform: rotate(89.5deg); + } - 88.14% { - transform: rotate(89.9deg); - } + 88.14% { + transform: rotate(89.9deg); + } - 89.83% { - transform: rotate(89.7deg); - } + 89.83% { + transform: rotate(89.7deg); + } - 91.53% { - transform: rotate(90.1deg); - } + 91.53% { + transform: rotate(90.1deg); + } - 93.22% { - transform: rotate(90.2deg); - } + 93.22% { + transform: rotate(90.2deg); + } - 94.92% { - transform: rotate(90.1deg); - } + 94.92% { + transform: rotate(90.1deg); + } - 96.61% { - transform: rotate(90deg); - } + 96.61% { + transform: rotate(90deg); + } - 98.31% { - transform: rotate(89.8deg); - } + 98.31% { + transform: rotate(89.8deg); + } - 100% { - transform: rotate(90deg); - } + 100% { + transform: rotate(90deg); + } } @keyframes spectrum-fill-mask-2 { - 0% { - transform: rotate(180deg); - } + 0% { + transform: rotate(180deg); + } - 1.69% { - transform: rotate(180deg); - } + 1.69% { + transform: rotate(180deg); + } - 3.39% { - transform: rotate(180deg); - } + 3.39% { + transform: rotate(180deg); + } - 5.08% { - transform: rotate(180deg); - } + 5.08% { + transform: rotate(180deg); + } - 6.78% { - transform: rotate(180deg); - } + 6.78% { + transform: rotate(180deg); + } - 8.47% { - transform: rotate(180deg); - } + 8.47% { + transform: rotate(180deg); + } - 10.17% { - transform: rotate(179.2deg); - } + 10.17% { + transform: rotate(179.2deg); + } - 11.86% { - transform: rotate(164deg); - } + 11.86% { + transform: rotate(164deg); + } - 13.56% { - transform: rotate(151.8deg); - } + 13.56% { + transform: rotate(151.8deg); + } - 15.25% { - transform: rotate(140.8deg); - } + 15.25% { + transform: rotate(140.8deg); + } - 16.95% { - transform: rotate(130.3deg); - } + 16.95% { + transform: rotate(130.3deg); + } - 18.64% { - transform: rotate(120.4deg); - } + 18.64% { + transform: rotate(120.4deg); + } - 20.34% { - transform: rotate(110.8deg); - } + 20.34% { + transform: rotate(110.8deg); + } - 22.03% { - transform: rotate(101.6deg); - } + 22.03% { + transform: rotate(101.6deg); + } - 23.73% { - transform: rotate(93.5deg); - } + 23.73% { + transform: rotate(93.5deg); + } - 25.42% { - transform: rotate(85.4deg); - } + 25.42% { + transform: rotate(85.4deg); + } - 27.12% { - transform: rotate(78.1deg); - } + 27.12% { + transform: rotate(78.1deg); + } - 28.81% { - transform: rotate(71.2deg); - } + 28.81% { + transform: rotate(71.2deg); + } - 30.51% { - transform: rotate(89.1deg); - } + 30.51% { + transform: rotate(89.1deg); + } - 32.2% { - transform: rotate(105.5deg); - } + 32.2% { + transform: rotate(105.5deg); + } - 33.9% { - transform: rotate(121.3deg); - } + 33.9% { + transform: rotate(121.3deg); + } - 35.59% { - transform: rotate(135.5deg); - } + 35.59% { + transform: rotate(135.5deg); + } - 37.29% { - transform: rotate(148.4deg); - } + 37.29% { + transform: rotate(148.4deg); + } - 38.98% { - transform: rotate(161deg); - } + 38.98% { + transform: rotate(161deg); + } - 40.68% { - transform: rotate(173.5deg); - } + 40.68% { + transform: rotate(173.5deg); + } - 42.37% { - transform: rotate(180deg); - } + 42.37% { + transform: rotate(180deg); + } - 44.07% { - transform: rotate(180deg); - } + 44.07% { + transform: rotate(180deg); + } - 45.76% { - transform: rotate(180deg); - } + 45.76% { + transform: rotate(180deg); + } - 47.46% { - transform: rotate(180deg); - } + 47.46% { + transform: rotate(180deg); + } - 49.15% { - transform: rotate(180deg); - } + 49.15% { + transform: rotate(180deg); + } - 50.85% { - transform: rotate(180deg); - } + 50.85% { + transform: rotate(180deg); + } - 52.54% { - transform: rotate(180deg); - } + 52.54% { + transform: rotate(180deg); + } - 54.24% { - transform: rotate(180deg); - } + 54.24% { + transform: rotate(180deg); + } - 55.93% { - transform: rotate(180deg); - } + 55.93% { + transform: rotate(180deg); + } - 57.63% { - transform: rotate(180deg); - } + 57.63% { + transform: rotate(180deg); + } - 59.32% { - transform: rotate(180deg); - } + 59.32% { + transform: rotate(180deg); + } - 61.02% { - transform: rotate(180deg); - } + 61.02% { + transform: rotate(180deg); + } - 62.71% { - transform: rotate(180deg); - } + 62.71% { + transform: rotate(180deg); + } - 64.41% { - transform: rotate(180deg); - } + 64.41% { + transform: rotate(180deg); + } - 66.1% { - transform: rotate(180deg); - } + 66.1% { + transform: rotate(180deg); + } - 67.8% { - transform: rotate(180deg); - } + 67.8% { + transform: rotate(180deg); + } - 69.49% { - transform: rotate(180deg); - } + 69.49% { + transform: rotate(180deg); + } - 71.19% { - transform: rotate(180deg); - } + 71.19% { + transform: rotate(180deg); + } - 72.88% { - transform: rotate(180deg); - } + 72.88% { + transform: rotate(180deg); + } - 74.58% { - transform: rotate(180deg); - } + 74.58% { + transform: rotate(180deg); + } - 76.27% { - transform: rotate(180deg); - } + 76.27% { + transform: rotate(180deg); + } - 77.97% { - transform: rotate(180deg); - } + 77.97% { + transform: rotate(180deg); + } - 79.66% { - transform: rotate(180deg); - } + 79.66% { + transform: rotate(180deg); + } - 81.36% { - transform: rotate(180deg); - } + 81.36% { + transform: rotate(180deg); + } - 83.05% { - transform: rotate(180deg); - } + 83.05% { + transform: rotate(180deg); + } - 84.75% { - transform: rotate(180deg); - } + 84.75% { + transform: rotate(180deg); + } - 86.44% { - transform: rotate(180deg); - } + 86.44% { + transform: rotate(180deg); + } - 88.14% { - transform: rotate(180deg); - } + 88.14% { + transform: rotate(180deg); + } - 89.83% { - transform: rotate(180deg); - } + 89.83% { + transform: rotate(180deg); + } - 91.53% { - transform: rotate(180deg); - } + 91.53% { + transform: rotate(180deg); + } - 93.22% { - transform: rotate(180deg); - } + 93.22% { + transform: rotate(180deg); + } - 94.92% { - transform: rotate(180deg); - } + 94.92% { + transform: rotate(180deg); + } - 96.61% { - transform: rotate(180deg); - } + 96.61% { + transform: rotate(180deg); + } - 98.31% { - transform: rotate(180deg); - } + 98.31% { + transform: rotate(180deg); + } - 100% { - transform: rotate(180deg); - } + 100% { + transform: rotate(180deg); + } } @keyframes spectrum-fills-rotate { - 0% { - transform: rotate(-90deg); - } + 0% { + transform: rotate(-90deg); + } - 100% { - transform: rotate(270deg); - } + 100% { + transform: rotate(270deg); + } } diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css index 5184180a38..d4c4c7b1a5 100644 --- a/components/progresscircle/index.css +++ b/components/progresscircle/index.css @@ -13,173 +13,154 @@ governing permissions and limitations under the License. @import "animation.css"; .spectrum-ProgressCircle { - /* circle unfilled border color */ - --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300); + /* circle unfilled border color */ + --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300); - /* circle progress fill border color */ - --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); + /* circle progress fill border color */ + --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); - /* over background unfilled border color */ - --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); + /* over background unfilled border color */ + --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); - /* over background progress fill border color */ - --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900); + /* over background progress fill border color */ + --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900); - /* default size and thickness */ - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium); - --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); + /* default size and thickness */ + --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); - /* track border style */ - --spectrum-progress-circle-track-border-style: solid; + /* track border style */ + --spectrum-progress-circle-track-border-style: solid; } .spectrum-ProgressCircle--small { - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small); - --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small); + --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small); + --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small); } .spectrum-ProgressCircle--medium { - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium); - --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); + --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); } .spectrum-ProgressCircle--large { - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large); - --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large); + --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large); + --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large); } /* windows high contrast mode */ @media (forced-colors: active) { - .spectrum-ProgressCircle { - /* fill is bright color */ - --highcontrast-progress-circle-fill-border-color: Highlight; - - /* fill over background is bright color */ - --highcontrast-progress-circle-fill-border-color-over-background: Highlight; - } - - /* track double for visibility */ - .spectrum-ProgressCircle-track { - --spectrum-progress-circle-track-border-style: double; - } + .spectrum-ProgressCircle { + /* fill is bright color */ + --highcontrast-progress-circle-fill-border-color: Highlight; + + /* fill over background is bright color */ + --highcontrast-progress-circle-fill-border-color-over-background: Highlight; + } + + /* track double for visibility */ + .spectrum-ProgressCircle-track { + --spectrum-progress-circle-track-border-style: double; + } } .spectrum-ProgressCircle { - display: inline-block; - inline-size: var(--mod-progress-circle-size, - var(--spectrum-progress-circle-size)); - block-size: var(--mod-progress-circle-size, - var(--spectrum-progress-circle-size)); - position: var(--mod-progress-circle-position, relative); - direction: ltr; - - /* Fix for Safari rendering bug */ - /* more info: https://github.com/adobe/spectrum-web-components/issues/1392 */ - transform: translate3d(0, 0, 0); + display: inline-block; + inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); + block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); + position: var(--mod-progress-circle-position, relative); + direction: ltr; + + /* Fix for Safari rendering bug */ + /* more info: https://github.com/adobe/spectrum-web-components/issues/1392 */ + transform: translate3d(0, 0, 0); } .spectrum-ProgressCircle-track { - box-sizing: border-box; - inline-size: var(--mod-progress-circle-size, - var(--spectrum-progress-circle-size)); - block-size: var(--mod-progress-circle-size, - var(--spectrum-progress-circle-size)); - - border-style: var(--highcontrast-progress-circle-track-border-style, - var(--mod-progress-circle-track-border-style, - var(--spectrum-progress-circle-track-border-style))); - border-width: var(--mod-progress-circle-thickness, - var(--spectrum-progress-circle-thickness)); - border-radius: var(--mod-progress-circle-size, - var(--spectrum-progress-circle-size)); - border-color: var(--mod-progress-circle-track-border-color, - var(--spectrum-progress-circle-track-border-color)); + box-sizing: border-box; + inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); + block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); + + border-style: var(--highcontrast-progress-circle-track-border-style, var(--mod-progress-circle-track-border-style, var(--spectrum-progress-circle-track-border-style))); + border-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness)); + border-radius: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); + border-color: var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color)); } /* circle progress fill parent container */ .spectrum-ProgressCircle-fills { - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - inline-size: 100%; - block-size: 100%; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 100%; + block-size: 100%; } /* circle progress filled */ .spectrum-ProgressCircle-fill { - box-sizing: border-box; - inline-size: var(--mod-progress-circle-size, - var(--spectrum-progress-circle-size)); - block-size: var(--mod-progress-circle-size, - var(--spectrum-progress-circle-size)); - - border-style: solid; - border-width: var(--mod-progress-circle-thickness, - var(--spectrum-progress-circle-thickness)); - border-radius: var(--mod-progress-circle-size, - var(--spectrum-progress-circle-size)); - border-color: var(--highcontrast-progress-circle-fill-border-color, - var(--mod-progress-circle-fill-border-color, - var(--spectrum-progress-circle-fill-border-color))); + box-sizing: border-box; + inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); + block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); + + border-style: solid; + border-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness)); + border-radius: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); + border-color: var(--highcontrast-progress-circle-fill-border-color, var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color))); } /* circle colors over background */ .spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite { - .spectrum-ProgressCircle-track { - border-color: var(--mod-progress-circle-track-border-color-over-background, - var(--spectrum-progress-circle-track-border-color-over-background)); - } - - .spectrum-ProgressCircle-fill { - border-color: var(--highcontrast-progress-circle-fill-border-color-over-background, - var(--mod-progress-circle-fill-border-color-over-background, - var(--spectrum-progress-circle-fill-border-color-over-background))); - } + .spectrum-ProgressCircle-track { + border-color: var(--mod-progress-circle-track-border-color-over-background, var(--spectrum-progress-circle-track-border-color-over-background)); + } + + .spectrum-ProgressCircle-fill { + border-color: var(--highcontrast-progress-circle-fill-border-color-over-background, var(--mod-progress-circle-fill-border-color-over-background, var(--spectrum-progress-circle-fill-border-color-over-background))); + } } /* animation masks - circle fill progress */ .spectrum-ProgressCircle-fillMask1, .spectrum-ProgressCircle-fillMask2 { - inline-size: 50%; - block-size: 100%; - transform-origin: 100% center; - transform: rotate(180deg); - overflow: hidden; - position: absolute; + inline-size: 50%; + block-size: 100%; + transform-origin: 100% center; + transform: rotate(180deg); + overflow: hidden; + position: absolute; } .spectrum-ProgressCircle-fillSubMask1, .spectrum-ProgressCircle-fillSubMask2 { - inline-size: 100%; - block-size: 100%; - transform-origin: 100% center; - overflow: hidden; - transform: rotate(-180deg); + inline-size: 100%; + block-size: 100%; + transform-origin: 100% center; + overflow: hidden; + transform: rotate(-180deg); } .spectrum-ProgressCircle-fillMask2 { - transform: rotate(0deg); + transform: rotate(0deg); } /* animation masks - circle indeterminate with continuous animation */ .spectrum-ProgressCircle--indeterminate { - .spectrum-ProgressCircle-fills { - will-change: transform; - transform: translateZ(0); - animation: 1s infinite cubic-bezier(0.25, 0.78, 0.48, 0.89) - spectrum-fills-rotate; - transform-origin: center; - } - - .spectrum-ProgressCircle-fillSubMask1 { - will-change: transform; - transform: translateZ(0); - animation: 1s infinite linear spectrum-fill-mask-1; - } - - .spectrum-ProgressCircle-fillSubMask2 { - will-change: transform; - transform: translateZ(0); - animation: 1s infinite linear spectrum-fill-mask-2; - } + .spectrum-ProgressCircle-fills { + will-change: transform; + transform: translateZ(0); + animation: 1s infinite cubic-bezier(0.25, 0.78, 0.48, 0.89) spectrum-fills-rotate; + transform-origin: center; + } + + .spectrum-ProgressCircle-fillSubMask1 { + will-change: transform; + transform: translateZ(0); + animation: 1s infinite linear spectrum-fill-mask-1; + } + + .spectrum-ProgressCircle-fillSubMask2 { + will-change: transform; + transform: translateZ(0); + animation: 1s infinite linear spectrum-fill-mask-2; + } } diff --git a/components/radio/themes/express.css b/components/radio/themes/express.css index 513b6a4f3d..d000403cd7 100644 --- a/components/radio/themes/express.css +++ b/components/radio/themes/express.css @@ -13,11 +13,11 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Radio { - /* selection indicator */ - --spectrum-radio-button-border-color-default: var(--spectrum-gray-800); - --spectrum-radio-button-border-color-hover: var(--spectrum-gray-900); - --spectrum-radio-button-border-color-down: var(--spectrum-gray-900); - --spectrum-radio-button-border-color-focus: var(--spectrum-gray-900); - } + .spectrum-Radio { + /* selection indicator */ + --spectrum-radio-button-border-color-default: var(--spectrum-gray-800); + --spectrum-radio-button-border-color-hover: var(--spectrum-gray-900); + --spectrum-radio-button-border-color-down: var(--spectrum-gray-900); + --spectrum-radio-button-border-color-focus: var(--spectrum-gray-900); + } } diff --git a/components/radio/themes/spectrum.css b/components/radio/themes/spectrum.css index 4c9e4779bd..1766fe7f09 100644 --- a/components/radio/themes/spectrum.css +++ b/components/radio/themes/spectrum.css @@ -11,18 +11,18 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Radio { - /* selection indicator */ - --spectrum-radio-button-border-color-default: var(--spectrum-gray-600); - --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); - --spectrum-radio-button-border-color-down: var(--spectrum-gray-800); - --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); - } + .spectrum-Radio { + /* selection indicator */ + --spectrum-radio-button-border-color-default: var(--spectrum-gray-600); + --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); + --spectrum-radio-button-border-color-down: var(--spectrum-gray-800); + --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); + } - .spectrum-Radio--emphasized { - --spectrum-radio-button-checked-border-color-default: var(--spectrum-accent-color-900); - --spectrum-radio-button-checked-border-color-hover: var(--spectrum-accent-color-1000); - --spectrum-radio-button-checked-border-color-down: var(--spectrum-accent-color-1100); - --spectrum-radio-button-checked-border-color-focus: var(--spectrum-accent-color-1000); - } + .spectrum-Radio--emphasized { + --spectrum-radio-button-checked-border-color-default: var(--spectrum-accent-color-900); + --spectrum-radio-button-checked-border-color-hover: var(--spectrum-accent-color-1000); + --spectrum-radio-button-checked-border-color-down: var(--spectrum-accent-color-1100); + --spectrum-radio-button-checked-border-color-focus: var(--spectrum-accent-color-1000); + } } diff --git a/components/rating/index.css b/components/rating/index.css index ce541c773f..15b23ad2dd 100644 --- a/components/rating/index.css +++ b/components/rating/index.css @@ -13,250 +13,250 @@ governing permissions and limitations under the License. @import "./themes/express.css"; .spectrum-Rating { - /* Icon */ - --spectrum-rating-icon-height: var(--spectrum-workflow-icon-size-100); - --spectrum-rating-icon-width: var(--spectrum-workflow-icon-size-100); - - /* Focus ring */ - --spectrum-rating-border-radius: var(--spectrum-corner-radius-100); - --spectrum-rating-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-rating-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-rating-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - - /* Spacing (top/bottom edge to icon) */ - --spectrum-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-rating-indicator-border-radius: var(--spectrum-corner-radius-75); - - /* Indicator height */ - --spectrum-rating-indicator-height: var(--spectrum-border-width-200); - - /* Colors */ - /* selected + emphasized */ - --spectrum-rating-emphasized-icon-color-default: var(--spectrum-accent-content-color-default); - --spectrum-rating-emphasized-icon-color-hover: var(--spectrum-accent-content-color-hover); - --spectrum-rating-emphasized-icon-color-down: var(--spectrum-accent-content-color-down); - --spectrum-rating-emphasized-icon-color-key-focus: var(--spectrum-accent-content-color-key-focus); - - /* Disabled */ - --spectrum-rating-icon-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-rating-icon-count: var(--spectrum-rating-icon-count); + /* Icon */ + --spectrum-rating-icon-height: var(--spectrum-workflow-icon-size-100); + --spectrum-rating-icon-width: var(--spectrum-workflow-icon-size-100); + + /* Focus ring */ + --spectrum-rating-border-radius: var(--spectrum-corner-radius-100); + --spectrum-rating-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-rating-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-rating-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + + /* Spacing (top/bottom edge to icon) */ + --spectrum-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-rating-indicator-border-radius: var(--spectrum-corner-radius-75); + + /* Indicator height */ + --spectrum-rating-indicator-height: var(--spectrum-border-width-200); + + /* Colors */ + /* selected + emphasized */ + --spectrum-rating-emphasized-icon-color-default: var(--spectrum-accent-content-color-default); + --spectrum-rating-emphasized-icon-color-hover: var(--spectrum-accent-content-color-hover); + --spectrum-rating-emphasized-icon-color-down: var(--spectrum-accent-content-color-down); + --spectrum-rating-emphasized-icon-color-key-focus: var(--spectrum-accent-content-color-key-focus); + + /* Disabled */ + --spectrum-rating-icon-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-rating-icon-count: var(--spectrum-rating-icon-count); } .spectrum-Rating { - &.is-focused { - box-shadow: 0 0 0 var(--mod-rating-focus-indicator-thickness, var(--spectrum-rating-focus-indicator-thickness)) var(--highcontrast-rating-focus-indicator-color, var(--mod-rating-focus-indicator-color, var(--spectrum-rating-focus-indicator-color))); - - .spectrum-Rating-icon { - color: var(--highcontrast-rating-icon-color-key-focus, var(--mod-rating-icon-color-key-focus, var(--spectrum-rating-icon-color-key-focus))); - } - - .spectrum-Rating-icon.is-selected { - color: var(--highcontrast-rating-icon-color-key-focus, var(--mod-rating-icon-color-key-focus, var(--spectrum-rating-icon-color-key-focus))); - } - } - - &:hover { - .spectrum-Rating-icon { - /* Make all stars colored when the component is hovered */ - color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); - } - - /* The icon that's actually hovered is darker */ - .spectrum-Rating-icon:hover { - color: var(--highcontrast-rating-icon-color-hover, var(--mod-rating-icon-color-hover, var(--spectrum-rating-icon-color-hover))); - } - - .spectrum-Rating-icon:active { - color: var(--highcontrast-rating-icon-color-down, var(--mod-rating-icon-color-down, var(--spectrum-rating-icon-color-down))); - } - - /* Show which star is currently selected */ - .spectrum-Rating-icon.is-currentValue::after { - /* Match the color of the star */ - background: currentColor; - } - } + &.is-focused { + box-shadow: 0 0 0 var(--mod-rating-focus-indicator-thickness, var(--spectrum-rating-focus-indicator-thickness)) var(--highcontrast-rating-focus-indicator-color, var(--mod-rating-focus-indicator-color, var(--spectrum-rating-focus-indicator-color))); + + .spectrum-Rating-icon { + color: var(--highcontrast-rating-icon-color-key-focus, var(--mod-rating-icon-color-key-focus, var(--spectrum-rating-icon-color-key-focus))); + } + + .spectrum-Rating-icon.is-selected { + color: var(--highcontrast-rating-icon-color-key-focus, var(--mod-rating-icon-color-key-focus, var(--spectrum-rating-icon-color-key-focus))); + } + } + + &:hover { + .spectrum-Rating-icon { + /* Make all stars colored when the component is hovered */ + color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); + } + + /* The icon that's actually hovered is darker */ + .spectrum-Rating-icon:hover { + color: var(--highcontrast-rating-icon-color-hover, var(--mod-rating-icon-color-hover, var(--spectrum-rating-icon-color-hover))); + } + + .spectrum-Rating-icon:active { + color: var(--highcontrast-rating-icon-color-down, var(--mod-rating-icon-color-down, var(--spectrum-rating-icon-color-down))); + } + + /* Show which star is currently selected */ + .spectrum-Rating-icon.is-currentValue::after { + /* Match the color of the star */ + background: currentColor; + } + } } .spectrum-Rating { - position: relative; - display: inline-flex; - flex: 0 0 auto; + position: relative; + display: inline-flex; + flex: 0 0 auto; - gap: var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing)); + gap: var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing)); - inline-size: calc((var(--mod-rating-icon-width, var(--spectrum-rating-icon-width)) + var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing))) * var(--mod-rating-icon-count, var(--spectrum-rating-icon-count))); - border-radius: var(--mod-rating-border-radius, var(--spectrum-rating-border-radius)); + inline-size: calc((var(--mod-rating-icon-width, var(--spectrum-rating-icon-width)) + var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing))) * var(--mod-rating-icon-count, var(--spectrum-rating-icon-count))); + border-radius: var(--mod-rating-border-radius, var(--spectrum-rating-border-radius)); - padding-inline: calc((var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing)) + var(--mod-rating-focus-indicator-gap, var(--spectrum-rating-focus-indicator-gap))) - 1.5px); + padding-inline: calc((var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing)) + var(--mod-rating-focus-indicator-gap, var(--spectrum-rating-focus-indicator-gap))) - 1.5px); - cursor: pointer; + cursor: pointer; - &.is-disabled, - &.is-readOnly { - cursor: default; - pointer-events: none; - } + &.is-disabled, + &.is-readOnly { + cursor: default; + pointer-events: none; + } - /* When the entire component is hovered, show all solid icons */ - &:hover { - .spectrum-Rating-starActive { - display: block; - } + /* When the entire component is hovered, show all solid icons */ + &:hover { + .spectrum-Rating-starActive { + display: block; + } - .spectrum-Rating-starInactive { - display: none; - } - } + .spectrum-Rating-starInactive { + display: none; + } + } } .spectrum-Rating-input { - position: absolute; - z-index: 0; - inline-size: 100%; - block-size: 100%; - margin: 0; - opacity: 0; - pointer-events: none; + position: absolute; + z-index: 0; + inline-size: 100%; + block-size: 100%; + margin: 0; + opacity: 0; + pointer-events: none; } .spectrum-Rating-icon { - position: relative; - background-size: contain; - background-repeat: no-repeat; - inline-size: var(--mod-rating-icon-width, var(--spectrum-rating-icon-width)); - block-size: var(--mod-rating-icon-height, var(--spectrum-rating-icon-height)); - padding-block: calc(var(--mod-rating-icon-spacing-vertical-top, var(--spectrum-rating-icon-spacing-vertical-top)) + var(--mod-rating-focus-indicator-gap, var(--spectrum-rating-focus-indicator-gap))); - - .spectrum-Rating-starActive { - display: none; - } - - .spectrum-Rating-starInactive { - display: block; - } - - &.is-selected { - .spectrum-Rating-starActive { - display: block; - } - - .spectrum-Rating-starInactive { - display: none; - } - } - - &.is-currentValue::after { - border-radius: var(--mod-rating-indicator-border-radius, var(--spectrum-rating-indicator-border-radius)); - content: ''; - block-size: var(--mod-rating-indicator-height, var(--spectrum-rating-indicator-height)); - inline-size: var(--spectrum-rating-indicator-width); - - /* position the indicator relative to the element's total bottom size (including bottom padding) */ - inset-block-end: calc((var(--mod-rating-focus-indicator-gap, var(--spectrum-rating-focus-indicator-gap)) * 2) - 1px); - position: absolute; - } - - /* All stars following the hovered star */ - &:hover ~ .spectrum-Rating-icon { - .spectrum-Rating-starActive { - display: none; - } - - .spectrum-Rating-starInactive { - display: block; - } - } + position: relative; + background-size: contain; + background-repeat: no-repeat; + inline-size: var(--mod-rating-icon-width, var(--spectrum-rating-icon-width)); + block-size: var(--mod-rating-icon-height, var(--spectrum-rating-icon-height)); + padding-block: calc(var(--mod-rating-icon-spacing-vertical-top, var(--spectrum-rating-icon-spacing-vertical-top)) + var(--mod-rating-focus-indicator-gap, var(--spectrum-rating-focus-indicator-gap))); + + .spectrum-Rating-starActive { + display: none; + } + + .spectrum-Rating-starInactive { + display: block; + } + + &.is-selected { + .spectrum-Rating-starActive { + display: block; + } + + .spectrum-Rating-starInactive { + display: none; + } + } + + &.is-currentValue::after { + border-radius: var(--mod-rating-indicator-border-radius, var(--spectrum-rating-indicator-border-radius)); + content: ""; + block-size: var(--mod-rating-indicator-height, var(--spectrum-rating-indicator-height)); + inline-size: var(--spectrum-rating-indicator-width); + + /* position the indicator relative to the element's total bottom size (including bottom padding) */ + inset-block-end: calc((var(--mod-rating-focus-indicator-gap, var(--spectrum-rating-focus-indicator-gap)) * 2) - 1px); + position: absolute; + } + + /* All stars following the hovered star */ + &:hover ~ .spectrum-Rating-icon { + .spectrum-Rating-starActive { + display: none; + } + + .spectrum-Rating-starInactive { + display: block; + } + } } .spectrum-Rating-starActive, .spectrum-Rating-starInactive { - margin: 0 auto; + margin: 0 auto; } .spectrum-Rating-icon { - color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); - - &.is-selected { - color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); - } - - &:hover { - /* All stars following the hovered star */ - & ~ .spectrum-Rating-icon { - color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); - } - } + color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); + + &.is-selected { + color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); + } + + &:hover { + /* All stars following the hovered star */ + & ~ .spectrum-Rating-icon { + color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); + } + } } .spectrum-Rating--emphasized { - &.is-focused { - .spectrum-Rating-icon.is-selected { - color: var(--highcontrast-rating-emphasized-icon-color-key-focus, var(--mod-rating-emphasized-icon-color-key-focus, var(--spectrum-rating-emphasized-icon-color-key-focus))); - } - } - - .spectrum-Rating-icon { - color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); - - &.is-selected { - color: var(--highcontrast-rating-emphasized-icon-color-default, var(--mod-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default))); - } - - /* All stars following the hovered star */ - &:hover ~ .spectrum-Rating-icon { - color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); - } - } - - &:hover .spectrum-Rating-icon { - /* Make all stars selected when the component is hovered */ - color: var(--highcontrast-rating-emphasized-icon-color-default, var(--mod-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default))); - - &:hover { - /* The icon that's actually hovered is darker */ - color: var(--highcontrast-rating-emphasized-icon-color-hover, var(--mod-rating-emphasized-icon-color-hover, var(--spectrum-rating-emphasized-icon-color-hover))); - } - - &:hover ~ .spectrum-Rating-icon { - color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); - } - - &:active { - color: var(--highcontrast-rating-emphasized-icon-color-down, var(--mod-rating-emphasized-icon-color-down, var(--spectrum-rating-emphasized-icon-color-down))); - } - } + &.is-focused { + .spectrum-Rating-icon.is-selected { + color: var(--highcontrast-rating-emphasized-icon-color-key-focus, var(--mod-rating-emphasized-icon-color-key-focus, var(--spectrum-rating-emphasized-icon-color-key-focus))); + } + } + + .spectrum-Rating-icon { + color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); + + &.is-selected { + color: var(--highcontrast-rating-emphasized-icon-color-default, var(--mod-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default))); + } + + /* All stars following the hovered star */ + &:hover ~ .spectrum-Rating-icon { + color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); + } + } + + &:hover .spectrum-Rating-icon { + /* Make all stars selected when the component is hovered */ + color: var(--highcontrast-rating-emphasized-icon-color-default, var(--mod-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default))); + + &:hover { + /* The icon that's actually hovered is darker */ + color: var(--highcontrast-rating-emphasized-icon-color-hover, var(--mod-rating-emphasized-icon-color-hover, var(--spectrum-rating-emphasized-icon-color-hover))); + } + + &:hover ~ .spectrum-Rating-icon { + color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); + } + + &:active { + color: var(--highcontrast-rating-emphasized-icon-color-down, var(--mod-rating-emphasized-icon-color-down, var(--spectrum-rating-emphasized-icon-color-down))); + } + } } /* Disabled */ .spectrum-Rating.is-disabled { - .spectrum-Rating-icon { - color: var(--highcontrast-rating-icon-color-disabled, var(--mod-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled))); + .spectrum-Rating-icon { + color: var(--highcontrast-rating-icon-color-disabled, var(--mod-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled))); - &.is-selected { - color: var(--highcontrast-rating-icon-color-disabled, var(--mod-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled))); - } - } + &.is-selected { + color: var(--highcontrast-rating-icon-color-disabled, var(--mod-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled))); + } + } } @media (forced-colors: active) { - .spectrum-Rating { - --highcontrast-rating-icon-color-key-focus: CanvasText; - --highcontrast-rating-icon-color-disabled: GrayText; - --highcontrast-rating-emphasized-icon-color-default: Highlight; - --highcontrast-rating-emphasized-icon-color-hover: Highlight; - --highcontrast-rating-emphasized-icon-color-down: Highlight; - - &.is-focused { - outline: 1px solid CanvasText; /* stylelint-disable-line declaration-property-value-no-unknown */ - } - - &:hover .spectrum-Rating-icon.is-currentValue::after { - background-color: var(--highcontrast-rating-icon-color-key-focus); - } - } - - .spectrum-Rating--emphasized:hover .spectrum-Rating-icon.is-currentValue::after { - background-color: var(--highcontrast-rating-emphasized-icon-color-default); - } + .spectrum-Rating { + --highcontrast-rating-icon-color-key-focus: CanvasText; + --highcontrast-rating-icon-color-disabled: GrayText; + --highcontrast-rating-emphasized-icon-color-default: Highlight; + --highcontrast-rating-emphasized-icon-color-hover: Highlight; + --highcontrast-rating-emphasized-icon-color-down: Highlight; + + &.is-focused { + outline: 1px solid CanvasText; /* stylelint-disable-line declaration-property-value-no-unknown */ + } + + &:hover .spectrum-Rating-icon.is-currentValue::after { + background-color: var(--highcontrast-rating-icon-color-key-focus); + } + } + + .spectrum-Rating--emphasized:hover .spectrum-Rating-icon.is-currentValue::after { + background-color: var(--highcontrast-rating-emphasized-icon-color-default); + } } diff --git a/components/rating/themes/express.css b/components/rating/themes/express.css index bb636626d0..7032a63fc2 100644 --- a/components/rating/themes/express.css +++ b/components/rating/themes/express.css @@ -12,10 +12,10 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Rating { - --spectrum-rating-icon-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-rating-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-rating-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - } + .spectrum-Rating { + --spectrum-rating-icon-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-rating-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-rating-icon-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + } } diff --git a/components/rating/themes/spectrum.css b/components/rating/themes/spectrum.css index e393a121e4..a9d617948f 100644 --- a/components/rating/themes/spectrum.css +++ b/components/rating/themes/spectrum.css @@ -10,10 +10,10 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Rating { - --spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - } + .spectrum-Rating { + --spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + } } diff --git a/components/search/index.css b/components/search/index.css index dbe83a533f..1450b59099 100644 --- a/components/search/index.css +++ b/components/search/index.css @@ -17,27 +17,18 @@ governing permissions and limitations under the License. --spectrum-search-inline-size: var(--spectrum-field-width); --spectrum-search-block-size: var(--spectrum-component-height-100); --spectrum-search-button-inline-size: var(--spectrum-search-block-size); - --spectrum-search-min-inline-size: calc( - var(--spectrum-search-field-minimum-width-multiplier) * - var(--spectrum-search-block-size) - ); + --spectrum-search-min-inline-size: calc(var(--spectrum-search-field-minimum-width-multiplier) * var(--spectrum-search-block-size)); --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-100); --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-100); --spectrum-search-to-help-text: var(--spectrum-help-text-to-component); --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-search-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); + --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); @@ -45,17 +36,11 @@ 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); @@ -63,103 +48,36 @@ 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 { @@ -181,27 +99,15 @@ governing permissions and limitations under the License. } .spectrum-Search--quiet { - --spectrum-search-quiet-button-offset: calc( - (var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2) - - ( - var( - --mod-workflow-icon-size-100, - var(--spectrum-workflow-icon-size-100) - ) / 2 - ) - ); + --spectrum-search-quiet-button-offset: calc((var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2) - (var(--mod-workflow-icon-size-100, var(--spectrum-workflow-icon-size-100)) / 2)); --spectrum-search-background-color: transparent; --spectrum-search-background-color-disabled: transparent; - --spectrum-search-border-color-disabled: var( - --spectrum-disabled-border-color - ); + --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); } } @@ -227,20 +133,11 @@ 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)); } } @@ -248,16 +145,10 @@ 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 & { @@ -275,49 +166,28 @@ governing permissions and limitations under the License. inset-block: 0; margin-block: auto; - --spectrum-search-color: var( - --highcontrast-search-color-default, - var(--mod-search-color-default, var(--spectrum-search-color-default)) - ); + --spectrum-search-color: var(--highcontrast-search-color-default, var(--mod-search-color-default, var(--spectrum-search-color-default))); color: var(--spectrum-search-color); .spectrum-Search-textfield:hover & { - --spectrum-search-color: var( - --highcontrast-search-color-hover, - var(--mod-search-color-hover, var(--spectrum-search-color-hover)) - ); + --spectrum-search-color: var(--highcontrast-search-color-hover, var(--mod-search-color-hover, var(--spectrum-search-color-hover))); } .spectrum-Search-textfield.is-focused & { - --spectrum-search-color: var( - --highcontrast-search-color-focus, - var(--mod-search-color-focus, var(--spectrum-search-color-focus)) - ); + --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-focus, var(--spectrum-search-color-focus))); } .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) - ) - ); + --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover))); } .spectrum-Search-textfield.is-keyboardFocused & { - --spectrum-search-color: var( - --highcontrast-search-color-focus, - var(--mod-search-color-key-focus, var(--spectrum-search-color-key-focus)) - ); + --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-key-focus, var(--spectrum-search-color-key-focus))); } .spectrum-Search-textfield.is-disabled &, .spectrum-Search-textfield.is-disabled:hover & { - --spectrum-search-color: var( - --highcontrast-search-color-disabled, - var(--mod-search-color-disabled, var(--spectrum-search-color-disabled)) - ); + --spectrum-search-color: var(--highcontrast-search-color-disabled, var(--mod-search-color-disabled, var(--spectrum-search-color-disabled))); } } @@ -333,81 +203,35 @@ governing permissions and limitations under the License. } block-size: var(--mod-search-block-size, var(--spectrum-search-block-size)); - padding-block-start: calc( - var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - - var(--mod-search-border-width, var(--spectrum-search-border-width)) - ); - padding-block-end: calc( - var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - - var(--mod-search-border-width, var(--spectrum-search-border-width)) - ); + padding-block-start: calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width))); + padding-block-end: calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width))); font-style: var(--mod-search-font-style, var(--spectrum-search-font-style)); - line-height: var( - --mod-search-line-height, - var(--spectrum-search-line-height) - ); + 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 { - padding-inline-start: calc( - var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - - var(--mod-search-border-width, var(--spectrum-search-border-width)) + - 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-border-width, var(--spectrum-search-border-width)) - ); + padding-inline-start: calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + 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-border-width, var(--spectrum-search-border-width))); } } /* Quiet Variant */ .spectrum-Search--quiet { .spectrum-Search-clearButton { - transform: translateX( - var( - --mod-search-quiet-button-offset, - var(--spectrum-search-quiet-button-offset) - ) - ); + transform: translateX(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) - ); - 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) - ) - ); - padding-block-start: var( - --mod-search-top-to-text, - var(--spectrum-search-top-to-text) - ); + 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))); + 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 84cff57a92..c0408a6519 100644 --- a/components/search/themes/express.css +++ b/components/search/themes/express.css @@ -14,12 +14,8 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-Search { - --spectrum-search-border-radius: calc( - var(--spectrum-component-height-100) / 2 - ); - --spectrum-search-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-100 - ); + --spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2); + --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); --spectrum-search-border-color-default: var(--spectrum-gray-400); --spectrum-search-border-color-hover: var(--spectrum-gray-500); @@ -29,38 +25,22 @@ governing permissions and limitations under the License. } .spectrum-Search--sizeS { - --spectrum-search-border-radius: calc( - var(--spectrum-component-height-75) / 2 - ); - --spectrum-search-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-75 - ); + --spectrum-search-border-radius: calc(var(--spectrum-component-height-75) / 2); + --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75); } .spectrum-Search--sizeM { - --spectrum-search-border-radius: calc( - var(--spectrum-component-height-100) / 2 - ); - --spectrum-search-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-100 - ); + --spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2); + --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); } .spectrum-Search--sizeL { - --spectrum-search-border-radius: calc( - var(--spectrum-component-height-200) / 2 - ); - --spectrum-search-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-200 - ); + --spectrum-search-border-radius: calc(var(--spectrum-component-height-200) / 2); + --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200); } .spectrum-Search--sizeXL { - --spectrum-search-border-radius: calc( - var(--spectrum-component-height-300) / 2 - ); - --spectrum-search-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-300 - ); + --spectrum-search-border-radius: calc(var(--spectrum-component-height-300) / 2); + --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300); } } diff --git a/components/search/themes/spectrum.css b/components/search/themes/spectrum.css index fa7ba731f3..18b60565ef 100644 --- a/components/search/themes/spectrum.css +++ b/components/search/themes/spectrum.css @@ -13,9 +13,7 @@ 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); @@ -26,29 +24,21 @@ 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/sidenav/index.css b/components/sidenav/index.css index ca558437ef..923ec37e20 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -11,285 +11,282 @@ governing permissions and limitations under the License. */ .spectrum-SideNav { - /* focus indicator */ - --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness); - --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color); - - /* layout */ - --spectrum-sidenav-min-height: var(--spectrum-component-height-100); - --spectrum-sidenav-width: 100%; - --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width); - --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width); - --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100); - --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100); - --spectrum-sidenav-inline-padding: var(--spectrum-component-edge-to-text-100); - --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item); - --spectrum-sidenav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100); - --spectrum-sidenav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text); - - --spectrum-sidenav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text); - --spectrum-sidenav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text); - - --spectrum-sidenav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text); - --spectrum-sidenav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text); - - --spectrum-sidenav-heading-top-margin: var(--spectrum-side-navigation-item-to-header); - --spectrum-sidenav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item); - - /* color - background */ - --spectrum-sidenav-background-disabled: transparent; - --spectrum-sidenav-background-default: transparent; - --spectrum-sidenav-background-hover: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-down: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200); - - --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-200); - --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300); - --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200); - - /* color font */ - --spectrum-sidenav-header-color: var(--spectrum-gray-600); - - --spectrum-sidenav-content-disabled-color: var(--spectrum-disabled-content-color); - - --spectrum-sidenav-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-sidenav-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-sidenav-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-sidenav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-sidenav-content-color-default-selected: var(--spectrum-neutral-content-color-default); - --spectrum-sidenav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover); - --spectrum-sidenav-content-color-down-selected: var(--spectrum-neutral-content-color-down); - --spectrum-sidenav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus); - - /* typography */ - --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight); - --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100); - --spectrum-sidenav-text-line-height: var(--spectrum-line-height-100); - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100); - } - - --spectrum-sidenav-top-level-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight); - --spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100); - --spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100); - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-sidenav-top-level-line-height: var(--spectrum-cjk-line-height-100); - } - - --spectrum-sidenav-header-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight); - --spectrum-sidenav-header-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-header-font-size: var(--spectrum-font-size-75); - --spectrum-sidenav-header-line-height: var(--spectrum-line-height-100); - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100); - } + /* focus indicator */ + --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness); + --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color); + + /* layout */ + --spectrum-sidenav-min-height: var(--spectrum-component-height-100); + --spectrum-sidenav-width: 100%; + --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width); + --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width); + --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100); + --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100); + --spectrum-sidenav-inline-padding: var(--spectrum-component-edge-to-text-100); + --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item); + --spectrum-sidenav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100); + --spectrum-sidenav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text); + + --spectrum-sidenav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text); + --spectrum-sidenav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text); + + --spectrum-sidenav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text); + --spectrum-sidenav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text); + + --spectrum-sidenav-heading-top-margin: var(--spectrum-side-navigation-item-to-header); + --spectrum-sidenav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item); + + /* color - background */ + --spectrum-sidenav-background-disabled: transparent; + --spectrum-sidenav-background-default: transparent; + --spectrum-sidenav-background-hover: var(--spectrum-gray-200); + --spectrum-sidenav-item-background-down: var(--spectrum-gray-300); + --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200); + + --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-200); + --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300); + --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300); + --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200); + + /* color font */ + --spectrum-sidenav-header-color: var(--spectrum-gray-600); + + --spectrum-sidenav-content-disabled-color: var(--spectrum-disabled-content-color); + + --spectrum-sidenav-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-sidenav-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-sidenav-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-sidenav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-sidenav-content-color-default-selected: var(--spectrum-neutral-content-color-default); + --spectrum-sidenav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover); + --spectrum-sidenav-content-color-down-selected: var(--spectrum-neutral-content-color-down); + --spectrum-sidenav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus); + + /* typography */ + --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight); + --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100); + --spectrum-sidenav-text-line-height: var(--spectrum-line-height-100); + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100); + } + + --spectrum-sidenav-top-level-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight); + --spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100); + --spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100); + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-sidenav-top-level-line-height: var(--spectrum-cjk-line-height-100); + } + + --spectrum-sidenav-header-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight); + --spectrum-sidenav-header-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-header-font-size: var(--spectrum-font-size-75); + --spectrum-sidenav-header-line-height: var(--spectrum-line-height-100); + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100); + } } .spectrum-SideNav { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - list-style-type: none; - margin: 0; - padding: 0; + list-style-type: none; + margin: 0; + padding: 0; } .spectrum-SideNav-item { - list-style-type: none; - margin-inline: 0; - - &.is-disabled { - /* Disable all children */ - .spectrum-SideNav-itemLink { - background-color: var(--highcontrast-sidenav-background-disabled, var(--mod-sidenav-background-disabled, var(--spectrum-sidenav-background-disabled))); - color: var(--highcontrast-sidenav-content-disabled-color, var(--mod-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color))); - - cursor: default; - pointer-events: none; - } - } + list-style-type: none; + margin-inline: 0; + + &.is-disabled { + /* Disable all children */ + .spectrum-SideNav-itemLink { + background-color: var(--highcontrast-sidenav-background-disabled, var(--mod-sidenav-background-disabled, var(--spectrum-sidenav-background-disabled))); + color: var(--highcontrast-sidenav-content-disabled-color, var(--mod-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color))); + + cursor: default; + pointer-events: none; + } + } } .spectrum-SideNav-item.is-selected { - .spectrum-SideNav-itemLink { - background-color: var(--highcontrast-sidenav-item-background-default-selected, var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected))); - color: var(--highcontrast-sidenav-content-color-default-selected, var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected))); - - &:hover { - background-color: var(--highcontrast-sidenav-background-hover-selected, var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected))); - color: var(--mod-sidenav-content-color-hover-selected, var(--spectrum-sidenav-content-color-hover-selected)); - } - - &:active { - background-color: var(--highcontrast-sidenav-item-background-down-selected, var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected))); - color: var(--mod-sidenav-content-color-down-selected, var(--spectrum-sidenav-content-color-down-selected)); - } - - &.is-keyboardFocused, - &:focus-visible { - background-color: var(--highcontrast-sidenav-background-key-focus-selected, var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected))); - color: var(--mod-sidenav-content-color-key-focus-selected, var(--spectrum-sidenav-content-color-key-focus-selected)); - } - } + .spectrum-SideNav-itemLink { + background-color: var(--highcontrast-sidenav-item-background-default-selected, var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected))); + color: var(--highcontrast-sidenav-content-color-default-selected, var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected))); + + &:hover { + background-color: var(--highcontrast-sidenav-background-hover-selected, var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected))); + color: var(--mod-sidenav-content-color-hover-selected, var(--spectrum-sidenav-content-color-hover-selected)); + } + + &:active { + background-color: var(--highcontrast-sidenav-item-background-down-selected, var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected))); + color: var(--mod-sidenav-content-color-down-selected, var(--spectrum-sidenav-content-color-down-selected)); + } + + &.is-keyboardFocused, + &:focus-visible { + background-color: var(--highcontrast-sidenav-background-key-focus-selected, var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected))); + color: var(--mod-sidenav-content-color-key-focus-selected, var(--spectrum-sidenav-content-color-key-focus-selected)); + } + } } .spectrum-SideNav-itemLink { - padding-inline: var(--mod-sidenav-inline-padding, var(--spectrum-sidenav-inline-padding)); - margin-block-end: var(--mod-sidenav-gap, var(--spectrum-sidenav-gap)); - position: relative; - display: inline-flex; - justify-content: start; - box-sizing: border-box; - word-break: break-word; - hyphens: auto; - cursor: pointer; - transition: background-color var(--spectrum-animation-duration-100) ease-out, - color var(--spectrum-animation-duration-100) ease-out; - - border-radius: var(--mod-sidenav-border-radius, var(--spectrum-sidenav-border-radius)); - - background-color: var(--highcontrast-sidenav-background-default, var(--mod-sidenav-background-default, var(--spectrum-sidenav-background-default))); - color: var(--highcontrast-sidenav-content-color-default, var(--mod-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default))); - - inline-size: var(--mod-sidenav-width, var(--spectrum-sidenav-width)); - min-inline-size: var(--mod-sidenav-min-width, var(--spectrum-sidenav-min-width)); - max-inline-size: var(--mod-sidenav-max-width, var(--spectrum-sidenav-max-width)); - min-block-size: var(--mod-sidenav-min-height, var(--spectrum-sidenav-min-height)); - - font-family: var(--mod-sidenav-text-font-family, var(--spectrum-sidenav-text-font-family)); - font-size: var(--mod-sidenav-text-font-size, var(--spectrum-sidenav-text-font-size)); - font-weight: var(--mod-sidenav-text-font-weight, var(--spectrum-sidenav-text-font-weight)); - font-style: var(--mod-sidenav-text-font-style, var(--spectrum-sidenav-text-font-style)); - text-decoration: none; - line-height: var(--mod-sidenav-text-line-height, var(--spectrum-sidenav-text-line-height)); - - .spectrum-SideNav-link-text { - margin-block-start: var(--mod-sidenav-top-to-label, var(--spectrum-sidenav-top-to-label)); - margin-block-end: var(--mod-sidenav-bottom-to-label, var(--spectrum-sidenav-bottom-to-label)); - } - - .spectrum-Icon { - inline-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size)); - block-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size)); - margin-inline-end: var(--mod-sidenav-icon-spacing, var(--spectrum-sidenav-icon-spacing)); - margin-block-start: var(--mod-sidenav-top-to-icon, var(--spectrum-sidenav-top-to-icon)); - flex-shrink: 0; - } - - &:hover { - background-color: var(--highcontrast-sidenav-background-hover, var(--mod-sidenav-background-hover, var(--spectrum-sidenav-background-hover))); - color: var(--highcontrast-sidenav-content-color-hover, var(--mod-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover))); - } - - &:active { - background-color: var(--highcontrast-sidenav-item-background-down, var(--mod-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down))); - color: var(--highcontrast-sidenav-content-color-down, var(--mod-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down))); - } - - &.is-keyboardFocused, - &:focus-visible { - outline: - var(--highcontrast-sidenav-focus-ring-color, var(--mod-sidenav-focus-ring-color, var(--spectrum-sidenav-focus-ring-color))) - solid - var(--mod-sidenav-focus-ring-size, var(--spectrum-sidenav-focus-ring-size)); - outline-offset: var(--mod-sidenav-focus-ring-gap, var(--spectrum-sidenav-focus-ring-gap)); - background-color: var(--highcontrast-sidenav-background-key-focus, var(--mod-sidenav-background-key-focus, var(--spectrum-sidenav-background-key-focus))); - color: var(--highcontrast-sidenav-content-color-key-focus, var(--mod-sidenav-content-color-key-focus, var(--spectrum-sidenav-content-color-key-focus))); - } + padding-inline: var(--mod-sidenav-inline-padding, var(--spectrum-sidenav-inline-padding)); + margin-block-end: var(--mod-sidenav-gap, var(--spectrum-sidenav-gap)); + position: relative; + display: inline-flex; + justify-content: start; + box-sizing: border-box; + word-break: break-word; + hyphens: auto; + cursor: pointer; + transition: + background-color var(--spectrum-animation-duration-100) ease-out, + color var(--spectrum-animation-duration-100) ease-out; + + border-radius: var(--mod-sidenav-border-radius, var(--spectrum-sidenav-border-radius)); + + background-color: var(--highcontrast-sidenav-background-default, var(--mod-sidenav-background-default, var(--spectrum-sidenav-background-default))); + color: var(--highcontrast-sidenav-content-color-default, var(--mod-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default))); + + inline-size: var(--mod-sidenav-width, var(--spectrum-sidenav-width)); + min-inline-size: var(--mod-sidenav-min-width, var(--spectrum-sidenav-min-width)); + max-inline-size: var(--mod-sidenav-max-width, var(--spectrum-sidenav-max-width)); + min-block-size: var(--mod-sidenav-min-height, var(--spectrum-sidenav-min-height)); + + font-family: var(--mod-sidenav-text-font-family, var(--spectrum-sidenav-text-font-family)); + font-size: var(--mod-sidenav-text-font-size, var(--spectrum-sidenav-text-font-size)); + font-weight: var(--mod-sidenav-text-font-weight, var(--spectrum-sidenav-text-font-weight)); + font-style: var(--mod-sidenav-text-font-style, var(--spectrum-sidenav-text-font-style)); + text-decoration: none; + line-height: var(--mod-sidenav-text-line-height, var(--spectrum-sidenav-text-line-height)); + + .spectrum-SideNav-link-text { + margin-block-start: var(--mod-sidenav-top-to-label, var(--spectrum-sidenav-top-to-label)); + margin-block-end: var(--mod-sidenav-bottom-to-label, var(--spectrum-sidenav-bottom-to-label)); + } + + .spectrum-Icon { + inline-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size)); + block-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size)); + margin-inline-end: var(--mod-sidenav-icon-spacing, var(--spectrum-sidenav-icon-spacing)); + margin-block-start: var(--mod-sidenav-top-to-icon, var(--spectrum-sidenav-top-to-icon)); + flex-shrink: 0; + } + + &:hover { + background-color: var(--highcontrast-sidenav-background-hover, var(--mod-sidenav-background-hover, var(--spectrum-sidenav-background-hover))); + color: var(--highcontrast-sidenav-content-color-hover, var(--mod-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover))); + } + + &:active { + background-color: var(--highcontrast-sidenav-item-background-down, var(--mod-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down))); + color: var(--highcontrast-sidenav-content-color-down, var(--mod-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down))); + } + + &.is-keyboardFocused, + &:focus-visible { + outline: var(--highcontrast-sidenav-focus-ring-color, var(--mod-sidenav-focus-ring-color, var(--spectrum-sidenav-focus-ring-color))) solid var(--mod-sidenav-focus-ring-size, var(--spectrum-sidenav-focus-ring-size)); + outline-offset: var(--mod-sidenav-focus-ring-gap, var(--spectrum-sidenav-focus-ring-gap)); + background-color: var(--highcontrast-sidenav-background-key-focus, var(--mod-sidenav-background-key-focus, var(--spectrum-sidenav-background-key-focus))); + color: var(--highcontrast-sidenav-content-color-key-focus, var(--mod-sidenav-content-color-key-focus, var(--spectrum-sidenav-content-color-key-focus))); + } } .spectrum-SideNav-heading { - margin-block-start: calc(var(--mod-sidenav-heading-top-margin, var(--spectrum-sidenav-heading-top-margin)) - var(--mod-sidenav-gap, var(--spectrum-sidenav-gap))); - margin-block-end: var(--mod-sidenav-heading-bottom-margin, var(--spectrum-sidenav-heading-bottom-margin)); - padding-inline: var(--mod-sidenav-inline-padding, var(--spectrum-sidenav-inline-padding)); - color: var(--mod-sidenav-header-color, var(--spectrum-sidenav-header-color)); - font-size: var(--mod-sidenav-header-font-size, var(--spectrum-sidenav-header-font-size)); - font-weight: var(--mod-sidenav-header-font-weight, var(--spectrum-sidenav-header-font-weight)); - font-style: var(--mod-sidenav-header-font-style, var(--spectrum-sidenav-header-font-style)); - line-height: var(--mod-sidenav-header-line-height, var(--spectrum-sidenav-header-line-height)); + margin-block-start: calc(var(--mod-sidenav-heading-top-margin, var(--spectrum-sidenav-heading-top-margin)) - var(--mod-sidenav-gap, var(--spectrum-sidenav-gap))); + margin-block-end: var(--mod-sidenav-heading-bottom-margin, var(--spectrum-sidenav-heading-bottom-margin)); + padding-inline: var(--mod-sidenav-inline-padding, var(--spectrum-sidenav-inline-padding)); + color: var(--mod-sidenav-header-color, var(--spectrum-sidenav-header-color)); + font-size: var(--mod-sidenav-header-font-size, var(--spectrum-sidenav-header-font-size)); + font-weight: var(--mod-sidenav-header-font-weight, var(--spectrum-sidenav-header-font-weight)); + font-style: var(--mod-sidenav-header-font-style, var(--spectrum-sidenav-header-font-style)); + line-height: var(--mod-sidenav-header-line-height, var(--spectrum-sidenav-header-line-height)); } .spectrum-SideNav--multiLevel { - .spectrum-SideNav-itemLink { - font-family: var(--mod-sidenav-top-level-font-family, var(--spectrum-sidenav-top-level-font-family)); - font-weight: var(--mod-sidenav-top-level-font-weight, var(--spectrum-sidenav-top-level-font-weight)); - font-style: var(--mod-sidenav-top-level-font-style, var(--spectrum-sidenav-top-level-font-style)); - font-size: var(--mod-sidenav-top-level-font-size, var(--spectrum-sidenav-top-level-font-size)); - line-height: var(--mod-sidenav-top-level-line-height, var(--spectrum-sidenav-top-level-line-height)); - } - - .spectrum-SideNav { - .spectrum-SideNav-itemLink { - font-weight: var(--mod-sidenav-text-font-weight, var(--spectrum-sidenav-text-font-weight)); - padding-inline-start: var(--mod-sidenav-start-to-content-second-level, var(--spectrum-sidenav-start-to-content-second-level)); - } - - .spectrum-SideNav .spectrum-SideNav-itemLink { - padding-inline-start: var(--mod-sidenav-start-to-content-third-level, var(--spectrum-sidenav-start-to-content-third-level)); - } - } + .spectrum-SideNav-itemLink { + font-family: var(--mod-sidenav-top-level-font-family, var(--spectrum-sidenav-top-level-font-family)); + font-weight: var(--mod-sidenav-top-level-font-weight, var(--spectrum-sidenav-top-level-font-weight)); + font-style: var(--mod-sidenav-top-level-font-style, var(--spectrum-sidenav-top-level-font-style)); + font-size: var(--mod-sidenav-top-level-font-size, var(--spectrum-sidenav-top-level-font-size)); + line-height: var(--mod-sidenav-top-level-line-height, var(--spectrum-sidenav-top-level-line-height)); + } + + .spectrum-SideNav { + .spectrum-SideNav-itemLink { + font-weight: var(--mod-sidenav-text-font-weight, var(--spectrum-sidenav-text-font-weight)); + padding-inline-start: var(--mod-sidenav-start-to-content-second-level, var(--spectrum-sidenav-start-to-content-second-level)); + } + + .spectrum-SideNav .spectrum-SideNav-itemLink { + padding-inline-start: var(--mod-sidenav-start-to-content-third-level, var(--spectrum-sidenav-start-to-content-third-level)); + } + } } .spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel { - .spectrum-SideNav { - .spectrum-SideNav-itemLink { - padding-inline-start: var(--mod-sidenav-start-to-content-with-icon-second-level, var(--spectrum-sidenav-start-to-content-with-icon-second-level)); - } - - .spectrum-SideNav .spectrum-SideNav-itemLink { - padding-inline-start: var(--mod-sidenav-start-to-content-with-icon-third-level, var(--spectrum-sidenav-start-to-content-with-icon-third-level)); - } - } + .spectrum-SideNav { + .spectrum-SideNav-itemLink { + padding-inline-start: var(--mod-sidenav-start-to-content-with-icon-second-level, var(--spectrum-sidenav-start-to-content-with-icon-second-level)); + } + + .spectrum-SideNav .spectrum-SideNav-itemLink { + padding-inline-start: var(--mod-sidenav-start-to-content-with-icon-third-level, var(--spectrum-sidenav-start-to-content-with-icon-third-level)); + } + } } @media (forced-colors: active) { - /* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */ - .spectrum-SideNav { - .spectrum-Icon { - forced-color-adjust: preserve-parent-color; /* stylelint-disable-line declaration-property-value-no-unknown */ - } - } - - .spectrum-SideNav-item { - forced-color-adjust: none; - --highcontrast-sidenav-content-disabled-color: GrayText; - - --highcontrast-sidenav-focus-ring-color: Highlight; - - --highcontrast-sidenav-content-color-default-selected: SelectedItemText; - --highcontrast-sidenav-item-background-default-selected: SelectedItem; - - --highcontrast-sidenav-background-key-focus-selected: Highlight; - --highcontrast-sidenav-background-hover-selected: Highlight; - --highcontrast-sidenav-item-background-down-selected: Highlight; - - --highcontrast-sidenav-item-background-down: Highlight; - --highcontrast-sidenav-background-hover: Highlight; - --highcontrast-sidenav-content-color-hover: HighlightText; - --highcontrast-sidenav-background-key-focus: Highlight; - - --highcontrast-sidenav-top-level-font-color: ButtonText; - --highcontrast-sidenav-content-color-default: ButtonText; - --highcontrast-sidenav-content-color-down: HighlightText; - } + /* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */ + .spectrum-SideNav { + .spectrum-Icon { + forced-color-adjust: preserve-parent-color; /* stylelint-disable-line declaration-property-value-no-unknown */ + } + } + + .spectrum-SideNav-item { + forced-color-adjust: none; + --highcontrast-sidenav-content-disabled-color: GrayText; + + --highcontrast-sidenav-focus-ring-color: Highlight; + + --highcontrast-sidenav-content-color-default-selected: SelectedItemText; + --highcontrast-sidenav-item-background-default-selected: SelectedItem; + + --highcontrast-sidenav-background-key-focus-selected: Highlight; + --highcontrast-sidenav-background-hover-selected: Highlight; + --highcontrast-sidenav-item-background-down-selected: Highlight; + + --highcontrast-sidenav-item-background-down: Highlight; + --highcontrast-sidenav-background-hover: Highlight; + --highcontrast-sidenav-content-color-hover: HighlightText; + --highcontrast-sidenav-background-key-focus: Highlight; + + --highcontrast-sidenav-top-level-font-color: ButtonText; + --highcontrast-sidenav-content-color-default: ButtonText; + --highcontrast-sidenav-content-color-down: HighlightText; + } } - diff --git a/components/site/component.css b/components/site/component.css index c7c43ef564..a83be7e85d 100644 --- a/components/site/component.css +++ b/components/site/component.css @@ -12,364 +12,358 @@ governing permissions and limitations under the License. /* CSS Component */ .spectrum-CSSComponent { - box-sizing: border-box; - inline-size: min(1080px, 100%); - margin: var(--spectrum-spacing-600) auto; - padding: 0 56px; + box-sizing: border-box; + inline-size: min(1080px, 100%); + margin: var(--spectrum-spacing-600) auto; + padding: 0 56px; } .spectrum-CSSComponent-heading { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; - margin-block-end: var(--spectrum-spacing-600); + margin-block-end: var(--spectrum-spacing-600); } .spectrum-CSSComponent-link { - display: flex; - align-items: center; + display: flex; + align-items: center; - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; - outline: none; + outline: none; - &:focus-visible, - &:hover { - text-decoration: underline; - } + &:focus-visible, + &:hover { + text-decoration: underline; + } } .spectrum-CSSComponent-statusContainer { - display: flex; - flex-flow: row nowrap; - flex-grow: 1; - gap: 80px; - align-self: center; + display: flex; + flex-flow: row nowrap; + flex-grow: 1; + gap: 80px; + align-self: center; - > * { - flex-basis: min(370px, 50%); - } + > * { + flex-basis: min(370px, 50%); + } } .spectrum-CSSComponent-detailsTable { - --mod-table-cursor-row-default: default; - --mod-table-row-background-color-hover: transparent; - --mod-table-divider-color: transparent; - --mod-table-border-color: transparent; - --mod-table-row-line-height: 1.6; + --mod-table-cursor-row-default: default; + --mod-table-row-background-color-hover: transparent; + --mod-table-divider-color: transparent; + --mod-table-border-color: transparent; + --mod-table-row-line-height: 1.6; - border-spacing: 0; - margin-block-start: var(--spectrum-spacing-600); - margin-block-end: 36px; + border-spacing: 0; + margin-block-start: var(--spectrum-spacing-600); + margin-block-end: 36px; - & th { - block-size: var(--spectrum-spacing-300); - padding-inline-end: var(--spectrum-spacing-400); - font-weight: var(--spectrum-regular-font-weight); - text-align: start; - } + & th { + block-size: var(--spectrum-spacing-300); + padding-inline-end: var(--spectrum-spacing-400); + font-weight: var(--spectrum-regular-font-weight); + text-align: start; + } } .spectrum-CSSComponent-sectionHeading { - margin-block-start: var(--spectrum-spacing-700); - margin-block-end: var(--spectrum-spacing-500); + margin-block-start: var(--spectrum-spacing-700); + margin-block-end: var(--spectrum-spacing-500); } .spectrum-CSSExample-status, .spectrum-CSSComponent-status { - min-block-size: 0 !important; - padding: 0 !important; + min-block-size: 0 !important; + padding: 0 !important; } .spectrum-CSSComponent-status::before { - margin-inline-start: 0 !important; + margin-inline-start: 0 !important; } .spectrum-CSSExample-status { - margin-inline-start: var(--spectrum-spacing-200); + margin-inline-start: var(--spectrum-spacing-200); } .spectrum-CSSComponent-version { - flex-grow: 1; - text-align: end; + flex-grow: 1; + text-align: end; } .spectrum-CSSComponent-description { - margin-block-start: var(--spectrum-spacing-400); - margin-block-end: var(--spectrum-spacing-700); + margin-block-start: var(--spectrum-spacing-400); + margin-block-end: var(--spectrum-spacing-700); } /* cards */ .spectrum-CSSComponent-resources { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-block-end: var(--spectrum-spacing-500); + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-block-end: var(--spectrum-spacing-500); - & .spectrum-Card { - margin-block-end: var(--spectrum-spacing-300); - margin-inline-end: var(--spectrum-spacing-300); - } + & .spectrum-Card { + margin-block-end: var(--spectrum-spacing-300); + margin-inline-end: var(--spectrum-spacing-300); + } } .spectrum-CSSComponent-resource--adobe, -.spectrum-CSSComponent-resources -a[href*="spectrum.adobe.com"] -.spectrum-Card-preview { - color: rgb(250, 15, 0); - background-color: var(--spectrum-gray-100); +.spectrum-CSSComponent-resources a[href*="spectrum.adobe.com"] .spectrum-Card-preview { + color: rgb(250, 15, 0); + background-color: var(--spectrum-gray-100); } .spectrum-CSSComponent-resource--github, .spectrum-CSSComponent-resources a[href*="github.com"] .spectrum-Card-preview { - color: var(--spectrum-black); - background-color: var(--spectrum-transparent-black-200); + color: var(--spectrum-black); + background-color: var(--spectrum-transparent-black-200); } .spectrum-CSSComponent-resource--npm, .spectrum-CSSComponent-resources a[href*="npmjs.com"] .spectrum-Card-preview { - background-color: rgba(203, 56, 55, 10%); + background-color: rgba(203, 56, 55, 10%); } .spectrum-CSSComponent-cardImage { - text-decoration: none; + text-decoration: none; } .spectrum-CSSComponent-switcher { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: var(--spectrum-spacing-500); - justify-content: flex-end; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: var(--spectrum-spacing-500); + justify-content: flex-end; } .spectrum-CSS-switcherContainer { - margin-inline-start: var(--spectrum-spacing-300); - white-space: nowrap; + margin-inline-start: var(--spectrum-spacing-300); + white-space: nowrap; } /* CSS Example */ .spectrum-CSSExample { - margin-block-end: 64px; + margin-block-end: 64px; } .spectrum-CSSExample-container { - position: relative; - display: flex; - flex-direction: column; - border-radius: var(--spectrum-corner-radius-100); + position: relative; + display: flex; + flex-direction: column; + border-radius: var(--spectrum-corner-radius-100); } .spectrum-CSSExample-heading { - display: flex; - flex-direction: row; - align-items: center; - margin-block-end: var(--spectrum-spacing-100) !important; + display: flex; + flex-direction: row; + align-items: center; + margin-block-end: var(--spectrum-spacing-100) !important; } .spectrum-CSSExample-example, .spectrum-CSSExample-markup { - box-sizing: border-box; + box-sizing: border-box; } :root { - --spectrum-docs-static-white-background-color: var(--spectrum-seafoam-900); - --spectrum-docs-static-black-background-color: var(--spectrum-seafoam-100); + --spectrum-docs-static-white-background-color: var(--spectrum-seafoam-900); + --spectrum-docs-static-black-background-color: var(--spectrum-seafoam-100); } .spectrum-CSSExample-example { - flex: 1 0 auto; - min-block-size: 0; - padding: var(--spectrum-spacing-500) var(--spectrum-spacing-600); - border-radius: var(--spectrum-corner-radius-100) - var(--spectrum-corner-radius-100) 0 0; + flex: 1 0 auto; + min-block-size: 0; + padding: var(--spectrum-spacing-500) var(--spectrum-spacing-600); + border-radius: var(--spectrum-corner-radius-100) var(--spectrum-corner-radius-100) 0 0; - &:has(> .spectrum-CSSExample-example-staticWhite) { - background-color: var(--spectrum-docs-static-white-background-color); - border-color: var(--spectrum-docs-static-white-background-color); - } + &:has(> .spectrum-CSSExample-example-staticWhite) { + background-color: var(--spectrum-docs-static-white-background-color); + border-color: var(--spectrum-docs-static-white-background-color); + } - &:has(> .spectrum-CSSExample-example-staticBlack) { - background-color: var(--spectrum-docs-static-black-background-color); - border-color: var(--spectrum-docs-static-black-background-color); - } + &:has(> .spectrum-CSSExample-example-staticBlack) { + background-color: var(--spectrum-docs-static-black-background-color); + border-color: var(--spectrum-docs-static-black-background-color); + } } .spectrum-CSSExample-markup { - position: relative; + position: relative; - overflow: hidden; + overflow: hidden; - max-inline-size: 100%; - max-block-size: 192px; - padding: 10px 18px; + max-inline-size: 100%; + max-block-size: 192px; + padding: 10px 18px; - border-radius: 0 0 var(--spectrum-corner-radius-100) var(--spectrum-corner-radius-100); + border-radius: 0 0 var(--spectrum-corner-radius-100) var(--spectrum-corner-radius-100); - &.is-open { - max-block-size: 100%; - padding-block-end: var(--spectrum-spacing-700); + &.is-open { + max-block-size: 100%; + padding-block-end: var(--spectrum-spacing-700); - & .spectrum-CSSExample-markupToggle::before { - display: none; - } - } + & .spectrum-CSSExample-markupToggle::before { + display: none; + } + } } .spectrum-CSSExample-markupToggle + pre { - padding-block-end: var(--spectrum-spacing-100); + padding-block-end: var(--spectrum-spacing-100); } .spectrum-CSSExample-example--spacious { - position: relative; - block-size: 150px; + position: relative; + block-size: 150px; } .spectrum-CSSExample-example--overlay { - position: relative; - min-block-size: var(--spectrum-spacing-800); + position: relative; + min-block-size: var(--spectrum-spacing-800); } .spectrum-CSSExample-dialog { - position: relative !important; - z-index: 1 !important; - inset-block-start: 0; - inset-inline-start: 0; - transform: none !important; + position: relative !important; + z-index: 1 !important; + inset-block-start: 0; + inset-inline-start: 0; + transform: none !important; - inline-size: auto !important; - block-size: auto !important; - margin-inline-start: auto; - margin-inline-end: auto; + inline-size: auto !important; + block-size: auto !important; + margin-inline-start: auto; + margin-inline-end: auto; - transition: none; + transition: none; } .spectrum-Examples, .spectrum-Examples-itemGroup { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: var(--spectrum-spacing-100); - justify-content: space-between; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: var(--spectrum-spacing-100); + justify-content: space-between; } .spectrum-Examples--vertical { - flex-direction: column; + flex-direction: column; } .spectrum-Examples-item .spectrum-Examples-itemHeading { - margin-block-end: var(--spectrum-spacing-100); + margin-block-end: var(--spectrum-spacing-100); } .spectrum-Button.spectrum-CSSExample-overlayShowButton { - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); + position: absolute; + inset-block-start: 50%; + inset-inline-start: 50%; + transform: translate(-50%, -50%); } .spectrum-CSSExample-markup pre code { - white-space: pre-wrap; + white-space: pre-wrap; } .spectrum-CSSExample-markupToggle { - position: absolute; - z-index: 0; - inset-block-end: 0; - inset-inline-start: 0; - inset-inline-end: 0; + position: absolute; + z-index: 0; + inset-block-end: 0; + inset-inline-start: 0; + inset-inline-end: 0; - box-sizing: border-box; - padding: var(--spectrum-spacing-400); + box-sizing: border-box; + padding: var(--spectrum-spacing-400); - font-size: var(--spectrum-font-size-50); - text-align: start; + font-size: var(--spectrum-font-size-50); + text-align: start; } .spectrum-CenteredImage { - display: block; - inline-size: max(720px, 100%); - margin: auto; + display: block; + inline-size: max(720px, 100%); + margin: auto; } .spectrum-CodeBlock { - margin: var(--spectrum-spacing-200) 0; - padding: var(--spectrum-spacing-100) var(--spectrum-spacing-200); + margin: var(--spectrum-spacing-200) 0; + padding: var(--spectrum-spacing-100) var(--spectrum-spacing-200); - border-style: solid; - border-width: var(--spectrum-border-width-100); - border-radius: var(--spectrum-spacing-50); + border-style: solid; + border-width: var(--spectrum-border-width-100); + border-radius: var(--spectrum-spacing-50); } /* CSS Example */ .spectrum-CSSExample-example { - background-color: var( - --spectrum-background-layer-1-color, - var(--spectrum-gray-100) - ); + background-color: var(--spectrum-background-layer-1-color, var(--spectrum-gray-100)); } .spectrum-CSSExample-markup { - background-color: var(--spectrum-gray-75); - border-block-start: 1px solid var(--spectrum-gray-100); + background-color: var(--spectrum-gray-75); + border-block-start: 1px solid var(--spectrum-gray-100); } .spectrum-CSSExample-markupToggle { - z-index: 1; - background-color: var(--spectrum-gray-75); + z-index: 1; + background-color: var(--spectrum-gray-75); } .spectrum-CSSExample-markup.is-open .spectrum-CSSExample-markupToggle { - background-color: transparent; + background-color: transparent; } .spectrum-CSSExample-example--overlay { - color: var(--spectrum-transparent-black-400); - background-color: var(--spectrum-transparent-black-400); + color: var(--spectrum-transparent-black-400); + background-color: var(--spectrum-transparent-black-400); } .spectrum-CSSExample-oldAPI { - color: var(--spectrum-negative-color-800); + color: var(--spectrum-negative-color-800); } .spectrum-CodeBlock { - background-color: var(--spectrum-gray-75); - border-color: var(--spectrum-gray-400); + background-color: var(--spectrum-gray-75); + border-color: var(--spectrum-gray-400); } @media screen and (width <= 960px) { - .spectrum-CSSComponent { - margin-block: var(--spectrum-spacing-100); - margin-inline: auto; - padding-inline: 0 var(--spectrum-spacing-600); - } - - .spectrum-CSSComponent-description { - margin-block-end: var(--spectrum-spacing-200); - } - - .spectrum-CSSExample { - margin-block-end: var(--spectrum-spacing-200); - } - - .spectrum-CSSExample-example { - padding: var(--spectrum-spacing-200); - } - - .spectrum-CSSComponent-header { - margin-block-end: var(--spectrum-spacing-200); - } - - .spectrum-CSSComponent-statusContainer, - .spectrum-CSSComponent-version { - display: none; - } - - .spectrum-CSSComponent-title { - font-size: var(--spectrum-font-size-500); - } + .spectrum-CSSComponent { + margin-block: var(--spectrum-spacing-100); + margin-inline: auto; + padding-inline: 0 var(--spectrum-spacing-600); + } + + .spectrum-CSSComponent-description { + margin-block-end: var(--spectrum-spacing-200); + } + + .spectrum-CSSExample { + margin-block-end: var(--spectrum-spacing-200); + } + + .spectrum-CSSExample-example { + padding: var(--spectrum-spacing-200); + } + + .spectrum-CSSComponent-header { + margin-block-end: var(--spectrum-spacing-200); + } + + .spectrum-CSSComponent-statusContainer, + .spectrum-CSSComponent-version { + display: none; + } + + .spectrum-CSSComponent-title { + font-size: var(--spectrum-font-size-500); + } } diff --git a/components/site/site.css b/components/site/site.css index 132eba2db8..30d0dada9e 100644 --- a/components/site/site.css +++ b/components/site/site.css @@ -108,7 +108,7 @@ governing permissions and limitations under the License. margin-inline-end: var(--spectrum-spacing-200); .spectrum--large & { - /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- passthrough icon sizing */ + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- passthrough icon sizing */ --spectrum-icon-size: 40px; } } @@ -154,15 +154,15 @@ governing permissions and limitations under the License. } .spectrum-Site-mainContent { - overflow-y: auto; - flex-grow: 1; - border-block: none; + overflow-y: auto; + flex-grow: 1; + border-block: none; } .spectrum-Site-footerContainer { - inline-size: min(1080px, 100%); - margin: var(--spectrum-spacing-400) auto; - padding: 0 var(--spectrum-spacing-600); + inline-size: min(1080px, 100%); + margin: var(--spectrum-spacing-400) auto; + padding: 0 var(--spectrum-spacing-600); } /* Kill the overlay without animating when the page is resized */ diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css index 1df5f6ef8e..ea48b2a0dd 100644 --- a/components/slider/themes/express.css +++ b/components/slider/themes/express.css @@ -12,24 +12,24 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-200); - --spectrum-slider-track-fill-color: var(--spectrum-gray-600); - --spectrum-slider-ramp-track-color: var(--spectrum-gray-300); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + .spectrum-Slider { + --spectrum-slider-track-color: var(--spectrum-gray-200); + --spectrum-slider-track-fill-color: var(--spectrum-gray-600); + --spectrum-slider-ramp-track-color: var(--spectrum-gray-300); + --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --spectrum-slider-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-50); - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-handle-border-color: var(--spectrum-gray-800); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50); + --spectrum-slider-handle-background-color: var(--spectrum-gray-50); + --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-50); + --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-50); + --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-50); + --spectrum-slider-handle-border-color: var(--spectrum-gray-800); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50); - --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); - --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900); - --spectrum-slider-handle-border-color-down: var(--spectrum-gray-900); - --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-900); - --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); - } + --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900); + --spectrum-slider-handle-border-color-down: var(--spectrum-gray-900); + --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-900); + --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); + } } diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css index 90f77d3b6d..2b0aeaf991 100644 --- a/components/slider/themes/spectrum.css +++ b/components/slider/themes/spectrum.css @@ -10,24 +10,24 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-300); - --spectrum-slider-track-fill-color: var(--spectrum-gray-700); - --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + .spectrum-Slider { + --spectrum-slider-track-color: var(--spectrum-gray-300); + --spectrum-slider-track-fill-color: var(--spectrum-gray-700); + --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); + --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --spectrum-slider-handle-background-color: transparent; - --spectrum-slider-handle-background-color-disabled: transparent; - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100); - --spectrum-slider-handle-border-color: var(--spectrum-gray-700); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100); + --spectrum-slider-handle-background-color: transparent; + --spectrum-slider-handle-background-color-disabled: transparent; + --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100); + --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100); + --spectrum-slider-handle-border-color: var(--spectrum-gray-700); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100); - --spectrum-slider-tick-mark-color: var(--spectrum-gray-300); + --spectrum-slider-tick-mark-color: var(--spectrum-gray-300); - --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); - --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); - --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); - } + --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); + --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); + --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); + } } diff --git a/components/statuslight/index.css b/components/statuslight/index.css index 23b3058e5f..224e667f6d 100644 --- a/components/statuslight/index.css +++ b/components/statuslight/index.css @@ -11,243 +11,243 @@ governing permissions and limitations under the License. */ .spectrum-StatusLight { - /* Static tokens */ - --spectrum-statuslight-corner-radius: 50%; - --spectrum-statuslight-font-weight: 400; - --spectrum-statuslight-border-width: var(--spectrum-border-width-100); - - /* Size */ - --spectrum-statuslight-height: var(--spectrum-component-height-100); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium); - --spectrum-statuslight-line-height: var(--spectrum-line-height-100); - --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100); - - --spectrum-statuslight-font-size: var(--spectrum-font-size-100); - - /* Space */ - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); - - /* Color */ - --spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color); - --spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-visual-color); - --spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color); - --spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color); - --spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color); - --spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color); - --spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color); - --spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color); - --spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color); - --spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color); - --spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color); - --spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-visual-color); - --spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-visual-color); - --spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color); - --spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color); - --spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-visual-color); - --spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color); - --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color); - --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color); - --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color); + /* Static tokens */ + --spectrum-statuslight-corner-radius: 50%; + --spectrum-statuslight-font-weight: 400; + --spectrum-statuslight-border-width: var(--spectrum-border-width-100); + + /* Size */ + --spectrum-statuslight-height: var(--spectrum-component-height-100); + --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium); + --spectrum-statuslight-line-height: var(--spectrum-line-height-100); + --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100); + + --spectrum-statuslight-font-size: var(--spectrum-font-size-100); + + /* Space */ + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100); + --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); + --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); + + /* Color */ + --spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color); + --spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-visual-color); + --spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color); + --spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color); + --spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color); + --spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color); + --spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color); + --spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color); + --spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color); + --spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color); + --spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color); + --spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-visual-color); + --spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-visual-color); + --spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color); + --spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color); + --spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-visual-color); + --spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color); + --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color); + --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color); + --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color); } .spectrum-StatusLight--sizeS { - --spectrum-statuslight-height: var(--spectrum-component-height-75); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-small); + --spectrum-statuslight-height: var(--spectrum-component-height-75); + --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-small); - --spectrum-statuslight-font-size: var(--spectrum-font-size-75); + --spectrum-statuslight-font-size: var(--spectrum-font-size-75); - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75); + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75); + --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small); + --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75); + --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75); } .spectrum-StatusLight--sizeM { - --spectrum-statuslight-height: var(--spectrum-component-height-100); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium); + --spectrum-statuslight-height: var(--spectrum-component-height-100); + --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium); - --spectrum-statuslight-font-size: var(--spectrum-font-size-100); + --spectrum-statuslight-font-size: var(--spectrum-font-size-100); - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); - } + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100); + --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); + --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); +} .spectrum-StatusLight--sizeL { - --spectrum-statuslight-height: var(--spectrum-component-height-200); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-large); + --spectrum-statuslight-height: var(--spectrum-component-height-200); + --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-large); - --spectrum-statuslight-font-size: var(--spectrum-font-size-200); + --spectrum-statuslight-font-size: var(--spectrum-font-size-200); - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200); + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200); + --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large); + --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200); + --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200); } .spectrum-StatusLight--sizeXL { - --spectrum-statuslight-height: var(--spectrum-component-height-300); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-extra-large); + --spectrum-statuslight-height: var(--spectrum-component-height-300); + --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-extra-large); - --spectrum-statuslight-font-size: var(--spectrum-font-size-300); + --spectrum-statuslight-font-size: var(--spectrum-font-size-300); - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300); + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300); + --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large); + --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300); + --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300); } @media (forced-colors: active) { - .spectrum-StatusLight { - forced-color-adjust: none; - --highcontrast-statuslight-content-color-default: CanvasText; - --highcontrast-statuslight-subdued-content-color-default: CanvasText; + .spectrum-StatusLight { + forced-color-adjust: none; + --highcontrast-statuslight-content-color-default: CanvasText; + --highcontrast-statuslight-subdued-content-color-default: CanvasText; - &::before { - border: var(--mod-statuslight-border-width, var(--spectrum-statuslight-border-width)) solid ButtonText; - } - } + &::before { + border: var(--mod-statuslight-border-width, var(--spectrum-statuslight-border-width)) solid ButtonText; + } + } } .spectrum-StatusLight { - display: flex; - flex-direction: row; - align-items: flex-start; + display: flex; + flex-direction: row; + align-items: flex-start; - min-block-size: var(--mod-statuslight-height, var(--spectrum-statuslight-height)); + min-block-size: var(--mod-statuslight-height, var(--spectrum-statuslight-height)); - padding-block-start: var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)); - padding-block-end: var(--mod-statuslight-spacing-bottom-to-label, var(--spectrum-statuslight-spacing-bottom-to-label)); - padding-inline: 0; - box-sizing: border-box; + padding-block-start: var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)); + padding-block-end: var(--mod-statuslight-spacing-bottom-to-label, var(--spectrum-statuslight-spacing-bottom-to-label)); + padding-inline: 0; + box-sizing: border-box; - font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size)); - font-weight: var(--mod-statuslight-font-weight, var(--spectrum-statuslight-font-weight)); + font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size)); + font-weight: var(--mod-statuslight-font-weight, var(--spectrum-statuslight-font-weight)); - line-height: var(--mod-statuslight-line-height, var(--spectrum-statuslight-line-height)); + line-height: var(--mod-statuslight-line-height, var(--spectrum-statuslight-line-height)); - color: var(--highcontrast-statuslight-content-color-default, var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default))); + color: var(--highcontrast-statuslight-content-color-default, var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default))); - &:lang(ja), - &:lang(zh), - &:lang(ko) { - line-height: var(--mod-statuslight-line-height-cjk, var(--spectrum-statuslight-line-height-cjk)); - } + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-statuslight-line-height-cjk, var(--spectrum-statuslight-line-height-cjk)); + } - /* Dot */ - &::before { - content: ""; - flex-grow: 0; - flex-shrink: 0; - display: inline-block; - inline-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size)); - block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size)); - border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius)); + /* Dot */ + &::before { + content: ""; + flex-grow: 0; + flex-shrink: 0; + display: inline-block; + inline-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size)); + block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size)); + border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius)); - --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label))); - margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot); - margin-inline-end: var(--mod-statuslight-spacing-dot-to-label, var(--spectrum-statuslight-spacing-dot-to-label)); + --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label))); + margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot); + margin-inline-end: var(--mod-statuslight-spacing-dot-to-label, var(--spectrum-statuslight-spacing-dot-to-label)); - /* support high contrast/forced-color-adjust mode for dot */ - -ms-high-contrast-adjust: none; - forced-color-adjust: none; - } + /* support high contrast/forced-color-adjust mode for dot */ + -ms-high-contrast-adjust: none; + forced-color-adjust: none; + } } .spectrum-StatusLight--neutral { - font-style: italic; + font-style: italic; } /* Semantic Colors */ .spectrum-StatusLight--neutral { - color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default))); + color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default))); - &::before { - background-color: var(--mod-statuslight-semantic-neutral-color, var(--spectrum-statuslight-semantic-neutral-color)); - } + &::before { + background-color: var(--mod-statuslight-semantic-neutral-color, var(--spectrum-statuslight-semantic-neutral-color)); + } } .spectrum-StatusLight--accent::before { - background-color: var(--mod-statuslight-semantic-accent-color, var(--spectrum-statuslight-semantic-accent-color)); + background-color: var(--mod-statuslight-semantic-accent-color, var(--spectrum-statuslight-semantic-accent-color)); } .spectrum-StatusLight--info::before { - background-color: var(--mod-statuslight-semantic-info-color, var(--spectrum-statuslight-semantic-info-color)); + background-color: var(--mod-statuslight-semantic-info-color, var(--spectrum-statuslight-semantic-info-color)); } .spectrum-StatusLight--negative::before { - background-color: var(--mod-statuslight-semantic-negative-color, var(--spectrum-statuslight-semantic-negative-color)); + background-color: var(--mod-statuslight-semantic-negative-color, var(--spectrum-statuslight-semantic-negative-color)); } .spectrum-StatusLight--notice::before { - background-color: var(--mod-statuslight-semantic-notice-color, var(--spectrum-statuslight-semantic-notice-color)); + background-color: var(--mod-statuslight-semantic-notice-color, var(--spectrum-statuslight-semantic-notice-color)); } .spectrum-StatusLight--positive::before { - background-color: var(--mod-statuslight-semantic-positive-color, var(--spectrum-statuslight-semantic-positive-color)); + background-color: var(--mod-statuslight-semantic-positive-color, var(--spectrum-statuslight-semantic-positive-color)); } /* Non-Semantic Colors */ .spectrum-StatusLight--gray::before { - background-color: var(--mod-statuslight-nonsemantic-gray-color, var(--spectrum-statuslight-nonsemantic-gray-color)); + background-color: var(--mod-statuslight-nonsemantic-gray-color, var(--spectrum-statuslight-nonsemantic-gray-color)); } .spectrum-StatusLight--red::before { - background-color: var(--mod-statuslight-nonsemantic-red-color, var(--spectrum-statuslight-nonsemantic-red-color)); + background-color: var(--mod-statuslight-nonsemantic-red-color, var(--spectrum-statuslight-nonsemantic-red-color)); } .spectrum-StatusLight--orange::before { - background-color: var(--mod-statuslight-nonsemantic-orange-color, var(--spectrum-statuslight-nonsemantic-orange-color)); + background-color: var(--mod-statuslight-nonsemantic-orange-color, var(--spectrum-statuslight-nonsemantic-orange-color)); } .spectrum-StatusLight--yellow::before { - background-color: var(--mod-statuslight-nonsemantic-yellow-color, var(--spectrum-statuslight-nonsemantic-yellow-color)); + background-color: var(--mod-statuslight-nonsemantic-yellow-color, var(--spectrum-statuslight-nonsemantic-yellow-color)); } .spectrum-StatusLight--chartreuse::before { - background-color: var(--mod-statuslight-nonsemantic-chartreuse-color, var(--spectrum-statuslight-nonsemantic-chartreuse-color)); + background-color: var(--mod-statuslight-nonsemantic-chartreuse-color, var(--spectrum-statuslight-nonsemantic-chartreuse-color)); } .spectrum-StatusLight--celery::before { - background-color: var(--mod-statuslight-nonsemantic-celery-color, var(--spectrum-statuslight-nonsemantic-celery-color)); + background-color: var(--mod-statuslight-nonsemantic-celery-color, var(--spectrum-statuslight-nonsemantic-celery-color)); } .spectrum-StatusLight--green::before { - background-color: var(--mod-statuslight-nonsemantic-green-color, var(--spectrum-statuslight-nonsemantic-green-color)); + background-color: var(--mod-statuslight-nonsemantic-green-color, var(--spectrum-statuslight-nonsemantic-green-color)); } .spectrum-StatusLight--seafoam::before { - background-color: var(--mod-statuslight-nonsemantic-seafoam-color, var(--spectrum-statuslight-nonsemantic-seafoam-color)); + background-color: var(--mod-statuslight-nonsemantic-seafoam-color, var(--spectrum-statuslight-nonsemantic-seafoam-color)); } .spectrum-StatusLight--cyan::before { - background-color: var(--mod-statuslight-nonsemantic-cyan-color, var(--spectrum-statuslight-nonsemantic-cyan-color)); + background-color: var(--mod-statuslight-nonsemantic-cyan-color, var(--spectrum-statuslight-nonsemantic-cyan-color)); } .spectrum-StatusLight--blue::before { - background-color: var(--mod-statuslight-nonsemantic-blue-color, var(--spectrum-statuslight-nonsemantic-blue-color)); + background-color: var(--mod-statuslight-nonsemantic-blue-color, var(--spectrum-statuslight-nonsemantic-blue-color)); } .spectrum-StatusLight--indigo::before { - background-color: var(--mod-statuslight-nonsemantic-indigo-color, var(--spectrum-statuslight-nonsemantic-indigo-color)); + background-color: var(--mod-statuslight-nonsemantic-indigo-color, var(--spectrum-statuslight-nonsemantic-indigo-color)); } .spectrum-StatusLight--purple::before { - background-color: var(--mod-statuslight-nonsemantic-purple-color, var(--spectrum-statuslight-nonsemantic-purple-color)); + background-color: var(--mod-statuslight-nonsemantic-purple-color, var(--spectrum-statuslight-nonsemantic-purple-color)); } .spectrum-StatusLight--fuchsia::before { - background-color: var(--mod-statuslight-nonsemantic-fuchsia-color, var(--spectrum-statuslight-nonsemantic-fuchsia-color)); + background-color: var(--mod-statuslight-nonsemantic-fuchsia-color, var(--spectrum-statuslight-nonsemantic-fuchsia-color)); } .spectrum-StatusLight--magenta::before { - background-color: var(--mod-statuslight-nonsemantic-magenta-color, var(--spectrum-statuslight-nonsemantic-magenta-color)); + background-color: var(--mod-statuslight-nonsemantic-magenta-color, var(--spectrum-statuslight-nonsemantic-magenta-color)); } diff --git a/components/steplist/index.css b/components/steplist/index.css index 7b4d11919e..60ad745c8b 100644 --- a/components/steplist/index.css +++ b/components/steplist/index.css @@ -11,333 +11,333 @@ governing permissions and limitations under the License. */ .spectrum-Steplist { - /* The width of a step */ - --spectrum-steplist-step-width: 80px; + /* The width of a step */ + --spectrum-steplist-step-width: 80px; - /* The diameter of the marker */ - --spectrum-steplist-marker-diameter: 8px; + /* The diameter of the marker */ + --spectrum-steplist-marker-diameter: 8px; - /* The width of the hit area */ - --spectrum-steplist-marker-hitArea: 20px; + /* The width of the hit area */ + --spectrum-steplist-marker-hitArea: 20px; - /* The height of the line */ - --spectrum-steplist-segment-height: 2px; + /* The height of the line */ + --spectrum-steplist-segment-height: 2px; - /* This gives enough space for one line of text */ - --spectrum-steplist-topPadding: 22px; - --spectrum-steplist-small-topPadding: 11px; + /* This gives enough space for one line of text */ + --spectrum-steplist-topPadding: 22px; + --spectrum-steplist-small-topPadding: 11px; - /* This gives enough space for the longest possible label */ - --spectrum-steplist-sidePadding: 60px; + /* This gives enough space for the longest possible label */ + --spectrum-steplist-sidePadding: 60px; - /* Offset from the BOTTOM of the steplist */ - --spectrum-steplist-label-labelOffset: 10px; + /* Offset from the BOTTOM of the steplist */ + --spectrum-steplist-label-labelOffset: 10px; - /* Font size of the label */ - --spectrum-steplist-label-text-size: 12px; + /* Font size of the label */ + --spectrum-steplist-label-text-size: 12px; - --spectrum-steplist-current-label-text-color: var(--spectrum-gray-800); + --spectrum-steplist-current-label-text-color: var(--spectrum-gray-800); - --spectrum-steplist-current-marker-color: var(--spectrum-gray-800); + --spectrum-steplist-current-marker-color: var(--spectrum-gray-800); - --spectrum-steplist-complete-label-text-color: var(--spectrum-gray-700); + --spectrum-steplist-complete-label-text-color: var(--spectrum-gray-700); - --spectrum-steplist-incomplete-label-color: var(--spectrum-gray-600); + --spectrum-steplist-incomplete-label-color: var(--spectrum-gray-600); - --spectrum-steplist-complete-marker-background-color: var(--spectrum-gray-600); + --spectrum-steplist-complete-marker-background-color: var(--spectrum-gray-600); - --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-300); + --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-300); - --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300); + --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300); - --spectrum-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600); + --spectrum-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600); } .spectrum-Steplist { - /* Contain child elements with positive z-index */ - z-index: 0; - position: relative; - - display: block; - vertical-align: top; - margin: 0; - padding-block-start: var(--mod-steplist-topPadding, var(--spectrum-steplist-topPadding)); - padding-inline-start: var(--mod-steplist-sidePadding, var(--spectrum-steplist-sidePadding)); - padding-inline-end: var(--mod-steplist-sidePadding, var(--spectrum-steplist-sidePadding)); - - text-align: center; - white-space: nowrap; - font-size: 0; /* To remove html whitespace between inline elements */ - line-height: 16px; /* in case the container changes it */ + /* Contain child elements with positive z-index */ + z-index: 0; + position: relative; + + display: block; + vertical-align: top; + margin: 0; + padding-block-start: var(--mod-steplist-topPadding, var(--spectrum-steplist-topPadding)); + padding-inline-start: var(--mod-steplist-sidePadding, var(--spectrum-steplist-sidePadding)); + padding-inline-end: var(--mod-steplist-sidePadding, var(--spectrum-steplist-sidePadding)); + + text-align: center; + white-space: nowrap; + font-size: 0; /* To remove html whitespace between inline elements */ + line-height: 16px; /* in case the container changes it */ } .spectrum-Steplist--interactive { - .spectrum-Steplist-label, - .spectrum-Steplist-markerContainer { - /* Show cursor on hit zone when clickable */ - cursor: pointer; - } - - .spectrum-Steplist-item { - /* Step Focused */ - &:focus, - &.is-focused, - *:focus { - .spectrum-Steplist-marker { - background-color: var(--highcontrast-steplist-current-marker-color-key-focus, var(--mod-steplist-current-marker-color-key-focus, var(--spectrum-steplist-current-marker-color-key-focus))); - } - } - } + .spectrum-Steplist-label, + .spectrum-Steplist-markerContainer { + /* Show cursor on hit zone when clickable */ + cursor: pointer; + } + + .spectrum-Steplist-item { + /* Step Focused */ + &:focus, + &.is-focused, + *:focus { + .spectrum-Steplist-marker { + background-color: var(--highcontrast-steplist-current-marker-color-key-focus, var(--mod-steplist-current-marker-color-key-focus, var(--spectrum-steplist-current-marker-color-key-focus))); + } + } + } } /* Small (w/o label or tooltip) */ .spectrum-Steplist--small { - padding-block: var(--mod-steplist-small-topPadding, var(--spectrum-steplist-small-topPadding)); - padding-inline: 0; - - .spectrum-Steplist-item { - padding-block: 0; - padding-inline: 0 40px; - inline-size: 80px; - - /* Disable Label */ - .spectrum-Steplist-label { - display: none; - } - - &:first-child, - &:last-child { - inline-size: 20px; - } - - /* Disable first line */ - &:first-child { - .spectrum-Steplist-markerContainer { - margin-inline-start: -10px; - } - } - - &:last-child { - .spectrum-Steplist-markerContainer { - margin-inline-end: -10px; - } - } - } + padding-block: var(--mod-steplist-small-topPadding, var(--spectrum-steplist-small-topPadding)); + padding-inline: 0; + + .spectrum-Steplist-item { + padding-block: 0; + padding-inline: 0 40px; + inline-size: 80px; + + /* Disable Label */ + .spectrum-Steplist-label { + display: none; + } + + &:first-child, + &:last-child { + inline-size: 20px; + } + + /* Disable first line */ + &:first-child { + .spectrum-Steplist-markerContainer { + margin-inline-start: -10px; + } + } + + &:last-child { + .spectrum-Steplist-markerContainer { + margin-inline-end: -10px; + } + } + } } .spectrum-Steplist-item { - outline: none; - position: relative; - display: inline-block; - margin: 0; - - /* Don't let tooltips mess up alignment */ - vertical-align: bottom; - - box-sizing: content-box; - inline-size: var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)); - padding-block: 0; - padding-inline: 0 calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) / 2); - - /* Completed State */ - &.is-complete { - .spectrum-Steplist-label { - color: var(--mod-steplist-complete-label-text-color, var(--spectrum-steplist-complete-label-text-color)); - } - - .spectrum-Steplist-marker { - background-color: var(--highcontrast-steplist-complete-marker-background-color, var(--mod-steplist-complete-marker-background-color, var(--spectrum-steplist-complete-marker-background-color))); - border: none; - } - - /* The next step's line should be solid */ - & + .spectrum-Steplist-item .spectrum-Steplist-segment { - border-block-end-width: var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height)); - border-block-end-style: solid; - } - } - - /* Selected state */ - &.is-selected { - /* Focus */ - &:focus, - *:focus { - outline: none; - } - - .spectrum-Steplist-label { - color: var(--mod-steplist-current-label-text-color, var(--spectrum-steplist-current-label-text-color)); - } - - .spectrum-Steplist-marker { - border: none; - background-color: var(--highcontrast-steplist-current-marker-color, var(--mod-steplist-current-marker-color, var(--spectrum-steplist-current-marker-color))); - } - } - - &.is-complete, - &.is-selected { - .spectrum-Steplist-segment { - border-block-end-color: var(--mod-steplist-complete-segment-border-block-end-color, var(--spectrum-steplist-complete-segment-border-block-end-color)); - } - } + outline: none; + position: relative; + display: inline-block; + margin: 0; + + /* Don't let tooltips mess up alignment */ + vertical-align: bottom; + + box-sizing: content-box; + inline-size: var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)); + padding-block: 0; + padding-inline: 0 calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) / 2); + + /* Completed State */ + &.is-complete { + .spectrum-Steplist-label { + color: var(--mod-steplist-complete-label-text-color, var(--spectrum-steplist-complete-label-text-color)); + } + + .spectrum-Steplist-marker { + background-color: var(--highcontrast-steplist-complete-marker-background-color, var(--mod-steplist-complete-marker-background-color, var(--spectrum-steplist-complete-marker-background-color))); + border: none; + } + + /* The next step's line should be solid */ + & + .spectrum-Steplist-item .spectrum-Steplist-segment { + border-block-end-width: var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height)); + border-block-end-style: solid; + } + } + + /* Selected state */ + &.is-selected { + /* Focus */ + &:focus, + *:focus { + outline: none; + } + + .spectrum-Steplist-label { + color: var(--mod-steplist-current-label-text-color, var(--spectrum-steplist-current-label-text-color)); + } + + .spectrum-Steplist-marker { + border: none; + background-color: var(--highcontrast-steplist-current-marker-color, var(--mod-steplist-current-marker-color, var(--spectrum-steplist-current-marker-color))); + } + } + + &.is-complete, + &.is-selected { + .spectrum-Steplist-segment { + border-block-end-color: var(--mod-steplist-complete-segment-border-block-end-color, var(--spectrum-steplist-complete-segment-border-block-end-color)); + } + } } .spectrum-Steplist-label { - position: absolute; - inset-inline-start: 50%; - inset-block-end: var(--mod-steplist-label-labelOffset, var(--spectrum-steplist-label-labelOffset)); + position: absolute; + inset-inline-start: 50%; + inset-block-end: var(--mod-steplist-label-labelOffset, var(--spectrum-steplist-label-labelOffset)); - display: block; - inline-size: calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) * 1.5); + display: block; + inline-size: calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) * 1.5); - font-size: var(--mod-steplist-label-text-size, var(--spectrum-steplist-label-text-size)); - white-space: normal; + font-size: var(--mod-steplist-label-text-size, var(--spectrum-steplist-label-text-size)); + white-space: normal; - transform: translateX(-50%); + transform: translateX(-50%); - color: var(--mod-steplist-incomplete-label-color, var(--spectrum-steplist-incomplete-label-color)); + color: var(--mod-steplist-incomplete-label-color, var(--spectrum-steplist-incomplete-label-color)); - &:dir(rtl) { - transform: translateX(50%); - } + &:dir(rtl) { + transform: translateX(50%); + } } .spectrum-Steplist-markerContainer { - display: block; + display: block; - z-index: 2; - position: absolute; - inset-block-end: -10px; - inset-inline-start: 50%; + z-index: 2; + position: absolute; + inset-block-end: -10px; + inset-inline-start: 50%; - inline-size: var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)); - block-size: var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)); + inline-size: var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)); + block-size: var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)); - margin-inline-start: calc(-1 * calc(var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2)); + margin-inline-start: calc(-1 * calc(var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2)); } /* Circle step marker */ .spectrum-Steplist-marker { - box-sizing: border-box; /* So we can stroke nicely */ - display: block; + box-sizing: border-box; /* So we can stroke nicely */ + display: block; - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - margin-block-start: calc(-1 * calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) / 2)); - margin-inline-start: calc(-1 * calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) / 2)); + position: absolute; + inset-block-start: 50%; + inset-inline-start: 50%; + margin-block-start: calc(-1 * calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) / 2)); + margin-inline-start: calc(-1 * calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) / 2)); - inline-size: var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)); - block-size: var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)); + inline-size: var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)); + block-size: var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)); - border-radius: var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)); + border-radius: var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)); - border: 2px solid; - border-color: var(--mod-steplist-incomplete-marker-border-color, var(--spectrum-steplist-incomplete-marker-border-color)); - background: transparent; + border: 2px solid; + border-color: var(--mod-steplist-incomplete-marker-border-color, var(--spectrum-steplist-incomplete-marker-border-color)); + background: transparent; } /* Step line */ .spectrum-Steplist-segment { - display: block; - z-index: 1; - position: absolute; - inset-inline-end: calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 1.5)); + display: block; + z-index: 1; + position: absolute; + inset-inline-end: calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 1.5)); - box-sizing: content-box; - inline-size: calc(calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) * 1.5) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 2)); - inset-block-end: calc(-1 * calc(var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height)) / 2)); + box-sizing: content-box; + inline-size: calc(calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) * 1.5) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 2)); + inset-block-end: calc(-1 * calc(var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height)) / 2)); - /* Default is dashed */ - border-block-end-width: var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height)); - border-block-end-style: dashed; + /* Default is dashed */ + border-block-end-width: var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height)); + border-block-end-style: dashed; - border-block-end-color: var(--mod-steplist-incomplete-segment-border-block-end-color, var(--spectrum-steplist-incomplete-segment-border-block-end-color)); + border-block-end-color: var(--mod-steplist-incomplete-segment-border-block-end-color, var(--spectrum-steplist-incomplete-segment-border-block-end-color)); } /* First step overrides */ .spectrum-Steplist-item:first-child { - .spectrum-Steplist-markerContainer { - inset-inline-start: 0; - } - - .spectrum-Steplist-label { - inset-inline-start: 0; - } - - .spectrum-Steplist-segment { - /* Not visible for first step */ - display: none; - } + .spectrum-Steplist-markerContainer { + inset-inline-start: 0; + } + + .spectrum-Steplist-label { + inset-inline-start: 0; + } + + .spectrum-Steplist-segment { + /* Not visible for first step */ + display: none; + } } /* Last step overrides */ .spectrum-Steplist-item:last-child { - .spectrum-Steplist-label { - inset-inline-start: auto; - inset-inline-end: 0; + .spectrum-Steplist-label { + inset-inline-start: auto; + inset-inline-end: 0; - transform: translateX(50%); + transform: translateX(50%); - &:dir(rtl) { - transform: translateX(-50%); - } - } + &:dir(rtl) { + transform: translateX(-50%); + } + } - .spectrum-Steplist-markerContainer { - inset-inline-start: auto; - inset-inline-end: 0; + .spectrum-Steplist-markerContainer { + inset-inline-start: auto; + inset-inline-end: 0; - margin-inline-start: 0; - margin-inline-end: calc(-1 * calc(var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2)); - } + margin-inline-start: 0; + margin-inline-end: calc(-1 * calc(var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2)); + } - .spectrum-Steplist-segment { - inset-inline-end: var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)); - inset-inline-start: auto; - } + .spectrum-Steplist-segment { + inset-inline-end: var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)); + inset-inline-start: auto; + } } .spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child { - inline-size: calc(calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) / 2) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 2.5)); + inline-size: calc(calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) / 2) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 2.5)); } /* Single step */ .spectrum-Steplist-item:only-child { - .spectrum-Steplist-label { - /* Be centered */ - inset-inline-start: 50%; - - /* Override last-child bits */ - transform: translate(-50%); - - &:dir(rtl) { - transform: translateX(50%); - } - } - - .spectrum-Steplist-markerContainer { - /* Be centered */ - inset-inline-start: 50%; - - /* Override last-child bits */ - margin-inline-end: 0; - margin-inline-start: calc(-1 * calc(var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2)); - } + .spectrum-Steplist-label { + /* Be centered */ + inset-inline-start: 50%; + + /* Override last-child bits */ + transform: translate(-50%); + + &:dir(rtl) { + transform: translateX(50%); + } + } + + .spectrum-Steplist-markerContainer { + /* Be centered */ + inset-inline-start: 50%; + + /* Override last-child bits */ + margin-inline-end: 0; + margin-inline-start: calc(-1 * calc(var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2)); + } } @media (forced-colors: active) { - .spectrum-Steplist { - --highcontrast-steplist-complete-marker-background-color: CanvasText; - --highcontrast-steplist-current-marker-color: Highlight; - --highcontrast-steplist-current-marker-color-key-focus: Highlight; - } - - @supports (color: SelectedItem) { - .spectrum-Steplist { - --highcontrast-steplist-current-marker-color: SelectedItem; - } - } + .spectrum-Steplist { + --highcontrast-steplist-complete-marker-background-color: CanvasText; + --highcontrast-steplist-current-marker-color: Highlight; + --highcontrast-steplist-current-marker-color-key-focus: Highlight; + } + + @supports (color: SelectedItem) { + .spectrum-Steplist { + --highcontrast-steplist-current-marker-color: SelectedItem; + } + } } diff --git a/components/stepper/index.css b/components/stepper/index.css index 1f3df98560..332b1c4d2e 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -13,303 +13,299 @@ governing permissions and limitations under the License. @import "./themes/express.css"; .spectrum-Stepper { - /* Set defaults to medium size */ - --spectrum-stepper-height: var(--spectrum-component-height-100); - --spectrum-stepper-border-radius: var(--spectrum-corner-radius-100); - - --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium); - --spectrum-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill); - - --spectrum-stepper-width: calc( - var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + - var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + - (var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2) - ); - - /*** Focus Indicator ***/ - --spectrum-stepper-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --spectrum-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); - - /*** :AFTER - this is for the :after element labeled below as hit area, but used as focus indicator in ActionButton ***/ - --spectrum-stepper-button-offset: calc(var(--spectrum-stepper-button-width) / 2); - - --spectrum-stepper-animation-duration: var(--spectrum-animation-duration-100); - - /*** MODS for sub components ***/ - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-buttons-border-color, var(--spectrum-stepper-buttons-border-color))); - --mod-infield-button-border-width: var(--mod-stepper-button-border-width, var(--spectrum-stepper-button-border-width)); - --mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - - &.spectrum-Stepper--sizeS { - --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-small); - --spectrum-stepper-height: var(--spectrum-component-height-75); - } - - &.spectrum-Stepper--sizeL { - --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-large); - --spectrum-stepper-height: var(--spectrum-component-height-200); - } - - &.spectrum-Stepper--sizeXL { - --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-extra-large); - --spectrum-stepper-height: var(--spectrum-component-height-300); - } - - /*** Quiet ***/ - &.spectrum-Stepper--quiet { - --mod-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width)); - --mod-textfield-focus-indicator-color: transparent; - } - - &.is-disabled { - --mod-infield-button-border-color-quiet-disabled: var(--spectrum-disabled-border-color); - } - - /*** Invalid ***/ - &.is-invalid { - --mod-stepper-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-negative-border-color-default)); - --mod-stepper-border-color-hover: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)); - --mod-stepper-border-color-focus: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-negative-border-color-focus)); - --mod-stepper-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-negative-border-color-focus-hover)); - --mod-stepper-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-negative-border-color-key-focus)); - --mod-infield-button-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid)); - --mod-textfield-icon-spacing-inline-start-invalid: 0; - - &:hover { - --mod-infield-button-border-color: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)); - } - - &.is-focused, - &:focus { - --mod-infield-button-border-color: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid)); - - &:hover { - --mod-infield-button-border-color: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid)); - } - } - - &.is-keyboardFocused, - &:focus-visible { - --mod-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid)); - } - } + /* Set defaults to medium size */ + --spectrum-stepper-height: var(--spectrum-component-height-100); + --spectrum-stepper-border-radius: var(--spectrum-corner-radius-100); + + --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium); + --spectrum-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill); + + --spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + (var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2)); + + /*** Focus Indicator ***/ + --spectrum-stepper-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --spectrum-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); + + /*** :AFTER - this is for the :after element labeled below as hit area, but used as focus indicator in ActionButton ***/ + --spectrum-stepper-button-offset: calc(var(--spectrum-stepper-button-width) / 2); + + --spectrum-stepper-animation-duration: var(--spectrum-animation-duration-100); + + /*** MODS for sub components ***/ + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-buttons-border-color, var(--spectrum-stepper-buttons-border-color))); + --mod-infield-button-border-width: var(--mod-stepper-button-border-width, var(--spectrum-stepper-button-border-width)); + --mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + + &.spectrum-Stepper--sizeS { + --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-small); + --spectrum-stepper-height: var(--spectrum-component-height-75); + } + + &.spectrum-Stepper--sizeL { + --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-large); + --spectrum-stepper-height: var(--spectrum-component-height-200); + } + + &.spectrum-Stepper--sizeXL { + --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-extra-large); + --spectrum-stepper-height: var(--spectrum-component-height-300); + } + + /*** Quiet ***/ + &.spectrum-Stepper--quiet { + --mod-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width)); + --mod-textfield-focus-indicator-color: transparent; + } + + &.is-disabled { + --mod-infield-button-border-color-quiet-disabled: var(--spectrum-disabled-border-color); + } + + /*** Invalid ***/ + &.is-invalid { + --mod-stepper-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-negative-border-color-default)); + --mod-stepper-border-color-hover: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)); + --mod-stepper-border-color-focus: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-negative-border-color-focus)); + --mod-stepper-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-negative-border-color-focus-hover)); + --mod-stepper-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-negative-border-color-key-focus)); + --mod-infield-button-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid)); + --mod-textfield-icon-spacing-inline-start-invalid: 0; + + &:hover { + --mod-infield-button-border-color: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)); + } + + &.is-focused, + &:focus { + --mod-infield-button-border-color: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid)); + + &:hover { + --mod-infield-button-border-color: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid)); + } + } + + &.is-keyboardFocused, + &:focus-visible { + --mod-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid)); + } + } } .x { - border-radius: var(--spectrum-stepper-button-border-radius-reset); + border-radius: var(--spectrum-stepper-button-border-radius-reset); } .spectrum-Stepper { - position: relative; - display: inline-flex; - flex-flow: row nowrap; - - inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width)); - block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); - border-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); - border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); - - .spectrum-Stepper-input { - border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); - border-start-end-radius: 0; - border-end-end-radius: 0; - border-inline-end-width: 0; - } - - /*** Hover ***/ - &:hover:not(.is-disabled, .is-invalid) { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover))); - } - - &:hover:not(.is-disabled) { - .spectrum-Stepper-input, - .spectrum-Stepper-buttons { - border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); - } - } - - /*** Focused ***/ - &.is-focused, - &:focus { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus))); - - .spectrum-Stepper-input { - outline: none; - } - - .spectrum-Stepper-input, - .spectrum-Stepper-buttons { - border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus))); - } - - &:hover { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-buttons-border-color-focus-hover))); - - .spectrum-Stepper-input, - .spectrum-Stepper-buttons { - border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))); - } - } - } - - /*** Keyboard Focused ***/ - &.is-keyboardFocused, - &:focus-visible { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus))); - - /* keyboard focus indicator is visible */ - outline: var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width)) solid; - outline-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-stepper-focus-indicator-color))); - outline-offset: var(--mod-stepper-focus-indicator-gap, var(--spectrum-stepper-focus-indicator-gap)); - - .spectrum-Stepper-input { - outline: none; - } - - .spectrum-Stepper-input, - .spectrum-Stepper-buttons { - border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus))); - } - } + position: relative; + display: inline-flex; + flex-flow: row nowrap; + + inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width)); + block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); + border-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); + border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); + + .spectrum-Stepper-input { + border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); + border-start-end-radius: 0; + border-end-end-radius: 0; + border-inline-end-width: 0; + } + + /*** Hover ***/ + &:hover:not(.is-disabled, .is-invalid) { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover))); + } + + &:hover:not(.is-disabled) { + .spectrum-Stepper-input, + .spectrum-Stepper-buttons { + border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); + } + } + + /*** Focused ***/ + &.is-focused, + &:focus { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus))); + + .spectrum-Stepper-input { + outline: none; + } + + .spectrum-Stepper-input, + .spectrum-Stepper-buttons { + border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus))); + } + + &:hover { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-buttons-border-color-focus-hover))); + + .spectrum-Stepper-input, + .spectrum-Stepper-buttons { + border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))); + } + } + } + + /*** Keyboard Focused ***/ + &.is-keyboardFocused, + &:focus-visible { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus))); + + /* keyboard focus indicator is visible */ + outline: var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width)) solid; + outline-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-stepper-focus-indicator-color))); + outline-offset: var(--mod-stepper-focus-indicator-gap, var(--spectrum-stepper-focus-indicator-gap)); + + .spectrum-Stepper-input { + outline: none; + } + + .spectrum-Stepper-input, + .spectrum-Stepper-buttons { + border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus))); + } + } } /*** Quiet ***/ .spectrum-Stepper.spectrum-Stepper--quiet { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); - - /* quiet corners are not rounded */ - border-start-start-radius: 0; - border-start-end-radius: 0; - border-end-start-radius: 0; - border-end-end-radius: 0; - - &.hide-stepper .spectrum-Stepper-input { - border-inline-end-width: 0; - border-end-end-radius: 0; - } - - &::after { - content: ''; - position: absolute; - inset-block-end: calc(-1 * (var(--mod-stepper-focus-indicator-gap, var(--spectrum-stepper-focus-indicator-gap)) + var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width)))); - inset-inline-start: 0; - inline-size: 100%; - block-size: var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width)); - } - - .spectrum-Stepper-buttons { - border: none; - } - - .spectrum-Stepper-button { - --mod-infield-button-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - --mod-infield-button-stacked-bottom-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - --mod-infield-button-stacked-bottom-border-radius-end-end: 0; - --mod-infield-button-stacked-bottom-border-radius-end-start: 0; - --mod-infield-button-fill-justify-content: flex-end; - padding: 0; - } - - .spectrum-Stepper-input, - .spectrum-Stepper-buttons { - background-color: transparent; - } - - /* quiet hover */ - &:hover:not(.is-disabled) { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); - - .spectrum-Stepper-buttons { - background-color: transparent; - } - } - - /* quiet focus */ - &.is-focused, - &:focus { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus))); - - &:hover { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))); - } - } - - /* quiet keyboard focused */ - &.is-keyboardFocused { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus))); - - outline: none; - - /* quiet focus indicator only on bottom border */ - &::after { - background-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-stepper-focus-indicator-color))); - } - - &:hover { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); - } - } + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); + + /* quiet corners are not rounded */ + border-start-start-radius: 0; + border-start-end-radius: 0; + border-end-start-radius: 0; + border-end-end-radius: 0; + + &.hide-stepper .spectrum-Stepper-input { + border-inline-end-width: 0; + border-end-end-radius: 0; + } + + &::after { + content: ""; + position: absolute; + inset-block-end: calc(-1 * (var(--mod-stepper-focus-indicator-gap, var(--spectrum-stepper-focus-indicator-gap)) + var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width)))); + inset-inline-start: 0; + inline-size: 100%; + block-size: var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width)); + } + + .spectrum-Stepper-buttons { + border: none; + } + + .spectrum-Stepper-button { + --mod-infield-button-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + --mod-infield-button-stacked-bottom-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + --mod-infield-button-stacked-bottom-border-radius-end-end: 0; + --mod-infield-button-stacked-bottom-border-radius-end-start: 0; + --mod-infield-button-fill-justify-content: flex-end; + padding: 0; + } + + .spectrum-Stepper-input, + .spectrum-Stepper-buttons { + background-color: transparent; + } + + /* quiet hover */ + &:hover:not(.is-disabled) { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); + + .spectrum-Stepper-buttons { + background-color: transparent; + } + } + + /* quiet focus */ + &.is-focused, + &:focus { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus))); + + &:hover { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))); + } + } + + /* quiet keyboard focused */ + &.is-keyboardFocused { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus))); + + outline: none; + + /* quiet focus indicator only on bottom border */ + &::after { + background-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-stepper-focus-indicator-color))); + } + + &:hover { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); + } + } } .spectrum-Stepper::before { - content: ''; + content: ""; } /* container for stepUp and stepDown buttons */ .spectrum-Stepper-buttons { - display: flex; - flex-direction: column; - justify-content: center; - box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + box-sizing: border-box; - block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); - inline-size: var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)); + block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); + inline-size: var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)); - border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); - border-style: var(--mod-stepper-buttons-border-style, var(--spectrum-stepper-buttons-border-style)); - border-width: var(--highcontrast-stepper-buttons-border-width, var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width))); - border-inline-start-width: 0; + border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); + border-style: var(--mod-stepper-buttons-border-style, var(--spectrum-stepper-buttons-border-style)); + border-width: var(--highcontrast-stepper-buttons-border-width, var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width))); + border-inline-start-width: 0; - /* Have to add border radius here to avoid overlapping textfield border */ - border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); - border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); + /* Have to add border radius here to avoid overlapping textfield border */ + border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); + border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); - background-color: var(--highcontrast-stepper-buttons-background-color, var(--mod-stepper-buttons-background-color, var(--spectrum-stepper-buttons-background-color))); - transition: border-color var(--mod-stepper-animation-duration, var(--spectrum-stepper-animation-duration)) ease-in-out; + background-color: var(--highcontrast-stepper-buttons-background-color, var(--mod-stepper-buttons-background-color, var(--spectrum-stepper-buttons-background-color))); + transition: border-color var(--mod-stepper-animation-duration, var(--spectrum-stepper-animation-duration)) ease-in-out; } /* hide-stepper */ .spectrum-Stepper.hide-stepper .spectrum-Stepper-input { - border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); - border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); - border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); + border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); + border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); } @media (forced-colors: active) { - .spectrum-Stepper { - --highcontrast-stepper-border-color: CanvasText; - --highcontrast-stepper-border-color-hover: Highlight; - --highcontrast-stepper-border-color-focus: Highlight; - --highcontrast-stepper-border-color-focus-hover: Highlight; - --highcontrast-stepper-border-color-keyboard-focus: CanvasText; - --highcontrast-stepper-button-background-color-default: Canvas; - --highcontrast-stepper-button-background-color-hover: Canvas; - --highcontrast-stepper-button-background-color-focus: Canvas; - --highcontrast-stepper-button-background-color-keyboard-focus: Canvas; - --highcontrast-stepper-focus-indicator-color: Highlight; - - &.is-disabled { - --highcontrast-stepper-border-color: GrayText; - --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - } - - &.is-invalid { - --highcontrast-stepper-border-color: Highlight; - --highcontrast-stepper-border-color-hover: Highlight; - --highcontrast-stepper-border-color-focus: Highlight; - --highcontrast-stepper-border-color-focus-hover: Highlight; - --highcontrast-stepper-border-color-keyboard-focus: Highlight; - } - } + .spectrum-Stepper { + --highcontrast-stepper-border-color: CanvasText; + --highcontrast-stepper-border-color-hover: Highlight; + --highcontrast-stepper-border-color-focus: Highlight; + --highcontrast-stepper-border-color-focus-hover: Highlight; + --highcontrast-stepper-border-color-keyboard-focus: CanvasText; + --highcontrast-stepper-button-background-color-default: Canvas; + --highcontrast-stepper-button-background-color-hover: Canvas; + --highcontrast-stepper-button-background-color-focus: Canvas; + --highcontrast-stepper-button-background-color-keyboard-focus: Canvas; + --highcontrast-stepper-focus-indicator-color: Highlight; + + &.is-disabled { + --highcontrast-stepper-border-color: GrayText; + --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + } + + &.is-invalid { + --highcontrast-stepper-border-color: Highlight; + --highcontrast-stepper-border-color-hover: Highlight; + --highcontrast-stepper-border-color-focus: Highlight; + --highcontrast-stepper-border-color-focus-hover: Highlight; + --highcontrast-stepper-border-color-keyboard-focus: Highlight; + } + } } diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css index 835ebeb952..e7342f3dd7 100644 --- a/components/stepper/themes/express.css +++ b/components/stepper/themes/express.css @@ -13,37 +13,37 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Stepper { - --spectrum-stepper-border-width: var(--spectrum-border-width-200); - - --spectrum-stepper-buttons-border-style: solid; - --spectrum-stepper-buttons-border-width: var(--spectrum-border-width-200); - --spectrum-stepper-buttons-border-color: transparent; - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); - --spectrum-stepper-buttons-border-color-hover: transparent; - --spectrum-stepper-buttons-border-color-focus: transparent; - --spectrum-stepper-buttons-border-color-keyboard-focus: transparent; - - --spectrum-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); - --spectrum-stepper-button-border-width: 0; - - --spectrum-stepper-border-color: var(--spectrum-gray-400); - --spectrum-stepper-border-color-hover: var(--spectrum-gray-500); - --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); - --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - - --spectrum-stepper-border-color-invalid: transparent; - --spectrum-stepper-border-color-focus-invalid: transparent; - --spectrum-stepper-border-color-focus-hover-invalid: transparent; - --spectrum-stepper-border-color-keyboard-focus-invalid: transparent; - - --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-400); - --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300); - - &.is-disabled { - --spectrum-stepper-buttons-background-color: var(--spectrum-disabled-background-color); - --spectrum-stepper-buttons-border-width: 0; - } - } + .spectrum-Stepper { + --spectrum-stepper-border-width: var(--spectrum-border-width-200); + + --spectrum-stepper-buttons-border-style: solid; + --spectrum-stepper-buttons-border-width: var(--spectrum-border-width-200); + --spectrum-stepper-buttons-border-color: transparent; + --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --spectrum-stepper-buttons-border-color-hover: transparent; + --spectrum-stepper-buttons-border-color-focus: transparent; + --spectrum-stepper-buttons-border-color-keyboard-focus: transparent; + + --spectrum-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); + --spectrum-stepper-button-border-width: 0; + + --spectrum-stepper-border-color: var(--spectrum-gray-400); + --spectrum-stepper-border-color-hover: var(--spectrum-gray-500); + --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + + --spectrum-stepper-border-color-invalid: transparent; + --spectrum-stepper-border-color-focus-invalid: transparent; + --spectrum-stepper-border-color-focus-hover-invalid: transparent; + --spectrum-stepper-border-color-keyboard-focus-invalid: transparent; + + --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-400); + --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300); + + &.is-disabled { + --spectrum-stepper-buttons-background-color: var(--spectrum-disabled-background-color); + --spectrum-stepper-buttons-border-width: 0; + } + } } diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css index a59b448068..70cdd1305e 100644 --- a/components/stepper/themes/spectrum.css +++ b/components/stepper/themes/spectrum.css @@ -11,32 +11,32 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Stepper { - --spectrum-stepper-border-width: var(--spectrum-border-width-100); + .spectrum-Stepper { + --spectrum-stepper-border-width: var(--spectrum-border-width-100); - --spectrum-stepper-buttons-border-style: none; - --spectrum-stepper-buttons-border-width: 0; - --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); - --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600); - --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); + --spectrum-stepper-buttons-border-style: none; + --spectrum-stepper-buttons-border-width: 0; + --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); + --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600); + --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800); + --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); - --spectrum-stepper-button-border-radius-reset: 0px; - --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); + --spectrum-stepper-button-border-radius-reset: 0px; + --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); - --spectrum-stepper-border-color: var(--spectrum-gray-500); - --spectrum-stepper-border-color-hover: var(--spectrum-gray-600); - --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); - --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800); - --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --spectrum-stepper-border-color: var(--spectrum-gray-500); + --spectrum-stepper-border-color-hover: var(--spectrum-gray-600); + --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); - --spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); - --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); - --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); + --spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); + --spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); + --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); + --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); - --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-300); - --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); - } + --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-300); + --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); + } } diff --git a/components/swatch/index.css b/components/swatch/index.css index 0fbf80340c..7444553d60 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -12,85 +12,84 @@ governing permissions and limitations under the License. /* Swatch tokens */ .spectrum-Swatch { - /* Placeholder tokens */ - --spectrum-swatch-focus-indicator-border-radius: 8px; - --spectrum-swatch-icon-border-color: rgba(0, 0, 0, 51%); - - /* Size */ - --spectrum-swatch-size: var(--spectrum-swatch-size-small); - --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100); - --spectrum-swatch-border-thickness: var(--spectrum-border-width-100); - --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); - --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - - /* Color */ - --spectrum-swatch-border-color-selected: var(--spectrum-gray-900); - --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --spectrum-swatch-disabled-icon-border-color: var(--spectrum-swatch-disabled-icon-border-color); - --spectrum-swatch-disabled-icon-color: var(--spectrum-white); - --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); - --spectrum-swatch-slash-icon-color: var(--spectrum-red-900); - --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); + /* Placeholder tokens */ + --spectrum-swatch-focus-indicator-border-radius: 8px; + --spectrum-swatch-icon-border-color: rgba(0, 0, 0, 51%); + + /* Size */ + --spectrum-swatch-size: var(--spectrum-swatch-size-small); + --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100); + --spectrum-swatch-border-thickness: var(--spectrum-border-width-100); + --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); + --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + + /* Color */ + --spectrum-swatch-border-color-selected: var(--spectrum-gray-900); + --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50); + --spectrum-swatch-disabled-icon-border-color: var(--spectrum-swatch-disabled-icon-border-color); + --spectrum-swatch-disabled-icon-color: var(--spectrum-white); + --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); + --spectrum-swatch-slash-icon-color: var(--spectrum-red-900); + --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); } .spectrum-Swatch--sizeXS { - --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); + --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); } .spectrum-Swatch--sizeS { - --spectrum-swatch-size: var(--spectrum-swatch-size-small); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); + --spectrum-swatch-size: var(--spectrum-swatch-size-small); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); } .spectrum-Swatch--sizeM { - --spectrum-swatch-size: var(--spectrum-swatch-size-medium); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); + --spectrum-swatch-size: var(--spectrum-swatch-size-medium); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); } .spectrum-Swatch--sizeL { - --spectrum-swatch-size: var(--spectrum-swatch-size-large); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large); + --spectrum-swatch-size: var(--spectrum-swatch-size-large); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large); } - /* Light theme placeholder tokens */ .spectrum--light { - --spectrum-swatch-border-color: rgba(0, 0, 0, 51%); + --spectrum-swatch-border-color: rgba(0, 0, 0, 51%); } /* Dark and Darkest theme placeholder tokens */ .spectrum--dark, .spectrum--darkest { - --spectrum-swatch-border-color: rgba(255, 255, 255, 51%); + --spectrum-swatch-border-color: rgba(255, 255, 255, 51%); } /* Windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Swatch { - --highcontrast-swatch-disabled-icon-color: GrayText; - --highcontrast-swatch-focus-indicator-color: ButtonText; - --highcontrast-swatch-background-color-selected: Background; - --highcontrast-swatch-border-color-selected: Highlight; - --highcontrast-swatch-border-color: ButtonText; - --highcontrast-swatch-fill-foreground-color: ButtonText; - - .spectrum-Swatch-fill { - forced-color-adjust: none; - } - } - - .spectrum-Swatch[disabled], - .spectrum-Swatch.is-disabled { - --highcontrast-swatch-border-color: GrayText; - } + .spectrum-Swatch { + --highcontrast-swatch-disabled-icon-color: GrayText; + --highcontrast-swatch-focus-indicator-color: ButtonText; + --highcontrast-swatch-background-color-selected: Background; + --highcontrast-swatch-border-color-selected: Highlight; + --highcontrast-swatch-border-color: ButtonText; + --highcontrast-swatch-fill-foreground-color: ButtonText; + + .spectrum-Swatch-fill { + forced-color-adjust: none; + } + } + + .spectrum-Swatch[disabled], + .spectrum-Swatch.is-disabled { + --highcontrast-swatch-border-color: GrayText; + } } /* Swatch styles */ @@ -99,53 +98,41 @@ governing permissions and limitations under the License. inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); block-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; - /* contain selection indicator and focus-ring */ - position: relative; + /* contain selection indicator and focus-ring */ + position: relative; - outline: none; + outline: none; - /* don't let double clicking select stuff */ - user-select: none; + /* don't let double clicking select stuff */ + 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 { - background-color: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected))); + &.is-selected { + background-color: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected))); - .spectrum-Swatch-fill { - clip-path: polygon( - calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) - calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2), - calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) - calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2), - calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) - calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2), - calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) - calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)); + .spectrum-Swatch-fill { + clip-path: polygon( + calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2), + calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2), + calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2), + calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) + ); - /* no border radius when selected */ - border-radius: 0; + /* no border radius when selected */ + border-radius: 0; &::before { border-radius: 0; @@ -158,50 +145,41 @@ governing permissions and limitations under the License. } } - /* Swatch fill: Image, Gradient, SVG */ - &.is-image { - .spectrum-Swatch-fill { - &::before { - background-color: transparent; - } - } - } - - &.is-mixedValue { - .spectrum-Swatch-fill { - /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ - background: var(--spectrum-picked-color, transparent); - } - - .spectrum-Swatch-mixedValueIcon { - color: var(--spectrum-swatch-dash-icon-color); - display: block; - } - } - - /* Swatch fill: Not fill with Slash */ - &.is-nothing { - .spectrum-Swatch-fill { - /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ - background-color: var(--spectrum-picked-color, transparent); - background-image: none; + /* Swatch fill: Image, Gradient, SVG */ + &.is-image { + .spectrum-Swatch-fill { + &::before { + background-color: transparent; + } + } + } + + &.is-mixedValue { + .spectrum-Swatch-fill { + /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ + background: var(--spectrum-picked-color, transparent); + } + + .spectrum-Swatch-mixedValueIcon { + color: var(--spectrum-swatch-dash-icon-color); + display: block; + } + } + + /* Swatch fill: Not fill with Slash */ + &.is-nothing { + .spectrum-Swatch-fill { + /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ + background-color: var(--spectrum-picked-color, transparent); + 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) - ) - ); + background: var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-swatch-slash-icon-color))); } } @@ -214,12 +192,12 @@ governing permissions and limitations under the License. } } - &[disabled], - &.is-disabled { - .spectrum-Swatch-disabledIcon { - display: block; - } - } + &[disabled], + &.is-disabled { + .spectrum-Swatch-disabledIcon { + display: block; + } + } /* selection indicator */ &::before { @@ -227,32 +205,30 @@ governing permissions and limitations under the License. position: absolute; inset: 0; - border-width: var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)); - border-style: solid; - border-color: var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-swatch-border-color-selected))); + border-width: var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)); + border-style: solid; + border-color: var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-swatch-border-color-selected))); - opacity: 0; + opacity: 0; - pointer-events: none; - } + pointer-events: none; + } /* focus-ring */ &::after { content: ""; position: absolute; - inset: calc( - -2 * var(--mod-swatch-focus-indicator-gap, var(--spectrum-swatch-focus-indicator-gap)) - ); + inset: calc(-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; - border-color: var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color))); - border-radius: var(--mod-swatch-focus-indicator-border-radius, var(--spectrum-swatch-focus-indicator-border-radius)); + border-width: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-swatch-focus-indicator-thickness)); + border-style: solid; + border-color: var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color))); + border-radius: var(--mod-swatch-focus-indicator-border-radius, var(--spectrum-swatch-focus-indicator-border-radius)); - transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; - } + transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + } &:focus-visible { &::after { @@ -263,19 +239,19 @@ governing permissions and limitations under the License. /* stylelint-enable max-nesting-depth */ .spectrum-Swatch-fill { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; inline-size: 100%; block-size: 100%; box-sizing: border-box; - position: relative; + position: relative; - overflow: hidden; + overflow: hidden; - border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius)); + border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius)); /* Swatch fill: Default */ &::before { @@ -284,13 +260,13 @@ governing permissions and limitations under the License. inset: 0; z-index: 0; - /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ - background-color: var(--spectrum-picked-color, transparent); + /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ + background-color: var(--spectrum-picked-color, transparent); - /* Swatch border */ - box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--mod-swatch-border-color, var(--spectrum-swatch-border-color))); - border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius)); - } + /* Swatch border */ + box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--mod-swatch-border-color, var(--spectrum-swatch-border-color))); + border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius)); + } } /* Variant: No border */ @@ -306,32 +282,32 @@ governing permissions and limitations under the License. } .spectrum-Swatch-mixedValueIcon { - display: none; - pointer-events: none; + display: none; + pointer-events: none; - /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ - color: var(--spectrum-picked-color, transparent); + /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ + color: var(--spectrum-picked-color, transparent); } .spectrum-Swatch-disabledIcon { - position: relative; - z-index: 2; + position: relative; + z-index: 2; - display: none; - pointer-events: none; + display: none; + pointer-events: none; - color: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))); - stroke: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))); + color: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))); + stroke: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))); - /* Icon fill color */ - path:first-child { - fill: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))); - } + /* Icon fill color */ + path:first-child { + fill: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))); + } - /* Icon outline color - does not need a highcontrast token because the icon fill color provides contrast. */ - path:last-child { - fill: var(--mod-swatch-icon-border-color, var(--spectrum-swatch-icon-border-color)); - } + /* Icon outline color - does not need a highcontrast token because the icon fill color provides contrast. */ + path:last-child { + fill: var(--mod-swatch-icon-border-color, var(--spectrum-swatch-icon-border-color)); + } } .spectrum-Swatch--rectangle { @@ -364,18 +340,19 @@ governing permissions and limitations under the License. border-radius: 100%; } - &.is-selected .spectrum-Swatch-fill { - clip-path: circle(calc(50% - (var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)) at 50% 50%); - } - } + &.is-selected .spectrum-Swatch-fill { + clip-path: circle(calc(50% - (var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)) at 50% 50%); + } + } } .spectrum-Swatch-image { - object-fit: contain; + object-fit: contain; inline-size: 100%; block-size: 100%; - transition: width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, - height var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + transition: + width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, + height var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; } diff --git a/components/swatchgroup/index.css b/components/swatchgroup/index.css index 7f4b981971..abade96836 100644 --- a/components/swatchgroup/index.css +++ b/components/swatchgroup/index.css @@ -11,29 +11,29 @@ governing permissions and limitations under the License. */ .spectrum-SwatchGroup { - --spectrum-swatchgroup-spacing-compact: var(--spectrum-spacing-50); - --spectrum-swatchgroup-spacing-regular: var(--spectrum-spacing-75); - --spectrum-swatchgroup-spacing-spacious: var(--spectrum-spacing-100); + --spectrum-swatchgroup-spacing-compact: var(--spectrum-spacing-50); + --spectrum-swatchgroup-spacing-regular: var(--spectrum-spacing-75); + --spectrum-swatchgroup-spacing-spacious: var(--spectrum-spacing-100); } .spectrum-SwatchGroup { - display: inline-flex; - flex-flow: row wrap; - align-items: flex-start; - justify-content: flex-start; + display: inline-flex; + flex-flow: row wrap; + align-items: flex-start; + justify-content: flex-start; } /* Regular (Default) */ .spectrum-SwatchGroup { - gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing-regular)); + gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing-regular)); } /* Compact */ .spectrum-SwatchGroup--compact { - gap: var(--mod-swatchgroup-spacing-compact, var(--spectrum-swatchgroup-spacing-compact)); + gap: var(--mod-swatchgroup-spacing-compact, var(--spectrum-swatchgroup-spacing-compact)); } /* Spacious */ .spectrum-SwatchGroup--spacious { - gap: var(--mod-swatchgroup-spacing-spacious, var(--spectrum-swatchgroup-spacing-spacious)); + gap: var(--mod-swatchgroup-spacing-spacious, var(--spectrum-swatchgroup-spacing-spacious)); } diff --git a/components/switch/index.css b/components/switch/index.css index 360f8b0f97..e807e89821 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -13,312 +13,315 @@ governing permissions and limitations under the License. @import "./themes/express.css"; .spectrum-Switch { - --spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-switch-label-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-switch-label-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-switch-background-color: var(--spectrum-gray-300); - --spectrum-switch-background-color-disabled: var(--spectrum-gray-300); - --spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color); - - --spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default); - --spectrum-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - --spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); - --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-switch-handle-background-color: var(--spectrum-gray-75); - --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-switch-label-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-switch-label-color-disabled: var(--spectrum-disabled-content-color); + + --spectrum-switch-background-color: var(--spectrum-gray-300); + --spectrum-switch-background-color-disabled: var(--spectrum-gray-300); + --spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color); + + --spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default); + --spectrum-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --spectrum-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); + --spectrum-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + + --spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); + --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); + + --spectrum-switch-handle-background-color: var(--spectrum-gray-75); + --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); } .spectrum-Switch--disabled { - --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color); + --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color); } .spectrum-Switch.spectrum-Switch--emphasized { - /* + /* Selector specificity needed to beat the cascade, post-build. The `spectrum` & `express` theme vars get appended below this in the dist file & the higher specificity here will override. */ - /* selected + emphasized */ - --spectrum-switch-background-color-selected-default: var(--spectrum-accent-color-900); - --spectrum-switch-background-color-selected-hover: var(--spectrum-accent-color-1000); - --spectrum-switch-background-color-selected-down: var(--spectrum-accent-color-1100); - --spectrum-switch-background-color-selected-focus: var(--spectrum-accent-color-1000); - - --spectrum-switch-handle-border-color-selected-default: var(--spectrum-accent-color-900); - --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-accent-color-1000); - --spectrum-switch-handle-border-color-selected-down: var(--spectrum-accent-color-1100); - --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-accent-color-1000); + /* selected + emphasized */ + --spectrum-switch-background-color-selected-default: var(--spectrum-accent-color-900); + --spectrum-switch-background-color-selected-hover: var(--spectrum-accent-color-1000); + --spectrum-switch-background-color-selected-down: var(--spectrum-accent-color-1100); + --spectrum-switch-background-color-selected-focus: var(--spectrum-accent-color-1000); + + --spectrum-switch-handle-border-color-selected-default: var(--spectrum-accent-color-900); + --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-accent-color-1000); + --spectrum-switch-handle-border-color-selected-down: var(--spectrum-accent-color-1100); + --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-accent-color-1000); } .spectrum-Switch--sizeS { - --spectrum-switch-min-height: var(--spectrum-component-height-75); - --spectrum-switch-control-width: var(--spectrum-switch-control-width-small); - --spectrum-switch-control-height: var(--spectrum-switch-control-height-small); - --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-75); - --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-small); - --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-75); - - --spectrum-switch-font-size: var(--spectrum-font-size-75); + --spectrum-switch-min-height: var(--spectrum-component-height-75); + --spectrum-switch-control-width: var(--spectrum-switch-control-width-small); + --spectrum-switch-control-height: var(--spectrum-switch-control-height-small); + --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-75); + --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-small); + --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-75); + + --spectrum-switch-font-size: var(--spectrum-font-size-75); } .spectrum-Switch--sizeM { - --spectrum-switch-min-height: var(--spectrum-component-height-100); - --spectrum-switch-control-width: var(--spectrum-switch-control-width-medium); - --spectrum-switch-control-height: var(--spectrum-switch-control-height-medium); - --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-100); - --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium); - --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-100); - - --spectrum-switch-font-size: var(--spectrum-font-size-100); + --spectrum-switch-min-height: var(--spectrum-component-height-100); + --spectrum-switch-control-width: var(--spectrum-switch-control-width-medium); + --spectrum-switch-control-height: var(--spectrum-switch-control-height-medium); + --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-100); + --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium); + --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + + --spectrum-switch-font-size: var(--spectrum-font-size-100); } .spectrum-Switch--sizeL { - --spectrum-switch-min-height: var(--spectrum-component-height-200); - --spectrum-switch-control-width: var(--spectrum-switch-control-width-large); - --spectrum-switch-control-height: var(--spectrum-switch-control-height-large); - --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-200); - --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-large); - --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-200); - - --spectrum-switch-font-size: var(--spectrum-font-size-200); + --spectrum-switch-min-height: var(--spectrum-component-height-200); + --spectrum-switch-control-width: var(--spectrum-switch-control-width-large); + --spectrum-switch-control-height: var(--spectrum-switch-control-height-large); + --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-200); + --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-large); + --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-200); + + --spectrum-switch-font-size: var(--spectrum-font-size-200); } .spectrum-Switch--sizeXL { - --spectrum-switch-min-height: var(--spectrum-component-height-300); - --spectrum-switch-control-width: var(--spectrum-switch-control-width-extra-large); - --spectrum-switch-control-height: var(--spectrum-switch-control-height-extra-large); - --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-300); - --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large); - --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-300); - - --spectrum-switch-font-size: var(--spectrum-font-size-300); + --spectrum-switch-min-height: var(--spectrum-component-height-300); + --spectrum-switch-control-width: var(--spectrum-switch-control-width-extra-large); + --spectrum-switch-control-height: var(--spectrum-switch-control-height-extra-large); + --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-300); + --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large); + --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-300); + + --spectrum-switch-font-size: var(--spectrum-font-size-300); } .spectrum-Switch { - display: inline-flex; - align-items: flex-start; - position: relative; - min-block-size: var(--mod-switch-height, var(--spectrum-switch-min-height)); - max-inline-size: 100%; - vertical-align: top; + display: inline-flex; + align-items: flex-start; + position: relative; + min-block-size: var(--mod-switch-height, var(--spectrum-switch-min-height)); + max-inline-size: 100%; + vertical-align: top; } .spectrum-Switch-input { - /* Remove the margin for input in Firefox and Safari. */ - margin: 0; - - /* Add the correct box sizing for [type="checkbox"] in IE 10-. */ - box-sizing: border-box; - - /* Remove the padding for [type="checkbox"] in IE 10-. */ - padding: 0; - - position: absolute; - inline-size: 100%; - block-size: 100%; - inset-block-start: 0; - inset-inline-start: 0; - opacity: 0; - z-index: 1; - - cursor: pointer; - - &:checked+.spectrum-Switch-switch { - &::before { - transform: translateX(calc(var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%)); - } - - &:dir(rtl)::before { - transform: translateX(calc(-1 * (var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%))); - } - } - - &:disabled, - &[disabled] { - cursor: default; - } - - &:focus-visible + .spectrum-Switch-switch { - &::after { - margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1); - } - } + /* Remove the margin for input in Firefox and Safari. */ + margin: 0; + + /* Add the correct box sizing for [type="checkbox"] in IE 10-. */ + box-sizing: border-box; + + /* Remove the padding for [type="checkbox"] in IE 10-. */ + padding: 0; + + position: absolute; + inline-size: 100%; + block-size: 100%; + inset-block-start: 0; + inset-inline-start: 0; + opacity: 0; + z-index: 1; + + cursor: pointer; + + &:checked + .spectrum-Switch-switch { + &::before { + transform: translateX(calc(var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%)); + } + + &:dir(rtl)::before { + transform: translateX(calc(-1 * (var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%))); + } + } + + &:disabled, + &[disabled] { + cursor: default; + } + + &:focus-visible + .spectrum-Switch-switch { + &::after { + margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1); + } + } } .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default))); - margin-inline: var(--mod-switch-control-label-spacing, var(--spectrum-switch-control-label-spacing)); - margin-block-start: var(--mod-switch-spacing-top-to-label, var(--spectrum-switch-spacing-top-to-label)); - margin-block-end: 0; - font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size)); - line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); - transition: color var(--mod-animation-duration-200, var(--spectrum-animation-duration-200)) ease-in-out; + color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default))); + margin-inline: var(--mod-switch-control-label-spacing, var(--spectrum-switch-control-label-spacing)); + margin-block-start: var(--mod-switch-spacing-top-to-label, var(--spectrum-switch-spacing-top-to-label)); + margin-block-end: 0; + font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size)); + line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); + transition: color var(--mod-animation-duration-200, var(--spectrum-animation-duration-200)) ease-in-out; } .spectrum-Switch-switch { - display: inline-block; - box-sizing: border-box; - - /* positions the pseudo elements relative to this one */ - position: relative; - - inline-size: var(--mod-switch-control-width, var(--spectrum-switch-control-width)); - - /* Fix vertical alignment when not wrapping since we're flex-start */ - margin-block: calc(var(--mod-switch-height, var(--spectrum-switch-min-height)) - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control, var(--spectrum-switch-spacing-top-to-control))); - margin-inline: 0; - - flex-grow: 0; - flex-shrink: 0; - - vertical-align: middle; - - transition: background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, - border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; - - block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); - - inset-inline-start: 0; - inset-inline-end: 0; - - border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2); - - &::before { - display: block; - position: absolute; - content: ""; - box-sizing: border-box; - } - - /* :before is used for the handle of the switch */ - &::before { - transition: background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, - border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, - transform var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, - box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; - - inline-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); - block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); - - inset-block-start: 0; - inset-inline-start: 0; - - border-width: var(--mod-border-width-200, var(--spectrum-border-width-200)); - border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2); - border-style: solid; - } - - /* :after is used for the focus halo */ - &::after { - border-radius: calc(calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2); - content: ""; - display: block; - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - inset-block-end: 0; - inset-block-start: 0; - margin: 0; - - transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, - margin var(--spectrum-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out; - } + display: inline-block; + box-sizing: border-box; + + /* positions the pseudo elements relative to this one */ + position: relative; + + inline-size: var(--mod-switch-control-width, var(--spectrum-switch-control-width)); + + /* Fix vertical alignment when not wrapping since we're flex-start */ + margin-block: calc(var(--mod-switch-height, var(--spectrum-switch-min-height)) - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control, var(--spectrum-switch-spacing-top-to-control))); + margin-inline: 0; + + flex-grow: 0; + flex-shrink: 0; + + vertical-align: middle; + + transition: + background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, + border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + + block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); + + inset-inline-start: 0; + inset-inline-end: 0; + + border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2); + + &::before { + display: block; + position: absolute; + content: ""; + box-sizing: border-box; + } + + /* :before is used for the handle of the switch */ + &::before { + transition: + background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, + border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, + transform var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, + box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + + inline-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); + block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); + + inset-block-start: 0; + inset-inline-start: 0; + + border-width: var(--mod-border-width-200, var(--spectrum-border-width-200)); + border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2); + border-style: solid; + } + + /* :after is used for the focus halo */ + &::after { + border-radius: calc(calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2); + content: ""; + display: block; + position: absolute; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; + inset-block-start: 0; + margin: 0; + + transition: + opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, + margin var(--spectrum-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out; + } } .spectrum-Switch { - .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color, var(--mod-switch-background-color, var(--spectrum-switch-background-color))); - - &::before { - background-color: var(--highcontrast-switch-handle-background-color, var(--mod-switch-handle-background-color, var(--spectrum-switch-handle-background-color))); - border-color: var(--highcontrast-switch-handle-border-color-default, var(--mod-switch-handle-border-color-default, var(--spectrum-switch-handle-border-color-default))); - } - } + .spectrum-Switch-switch { + background-color: var(--highcontrast-switch-background-color, var(--mod-switch-background-color, var(--spectrum-switch-background-color))); + + &::before { + background-color: var(--highcontrast-switch-handle-background-color, var(--mod-switch-handle-background-color, var(--spectrum-switch-handle-background-color))); + border-color: var(--highcontrast-switch-handle-border-color-default, var(--mod-switch-handle-border-color-default, var(--spectrum-switch-handle-border-color-default))); + } + } } /* stylelint-disable max-nesting-depth */ .spectrum-Switch:hover { - .spectrum-Switch-input { - & + .spectrum-Switch-switch { - &::before { - border-color: var(--highcontrast-switch-handle-border-color-hover, var(--mod-switch-handle-border-color-hover, var(--spectrum-switch-handle-border-color-hover))); - box-shadow: none; - } - } - - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-hover, var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))); - } - - /* selected, not emphasized */ - &:checked:enabled + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-hover, var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover))); - - &::before { - border-color: var(--highcontrast-switch-handle-border-color-selected-hover, var(--mod-switch-handle-border-color-selected-hover, var(--spectrum-switch-handle-border-color-selected-hover))); - } - } - - &:disabled, - &[disabled] { - & + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))); - - &::before { - border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); - } - } - - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); - } - - /* disabled + selected, not emphasized */ - &:checked { - & + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))); - - &::before { - border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); - } - } - - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); - } - } - } - } + .spectrum-Switch-input { + & + .spectrum-Switch-switch { + &::before { + border-color: var(--highcontrast-switch-handle-border-color-hover, var(--mod-switch-handle-border-color-hover, var(--spectrum-switch-handle-border-color-hover))); + box-shadow: none; + } + } + + & ~ .spectrum-Switch-label { + color: var(--highcontrast-switch-label-color-hover, var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))); + } + + /* selected, not emphasized */ + &:checked:enabled + .spectrum-Switch-switch { + background-color: var(--highcontrast-switch-background-color-selected-hover, var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover))); + + &::before { + border-color: var(--highcontrast-switch-handle-border-color-selected-hover, var(--mod-switch-handle-border-color-selected-hover, var(--spectrum-switch-handle-border-color-selected-hover))); + } + } + + &:disabled, + &[disabled] { + & + .spectrum-Switch-switch { + background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))); + + &::before { + border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); + } + } + + & ~ .spectrum-Switch-label { + color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); + } + + /* disabled + selected, not emphasized */ + &:checked { + & + .spectrum-Switch-switch { + background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))); + + &::before { + border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); + } + } + + & ~ .spectrum-Switch-label { + color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); + } + } + } + } } .spectrum-Switch:active { - .spectrum-Switch-input { - & + .spectrum-Switch-switch { - &::before { - border-color: var(--highcontrast-switch-handle-border-color-down, var(--mod-switch-handle-border-color-down, var(--spectrum-switch-handle-border-color-down))); - } - } - - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))); - } - - /* selected, not emphasized */ - &:checked:enabled + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-down, var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))); - - &::before { - border-color: var(--highcontrast-switch-handle-border-color-selected-down, var(--mod-switch-handle-border-color-selected-down, var(--spectrum-switch-handle-border-color-selected-down))); - } - } - } + .spectrum-Switch-input { + & + .spectrum-Switch-switch { + &::before { + border-color: var(--highcontrast-switch-handle-border-color-down, var(--mod-switch-handle-border-color-down, var(--spectrum-switch-handle-border-color-down))); + } + } + + & ~ .spectrum-Switch-label { + color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))); + } + + /* selected, not emphasized */ + &:checked:enabled + .spectrum-Switch-switch { + background-color: var(--highcontrast-switch-background-color-selected-down, var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))); + + &::before { + border-color: var(--highcontrast-switch-handle-border-color-selected-down, var(--mod-switch-handle-border-color-selected-down, var(--spectrum-switch-handle-border-color-selected-down))); + } + } + } } /* key focus */ @@ -326,167 +329,164 @@ governing permissions and limitations under the License. /* :before is used for the handle of the switch */ .spectrum-Switch, .spectrum-Switch:hover { - .spectrum-Switch-input:focus-visible { - & + .spectrum-Switch-switch { - &::after { - box-shadow: - 0 0 0 - var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) - var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))); - } - - &::before { - border-color: var(--highcontrast-switch-handle-border-color-focus, var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus))); - } - } - - /* selected, not emphasized key focus */ - &:checked { - & + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))); - - &::before { - border-color: var(--highcontrast-switch-handle-border-color-selected-focus, var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus))); - } - } - } - - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))); - } - } + .spectrum-Switch-input:focus-visible { + & + .spectrum-Switch-switch { + &::after { + box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))); + } + + &::before { + border-color: var(--highcontrast-switch-handle-border-color-focus, var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus))); + } + } + + /* selected, not emphasized key focus */ + &:checked { + & + .spectrum-Switch-switch { + background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))); + + &::before { + border-color: var(--highcontrast-switch-handle-border-color-selected-focus, var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus))); + } + } + } + + & ~ .spectrum-Switch-label { + color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))); + } + } } /* stylelint-enable max-nesting-depth */ /* when checked, after transition or set manually */ .spectrum-Switch-input { - /* selected, not emphasized */ - &:checked + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-default, var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default))); - - &::before { - border-color: var(--highcontrast-switch-handle-border-color-selected-default, var(--mod-switch-handle-border-color-selected-default, var(--spectrum-switch-handle-border-color-selected-default))); - } - } + /* selected, not emphasized */ + &:checked + .spectrum-Switch-switch { + background-color: var(--highcontrast-switch-background-color-selected-default, var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default))); + + &::before { + border-color: var(--highcontrast-switch-handle-border-color-selected-default, var(--mod-switch-handle-border-color-selected-default, var(--spectrum-switch-handle-border-color-selected-default))); + } + } } /* disabled */ .spectrum-Switch-input:disabled, .spectrum-Switch-input[disabled] { - & + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))); - - &::before { - border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); - } - } - - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); - } - - /* disabled + selected, not emphasized */ - &:checked + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))); - - &::before { - border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); - } - } - - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); - } + & + .spectrum-Switch-switch { + background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))); + + &::before { + border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); + } + } + + & ~ .spectrum-Switch-label { + color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); + } + + /* disabled + selected, not emphasized */ + &:checked + .spectrum-Switch-switch { + background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))); + + &::before { + border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); + } + } + + & ~ .spectrum-Switch-label { + color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); + } } /* high contrast mode */ @media (forced-colors: active) { - .spectrum-Switch { - forced-color-adjust: none; - - --highcontrast-switch-label-color-default: ButtonText; - --highcontrast-switch-label-color-hover: ButtonText; - --highcontrast-switch-label-color-down: ButtonText; - --highcontrast-switch-label-color-focus: ButtonText; - --highcontrast-switch-label-color-disabled: GrayText; - - --highcontrast-switch-handle-background-color: ButtonFace; - - --highcontrast-switch-handle-border-color-default: ButtonText; - --highcontrast-switch-handle-border-color-hover: Highlight; - --highcontrast-switch-handle-border-color-down: Highlight; - --highcontrast-switch-handle-border-color-focus: Highlight; - --highcontrast-switch-handle-border-color-disabled: Highlight; - - --highcontrast-switch-handle-border-color-selected-default: Highlight; - --highcontrast-switch-handle-border-color-selected-hover: Highlight; - --highcontrast-switch-handle-border-color-selected-down: Highlight; - --highcontrast-switch-handle-border-color-selected-focus: Highlight; - - --highcontrast-switch-background-color: ButtonFace; - --highcontrast-switch-background-color-selected-default: Highlight; - --highcontrast-switch-background-color-selected-hover: Highlight; - --highcontrast-switch-background-color-selected-down: Highlight; - --highcontrast-switch-background-color-selected-focus: Highlight; - --highcontrast-switch-background-color-selected-disabled: Highlight; - - --highcontrast-switch-focus-indicator-color: ButtonText; - - .spectrum-Switch-input { - &:not(:checked)+.spectrum-Switch-switch { - box-shadow: inset 0 0 0 1px ButtonText; - } - } - - /* stylelint-disable max-nesting-depth */ - &:hover .spectrum-Switch-input { - &:not(:checked) + .spectrum-Switch-switch { - box-shadow: inset 0 0 0 1px Highlight; - } - - &:disabled, - &[disabled] { - &:checked + .spectrum-Switch-switch { - box-shadow: inset 0 0 0 1px GrayText; - background-color: GrayText; - - &::before { - border-color: GrayText; - background-color: ButtonFace; - } - } - } - } - - /* over-writes for disabled button */ - .spectrum-Switch-input { - &:disabled, - &[disabled] { - &:not(:checked) + .spectrum-Switch-switch { - box-shadow: inset 0 0 0 1px GrayText; - background-color: ButtonFace; - - &::before { - border-color: GrayText; - background-color: ButtonFace; - } - } - - &:checked + .spectrum-Switch-switch { - box-shadow: inset 0 0 0 1px GrayText; - background-color: GrayText; - - &::before { - border-color: GrayText; - background-color: ButtonFace; - } - } - - & ~ .spectrum-Switch-label { - color: GrayText; - } - } - } - /* stylelint-enable max-nesting-depth */ - } + .spectrum-Switch { + forced-color-adjust: none; + + --highcontrast-switch-label-color-default: ButtonText; + --highcontrast-switch-label-color-hover: ButtonText; + --highcontrast-switch-label-color-down: ButtonText; + --highcontrast-switch-label-color-focus: ButtonText; + --highcontrast-switch-label-color-disabled: GrayText; + + --highcontrast-switch-handle-background-color: ButtonFace; + + --highcontrast-switch-handle-border-color-default: ButtonText; + --highcontrast-switch-handle-border-color-hover: Highlight; + --highcontrast-switch-handle-border-color-down: Highlight; + --highcontrast-switch-handle-border-color-focus: Highlight; + --highcontrast-switch-handle-border-color-disabled: Highlight; + + --highcontrast-switch-handle-border-color-selected-default: Highlight; + --highcontrast-switch-handle-border-color-selected-hover: Highlight; + --highcontrast-switch-handle-border-color-selected-down: Highlight; + --highcontrast-switch-handle-border-color-selected-focus: Highlight; + + --highcontrast-switch-background-color: ButtonFace; + --highcontrast-switch-background-color-selected-default: Highlight; + --highcontrast-switch-background-color-selected-hover: Highlight; + --highcontrast-switch-background-color-selected-down: Highlight; + --highcontrast-switch-background-color-selected-focus: Highlight; + --highcontrast-switch-background-color-selected-disabled: Highlight; + + --highcontrast-switch-focus-indicator-color: ButtonText; + + .spectrum-Switch-input { + &:not(:checked) + .spectrum-Switch-switch { + box-shadow: inset 0 0 0 1px ButtonText; + } + } + + /* stylelint-disable max-nesting-depth */ + &:hover .spectrum-Switch-input { + &:not(:checked) + .spectrum-Switch-switch { + box-shadow: inset 0 0 0 1px Highlight; + } + + &:disabled, + &[disabled] { + &:checked + .spectrum-Switch-switch { + box-shadow: inset 0 0 0 1px GrayText; + background-color: GrayText; + + &::before { + border-color: GrayText; + background-color: ButtonFace; + } + } + } + } + + /* over-writes for disabled button */ + .spectrum-Switch-input { + &:disabled, + &[disabled] { + &:not(:checked) + .spectrum-Switch-switch { + box-shadow: inset 0 0 0 1px GrayText; + background-color: ButtonFace; + + &::before { + border-color: GrayText; + background-color: ButtonFace; + } + } + + &:checked + .spectrum-Switch-switch { + box-shadow: inset 0 0 0 1px GrayText; + background-color: GrayText; + + &::before { + border-color: GrayText; + background-color: ButtonFace; + } + } + + & ~ .spectrum-Switch-label { + color: GrayText; + } + } + } + /* stylelint-enable max-nesting-depth */ + } } diff --git a/components/switch/themes/express.css b/components/switch/themes/express.css index 24bcac6117..25629db7dd 100644 --- a/components/switch/themes/express.css +++ b/components/switch/themes/express.css @@ -13,15 +13,15 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Switch { - --spectrum-switch-handle-border-color-default: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-900); + .spectrum-Switch { + --spectrum-switch-handle-border-color-default: var(--spectrum-gray-800); + --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-900); + --spectrum-switch-handle-border-color-down: var(--spectrum-gray-900); + --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-900); - } + --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-800); + --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-900); + --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-900); + } } diff --git a/components/switch/themes/spectrum.css b/components/switch/themes/spectrum.css index 30120df245..d533f85fe0 100644 --- a/components/switch/themes/spectrum.css +++ b/components/switch/themes/spectrum.css @@ -11,15 +11,15 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Switch { - --spectrum-switch-handle-border-color-default: var(--spectrum-gray-600); - --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700); - --spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700); + .spectrum-Switch { + --spectrum-switch-handle-border-color-default: var(--spectrum-gray-600); + --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700); + --spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); + --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700); - --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700); - --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); - } + --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700); + --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); + --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); + } } diff --git a/components/table/index.css b/components/table/index.css index 09f92a6b11..3977f926ac 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -11,105 +11,105 @@ governing permissions and limitations under the License. */ .spectrum-Table { - /* Size and Spacing */ - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium); + /* Size and Spacing */ + --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium); + --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium); - --spectrum-table-min-header-height: var(--spectrum-component-height-100); - --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-regular); + --spectrum-table-min-header-height: var(--spectrum-component-height-100); + --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-regular); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-regular); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-regular); - --spectrum-table-cell-inline-space: var(--spectrum-table-edge-to-content); + --spectrum-table-cell-inline-space: var(--spectrum-table-edge-to-content); - --spectrum-table-border-radius: var(--spectrum-corner-radius-100); - --spectrum-table-border-width: var(--spectrum-table-border-divider-width); - --spectrum-table-outer-border-inline-width: var(--spectrum-table-border-divider-width); + --spectrum-table-border-radius: var(--spectrum-corner-radius-100); + --spectrum-table-border-width: var(--spectrum-table-border-divider-width); + --spectrum-table-outer-border-inline-width: var(--spectrum-table-border-divider-width); - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); - --spectrum-table-default-vertical-align: top; - --spectrum-table-header-vertical-align: middle; + --spectrum-table-default-vertical-align: top; + --spectrum-table-header-vertical-align: middle; - /* Typography */ - --spectrum-table-header-font-weight: var(--spectrum-bold-font-weight); + /* Typography */ + --spectrum-table-header-font-weight: var(--spectrum-bold-font-weight); - --spectrum-table-row-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-table-row-font-weight: var(--spectrum-regular-font-weight); - --spectrum-table-row-font-style: var(--spectrum-default-font-style); - --spectrum-table-row-font-size: var(--spectrum-font-size-100); - --spectrum-table-row-line-height: var(--spectrum-line-height-100); + --spectrum-table-row-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-table-row-font-weight: var(--spectrum-regular-font-weight); + --spectrum-table-row-font-style: var(--spectrum-default-font-style); + --spectrum-table-row-font-size: var(--spectrum-font-size-100); + --spectrum-table-row-line-height: var(--spectrum-line-height-100); - /* General Colors */ - --spectrum-table-border-color: var(--spectrum-gray-300); - --spectrum-table-divider-color: var(--spectrum-gray-300); + /* General Colors */ + --spectrum-table-border-color: var(--spectrum-gray-300); + --spectrum-table-divider-color: var(--spectrum-gray-300); - --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); - --spectrum-table-header-text-color: var(--spectrum-body-color); + --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); + --spectrum-table-header-text-color: var(--spectrum-body-color); - --spectrum-table-row-background-color: var(--spectrum-gray-50); - --spectrum-table-row-text-color: var(--spectrum-neutral-content-color-default); + --spectrum-table-row-background-color: var(--spectrum-gray-50); + --spectrum-table-row-text-color: var(--spectrum-neutral-content-color-default); - /* ----- * + /* ----- * @todo Refactor or remove these properties once the RGB stripped value is available. */ - --spectrum-table-selected-row-background-color: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity)); - --spectrum-table-selected-row-background-color-non-emphasized: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized)); - --spectrum-table-row-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity)); + --spectrum-table-selected-row-background-color: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity)); + --spectrum-table-selected-row-background-color-non-emphasized: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized)); + --spectrum-table-row-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity)); - --spectrum-table-row-active-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity)); - --spectrum-table-selected-row-background-color-focus: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity-hover)); - --spectrum-table-selected-row-background-color-non-emphasized-focus: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover)); + --spectrum-table-row-active-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity)); + --spectrum-table-selected-row-background-color-focus: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity-hover)); + --spectrum-table-selected-row-background-color-non-emphasized-focus: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover)); - /* ----- */ + /* ----- */ - --spectrum-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus); - --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover); - --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus); + --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover); + --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular); + /* Row Selection */ + --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular); - --spectrum-table-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-table-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-table-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-table-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-table-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); - --spectrum-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + --spectrum-table-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); + --spectrum-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); - --spectrum-table-transition-duration: var(--spectrum-animation-duration-100); + --spectrum-table-transition-duration: var(--spectrum-animation-duration-100); - /* Summary Row and Section Header Row */ - --spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight); - --spectrum-table-summary-row-background-color: var(--spectrum-gray-200); + /* Summary Row and Section Header Row */ + --spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight); + --spectrum-table-summary-row-background-color: var(--spectrum-gray-200); - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100); + --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium); + --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100); + --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100); - --spectrum-table-section-header-font-weight: var(--spectrum-bold-font-weight); - --spectrum-table-section-header-background-color: var(--spectrum-gray-200); + --spectrum-table-section-header-font-weight: var(--spectrum-bold-font-weight); + --spectrum-table-section-header-background-color: var(--spectrum-gray-200); - /* Collapsible and Thumbnails */ - --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300); - --spectrum-table-collapsible-disclosure-inline-spacing: 0px; - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100); - --spectrum-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100); + /* Collapsible and Thumbnails */ + --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300); + --spectrum-table-collapsible-disclosure-inline-spacing: 0px; + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100); + --spectrum-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341 + /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341 and for modifying emphasized/non-emphasized background colors from the root element. */ - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color))); - --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized))); - --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-non-emphasized-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus))); + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color))); + --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized))); + --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-non-emphasized-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus))); - /* Passthrough for nested component(s) */ - --mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)); + /* Passthrough for nested component(s) */ + --mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)); &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); @@ -118,402 +118,402 @@ governing permissions and limitations under the License. /********* T-SHIRT SIZES (Regular Density) *********/ .spectrum-Table--sizeS { - /* Size and Spacing */ - --spectrum-table-min-header-height: var(--spectrum-component-height-100); - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-small); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-small); + /* Size and Spacing */ + --spectrum-table-min-header-height: var(--spectrum-component-height-100); + --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-small); + --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-small); - --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-regular); + --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-regular); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-regular); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-regular); - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); - /* Typography */ - --spectrum-table-row-font-size: var(--spectrum-font-size-75); + /* Typography */ + --spectrum-table-row-font-size: var(--spectrum-font-size-75); - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-small); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-regular); + /* Row Selection */ + --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-small); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-regular); - /* Summary Row and Section Header Row */ - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-small); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-75); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-75); + /* Summary Row and Section Header Row */ + --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-small); + --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-75); + --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-75); - /* Collapsible and Thumbnails */ - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-75); + /* Collapsible and Thumbnails */ + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-75); - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-regular); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200); + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-regular); + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200); } .spectrum-Table--sizeL { - /* Size and Spacing */ - --spectrum-table-min-header-height: var(--spectrum-component-height-200); - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-large); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-large); + /* Size and Spacing */ + --spectrum-table-min-header-height: var(--spectrum-component-height-200); + --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-large); + --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-large); - --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-regular); + --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-regular); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-regular); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-regular); - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-200); + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-200); - /* Typography */ - --spectrum-table-row-font-size: var(--spectrum-font-size-200); + /* Typography */ + --spectrum-table-row-font-size: var(--spectrum-font-size-200); - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-large); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-regular); + /* Row Selection */ + --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-large); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-regular); - /* Summary Row and Section Header Row */ - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-large); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-200); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-200); + /* Summary Row and Section Header Row */ + --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-large); + --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-200); + --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-200); - /* Collapsible and Thumbnails */ - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-200); + /* Collapsible and Thumbnails */ + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-200); - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-regular); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-200); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500); + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-regular); + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-200); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500); } .spectrum-Table--sizeXL { - /* Size and Spacing */ - --spectrum-table-min-header-height: var(--spectrum-component-height-300); - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-extra-large); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-extra-large); + /* Size and Spacing */ + --spectrum-table-min-header-height: var(--spectrum-component-height-300); + --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-extra-large); + --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-extra-large); - --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-regular); + --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-regular); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-regular); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-regular); - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-300); + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-300); - /* Typography */ - --spectrum-table-row-font-size: var(--spectrum-font-size-300); + /* Typography */ + --spectrum-table-row-font-size: var(--spectrum-font-size-300); - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-extra-large); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-regular); + /* Row Selection */ + --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-extra-large); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-regular); - /* Summary Row and Section Header Row */ - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-extra-large); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-300); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-300); + /* Summary Row and Section Header Row */ + --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-extra-large); + --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-300); + --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-300); - /* Collapsible and Thumbnails */ - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-300); + /* Collapsible and Thumbnails */ + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-300); - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-regular); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-300); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700); + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-regular); + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-300); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700); } /********* VARIANTS *********/ .spectrum-Table--compact { - /* Size and Spacing */ - --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-medium-compact)); - --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-medium-compact)); - --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-medium-compact)); - - /* Row Selection */ - --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-medium-compact)); - - /* Collapsible and Thumbnails */ - --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-medium-compact)); - --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-200)); - - &.spectrum-Table--sizeS { - /* Size and Spacing */ - --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-small-compact)); - --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-small-compact)); - --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-small-compact)); - - /* Row Selection */ - --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-small-compact)); - - /* Collapsible and Thumbnails */ - --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-small-compact)); - --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-50)); - } - - &.spectrum-Table--sizeL { - /* Size and Spacing */ - --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-large-compact)); - --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-large-compact)); - --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-large-compact)); - - /* Row Selection */ - --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-large-compact)); - - /* Collapsible and Thumbnails */ - --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-large-compact)); - --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-300)); - } - - &.spectrum-Table--sizeXL { - /* Size and Spacing */ - --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-extra-large-compact)); - --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-extra-large-compact)); - --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-extra-large-compact)); - - /* Row Selection */ - --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-extra-large-compact)); - - /* Collapsible and Thumbnails */ - --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact)); - --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-500)); - } + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-medium-compact)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-medium-compact)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-medium-compact)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-medium-compact)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-medium-compact)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-200)); + + &.spectrum-Table--sizeS { + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-small-compact)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-small-compact)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-small-compact)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-small-compact)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-small-compact)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-50)); + } + + &.spectrum-Table--sizeL { + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-large-compact)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-large-compact)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-large-compact)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-large-compact)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-large-compact)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-300)); + } + + &.spectrum-Table--sizeXL { + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-extra-large-compact)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-extra-large-compact)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-extra-large-compact)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-extra-large-compact)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-500)); + } } .spectrum-Table--spacious { - /* Size and Spacing */ - --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-medium-spacious)); - --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-medium-spacious)); - --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-medium-spacious)); - - /* Row Selection */ - --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious)); - - /* Collapsible and Thumbnails */ - --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious)); - --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-500)); - - &.spectrum-Table--sizeS { - /* Size and Spacing */ - --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-small-spacious)); - --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-small-spacious)); - --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-small-spacious)); - - /* Row Selection */ - --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-small-spacious)); - - /* Collapsible and Thumbnails */ - --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-small-spacious)); - --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-300)); - } - - &.spectrum-Table--sizeL { - /* Size and Spacing */ - --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-large-spacious)); - --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-large-spacious)); - --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-large-spacious)); - - /* Row Selection */ - --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-large-spacious)); - - /* Collapsible and Thumbnails */ - --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-large-spacious)); - --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-700)); - } - - &.spectrum-Table--sizeXL { - /* Size and Spacing */ - --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-extra-large-spacious)); - --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-extra-large-spacious)); - --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-extra-large-spacious)); - - /* Row Selection */ - --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-extra-large-spacious)); - - /* Collapsible and Thumbnails */ - --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious)); - --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-800)); - } + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-medium-spacious)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-medium-spacious)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-medium-spacious)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-500)); + + &.spectrum-Table--sizeS { + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-small-spacious)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-small-spacious)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-small-spacious)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-small-spacious)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-small-spacious)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-300)); + } + + &.spectrum-Table--sizeL { + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-large-spacious)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-large-spacious)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-large-spacious)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-large-spacious)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-large-spacious)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-700)); + } + + &.spectrum-Table--sizeXL { + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-extra-large-spacious)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-extra-large-spacious)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-extra-large-spacious)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-extra-large-spacious)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-800)); + } } .spectrum-Table--emphasized { - --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color))); - --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-focus))); + --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color))); + --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-focus))); } .spectrum-Table--quiet { - --mod-table-border-radius: var(--mod-table-border-radius--quiet, 0px); - --mod-table-outer-border-inline-width: var(--mod-table-outer-border-inline-width--quiet, 0px); - --mod-table-header-background-color: var(--mod-table-header-background-color--quiet, var(--spectrum-transparent-white-100)); - --mod-table-row-background-color: var(--mod-table-row-background-color--quiet , var(--spectrum-transparent-white-100)); + --mod-table-border-radius: var(--mod-table-border-radius--quiet, 0px); + --mod-table-outer-border-inline-width: var(--mod-table-outer-border-inline-width--quiet, 0px); + --mod-table-header-background-color: var(--mod-table-header-background-color--quiet, var(--spectrum-transparent-white-100)); + --mod-table-row-background-color: var(--mod-table-row-background-color--quiet, var(--spectrum-transparent-white-100)); } /********* HIGH CONTRAST *********/ @media (forced-colors: active) { - .spectrum-Table { - --highcontrast-table-row-background-color: Canvas; - --highcontrast-table-row-text-color: CanvasText; - --highcontrast-table-divider-color: CanvasText; - --highcontrast-table-border-color: CanvasText; - --highcontrast-table-icon-color: CanvasText; - --highcontrast-table-icon-color-focus: Highlight; - - --highcontrast-table-selected-row-background-color: Highlight; - --highcontrast-table-selected-row-text-color: HighlightText; - --highcontrast-table-selected-row-text-color-default: HighlightText; - - @supports (color: SelectedItem) { - --highcontrast-table-selected-row-background-color: SelectedItem; - --highcontrast-table-selected-row-text-color: SelectedItemText; - --highcontrast-table-selected-row-text-color-default: SelectedItemText; - } - - --highcontrast-table-selected-row-background-color-focus: Highlight; - --highcontrast-table-selected-row-text-color-focus: HighlightText; - --highcontrast-table-row-background-color-hover: Highlight; - --highcontrast-table-row-text-color-hover: HighlightText; - - --highcontrast-table-section-header-text-color: Canvas; - --highcontrast-table-section-header-background-color: CanvasText; - - --highcontrast-table-focus-indicator-color: Highlight; - --highcontrast-table-transition-duration: 0; - } - - .spectrum-Table-cell { - /* Removes unstylable readability backplate. */ - forced-color-adjust: none; - } - - .spectrum-Table-row { - &:hover, - &:focus-visible, - &.is-focused { - .spectrum-Table-checkbox .spectrum-Checkbox-box::before { - outline: var(--highcontrast-table-row-text-color-hover) 1px solid; - } - } - } - - .spectrum-Table-row.is-selected, - .spectrum-Table-row.is-drop-target, - .spectrum-Table-body.is-drop-target .spectrum-Table-row { - /* Ensure negative offset outline contrasts on top of SelectedItem background. */ - --highcontrast-table-cell-focus-indicator-color: var(--highcontrast-table-selected-row-text-color); - --highcontrast-table-cell-focus-extra-offset: 1px; - - .spectrum-Table-checkbox .spectrum-Checkbox-box::before { - outline: var(--highcontrast-table-selected-row-text-color) 1px solid; - } - } + .spectrum-Table { + --highcontrast-table-row-background-color: Canvas; + --highcontrast-table-row-text-color: CanvasText; + --highcontrast-table-divider-color: CanvasText; + --highcontrast-table-border-color: CanvasText; + --highcontrast-table-icon-color: CanvasText; + --highcontrast-table-icon-color-focus: Highlight; + + --highcontrast-table-selected-row-background-color: Highlight; + --highcontrast-table-selected-row-text-color: HighlightText; + --highcontrast-table-selected-row-text-color-default: HighlightText; + + @supports (color: SelectedItem) { + --highcontrast-table-selected-row-background-color: SelectedItem; + --highcontrast-table-selected-row-text-color: SelectedItemText; + --highcontrast-table-selected-row-text-color-default: SelectedItemText; + } + + --highcontrast-table-selected-row-background-color-focus: Highlight; + --highcontrast-table-selected-row-text-color-focus: HighlightText; + --highcontrast-table-row-background-color-hover: Highlight; + --highcontrast-table-row-text-color-hover: HighlightText; + + --highcontrast-table-section-header-text-color: Canvas; + --highcontrast-table-section-header-background-color: CanvasText; + + --highcontrast-table-focus-indicator-color: Highlight; + --highcontrast-table-transition-duration: 0; + } + + .spectrum-Table-cell { + /* Removes unstylable readability backplate. */ + forced-color-adjust: none; + } + + .spectrum-Table-row { + &:hover, + &:focus-visible, + &.is-focused { + .spectrum-Table-checkbox .spectrum-Checkbox-box::before { + outline: var(--highcontrast-table-row-text-color-hover) 1px solid; + } + } + } + + .spectrum-Table-row.is-selected, + .spectrum-Table-row.is-drop-target, + .spectrum-Table-body.is-drop-target .spectrum-Table-row { + /* Ensure negative offset outline contrasts on top of SelectedItem background. */ + --highcontrast-table-cell-focus-indicator-color: var(--highcontrast-table-selected-row-text-color); + --highcontrast-table-cell-focus-extra-offset: 1px; + + .spectrum-Table-checkbox .spectrum-Checkbox-box::before { + outline: var(--highcontrast-table-selected-row-text-color) 1px solid; + } + } } /********* REGULAR / DEFAULT *********/ .spectrum-Table:not(.spectrum-Table-scroller), .spectrum-Table-main { - border-collapse: separate; - border-spacing: 0; + border-collapse: separate; + border-spacing: 0; } .spectrum-Table-sortedIcon { - display: none; - vertical-align: baseline; - margin-inline-start: var(--mod-table-sort-icon-inline-start-spacing, 0); - margin-inline-end: var(--mod-table-sort-icon-inline-end-spacing, var(--mod-table-icon-to-text, var(--spectrum-table-icon-to-text))); - transition: transform var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; + display: none; + vertical-align: baseline; + margin-inline-start: var(--mod-table-sort-icon-inline-start-spacing, 0); + margin-inline-end: var(--mod-table-sort-icon-inline-end-spacing, var(--mod-table-icon-to-text, var(--spectrum-table-icon-to-text))); + transition: transform var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; } .spectrum-Table-menuIcon { - vertical-align: middle; - margin-inline-start: var(--mod-table-icon-to-text, var(--spectrum-table-icon-to-text)); + vertical-align: middle; + margin-inline-start: var(--mod-table-icon-to-text, var(--spectrum-table-icon-to-text)); } .spectrum-Table-headCell { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default))); - - box-sizing: border-box; - text-align: start; - vertical-align: var(--mod-table-header-vertical-align, var(--spectrum-table-header-vertical-align)); - - font-family: var(--mod-table-header-font-family, var(--spectrum-table-row-font-family)); - font-size: var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)); - font-weight: var(--mod-table-header-font-weight, var(--spectrum-table-header-font-weight)); - line-height: var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)); - text-transform: var(--mod-table-header-text-transform, none); - - /* block-size functions as min-block-size when using display table-cell. */ - block-size: var(--mod-table-min-header-height, var(--spectrum-table-min-header-height)); - - padding-block: var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)); - padding-inline: var(--mod-table-cell-inline-space, var(--spectrum-table-cell-inline-space)); - - color: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color)); - background-color: var(--mod-table-header-background-color, var(--spectrum-table-header-background-color)); - - border-radius: 0; - transition: color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; - cursor: var(--mod-table-cursor-header-default, initial); - outline: 0; - - .spectrum-Table-sortedIcon, - .spectrum-Table-menuIcon { - color: var(--spectrum-table-icon-color); - } - - &.is-sortable { - cursor: var(--mod-table-cursor-header-sortable, pointer); - - &:hover { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-hover, var(--spectrum-table-icon-color-hover))); - } - - &:active { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-active, var(--spectrum-table-icon-color-active))); - } - - &:focus { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-focus, var(--spectrum-table-icon-color-focus))); - } - - &:focus:hover { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-focus-hover))); - } - - &:focus-visible, - &.is-keyboardFocused { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus))); - } - } - - &.is-sorted-asc, - &.is-sorted-desc { - .spectrum-Table-sortedIcon { - display: inline-block; - } - } - - &.is-sorted-asc { - .spectrum-Table-sortedIcon { - transform: rotateZ(-90deg); - } - } + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default))); + + box-sizing: border-box; + text-align: start; + vertical-align: var(--mod-table-header-vertical-align, var(--spectrum-table-header-vertical-align)); + + font-family: var(--mod-table-header-font-family, var(--spectrum-table-row-font-family)); + font-size: var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)); + font-weight: var(--mod-table-header-font-weight, var(--spectrum-table-header-font-weight)); + line-height: var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)); + text-transform: var(--mod-table-header-text-transform, none); + + /* block-size functions as min-block-size when using display table-cell. */ + block-size: var(--mod-table-min-header-height, var(--spectrum-table-min-header-height)); + + padding-block: var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)); + padding-inline: var(--mod-table-cell-inline-space, var(--spectrum-table-cell-inline-space)); + + color: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color)); + background-color: var(--mod-table-header-background-color, var(--spectrum-table-header-background-color)); + + border-radius: 0; + transition: color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; + cursor: var(--mod-table-cursor-header-default, initial); + outline: 0; + + .spectrum-Table-sortedIcon, + .spectrum-Table-menuIcon { + color: var(--spectrum-table-icon-color); + } + + &.is-sortable { + cursor: var(--mod-table-cursor-header-sortable, pointer); + + &:hover { + --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-hover, var(--spectrum-table-icon-color-hover))); + } + + &:active { + --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-active, var(--spectrum-table-icon-color-active))); + } + + &:focus { + --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-focus, var(--spectrum-table-icon-color-focus))); + } + + &:focus:hover { + --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-focus-hover))); + } + + &:focus-visible, + &.is-keyboardFocused { + --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus))); + } + } + + &.is-sorted-asc, + &.is-sorted-desc { + .spectrum-Table-sortedIcon { + display: inline-block; + } + } + + &.is-sorted-asc { + .spectrum-Table-sortedIcon { + transform: rotateZ(-90deg); + } + } } .spectrum-Table-columnTitle { - display: inline-block; + display: inline-block; } .spectrum-Table-cell--alignCenter { - text-align: center; + text-align: center; } .spectrum-Table-cell--alignRight { - text-align: end; + text-align: end; } .spectrum-Table-body { - position: relative; - border: none; - border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - - &.is-drop-target { - outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); - outline-style: solid; - outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); - - /* Make sure negative offset outline is not covered by borders. */ - --mod-table-border-color: transparent; - } + position: relative; + border: none; + border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + + &.is-drop-target { + outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); + outline-style: solid; + outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); + + /* Make sure negative offset outline is not covered by borders. */ + --mod-table-border-color: transparent; + } } /* Outside border, row divider lines, and rounded corners: @@ -522,530 +522,467 @@ governing permissions and limitations under the License. /* Row divider lines */ .spectrum-Table-cell { - border-block-start: - var(--mod-table-border-width, var(--spectrum-table-border-width)) - solid - var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); + border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); } /* Outside border */ .spectrum-Table-body .spectrum-Table-row { - &:first-child .spectrum-Table-cell { - border-block-start: - var(--mod-table-border-width, var(--spectrum-table-border-width)) - solid - var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); - } - - &:last-child .spectrum-Table-cell { - border-block-end: - var(--mod-table-border-width, var(--spectrum-table-border-width)) - solid - var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); - } - - .spectrum-Table-cell:first-child { - border-inline-start: - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) - solid - var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); - } - - .spectrum-Table-cell:last-child { - border-inline-end: - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) - solid - var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); - } + &:first-child .spectrum-Table-cell { + border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + } + + &:last-child .spectrum-Table-cell { + border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + } + + .spectrum-Table-cell:first-child { + border-inline-start: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + } + + .spectrum-Table-cell:last-child { + border-inline-end: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + } } /* Rounded corners */ .spectrum-Table-row { - &:first-child .spectrum-Table-cell:first-child { - border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - } + &:first-child .spectrum-Table-cell:first-child { + border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + } - &:first-child .spectrum-Table-cell:last-child { - border-start-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - } + &:first-child .spectrum-Table-cell:last-child { + border-start-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + } - &:last-child .spectrum-Table-cell:first-child { - border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - } + &:last-child .spectrum-Table-cell:first-child { + border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + } - &:last-child .spectrum-Table-cell:last-child { - border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - } + &:last-child .spectrum-Table-cell:last-child { + border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + } } /* Cells within table body */ .spectrum-Table-cell { - box-sizing: border-box; - font-size: var(--mod-table-row-font-size, var(--spectrum-table-row-font-size)); - font-weight: var(--mod-table-row-font-weight, var(--spectrum-table-row-font-weight)); - line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)); - vertical-align: var(--mod-table-default-vertical-align, var(--spectrum-table-default-vertical-align)); - color: var(--highcontrast-table-row-text-color, var(--mod-table-row-text-color, var(--spectrum-table-row-text-color))); - background-color: var(--spectrum-table-cell-background-color); - - /* block-size functions as min-block-size when using display table-cell. */ - block-size: var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)); - - padding-block-start: calc( - var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - padding-block-end: var(--mod-table-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text)); - padding-inline: calc( - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) - ); + box-sizing: border-box; + font-size: var(--mod-table-row-font-size, var(--spectrum-table-row-font-size)); + font-weight: var(--mod-table-row-font-weight, var(--spectrum-table-row-font-weight)); + line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)); + vertical-align: var(--mod-table-default-vertical-align, var(--spectrum-table-default-vertical-align)); + color: var(--highcontrast-table-row-text-color, var(--mod-table-row-text-color, var(--spectrum-table-row-text-color))); + background-color: var(--spectrum-table-cell-background-color); + + /* block-size functions as min-block-size when using display table-cell. */ + block-size: var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)); + + padding-block-start: calc(var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); + padding-block-end: var(--mod-table-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text)); + padding-inline: calc(var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width))); } /* Focus Indicator (Ring) */ .spectrum-Table-cell, .spectrum-Table-headCell { - position: relative; - - &:focus-visible, - &.is-focused { - outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); - outline-style: solid; - outline-color: var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))); - outline-offset: calc( - (-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness))) - - var(--highcontrast-table-cell-focus-extra-offset, 0px) - ); - } + position: relative; + + &:focus-visible, + &.is-focused { + outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); + outline-style: solid; + outline-color: var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))); + outline-offset: calc((-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness))) - var(--highcontrast-table-cell-focus-extra-offset, 0px)); + } } /* Cells that display a column divider (vertical border). */ .spectrum-Table-cell--divider { - border-inline-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); + border-inline-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); } /* Rows within table body */ .spectrum-Table-row { - position: relative; - transition: background-color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; - cursor: var(--mod-table-cursor-row-default, pointer); - border-block-start: none; - - &:first-child { - /* Ensure that 'outline' will match the border-radius, when used on rows. */ - border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - border-start-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - } - - &:last-child { - border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - } - - &:focus { - outline: 0; - } - - &:hover, - &:focus-visible, - &.is-focused { - --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover); - --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover); - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover))); - } - - &:active { - --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover); - --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover); - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-active-color, var(--spectrum-table-row-active-color))); - } - - &.is-selected { - --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color); - --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color); - --spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color); - - &:hover, - &:focus-visible, - &.is-focused { - --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color-focus); - --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color-focus); - --spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color-focus); - } - } - - &.is-drop-target, - .spectrum-Table-body.is-drop-target & { - --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color); - --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color); - --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-drop-zone-background-color, var(--spectrum-table-drop-zone-background-color))); - } - - &.is-drop-target { - outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); - outline-style: solid; - outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); - outline-offset: calc(-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness))); - - /* Make sure negative offset outline is not covered by borders. */ - --mod-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent); - - .spectrum-Table-cell { - border-block-start-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); - } - } + position: relative; + transition: background-color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; + cursor: var(--mod-table-cursor-row-default, pointer); + border-block-start: none; + + &:first-child { + /* Ensure that 'outline' will match the border-radius, when used on rows. */ + border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + border-start-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + } + + &:last-child { + border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + } + + &:focus { + outline: 0; + } + + &:hover, + &:focus-visible, + &.is-focused { + --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover); + --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover); + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover))); + } + + &:active { + --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover); + --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover); + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-active-color, var(--spectrum-table-row-active-color))); + } + + &.is-selected { + --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color); + --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color); + --spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color); + + &:hover, + &:focus-visible, + &.is-focused { + --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color-focus); + --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color-focus); + --spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color-focus); + } + } + + &.is-drop-target, + .spectrum-Table-body.is-drop-target & { + --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color); + --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color); + --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-drop-zone-background-color, var(--spectrum-table-drop-zone-background-color))); + } + + &.is-drop-target { + outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); + outline-style: solid; + outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); + outline-offset: calc(-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness))); + + /* Make sure negative offset outline is not covered by borders. */ + --mod-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent); + + .spectrum-Table-cell { + border-block-start-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); + } + } } .spectrum-Table-row--summary { - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color))); - - .spectrum-Table-cell { - font-weight: var(--mod-table-summary-row-font-weight, var(--spectrum-table-summary-row-font-weight)); - - /* Make unique summary row mods available to these default row styles: */ - font-size: var(--mod-table-summary-row-font-size, var(--spectrum-table-row-font-size)); - font-family: var(--mod-table-summary-row-font-family, var(--spectrum-table-row-font-family)); - font-style: var(--mod-table-summary-row-font-style, var(--spectrum-table-row-font-style)); - line-height: var(--mod-table-summary-row-line-height, var(--spectrum-table-row-line-height)); - color: var(--highcontrast-table-row-text-color, var(--mod-table-summary-row-text-color, var(--spectrum-table-row-text-color))); - } + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color))); + + .spectrum-Table-cell { + font-weight: var(--mod-table-summary-row-font-weight, var(--spectrum-table-summary-row-font-weight)); + + /* Make unique summary row mods available to these default row styles: */ + font-size: var(--mod-table-summary-row-font-size, var(--spectrum-table-row-font-size)); + font-family: var(--mod-table-summary-row-font-family, var(--spectrum-table-row-font-family)); + font-style: var(--mod-table-summary-row-font-style, var(--spectrum-table-row-font-style)); + line-height: var(--mod-table-summary-row-line-height, var(--spectrum-table-row-line-height)); + color: var(--highcontrast-table-row-text-color, var(--mod-table-summary-row-text-color, var(--spectrum-table-row-text-color))); + } } .spectrum-Table-row--sectionHeader { - --spectrum-table-cell-background-color: var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))); - cursor: var(--mod-table-cursor-section-header, initial); - - .spectrum-Table-cell { - font-weight: var(--mod-table-section-header-font-weight, var(--spectrum-table-section-header-font-weight)); - text-align: start; - - /* block-size functions as min-block-size when using display table-cell. */ - block-size: var(--mod-table-section-header-min-height, var(--spectrum-table-section-header-min-height)); - - padding-block-start: calc( - var(--mod-table-section-header-block-start-spacing, var(--spectrum-table-section-header-block-start-spacing)) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - padding-block-end: calc( - var(--mod-table-section-header-block-end-spacing, var(--spectrum-table-section-header-block-end-spacing)) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - - /* Make unique section header mods available to these default row styles: */ - font-size: var(--mod-table-section-header-font-size, var(--spectrum-table-row-font-size)); - font-family: var(--mod-table-section-header-font-family, var(--spectrum-table-row-font-family)); - font-style: var(--mod-table-section-header-font-style, var(--spectrum-table-row-font-style)); - line-height: var(--mod-table-section-header-line-height, var(--spectrum-table-row-line-height)); - color: var(--highcontrast-table-section-header-text-color, var(--mod-table-section-header-text-color, var(--spectrum-table-row-text-color))); - } - - &:hover { - --highcontrast-table-row-text-color: var(--highcontrast-table-section-header-text-color); - --spectrum-table-cell-background-color: var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))); - } + --spectrum-table-cell-background-color: var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))); + cursor: var(--mod-table-cursor-section-header, initial); + + .spectrum-Table-cell { + font-weight: var(--mod-table-section-header-font-weight, var(--spectrum-table-section-header-font-weight)); + text-align: start; + + /* block-size functions as min-block-size when using display table-cell. */ + block-size: var(--mod-table-section-header-min-height, var(--spectrum-table-section-header-min-height)); + + padding-block-start: calc(var(--mod-table-section-header-block-start-spacing, var(--spectrum-table-section-header-block-start-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); + padding-block-end: calc(var(--mod-table-section-header-block-end-spacing, var(--spectrum-table-section-header-block-end-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); + + /* Make unique section header mods available to these default row styles: */ + font-size: var(--mod-table-section-header-font-size, var(--spectrum-table-row-font-size)); + font-family: var(--mod-table-section-header-font-family, var(--spectrum-table-row-font-family)); + font-style: var(--mod-table-section-header-font-style, var(--spectrum-table-row-font-style)); + line-height: var(--mod-table-section-header-line-height, var(--spectrum-table-row-line-height)); + color: var(--highcontrast-table-section-header-text-color, var(--mod-table-section-header-text-color, var(--spectrum-table-row-text-color))); + } + + &:hover { + --highcontrast-table-row-text-color: var(--highcontrast-table-section-header-text-color); + --spectrum-table-cell-background-color: var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))); + } } .spectrum-Table-checkboxCell { - /* Prevent width expansion with 100% width table. */ - inline-size: var(--spectrum-checkbox-control-size-small); + /* Prevent width expansion with 100% width table. */ + inline-size: var(--spectrum-checkbox-control-size-small); - /* The calc subtraction is because the --spectrum-table-checkbox-to-text spacing value + /* The calc subtraction is because the --spectrum-table-checkbox-to-text spacing value includes the inline start padding in the adjacent cell. */ - padding-inline-end: calc( - var(--mod-table-checkbox-to-text, var(--spectrum-table-checkbox-to-text)) - - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - ); - - /* Block spacing must be moved to calculated margin on the checkbox element. */ - padding-block: 0; - - .spectrum-Table-checkbox { - --mod-checkbox-spacing: 0px; - min-block-size: initial; - } - - &.spectrum-Table-cell .spectrum-Table-checkbox { - margin-block-start: calc( - var(--mod-table-row-checkbox-block-spacing, var(--spectrum-table-row-checkbox-block-spacing)) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - margin-block-end: var(--mod-table-row-checkbox-block-spacing, var(--spectrum-table-row-checkbox-block-spacing)); - } - - &.spectrum-Table-headCell .spectrum-Table-checkbox { - margin-block-start: calc( - var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing)) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - margin-block-end: var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing)); - } + padding-inline-end: calc(var(--mod-table-checkbox-to-text, var(--spectrum-table-checkbox-to-text)) - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content))); + + /* Block spacing must be moved to calculated margin on the checkbox element. */ + padding-block: 0; + + .spectrum-Table-checkbox { + --mod-checkbox-spacing: 0px; + min-block-size: initial; + } + + &.spectrum-Table-cell .spectrum-Table-checkbox { + margin-block-start: calc(var(--mod-table-row-checkbox-block-spacing, var(--spectrum-table-row-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); + margin-block-end: var(--mod-table-row-checkbox-block-spacing, var(--spectrum-table-row-checkbox-block-spacing)); + } + + &.spectrum-Table-headCell .spectrum-Table-checkbox { + margin-block-start: calc(var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); + margin-block-end: var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing)); + } } /********* DIVS *********/ /* Make sure markup that uses divs instead of elements displays like a regular table. */ .spectrum-Table:not(.spectrum-Table-scroller), .spectrum-Table-main { - display: table; + display: table; } .spectrum-Table-head { - display: table-header-group; + display: table-header-group; } .spectrum-Table-body { - display: table-row-group; + display: table-row-group; } .spectrum-Table-row, .spectrum-Table-head [role="row"] { - display: table-row; + display: table-row; } .spectrum-Table-cell, .spectrum-Table-headCell { - display: table-cell; + display: table-cell; } /********* SCROLLABLE *********/ /* Wrapper that allows a scrollable body and sticky column header. */ .spectrum-Table-scroller { - --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100))); - - box-sizing: border-box; - display: inline-block; - position: relative; - overflow: auto; - - border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - border-block: var(--mod-table-border-width, var(--spectrum-table-border-width)) - solid - var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); - border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) - solid - var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); - - &.spectrum-Table--quiet { - --mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100))); - border-block-start: none; - } - - /* Make sure shift-tab reverse keyboard navigation keeps the whole cell in focus. + --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100))); + + box-sizing: border-box; + display: inline-block; + position: relative; + overflow: auto; + + border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + border-block: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + + &.spectrum-Table--quiet { + --mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100))); + border-block-start: none; + } + + /* Make sure shift-tab reverse keyboard navigation keeps the whole cell in focus. --mod-table-current-header-height should be dynamically updated with JS to match the table header height. */ - scroll-padding-top: var(--mod-table-current-header-height, calc( - (var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) + - var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + - var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)) + - var(--mod-table-border-width, var(--spectrum-table-border-width)) - )); - - .spectrum-Table-head { - position: sticky; - inset-block-start: 0; - z-index: 2; - } - - .spectrum-Table-headCell { - border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) - solid - var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); - } - - /* Remove borders that have been replaced by borders on wrapper or pseudo elements. */ - .spectrum-Table-body .spectrum-Table-row { - &:first-child .spectrum-Table-cell { - border-block-start: none; - border-radius: 0; - } - - &:last-child .spectrum-Table-cell { - border-block-end: none; - border-radius: 0; - } - - .spectrum-Table-cell:first-child { - border-inline-start: none; - } - - .spectrum-Table-cell:last-child { - border-inline-end: none; - } - } + scroll-padding-top: var(--mod-table-current-header-height, calc((var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) + var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width)))); + + .spectrum-Table-head { + position: sticky; + inset-block-start: 0; + z-index: 2; + } + + .spectrum-Table-headCell { + border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + } + + /* Remove borders that have been replaced by borders on wrapper or pseudo elements. */ + .spectrum-Table-body .spectrum-Table-row { + &:first-child .spectrum-Table-cell { + border-block-start: none; + border-radius: 0; + } + + &:last-child .spectrum-Table-cell { + border-block-end: none; + border-radius: 0; + } + + .spectrum-Table-cell:first-child { + border-inline-start: none; + } + + .spectrum-Table-cell:last-child { + border-inline-end: none; + } + } } /********* COLLAPSIBLE *********/ .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 0; + --spectrum-table-row-tier: 0; - &[data-tier="1"] { --spectrum-table-row-tier: 1; } + &[data-tier="1"] { + --spectrum-table-row-tier: 1; + } - &[data-tier="2"] { --spectrum-table-row-tier: 2; } + &[data-tier="2"] { + --spectrum-table-row-tier: 2; + } - &[data-tier="3"] { --spectrum-table-row-tier: 3; } + &[data-tier="3"] { + --spectrum-table-row-tier: 3; + } - &[data-tier="4"] { --spectrum-table-row-tier: 4; } + &[data-tier="4"] { + --spectrum-table-row-tier: 4; + } - &[data-tier="5"] { --spectrum-table-row-tier: 5; } + &[data-tier="5"] { + --spectrum-table-row-tier: 5; + } - &[data-tier="6"] { --spectrum-table-row-tier: 6; } + &[data-tier="6"] { + --spectrum-table-row-tier: 6; + } - .spectrum-Table-checkboxCell { - padding-inline-end: 0; - } + .spectrum-Table-checkboxCell { + padding-inline-end: 0; + } - &.is-last-tier { - .spectrum-Table-cell--collapsible { - /* Last tier rows need additional space as wide as the disclosure icon, to be indented from previous tier. */ - padding-inline-start: calc( - (var(--spectrum-table-row-tier) * var(--spectrum-table-collapsible-tier-indent)) + - var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)) + - (var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing)) * 2) - ); - } + &.is-last-tier { + .spectrum-Table-cell--collapsible { + /* Last tier rows need additional space as wide as the disclosure icon, to be indented from previous tier. */ + padding-inline-start: calc((var(--spectrum-table-row-tier) * var(--spectrum-table-collapsible-tier-indent)) + var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)) + (var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing)) * 2)); + } - .spectrum-Table-disclosureIcon { - display: none; - } - } + .spectrum-Table-disclosureIcon { + display: none; + } + } - .spectrum-Table-disclosureIcon { - margin-inline: var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing)); - margin-block-start: max(0px, calc( - (var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)) - - var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size))) - / 2 - ) - ); - } + .spectrum-Table-disclosureIcon { + margin-inline: var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing)); + margin-block-start: max(0px, calc((var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)) - var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size))) / 2)); + } - &[hidden]{ - display: none; - } + &[hidden] { + display: none; + } } .spectrum-Table-cell--collapsible { - padding-inline-start: calc(var(--spectrum-table-row-tier, 0px) * var(--spectrum-table-collapsible-tier-indent)); - padding-block: 0; + padding-inline-start: calc(var(--spectrum-table-row-tier, 0px) * var(--spectrum-table-collapsible-tier-indent)); + padding-block: 0; } .spectrum-Table-collapseInner { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - align-items: flex-start; - - .spectrum-Table-collapseContent { - padding-block-start: calc( - var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - padding-block-end: var(--mod-table-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text)); - } + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: flex-start; + + .spectrum-Table-collapseContent { + padding-block-start: calc(var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); + padding-block-end: var(--mod-table-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text)); + } } .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default))); - - block-size: var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)); - flex-basis: var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)); - flex-grow: 0; - flex-shrink: 0; - transition: transform ease var(--mod-table-collapsible-icon-animation-duration, var(--spectrum-table-collapsible-icon-animation-duration)); - - border-radius: 0; - background: transparent; - border: 0; - color: var(--spectrum-table-icon-color); - - transform: var(--spectrum-logical-rotation); - - &[aria-expanded="true"]{ - transform: var(--spectrum-logical-rotation,) rotate(90deg); - } - - &::after { - display: none; - } - - &:hover { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-hover, var(--spectrum-table-icon-color-hover))); - } - - &:active { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-active, var(--spectrum-table-icon-color-active))); - } - - &:focus { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-focus, var(--spectrum-table-icon-color-focus))); - - &:hover { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-focus-hover))); - } - } - - &:focus-visible, - &.is-keyboardFocused { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus))); - - outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); - outline-style: solid; - outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))); - outline-offset: calc( - (-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness))) - 2px - ); - } + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default))); + + block-size: var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)); + flex-basis: var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)); + flex-grow: 0; + flex-shrink: 0; + transition: transform ease var(--mod-table-collapsible-icon-animation-duration, var(--spectrum-table-collapsible-icon-animation-duration)); + + border-radius: 0; + background: transparent; + border: 0; + color: var(--spectrum-table-icon-color); + + transform: var(--spectrum-logical-rotation); + + &[aria-expanded="true"] { + transform: var(--spectrum-logical-rotation,) rotate(90deg); + } + + &::after { + display: none; + } + + &:hover { + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-hover, var(--spectrum-table-icon-color-hover))); + } + + &:active { + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-active, var(--spectrum-table-icon-color-active))); + } + + &:focus { + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-focus, var(--spectrum-table-icon-color-focus))); + + &:hover { + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-focus-hover))); + } + } + + &:focus-visible, + &.is-keyboardFocused { + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus))); + + outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); + outline-style: solid; + outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))); + outline-offset: calc((-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness))) - 2px); + } } /********* THUMBNAILS *********/ .spectrum-Table-row--thumbnail { - --table-thumbnail-cell-block-spacing: var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)); - --table-thumbnail-inner-content-block-spacing: max(0px, calc(( - var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)) - - (var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) - ) / 2 - )); - - /* Cell that does not have a thumbnail, within a row that has a thumbnail. */ - .spectrum-Table-cell { - padding-block: calc(var(--table-thumbnail-cell-block-spacing) + var(--table-thumbnail-inner-content-block-spacing)); - } - - /* Cell that does have a thumbnail has its padding moved within the "Inner" and "Content" alignment wrappers. */ - .spectrum-Table-cell--thumbnail { - padding-block: 0; - } - - /* Sometimes the padding must be larger to match any extra space created by the disclosure icon (e.g. compact + large ). */ - &.spectrum-Table-row--collapsible { - --table-thumbnail-inner-minimum-block-spacing: max(0px, calc(( - var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)) - - var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)) - ) / 2 - )); - --table-thumbnail-cell-block-spacing: max( - var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)), - var(--table-thumbnail-inner-minimum-block-spacing) - ); - } + --table-thumbnail-cell-block-spacing: var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)); + --table-thumbnail-inner-content-block-spacing: max(0px, calc((var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)) - (var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)))) / 2)); + + /* Cell that does not have a thumbnail, within a row that has a thumbnail. */ + .spectrum-Table-cell { + padding-block: calc(var(--table-thumbnail-cell-block-spacing) + var(--table-thumbnail-inner-content-block-spacing)); + } + + /* Cell that does have a thumbnail has its padding moved within the "Inner" and "Content" alignment wrappers. */ + .spectrum-Table-cell--thumbnail { + padding-block: 0; + } + + /* Sometimes the padding must be larger to match any extra space created by the disclosure icon (e.g. compact + large ). */ + &.spectrum-Table-row--collapsible { + --table-thumbnail-inner-minimum-block-spacing: max(0px, calc((var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)) - var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size))) / 2)); + --table-thumbnail-cell-block-spacing: max(var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)), var(--table-thumbnail-inner-minimum-block-spacing)); + } } .spectrum-Table-thumbnailInner { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - align-items: flex-start; - padding-block: var(--table-thumbnail-cell-block-spacing); - - .spectrum-Thumbnail { - flex-grow: 0; - flex-shrink: 0; - margin-inline-end: var(--mod-table-thumbnail-to-text, var(--spectrum-table-thumbnail-to-text)); - line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)); - } - - .spectrum-Table-thumbnailContent { - /* Vertically centers text with the middle of the thumbnail. */ - padding-block: var(--table-thumbnail-inner-content-block-spacing); - } + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: flex-start; + padding-block: var(--table-thumbnail-cell-block-spacing); + + .spectrum-Thumbnail { + flex-grow: 0; + flex-shrink: 0; + margin-inline-end: var(--mod-table-thumbnail-to-text, var(--spectrum-table-thumbnail-to-text)); + line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)); + } + + .spectrum-Table-thumbnailContent { + /* Vertically centers text with the middle of the thumbnail. */ + padding-block: var(--table-thumbnail-inner-content-block-spacing); + } } diff --git a/components/tabs/index.css b/components/tabs/index.css index 72ec7fc2cd..6e7becd378 100644 --- a/components/tabs/index.css +++ b/components/tabs/index.css @@ -15,32 +15,20 @@ 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); @@ -49,19 +37,11 @@ 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); @@ -73,234 +53,119 @@ 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-selection-indicator-color: var( - --mod-tabs-selection-indicator-color-emphasized, - var(--spectrum-accent-content-color-default) - ); + --mod-tabs-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-accent-content-color-default)); + --mod-tabs-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-accent-content-color-hover)); + --mod-tabs-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-accent-content-color-key-focus)); + + --mod-tabs-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-accent-content-color-default)); } } .spectrum-Tabs--vertical { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical, - right - ); + --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) { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical, - left - ); + --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left); } .spectrum-Tabs--vertical-right:dir(rtl) { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical, - right - ); + --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right); } .spectrum-Tabs.spectrum-Tabs--compact { - --mod-tabs-item-height: var( - --mod-tabs-item-height-compact, - var(--spectrum-tab-item-compact-height-medium) - ); - --mod-tabs-top-to-text: var( - --mod-tabs-top-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-medium) - ); - --mod-tabs-bottom-to-text: var( - --mod-tabs-bottom-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-medium) - ); - --mod-tabs-top-to-icon: var( - --mod-tabs-top-to-icon-compact, - var(--spectrum-tab-item-top-to-workflow-icon-compact-medium) - ); + --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)); } } .spectrum-Tabs { - display: flex; + display: flex; - /* Contain the selection indicator */ - position: relative; - z-index: 0; + /* Contain the selection indicator */ + position: relative; + z-index: 0; - margin: 0; - padding-block: 0; + margin: 0; + padding-block: 0; /* Friends should align to the top of the tabs */ vertical-align: top; - background: linear-gradient( - to - var( - --mod-tabs-list-background-direction, - var(--spectrum-tabs-list-background-direction) - ), - var( - --highcontrast-tabs-divider-background-color, - var( - --mod-tabs-divider-background-color, - var(--spectrum-tabs-divider-background-color) - ) - ) - 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), - transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)) - ); + background: linear-gradient(to var(--mod-tabs-list-background-direction, var(--spectrum-tabs-list-background-direction)), var(--highcontrast-tabs-divider-background-color, var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))) 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size))); } .spectrum-Tabs-item { @@ -310,20 +175,15 @@ governing permissions and limitations under the License. block-size: calc(var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)) - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size))); - /* Float above the tab line */ - z-index: 1; + /* Float above the tab line */ + z-index: 1; - text-decoration: none; - white-space: nowrap; + text-decoration: none; + white-space: nowrap; - color: var( - --highcontrast-tabs-color, - var(--mod-tabs-color, var(--spectrum-tabs-color)) - ); + color: var(--highcontrast-tabs-color, var(--mod-tabs-color, var(--spectrum-tabs-color))); - transition: color - var(--mod-tabs-animation-duration, var(--spectrum-tabs-animation-duration)) - ease-out; + transition: color var(--mod-tabs-animation-duration, var(--spectrum-tabs-animation-duration)) ease-out; cursor: pointer; outline: none; @@ -331,16 +191,10 @@ 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)); } } @@ -348,62 +202,32 @@ governing permissions and limitations under the License. content: ""; position: absolute; - box-sizing: border-box; - - block-size: calc( - 100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) - ); - inline-size: calc( - 100% + - var( - --mod-tabs-focus-indicator-gap, - var(--spectrum-tabs-focus-indicator-gap) - ) * 2 - ); - - inset-block-start: calc( - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) / 2 - ); - inset-inline-start: calc( - -1 * var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) - ); - inset-inline-end: calc( - -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) - ) - solid transparent; - border-radius: var( - --mod-tabs-focus-indicator-border-radius, - var(--spectrum-tabs-focus-indicator-border-radius) - ); + box-sizing: border-box; + + block-size: calc(100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text))); + inline-size: calc(100% + var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * 2); + + inset-block-start: calc(var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) / 2); + inset-inline-start: calc(-1 * var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap))); + inset-inline-end: calc(-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)) solid transparent; + border-radius: var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-tabs-focus-indicator-border-radius)); pointer-events: none; } &:hover { - color: var( - --highcontrast-tabs-color-hover, - var(--mod-tabs-color-hover, var(--spectrum-tabs-color-hover)) - ); + color: var(--highcontrast-tabs-color-hover, var(--mod-tabs-color-hover, var(--spectrum-tabs-color-hover))); } &.is-selected { - color: var( - --highcontrast-tabs-color-selected, - var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected)) - ); + color: var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected))); } &.is-disabled { cursor: default; - color: var( - --highcontrast-tabs-color-disabled, - var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled)) - ); + color: var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled))); .spectrum-Tabs-itemLabel { cursor: default; @@ -411,19 +235,10 @@ governing permissions and limitations under the License. } &:focus-visible { - color: var( - --highcontrast-tabs-color-key-focus, - var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus)) - ); + color: var(--highcontrast-tabs-color-key-focus, var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus))); &::before { - border-color: var( - --highcontrast-tabs-focus-indicator-color, - var( - --mod-tabs-focus-indicator-color, - var(--spectrum-tabs-focus-indicator-color) - ) - ); + border-color: var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color))); } } } @@ -438,61 +253,41 @@ 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) - ); - - /* support links */ - text-decoration: none; - - &:empty { - /* Hide the tab label if it's not being used */ - display: none; - } + 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; + + &:empty { + /* Hide the tab label if it's not being used */ + display: none; + } } .spectrum-Tabs-selectionIndicator { position: absolute; inset-inline-start: 0; - background-color: var( - --highcontrast-tabs-selection-indicator-color, - var( - --mod-tabs-selection-indicator-color, - var(--spectrum-tabs-selection-indicator-color) - ) - ); - - /* Be below the tab */ - z-index: 0; - - transition: transform - var(--mod-tabs-animation-duration, var(--spectrum-tabs-animation-duration)) - var(--mod-tabs-animation-ease, var(--spectrum-tabs-animation-ease)); + background-color: var(--highcontrast-tabs-selection-indicator-color, var(--mod-tabs-selection-indicator-color, var(--spectrum-tabs-selection-indicator-color))); + + /* Be below the tab */ + z-index: 0; + + transition: transform var(--mod-tabs-animation-duration, var(--spectrum-tabs-animation-duration)) 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 { - align-items: center; + align-items: center; - .spectrum-Tabs-item { - vertical-align: top; + .spectrum-Tabs-item { + vertical-align: top; /* 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)); } } @@ -516,18 +311,15 @@ 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)); } } .spectrum-Tabs--vertical, .spectrum-Tabs--vertical-right { - display: inline-flex; - flex-direction: column; - padding: 0; + display: inline-flex; + flex-direction: column; + padding: 0; &.spectrum-Tabs--quiet { border-color: transparent; @@ -538,23 +330,12 @@ 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( - -1 * var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) - ); + inset-inline-start: calc(-1 * var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap))); } } @@ -566,10 +347,7 @@ 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)); } } @@ -609,9 +387,7 @@ 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, @@ -629,22 +405,7 @@ governing permissions and limitations under the License. /* Quiet tabs get a bottom border in WHCM */ &.spectrum-Tabs--quiet { - background: linear-gradient( - to - var( - --mod-tabs-list-background-direction, - var(--spectrum-tabs-list-background-direction) - ), - var( - --highcontrast-tabs-divider-background-color, - var( - --mod-tabs-divider-background-color, - var(--spectrum-tabs-divider-background-color) - ) - ) - 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), - transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)) - ); + background: linear-gradient(to var(--mod-tabs-list-background-direction, var(--spectrum-tabs-list-background-direction)), var(--highcontrast-tabs-divider-background-color, var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))) 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size))); } } } diff --git a/components/tabs/themes/express.css b/components/tabs/themes/express.css index 522a35a183..f7d6b4a3ed 100644 --- a/components/tabs/themes/express.css +++ b/components/tabs/themes/express.css @@ -13,7 +13,7 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Tabs { - --spectrum-tabs-font-weight: var(--spectrum-bold-font-weight); - } + .spectrum-Tabs { + --spectrum-tabs-font-weight: var(--spectrum-bold-font-weight); + } } diff --git a/components/tabs/themes/spectrum.css b/components/tabs/themes/spectrum.css index b0383ebd1b..5b42bbcd60 100644 --- a/components/tabs/themes/spectrum.css +++ b/components/tabs/themes/spectrum.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Tabs { - --spectrum-tabs-font-weight: var(--spectrum-default-font-weight); - } + .spectrum-Tabs { + --spectrum-tabs-font-weight: var(--spectrum-default-font-weight); + } } diff --git a/components/tag/index.css b/components/tag/index.css index 88319c8854..bb56cf460a 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -13,503 +13,484 @@ governing permissions and limitations under the License. @import "./themes/express.css"; .spectrum-Tag { - /* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */ - --spectrum-avatar-opacity-disabled: 0.3; - - --spectrum-tag-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-tag-border-width: var(--spectrum-border-width-100); - - /* focus ring */ - --spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-tag-focus-ring-color: var(--spectrum-focus-indicator-color); - - /* label */ - --spectrum-tag-label-line-height: var(--spectrum-line-height-100); - --spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight); - - /* selected */ - --spectrum-tag-content-color-selected: var(--spectrum-gray-50); - --spectrum-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); - --spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); - --spectrum-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - /* invalid variant */ - --spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900); - --spectrum-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); - --spectrum-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); - --spectrum-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); - - /* invalid variant content */ - --spectrum-tag-content-color-invalid: var(--spectrum-negative-content-color-default); - --spectrum-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover); - --spectrum-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down); - --spectrum-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus); - - /* invalid selected variant */ - --spectrum-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default); - --spectrum-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); - --spectrum-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down); - --spectrum-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus); - --spectrum-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default); - --spectrum-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); - --spectrum-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down); - --spectrum-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus); - - /* invalid selected variant content */ - --spectrum-tag-content-color-invalid-selected: var(--spectrum-white); - - /* emphasized variant */ - --spectrum-tag-border-color-emphasized: var(--spectrum-accent-background-color-default); - --spectrum-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover); - --spectrum-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down); - --spectrum-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); - --spectrum-tag-background-color-emphasized: var(--spectrum-accent-background-color-default); - --spectrum-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover); - --spectrum-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down); - --spectrum-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); - - /* emphasized variant content */ - --spectrum-tag-content-color-emphasized: var(--spectrum-white); - - /* disabled variant content */ - --spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color); - - /* ↧↧↧ Fallback defaults in case of no t-shirt size - set to Medium styles ↧↧↧ */ - /* icon spacing fallback if no t-shirt size */ - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - - /* avatar spacing fallback if no t-shirt size */ - --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - - /* label spacing fallback if no t-shirt size */ - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - - /* clear button inline spacing fallback if no t-shirt size */ - --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - - /* tag defaults if no t-shirt size */ - --spectrum-tag-height: var(--spectrum-component-height-100); - - /* text defaults if no t-shirt size */ - --spectrum-tag-font-size: var(--spectrum-font-size-100); - - /* clear button spacing if no t-shirt size */ - --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + /* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */ + --spectrum-avatar-opacity-disabled: 0.3; + + --spectrum-tag-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-tag-border-width: var(--spectrum-border-width-100); + + /* focus ring */ + --spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-tag-focus-ring-color: var(--spectrum-focus-indicator-color); + + /* label */ + --spectrum-tag-label-line-height: var(--spectrum-line-height-100); + --spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight); + + /* selected */ + --spectrum-tag-content-color-selected: var(--spectrum-gray-50); + --spectrum-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); + --spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); + --spectrum-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + + /* invalid variant */ + --spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900); + --spectrum-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); + --spectrum-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); + --spectrum-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); + + /* invalid variant content */ + --spectrum-tag-content-color-invalid: var(--spectrum-negative-content-color-default); + --spectrum-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover); + --spectrum-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down); + --spectrum-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus); + + /* invalid selected variant */ + --spectrum-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default); + --spectrum-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); + --spectrum-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down); + --spectrum-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus); + --spectrum-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default); + --spectrum-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); + --spectrum-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down); + --spectrum-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus); + + /* invalid selected variant content */ + --spectrum-tag-content-color-invalid-selected: var(--spectrum-white); + + /* emphasized variant */ + --spectrum-tag-border-color-emphasized: var(--spectrum-accent-background-color-default); + --spectrum-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover); + --spectrum-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down); + --spectrum-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); + --spectrum-tag-background-color-emphasized: var(--spectrum-accent-background-color-default); + --spectrum-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover); + --spectrum-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down); + --spectrum-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); + + /* emphasized variant content */ + --spectrum-tag-content-color-emphasized: var(--spectrum-white); + + /* disabled variant content */ + --spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color); + + /* ↧↧↧ Fallback defaults in case of no t-shirt size - set to Medium styles ↧↧↧ */ + /* icon spacing fallback if no t-shirt size */ + --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + + /* avatar spacing fallback if no t-shirt size */ + --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + + /* label spacing fallback if no t-shirt size */ + --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + + /* clear button inline spacing fallback if no t-shirt size */ + --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + + /* tag defaults if no t-shirt size */ + --spectrum-tag-height: var(--spectrum-component-height-100); + + /* text defaults if no t-shirt size */ + --spectrum-tag-font-size: var(--spectrum-font-size-100); + + /* clear button spacing if no t-shirt size */ + --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); } - /* t-shirt sizes */ .spectrum-Tag--sizeS { - --spectrum-tag-height: var(--spectrum-component-height-75); - --spectrum-tag-font-size: var(--spectrum-font-size-75); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-tag-height: var(--spectrum-component-height-75); + --spectrum-tag-font-size: var(--spectrum-font-size-75); + --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75); - --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small); + --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75); + --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small); - --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small); - --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75); + --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small); + --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small); + --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75); - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75); + --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75); - /* tokens based on theme and t-shirt size */ - --spectrum-tag-corner-radius: var(--spectrum-tag-size-small-corner-radius); - --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-small-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-small-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-small-clear-button-spacing-inline-end); + /* tokens based on theme and t-shirt size */ + --spectrum-tag-corner-radius: var(--spectrum-tag-size-small-corner-radius); + --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-small-spacing-inline-start); + --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-small-label-spacing-inline-end); + --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-small-clear-button-spacing-inline-end); } .spectrum-Tag--sizeM { - --spectrum-tag-height: var(--spectrum-component-height-100); - --spectrum-tag-font-size: var(--spectrum-font-size-100); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-tag-height: var(--spectrum-component-height-100); + --spectrum-tag-font-size: var(--spectrum-font-size-100); + --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); /* 6px 9px */ - --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); /* 6px 9px */ + --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - /* tokens based on theme and t-shirt size */ - --spectrum-tag-corner-radius: var(--spectrum-tag-size-medium-corner-radius); - --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-medium-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-medium-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-medium-clear-button-spacing-inline-end); + /* tokens based on theme and t-shirt size */ + --spectrum-tag-corner-radius: var(--spectrum-tag-size-medium-corner-radius); + --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-medium-spacing-inline-start); + --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-medium-label-spacing-inline-end); + --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-medium-clear-button-spacing-inline-end); } .spectrum-Tag--sizeL { - --spectrum-tag-height: var(--spectrum-component-height-200); - --spectrum-tag-font-size: var(--spectrum-font-size-200); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-tag-height: var(--spectrum-component-height-200); + --spectrum-tag-font-size: var(--spectrum-font-size-200); + --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200); - --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large); + --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200); + --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large); - --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-200); + --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-200); - --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large); - --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200); + --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large); + --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large); + --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200); - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-200); + --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-200); - /* tokens based on theme and t-shirt size */ - --spectrum-tag-corner-radius: var(--spectrum-tag-size-large-corner-radius); - --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-large-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-large-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-large-clear-button-spacing-inline-end); + /* tokens based on theme and t-shirt size */ + --spectrum-tag-corner-radius: var(--spectrum-tag-size-large-corner-radius); + --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-large-spacing-inline-start); + --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-large-label-spacing-inline-end); + --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-large-clear-button-spacing-inline-end); } .spectrum-Tag { - border-color: var(--highcontrast-tag-border-color, var(--mod-tag-border-color, var(--spectrum-tag-border-color))); - background-color: var(--highcontrast-tag-background-color, var(--mod-tag-background-color, var(--spectrum-tag-background-color))); - color: var(--highcontrast-tag-content-color, var(--mod-tag-content-color, var(--spectrum-tag-content-color))); - - border-radius: var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)); - border-width: var(--mod-tag-border-width, var(--spectrum-tag-border-width)); - border-style: solid; - - padding-inline-start: calc(var(--mod-tag-spacing-inline-start, var(--spectrum-tag-spacing-inline-start)) - - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - padding-inline-end: 0; - - block-size: var(--mod-tag-height, var(--spectrum-tag-height)); - position: relative; - display: inline-flex; - align-items: center; - box-sizing: border-box; - vertical-align: bottom; - max-inline-size: 100%; - outline: none; - user-select: none; - - transition: border-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, - color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, - box-shadow var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, - background-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out; - - - .spectrum-Tag-itemIcon { - block-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); - inline-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); - - margin-block-start: calc(var(--mod-tag-icon-spacing-block-start, var(--spectrum-tag-icon-spacing-block-start)) - - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - margin-block-end: calc(var(--mod-tag-icon-spacing-block-end, var(--spectrum-tag-icon-spacing-block-end)) - - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - margin-inline-end: var(--mod-tag-icon-spacing-inline-end, var(--spectrum-tag-icon-spacing-inline-end)); - } - - .spectrum-Avatar { - margin-block-start: calc(var(--mod-tag-avatar-spacing-block-start, var(--spectrum-tag-avatar-spacing-block-start)) - - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - margin-block-end: calc(var(--mod-tag-avatar-spacing-block-end, var(--spectrum-tag-avatar-spacing-block-end)) - - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - margin-inline-end: var(--mod-tag-avatar-spacing-inline-end, var(--spectrum-tag-avatar-spacing-inline-end)); - } - - /* clear button */ - .spectrum-Tag-clearButton { - box-sizing: border-box; - - padding-block-start: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - padding-block-end: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - - /* move button negative calc to cancel label end margin, then add button start margin */ - margin-inline-start: calc(var(--mod-tag-clear-button-spacing-inline-start, var(--spectrum-tag-clear-button-spacing-inline-start)) - + (var(--mod-tag-label-spacing-inline-end, var(--spectrum-tag-label-spacing-inline-end)) * -1)); - - /* end spacing is theme-specific */ - margin-inline-end: calc(var(--mod-tag-clear-button-spacing-inline-end, var(--spectrum-tag-clear-button-spacing-inline-end)) - - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - - /* ensure clear button is correct color */ - color: currentColor; - - /* width of fill neutralized to ensure correct inline spacing within tag */ - --mod-clear-button-width: fit-content; - --spectrum-clearbutton-fill-size: fit-content; - --spectrum-clearbutton-fill-background-color: transparent; - - .spectrum-ClearButton-fill { - background-color: var(--mod-clearbutton-fill-background-color, var(--spectrum-clearbutton-fill-background-color)); - - inline-size: var(--mod-clearbutton-fill-size, var(--spectrum-clearbutton-fill-size)); - block-size: var(--mod-clearbutton-fill-size, var(--spectrum-clearbutton-fill-size)); - } - } - - .spectrum-Tag-itemLabel { - block-size: 100%; - box-sizing: border-box; - line-height: var(--mod-tag-label-line-height, var(--spectrum-tag-label-line-height)); - font-weight: var(--mod-tag-label-font-weight, var(--spectrum-tag-label-font-weight)); - - flex: 1 1 auto; - font-size: var(--mod-tag-font-size, var(--spectrum-tag-font-size)); - cursor: default; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - padding-block-start: calc(var(--mod-tag-label-spacing-block, var(--spectrum-tag-label-spacing-block)) - - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - - /* space from label text to end edge */ - margin-inline-end: calc(var(--mod-tag-label-spacing-inline-end, var(--spectrum-tag-label-spacing-inline-end)) - - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - } - - &:hover { - border-color: var(--highcontrast-tag-border-color-hover, var(--mod-tag-border-color-hover, var(--spectrum-tag-border-color-hover))); - background-color: var(--highcontrast-tag-background-color-hover, var(--mod-tag-background-color-hover, var(--spectrum-tag-background-color-hover))); - color: var(--highcontrast-tag-content-color-hover, var(--mod-tag-content-color-hover, var(--spectrum-tag-content-color-hover))); - } - - &:active { - border-color: var(--highcontrast-tag-border-color-active, var(--mod-tag-border-color-active, var(--spectrum-tag-border-color-active))); - background-color: var(--highcontrast-tag-background-color-active, var(--mod-tag-background-color-active, var(--spectrum-tag-background-color-active))); - color: var(--highcontrast-tag-content-color-active, var(--mod-tag-content-color-active, var(--spectrum-tag-content-color-active))); - } - - &:focus-visible, - &.is-focused { - border-color: var(--highcontrast-tag-border-color-focus, var(--mod-tag-border-color-focus, var(--spectrum-tag-border-color-focus))); - background-color: var(--highcontrast-tag-background-color-focus, var(--mod-tag-background-color-focus, var(--spectrum-tag-background-color-focus))); - color: var(--highcontrast-tag-content-color-focus, var(--mod-tag-content-color-focus, var(--spectrum-tag-content-color-focus))); - - /* focus indicator */ - &::after { - content: ""; - display: inline-block; - position: absolute; - inset-block-start: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); - inset-block-end: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); - inset-inline-start: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); - inset-inline-end: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); - border-color: var(--highcontrast-tag-focus-ring-color, var(--mod-tag-focus-ring-color, var(--spectrum-tag-focus-ring-color))); - border-radius: calc(var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)) - + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - + var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - border-width: var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)); - border-style: solid; - pointer-events:none; - } - } + border-color: var(--highcontrast-tag-border-color, var(--mod-tag-border-color, var(--spectrum-tag-border-color))); + background-color: var(--highcontrast-tag-background-color, var(--mod-tag-background-color, var(--spectrum-tag-background-color))); + color: var(--highcontrast-tag-content-color, var(--mod-tag-content-color, var(--spectrum-tag-content-color))); + + border-radius: var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)); + border-width: var(--mod-tag-border-width, var(--spectrum-tag-border-width)); + border-style: solid; + + padding-inline-start: calc(var(--mod-tag-spacing-inline-start, var(--spectrum-tag-spacing-inline-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + padding-inline-end: 0; + + block-size: var(--mod-tag-height, var(--spectrum-tag-height)); + position: relative; + display: inline-flex; + align-items: center; + box-sizing: border-box; + vertical-align: bottom; + max-inline-size: 100%; + outline: none; + user-select: none; + + transition: + border-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, + color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, + box-shadow var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, + background-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out; + + .spectrum-Tag-itemIcon { + block-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); + inline-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); + + margin-block-start: calc(var(--mod-tag-icon-spacing-block-start, var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + margin-block-end: calc(var(--mod-tag-icon-spacing-block-end, var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + margin-inline-end: var(--mod-tag-icon-spacing-inline-end, var(--spectrum-tag-icon-spacing-inline-end)); + } + + .spectrum-Avatar { + margin-block-start: calc(var(--mod-tag-avatar-spacing-block-start, var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + margin-block-end: calc(var(--mod-tag-avatar-spacing-block-end, var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + margin-inline-end: var(--mod-tag-avatar-spacing-inline-end, var(--spectrum-tag-avatar-spacing-inline-end)); + } + + /* clear button */ + .spectrum-Tag-clearButton { + box-sizing: border-box; + + padding-block-start: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + padding-block-end: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + + /* move button negative calc to cancel label end margin, then add button start margin */ + margin-inline-start: calc(var(--mod-tag-clear-button-spacing-inline-start, var(--spectrum-tag-clear-button-spacing-inline-start)) + (var(--mod-tag-label-spacing-inline-end, var(--spectrum-tag-label-spacing-inline-end)) * -1)); + + /* end spacing is theme-specific */ + margin-inline-end: calc(var(--mod-tag-clear-button-spacing-inline-end, var(--spectrum-tag-clear-button-spacing-inline-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + + /* ensure clear button is correct color */ + color: currentColor; + + /* width of fill neutralized to ensure correct inline spacing within tag */ + --mod-clear-button-width: fit-content; + --spectrum-clearbutton-fill-size: fit-content; + --spectrum-clearbutton-fill-background-color: transparent; + + .spectrum-ClearButton-fill { + background-color: var(--mod-clearbutton-fill-background-color, var(--spectrum-clearbutton-fill-background-color)); + + inline-size: var(--mod-clearbutton-fill-size, var(--spectrum-clearbutton-fill-size)); + block-size: var(--mod-clearbutton-fill-size, var(--spectrum-clearbutton-fill-size)); + } + } + + .spectrum-Tag-itemLabel { + block-size: 100%; + box-sizing: border-box; + line-height: var(--mod-tag-label-line-height, var(--spectrum-tag-label-line-height)); + font-weight: var(--mod-tag-label-font-weight, var(--spectrum-tag-label-font-weight)); + + flex: 1 1 auto; + font-size: var(--mod-tag-font-size, var(--spectrum-tag-font-size)); + cursor: default; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + padding-block-start: calc(var(--mod-tag-label-spacing-block, var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + + /* space from label text to end edge */ + margin-inline-end: calc(var(--mod-tag-label-spacing-inline-end, var(--spectrum-tag-label-spacing-inline-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + } + + &:hover { + border-color: var(--highcontrast-tag-border-color-hover, var(--mod-tag-border-color-hover, var(--spectrum-tag-border-color-hover))); + background-color: var(--highcontrast-tag-background-color-hover, var(--mod-tag-background-color-hover, var(--spectrum-tag-background-color-hover))); + color: var(--highcontrast-tag-content-color-hover, var(--mod-tag-content-color-hover, var(--spectrum-tag-content-color-hover))); + } + + &:active { + border-color: var(--highcontrast-tag-border-color-active, var(--mod-tag-border-color-active, var(--spectrum-tag-border-color-active))); + background-color: var(--highcontrast-tag-background-color-active, var(--mod-tag-background-color-active, var(--spectrum-tag-background-color-active))); + color: var(--highcontrast-tag-content-color-active, var(--mod-tag-content-color-active, var(--spectrum-tag-content-color-active))); + } + + &:focus-visible, + &.is-focused { + border-color: var(--highcontrast-tag-border-color-focus, var(--mod-tag-border-color-focus, var(--spectrum-tag-border-color-focus))); + background-color: var(--highcontrast-tag-background-color-focus, var(--mod-tag-background-color-focus, var(--spectrum-tag-background-color-focus))); + color: var(--highcontrast-tag-content-color-focus, var(--mod-tag-content-color-focus, var(--spectrum-tag-content-color-focus))); + + /* focus indicator */ + &::after { + content: ""; + display: inline-block; + position: absolute; + inset-block-start: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); + inset-block-end: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); + inset-inline-start: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); + inset-inline-end: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); + border-color: var(--highcontrast-tag-focus-ring-color, var(--mod-tag-focus-ring-color, var(--spectrum-tag-focus-ring-color))); + border-radius: calc(var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + border-width: var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)); + border-style: solid; + pointer-events: none; + } + } } - - /* selected */ .spectrum-Tag.is-selected { - border-color: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, var(--spectrum-tag-border-color-selected))); - background-color: var(--highcontrast-tag-background-color-selected, var(--mod-tag-background-color-selected, var(--spectrum-tag-background-color-selected))); - color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected))); - - &:hover { - border-color: var(--highcontrast-tag-border-color-selected-hover, var(--mod-tag-border-color-selected-hover, var(--spectrum-tag-border-color-selected-hover))); - background-color: var(--highcontrast-tag-background-color-selected-hover, var(--mod-tag-background-color-selected-hover, var(--spectrum-tag-background-color-selected-hover))); - color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected))); - } - - &:active { - border-color: var(--highcontrast-tag-border-color-selected-active, var(--mod-tag-border-color-selected-active, var(--spectrum-tag-border-color-selected-active))); - background-color: var(--highcontrast-tag-background-color-selected-active, var(--mod-tag-background-color-selected-active, var(--spectrum-tag-background-color-selected-active))); - } - - &:focus-visible, - &.is-focused { - border-color: var(--highcontrast-tag-border-color-selected-focus, var(--mod-tag-border-color-selected-focus, var(--spectrum-tag-border-color-selected-focus))); - background-color: var(--highcontrast-tag-background-color-selected-focus, var(--mod-tag-background-color-selected-focus, var(--spectrum-tag-background-color-selected-focus))); - } + border-color: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, var(--spectrum-tag-border-color-selected))); + background-color: var(--highcontrast-tag-background-color-selected, var(--mod-tag-background-color-selected, var(--spectrum-tag-background-color-selected))); + color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected))); + + &:hover { + border-color: var(--highcontrast-tag-border-color-selected-hover, var(--mod-tag-border-color-selected-hover, var(--spectrum-tag-border-color-selected-hover))); + background-color: var(--highcontrast-tag-background-color-selected-hover, var(--mod-tag-background-color-selected-hover, var(--spectrum-tag-background-color-selected-hover))); + color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected))); + } + + &:active { + border-color: var(--highcontrast-tag-border-color-selected-active, var(--mod-tag-border-color-selected-active, var(--spectrum-tag-border-color-selected-active))); + background-color: var(--highcontrast-tag-background-color-selected-active, var(--mod-tag-background-color-selected-active, var(--spectrum-tag-background-color-selected-active))); + } + + &:focus-visible, + &.is-focused { + border-color: var(--highcontrast-tag-border-color-selected-focus, var(--mod-tag-border-color-selected-focus, var(--spectrum-tag-border-color-selected-focus))); + background-color: var(--highcontrast-tag-background-color-selected-focus, var(--mod-tag-background-color-selected-focus, var(--spectrum-tag-background-color-selected-focus))); + } } - .spectrum-Tag.is-invalid { - border-color: var(--highcontrast-tag-border-color-invalid, var(--mod-tag-border-color-invalid, var(--spectrum-tag-border-color-invalid))); - color: var(--highcontrast-tag-content-color-invalid, var(--mod-tag-content-color-invalid, var(--spectrum-tag-content-color-invalid))); - - &:hover { - border-color: var(--highcontrast-tag-border-color-invalid-hover, var(--mod-tag-border-color-invalid-hover, var(--spectrum-tag-border-color-invalid-hover))); - color: var(--highcontrast-tag-content-color-invalid-hover, var(--mod-tag-content-color-invalid-hover, var(--spectrum-tag-content-color-invalid-hover))); - } - - &:active { - border-color: var(--highcontrast-tag-border-color-invalid-active, var(--mod-tag-border-color-invalid-active, var(--spectrum-tag-border-color-invalid-active))); - color: var(--highcontrast-tag-content-color-invalid-active, var(--mod-tag-content-color-invalid-active, var(--spectrum-tag-content-color-invalid-active))); - } - - &:focus-visible, - &.is-focused { - border-color: var(--highcontrast-tag-border-color-invalid-focus, var(--mod-tag-border-color-invalid-focus, var(--spectrum-tag-border-color-invalid-focus))); - color: var(--highcontrast-tag-content-color-invalid-focus, var(--mod-tag-content-color-invalid-focus, var(--spectrum-tag-content-color-invalid-focus))); - } - - &.is-selected { - border-color: var(--highcontrast-tag-border-color-invalid-selected, var(--mod-tag-border-color-invalid-selected, var(--spectrum-tag-border-color-invalid-selected))); - background-color: var(--highcontrast-tag-background-color-invalid-selected, var(--mod-tag-background-color-invalid-selected, var(--spectrum-tag-background-color-invalid-selected))); - color: var(--highcontrast-tag-content-color-invalid-selected, var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected))); - - &:hover { - border-color: var(--highcontrast-tag-border-color-invalid-selected-hover, var(--mod-tag-border-color-invalid-selected-hover, var(--spectrum-tag-border-color-invalid-selected-hover))); - background-color: var(--highcontrast-tag-background-color-invalid-selected-hover, var(--mod-tag-background-color-invalid-selected-hover, var(--spectrum-tag-background-color-invalid-selected-hover))); - color: var(--highcontrast-tag-content-color-invalid-selected, var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected))); - } - - &:active { - border-color: var(--highcontrast-tag-border-color-invalid-selected-active, var(--mod-tag-border-color-invalid-selected-active, var(--spectrum-tag-border-color-invalid-selected-active))); - background-color: var(--highcontrast-tag-background-color-invalid-selected-active, var(--mod-tag-background-color-invalid-selected-active, var(--spectrum-tag-background-color-invalid-selected-active))); - } - - &:focus-visible, - &.is-focused { - border-color: var(--highcontrast-tag-border-color-invalid-selected-focus, var(--mod-tag-border-color-invalid-selected-focus, var(--spectrum-tag-border-color-invalid-selected-focus))); - background-color: var(--highcontrast-tag-background-color-invalid-selected-focus, var(--mod-tag-background-color-invalid-selected-focus, var(--spectrum-tag-background-color-invalid-selected-focus))); - } - } + border-color: var(--highcontrast-tag-border-color-invalid, var(--mod-tag-border-color-invalid, var(--spectrum-tag-border-color-invalid))); + color: var(--highcontrast-tag-content-color-invalid, var(--mod-tag-content-color-invalid, var(--spectrum-tag-content-color-invalid))); + + &:hover { + border-color: var(--highcontrast-tag-border-color-invalid-hover, var(--mod-tag-border-color-invalid-hover, var(--spectrum-tag-border-color-invalid-hover))); + color: var(--highcontrast-tag-content-color-invalid-hover, var(--mod-tag-content-color-invalid-hover, var(--spectrum-tag-content-color-invalid-hover))); + } + + &:active { + border-color: var(--highcontrast-tag-border-color-invalid-active, var(--mod-tag-border-color-invalid-active, var(--spectrum-tag-border-color-invalid-active))); + color: var(--highcontrast-tag-content-color-invalid-active, var(--mod-tag-content-color-invalid-active, var(--spectrum-tag-content-color-invalid-active))); + } + + &:focus-visible, + &.is-focused { + border-color: var(--highcontrast-tag-border-color-invalid-focus, var(--mod-tag-border-color-invalid-focus, var(--spectrum-tag-border-color-invalid-focus))); + color: var(--highcontrast-tag-content-color-invalid-focus, var(--mod-tag-content-color-invalid-focus, var(--spectrum-tag-content-color-invalid-focus))); + } + + &.is-selected { + border-color: var(--highcontrast-tag-border-color-invalid-selected, var(--mod-tag-border-color-invalid-selected, var(--spectrum-tag-border-color-invalid-selected))); + background-color: var(--highcontrast-tag-background-color-invalid-selected, var(--mod-tag-background-color-invalid-selected, var(--spectrum-tag-background-color-invalid-selected))); + color: var(--highcontrast-tag-content-color-invalid-selected, var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected))); + + &:hover { + border-color: var(--highcontrast-tag-border-color-invalid-selected-hover, var(--mod-tag-border-color-invalid-selected-hover, var(--spectrum-tag-border-color-invalid-selected-hover))); + background-color: var(--highcontrast-tag-background-color-invalid-selected-hover, var(--mod-tag-background-color-invalid-selected-hover, var(--spectrum-tag-background-color-invalid-selected-hover))); + color: var(--highcontrast-tag-content-color-invalid-selected, var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected))); + } + + &:active { + border-color: var(--highcontrast-tag-border-color-invalid-selected-active, var(--mod-tag-border-color-invalid-selected-active, var(--spectrum-tag-border-color-invalid-selected-active))); + background-color: var(--highcontrast-tag-background-color-invalid-selected-active, var(--mod-tag-background-color-invalid-selected-active, var(--spectrum-tag-background-color-invalid-selected-active))); + } + + &:focus-visible, + &.is-focused { + border-color: var(--highcontrast-tag-border-color-invalid-selected-focus, var(--mod-tag-border-color-invalid-selected-focus, var(--spectrum-tag-border-color-invalid-selected-focus))); + background-color: var(--highcontrast-tag-background-color-invalid-selected-focus, var(--mod-tag-background-color-invalid-selected-focus, var(--spectrum-tag-background-color-invalid-selected-focus))); + } + } } - /* emphasized */ .spectrum-Tag.is-emphasized { - border-color: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, var(--spectrum-tag-border-color-emphasized))); - background-color: var(--highcontrast-tag-background-color-emphasized, var(--mod-tag-background-color-emphasized, var(--spectrum-tag-background-color-emphasized))); - color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized))); - - &:hover { - border-color: var(--highcontrast-tag-border-color-emphasized-hover, var(--mod-tag-border-color-emphasized-hover, var(--spectrum-tag-border-color-emphasized-hover))); - background-color: var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-tag-background-color-emphasized-hover))); - color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized))); - } - - &:active { - border-color: var(--highcontrast-tag-border-color-emphasized-active, var(--mod-tag-border-color-emphasized-active, var(--spectrum-tag-border-color-emphasized-active))); - background-color: var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-tag-background-color-emphasized-active))); - } - - &:focus-visible, - &.is-focused { - border-color: var(--highcontrast-tag-border-color-emphasized-focus, var(--mod-tag-border-color-emphasized-focus, var(--spectrum-tag-border-color-emphasized-focus))); - background-color: var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-tag-background-color-emphasized-focus))); - } + border-color: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, var(--spectrum-tag-border-color-emphasized))); + background-color: var(--highcontrast-tag-background-color-emphasized, var(--mod-tag-background-color-emphasized, var(--spectrum-tag-background-color-emphasized))); + color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized))); + + &:hover { + border-color: var(--highcontrast-tag-border-color-emphasized-hover, var(--mod-tag-border-color-emphasized-hover, var(--spectrum-tag-border-color-emphasized-hover))); + background-color: var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-tag-background-color-emphasized-hover))); + color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized))); + } + + &:active { + border-color: var(--highcontrast-tag-border-color-emphasized-active, var(--mod-tag-border-color-emphasized-active, var(--spectrum-tag-border-color-emphasized-active))); + background-color: var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-tag-background-color-emphasized-active))); + } + + &:focus-visible, + &.is-focused { + border-color: var(--highcontrast-tag-border-color-emphasized-focus, var(--mod-tag-border-color-emphasized-focus, var(--spectrum-tag-border-color-emphasized-focus))); + background-color: var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-tag-background-color-emphasized-focus))); + } } - /* disabled */ .spectrum-Tag.is-disabled { - border-color: var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, var(--spectrum-tag-border-color-disabled))); - background-color: var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-tag-background-color-disabled))); - color: var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-tag-content-color-disabled))); - pointer-events: none; - - .spectrum-Avatar { - opacity: var(--mod-avatar-opacity-disabled, var(--spectrum-avatar-opacity-disabled)); - } + border-color: var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, var(--spectrum-tag-border-color-disabled))); + background-color: var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-tag-background-color-disabled))); + color: var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-tag-content-color-disabled))); + pointer-events: none; + + .spectrum-Avatar { + opacity: var(--mod-avatar-opacity-disabled, var(--spectrum-avatar-opacity-disabled)); + } } /* windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Tag { - forced-color-adjust: none; - - --highcontrast-tag-border-color: ButtonText; - --highcontrast-tag-border-color-hover: ButtonText; - --highcontrast-tag-border-color-active: ButtonText; - --highcontrast-tag-border-color-focus: Highlight; - - --highcontrast-tag-background-color: ButtonFace; - --highcontrast-tag-background-color-hover: ButtonFace; - --highcontrast-tag-background-color-active: ButtonFace; - --highcontrast-tag-background-color-focus: ButtonFace; - - --highcontrast-tag-content-color: ButtonText; - --highcontrast-tag-content-color-hover: ButtonText; - --highcontrast-tag-content-color-active: ButtonText; - --highcontrast-tag-content-color-focus: ButtonText; - - --highcontrast-tag-focus-ring-color: Highlight; - - &.is-selected { - --highcontrast-tag-border-color-selected: Highlight; - --highcontrast-tag-border-color-selected-hover: Highlight; - --highcontrast-tag-border-color-selected-active: Highlight; - --highcontrast-tag-border-color-selected-focus: Highlight; - - --highcontrast-tag-background-color-selected: Highlight; - --highcontrast-tag-background-color-selected-hover: Highlight; - --highcontrast-tag-background-color-selected-active: Highlight; - --highcontrast-tag-background-color-selected-focus: Highlight; - - --highcontrast-tag-content-color-selected: HighlightText; - } - - &.is-disabled { - --highcontrast-tag-border-color-disabled: GrayText; - --highcontrast-tag-background-color-disabled: ButtonFace; - --highcontrast-tag-content-color-disabled: GrayText; - } - - &.is-invalid { - --highcontrast-tag-border-color-invalid: Highlight; - --highcontrast-tag-border-color-invalid-hover: Highlight; - --highcontrast-tag-border-color-invalid-active: Highlight; - --highcontrast-tag-border-color-invalid-focus: Highlight; - - --highcontrast-tag-content-color-invalid: CanvasText; - --highcontrast-tag-content-color-invalid-hover: CanvasText; - --highcontrast-tag-content-color-invalid-active: CanvasText; - --highcontrast-tag-content-color-invalid-focus: CanvasText; - - &.is-selected { - --highcontrast-tag-border-color-invalid-selected: Highlight; - --highcontrast-tag-border-color-invalid-selected-hover: Highlight; - --highcontrast-tag-border-color-invalid-selected-focus: Highlight; - --highcontrast-tag-border-color-invalid-selected-active: Highlight; - - --highcontrast-tag-background-color-invalid-selected: Highlight; - --highcontrast-tag-background-color-invalid-selected-hover: Highlight; - --highcontrast-tag-background-color-invalid-selected-active: Highlight; - --highcontrast-tag-background-color-invalid-selected-focus: Highlight; - - --highcontrast-tag-content-color-invalid-selected: HighlightText; - } - } - - &.is-emphasized { - --highcontrast-tag-border-color-emphasized: Highlight; - --highcontrast-tag-border-color-emphasized-hover: Highlight; - --highcontrast-tag-border-color-emphasized-active: Highlight; - --highcontrast-tag-border-color-emphasized-focus: Highlight; - - --highcontrast-tag-background-color-emphasized: ButtonFace; - --highcontrast-tag-background-color-emphasized-hover: ButtonFace; - --highcontrast-tag-background-color-emphasized-active: ButtonFace; - --highcontrast-tag-background-color-emphasized-focus: ButtonFace; - - --highcontrast-tag-content-color-emphasized: CanvasText; - } - } + .spectrum-Tag { + forced-color-adjust: none; + + --highcontrast-tag-border-color: ButtonText; + --highcontrast-tag-border-color-hover: ButtonText; + --highcontrast-tag-border-color-active: ButtonText; + --highcontrast-tag-border-color-focus: Highlight; + + --highcontrast-tag-background-color: ButtonFace; + --highcontrast-tag-background-color-hover: ButtonFace; + --highcontrast-tag-background-color-active: ButtonFace; + --highcontrast-tag-background-color-focus: ButtonFace; + + --highcontrast-tag-content-color: ButtonText; + --highcontrast-tag-content-color-hover: ButtonText; + --highcontrast-tag-content-color-active: ButtonText; + --highcontrast-tag-content-color-focus: ButtonText; + + --highcontrast-tag-focus-ring-color: Highlight; + + &.is-selected { + --highcontrast-tag-border-color-selected: Highlight; + --highcontrast-tag-border-color-selected-hover: Highlight; + --highcontrast-tag-border-color-selected-active: Highlight; + --highcontrast-tag-border-color-selected-focus: Highlight; + + --highcontrast-tag-background-color-selected: Highlight; + --highcontrast-tag-background-color-selected-hover: Highlight; + --highcontrast-tag-background-color-selected-active: Highlight; + --highcontrast-tag-background-color-selected-focus: Highlight; + + --highcontrast-tag-content-color-selected: HighlightText; + } + + &.is-disabled { + --highcontrast-tag-border-color-disabled: GrayText; + --highcontrast-tag-background-color-disabled: ButtonFace; + --highcontrast-tag-content-color-disabled: GrayText; + } + + &.is-invalid { + --highcontrast-tag-border-color-invalid: Highlight; + --highcontrast-tag-border-color-invalid-hover: Highlight; + --highcontrast-tag-border-color-invalid-active: Highlight; + --highcontrast-tag-border-color-invalid-focus: Highlight; + + --highcontrast-tag-content-color-invalid: CanvasText; + --highcontrast-tag-content-color-invalid-hover: CanvasText; + --highcontrast-tag-content-color-invalid-active: CanvasText; + --highcontrast-tag-content-color-invalid-focus: CanvasText; + + &.is-selected { + --highcontrast-tag-border-color-invalid-selected: Highlight; + --highcontrast-tag-border-color-invalid-selected-hover: Highlight; + --highcontrast-tag-border-color-invalid-selected-focus: Highlight; + --highcontrast-tag-border-color-invalid-selected-active: Highlight; + + --highcontrast-tag-background-color-invalid-selected: Highlight; + --highcontrast-tag-background-color-invalid-selected-hover: Highlight; + --highcontrast-tag-background-color-invalid-selected-active: Highlight; + --highcontrast-tag-background-color-invalid-selected-focus: Highlight; + + --highcontrast-tag-content-color-invalid-selected: HighlightText; + } + } + + &.is-emphasized { + --highcontrast-tag-border-color-emphasized: Highlight; + --highcontrast-tag-border-color-emphasized-hover: Highlight; + --highcontrast-tag-border-color-emphasized-active: Highlight; + --highcontrast-tag-border-color-emphasized-focus: Highlight; + + --highcontrast-tag-background-color-emphasized: ButtonFace; + --highcontrast-tag-background-color-emphasized-hover: ButtonFace; + --highcontrast-tag-background-color-emphasized-active: ButtonFace; + --highcontrast-tag-background-color-emphasized-focus: ButtonFace; + + --highcontrast-tag-content-color-emphasized: CanvasText; + } + } } diff --git a/components/tag/themes/express.css b/components/tag/themes/express.css index 720c1b53f7..df4e53c65e 100644 --- a/components/tag/themes/express.css +++ b/components/tag/themes/express.css @@ -13,49 +13,49 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Tag { - /* border */ - --spectrum-tag-background-color: transparent; - --spectrum-tag-background-color-hover: var(--spectrum-gray-300); - --spectrum-tag-background-color-active: var(--spectrum-gray-400); - --spectrum-tag-background-color-focus: var(--spectrum-gray-300); - - /* express has pill style full corner radius */ - --spectrum-tag-size-small-corner-radius: var(--spectrum-component-height-75); - --spectrum-tag-size-medium-corner-radius: var(--spectrum-component-height-100); - --spectrum-tag-size-large-corner-radius: var(--spectrum-component-height-200); - - /* background */ - --spectrum-tag-border-color: var(--spectrum-gray-300); - --spectrum-tag-border-color-hover: var(--spectrum-gray-400); - --spectrum-tag-border-color-active: var(--spectrum-gray-500); - --spectrum-tag-border-color-focus: var(--spectrum-gray-400); - - /* content color */ - --spectrum-tag-content-color: var(--spectrum-neutral-content-color-default); - --spectrum-tag-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-tag-content-color-active: var(--spectrum-neutral-content-color-down); - --spectrum-tag-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - /* selected */ - --spectrum-tag-border-color-selected: var(--spectrum-neutral-background-color-default); - --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-background-color-hover); - --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-background-color-down); - --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-background-color-key-focus); - - /* disabled */ - --spectrum-tag-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-tag-background-color-disabled: transparent; - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-75); - --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-75); - --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-75); - --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-100); - --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-100); - --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-200); - --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-200); - --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-200); - } + .spectrum-Tag { + /* border */ + --spectrum-tag-background-color: transparent; + --spectrum-tag-background-color-hover: var(--spectrum-gray-300); + --spectrum-tag-background-color-active: var(--spectrum-gray-400); + --spectrum-tag-background-color-focus: var(--spectrum-gray-300); + + /* express has pill style full corner radius */ + --spectrum-tag-size-small-corner-radius: var(--spectrum-component-height-75); + --spectrum-tag-size-medium-corner-radius: var(--spectrum-component-height-100); + --spectrum-tag-size-large-corner-radius: var(--spectrum-component-height-200); + + /* background */ + --spectrum-tag-border-color: var(--spectrum-gray-300); + --spectrum-tag-border-color-hover: var(--spectrum-gray-400); + --spectrum-tag-border-color-active: var(--spectrum-gray-500); + --spectrum-tag-border-color-focus: var(--spectrum-gray-400); + + /* content color */ + --spectrum-tag-content-color: var(--spectrum-neutral-content-color-default); + --spectrum-tag-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-tag-content-color-active: var(--spectrum-neutral-content-color-down); + --spectrum-tag-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + /* selected */ + --spectrum-tag-border-color-selected: var(--spectrum-neutral-background-color-default); + --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-background-color-hover); + --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-background-color-down); + --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-background-color-key-focus); + + /* disabled */ + --spectrum-tag-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-tag-background-color-disabled: transparent; + + /* tokens based on theme and t-shirt size */ + --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-75); + --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-75); + --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-75); + --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-100); + --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-100); + --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-100); + --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-200); + --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-200); + --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-200); + } } diff --git a/components/tag/themes/spectrum.css b/components/tag/themes/spectrum.css index 8c02defb2f..adef9fa26b 100644 --- a/components/tag/themes/spectrum.css +++ b/components/tag/themes/spectrum.css @@ -11,49 +11,49 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Tag { - /* border */ - --spectrum-tag-border-color: var(--spectrum-gray-700); - --spectrum-tag-border-color-hover: var(--spectrum-gray-800); - --spectrum-tag-border-color-active: var(--spectrum-gray-900); - --spectrum-tag-border-color-focus: var(--spectrum-gray-800); - - /* corner border radius */ - --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); - - /* background */ - --spectrum-tag-background-color: var(--spectrum-gray-75); - --spectrum-tag-background-color-hover: var(--spectrum-gray-75); - --spectrum-tag-background-color-active: var(--spectrum-gray-200); - --spectrum-tag-background-color-focus: var(--spectrum-gray-75); - - /* content color */ - --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - - /* selected variant */ - --spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); - --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); - --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - - /* disabled variant */ - --spectrum-tag-border-color-disabled: transparent; - --spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color); - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); - --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); - --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); - --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); - --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); - --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); - --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); - --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); - --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); - } + .spectrum-Tag { + /* border */ + --spectrum-tag-border-color: var(--spectrum-gray-700); + --spectrum-tag-border-color-hover: var(--spectrum-gray-800); + --spectrum-tag-border-color-active: var(--spectrum-gray-900); + --spectrum-tag-border-color-focus: var(--spectrum-gray-800); + + /* corner border radius */ + --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + + /* background */ + --spectrum-tag-background-color: var(--spectrum-gray-75); + --spectrum-tag-background-color-hover: var(--spectrum-gray-75); + --spectrum-tag-background-color-active: var(--spectrum-gray-200); + --spectrum-tag-background-color-focus: var(--spectrum-gray-75); + + /* content color */ + --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + + /* selected variant */ + --spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); + --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); + --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + + /* disabled variant */ + --spectrum-tag-border-color-disabled: transparent; + --spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color); + + /* tokens based on theme and t-shirt size */ + --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); + --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); + --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); + --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); + --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); + --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); + --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); + --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); + --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); + } } diff --git a/components/taggroup/index.css b/components/taggroup/index.css index 8db3c546e9..d9673bec23 100644 --- a/components/taggroup/index.css +++ b/components/taggroup/index.css @@ -11,19 +11,19 @@ governing permissions and limitations under the License. */ .spectrum-TagGroup { - --spectrum-tag-group-item-margin-block: var(--spectrum-spacing-75); - --spectrum-tag-group-item-margin-inline: var(--spectrum-spacing-75); + --spectrum-tag-group-item-margin-block: var(--spectrum-spacing-75); + --spectrum-tag-group-item-margin-inline: var(--spectrum-spacing-75); } .spectrum-TagGroup { - display: inline-flex; - flex-wrap: wrap; - margin: 0; - padding: 0; - list-style: none; + display: inline-flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style: none; } .spectrum-TagGroup-item { - margin-block: var(--mod-tag-group-item-margin-block, var(--spectrum-tag-group-item-margin-block)); - margin-inline: var(--mod-tag-group-item-margin-inline, var(--spectrum-tag-group-item-margin-inline)); + margin-block: var(--mod-tag-group-item-margin-block, var(--spectrum-tag-group-item-margin-block)); + margin-inline: var(--mod-tag-group-item-margin-inline, var(--spectrum-tag-group-item-margin-inline)); } diff --git a/components/textfield/index.css b/components/textfield/index.css index dfea49a164..fc1cee1dac 100644 --- a/components/textfield/index.css +++ b/components/textfield/index.css @@ -13,90 +13,48 @@ governing permissions and limitations under the License. @import "./themes/express.css"; .spectrum-Textfield { - /* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */ - /* disallow mod for max compatibility */ - --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); - --spectrum-texfield-animation-duration: var( - --spectrum-animation-duration-100 - ); + /* 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-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 - ); - - /* 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-invalid: var(--spectrum-field-text-to-alert-icon-medium); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); + --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + + /* default icon spacing - valid */ + --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); + --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet); + --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); /* font styles */ --spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack); @@ -104,320 +62,150 @@ 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-text-color-invalid: var( - --spectrum-neutral-content-color-default - ); + --spectrum-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default); + --spectrum-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); + --spectrum-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); + --spectrum-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); + --spectrum-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus); + --spectrum-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); + + --spectrum-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default); /* Valid Colors */ - --spectrum-textfield-text-color-valid: var( - --spectrum-neutral-content-color-default - ); + --spectrum-textfield-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 *********/ @@ -462,52 +250,29 @@ governing permissions and limitations under the License. &::after { content: ""; position: absolute; - inset-block-end: calc( - -1 * ( - var(--mod-textfield-focus-indicator-gap, - var(--spectrum-textfield-focus-indicator-gap) - ) + - var(--mod-textfield-focus-indicator-width, - var(--spectrum-textfield-focus-indicator-width) - )) - ); + inset-block-end: calc(-1 * (var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)))); 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) - ) - ); + background-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))); } } /*** Quiet Input Invalid ⚠️ ***/ - &.is-invalid{ - .spectrum-Textfield-input{ - padding-inline-end: calc( - var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + - var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)) - ); + &.is-invalid { + .spectrum-Textfield-input { + padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid))); } } /*** Quiet Input Valid ✅ ***/ - &.is-valid{ - .spectrum-Textfield-input{ - padding-inline-end: calc( - var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + - var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)) - ); + &.is-valid { + .spectrum-Textfield-input { + padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid))); } } } @@ -532,56 +297,20 @@ 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) - ); - color: var( - --highcontrast-textfield-icon-color-valid, - var( - --mod-textfield-icon-color-valid, - var(--spectrum-textfield-icon-color-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))); } /****** 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) - ); - color: var( - --highcontrast-textfield-icon-color-invalid, - var( - --mod-textfield-icon-color-invalid, - var(--spectrum-textfield-icon-color-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))); } .spectrum-Textfield.is-disabled &, @@ -595,36 +324,24 @@ 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 & { @@ -635,10 +352,7 @@ 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; } @@ -650,120 +364,47 @@ 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( - var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)) / - 2 - ); + padding-inline-end: calc(var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)) / 2); .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)); } } /********* Child Element - Input *********/ .spectrum-Textfield-input { - /* no mod defined to allow for maximum compatibility */ - line-height: var(--spectrum-textfield-input-line-height); + /* no mod defined to allow for maximum compatibility */ + line-height: var(--spectrum-textfield-input-line-height); box-sizing: border-box; inline-size: 100%; - min-inline-size: var( - --mod-textfield-min-width, - var(--spectrum-textfield-min-width) - ); + min-inline-size: var(--mod-textfield-min-width, var(--spectrum-textfield-min-width)); block-size: var(--mod-textfield-height, var(--spectrum-textfield-height)); - padding-block-start: calc( - var( - --mod-textfield-spacing-block-start, - var(--spectrum-textfield-spacing-block-start) - ) - - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) - ); - padding-block-end: calc( - var( - --mod-textfield-spacing-block-end, - var(--spectrum-textfield-spacing-block-end) - ) - - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) - ); - - padding-inline: calc( - var(--mod-textfield-spacing-inline, var(--spectrum-textfield-spacing-inline)) - - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) - ); + padding-block-start: calc(var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + padding-block-end: calc(var(--mod-textfield-spacing-block-end, var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + + padding-inline: calc(var(--mod-textfield-spacing-inline, var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); /* Use padding instead of text-indent because text-indent does not left align the text in Edge browser */ 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) - ) - 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) - ); - transition: border-color - 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) - ); - color: var( - --highcontrast-textfield-text-color-default, - var( - --mod-textfield-text-color-default, - var(--spectrum-textfield-text-color-default) - ) - ); + 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)); + transition: border-color 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)); + color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))); /*** ↓ Browser Mitigations for Input ↓ ***/ /* Remove the margin for input in Firefox and Safari. */ @@ -820,35 +461,14 @@ governing permissions and limitations under the License. } /* stylelint-enable selector-no-vendor-prefix */ - /*** Input Placeholder Text ***/ &::placeholder { 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) - ) - ); - transition: color - 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)); + color: var(--highcontrast-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)) ease-in-out; } /*** Input Placeholder Text - CJK ***/ @@ -870,249 +490,97 @@ governing permissions and limitations under the License. /* hover */ .spectrum-Textfield:hover &, &:hover { - border-color: var( - --highcontrast-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) - ) - ); + border-color: var(--highcontrast-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))); &::placeholder { - color: var( - --highcontrast-textfield-text-color-hover, - var( - --mod-textfield-text-color-hover, - var(--spectrum-textfield-text-color-hover) - ) - ); + color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover))); } } /* mouse focus */ .is-focused &, &:focus { - border-color: var( - --highcontrast-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) - ) - ); + border-color: var(--highcontrast-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))); &::placeholder { - color: var( - --highcontrast-textfield-text-color-focus, - var( - --mod-textfield-text-color-focus, - var(--spectrum-textfield-text-color-focus) - ) - ); + color: var(--highcontrast-textfield-text-color-focus, var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus))); } /* focus hover */ &:hover { - border-color: var( - --highcontrast-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) - ) - ); + border-color: var(--highcontrast-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))); } &:hover::placeholder { - color: var( - --highcontrast-textfield-text-color-focus-hover, - var( - --mod-textfield-text-color-focus-hover, - var(--spectrum-textfield-text-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))); } } /* keyboard focus */ .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) - ) - ); - color: var( - --highcontrast-textfield-text-color-keyboard-focus, - var( - --mod-textfield-text-color-keyboard-focus, - var(--spectrum-textfield-text-color-keyboard-focus) - ) - ); + border-color: var(--highcontrast-textfield-border-color-keyboard-focus, var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus))); + color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))); &::placeholder { - color: var( - --highcontrast-textfield-text-color-keyboard-focus, - var( - --mod-textfield-text-color-keyboard-focus, - var(--spectrum-textfield-text-color-keyboard-focus) - ) - ); + color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))); } /* focus indicator is focused state */ - outline: var( - --mod-textfield-focus-indicator-width, - var(--spectrum-textfield-focus-indicator-width) - ) - solid; - outline-color: var( - --highcontrast-textfield-focus-indicator-color, - var( - --mod-textfield-focus-indicator-color, - var(--spectrum-textfield-focus-indicator-color) - ) - ); - outline-offset: var( - --mod-textfield-focus-indicator-gap, - var(--spectrum-textfield-focus-indicator-gap) - ); + outline: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)) solid; + outline-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))); + outline-offset: var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)); } /*** Input Valid ✅ ***/ .is-valid & { - padding-inline-end: calc( - var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + - var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)) + - var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) - - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) - ); - color: var( - --highcontrast-textfield-text-color-valid, - var( - --mod-textfield-text-color-valid, - var(--spectrum-textfield-text-color-valid) - ) - ); + padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + color: var(--highcontrast-textfield-text-color-valid, var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid))); } /*** Input Invalid ⚠️ ***/ .is-invalid & { - padding-inline-end: calc( - var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + - var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)) + - var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) - ); - color: var( - --highcontrast-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) - ) - ); + padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + color: var(--highcontrast-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))); } /* Invalid hover */ .is-invalid:hover &, .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) - ) - ); + border-color: var(--highcontrast-textfield-border-color-invalid-hover, var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover))); } /* Invalid mouse focus */ .is-invalid.is-focused &, .is-invalid:focus &, .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) - ) - ); + border-color: var(--highcontrast-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) - ) - ); + 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))); } } /* invalid keyboard focus */ .is-invalid.is-keyboardFocused &, .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) - ) - ); + 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))); } /****** Input Disabled 🚫 ******/ .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) - ) - ); + color: var(--highcontrast-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) - ) - ); + -webkit-text-fill-color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); /* Disable the resize functionality when disabled */ resize: none; @@ -1121,13 +589,7 @@ governing permissions and limitations under the License. opacity: 1; &::placeholder { - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); + color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); } } @@ -1137,18 +599,9 @@ 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; @@ -1162,26 +615,11 @@ 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) - ); - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-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))); &::placeholder { - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); + color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); } } @@ -1191,23 +629,11 @@ governing permissions and limitations under the License. &:read-only { background-color: transparent; border-color: transparent; - color: var( - --highcontrast-textfield-text-color-readonly, - var( - --mod-textfield-text-color-readonly, - var(--spectrum-textfield-text-color-readonly) - ) - ); + color: var(--highcontrast-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) - ) - ); + color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))); background-color: transparent; } } @@ -1225,24 +651,15 @@ 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; } @@ -1265,17 +682,11 @@ governing permissions and limitations under the License. /*** Text Area ***/ .spectrum-Textfield--multiline { - --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) - ); + --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)); resize: inherit; } @@ -1285,17 +696,13 @@ governing permissions and limitations under the License. } &.spectrum-Textfield--sideLabel .spectrum-Textfield-input { - grid-row: 1 / auto + grid-row: 1 / auto; } } &.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/textfield/themes/express.css b/components/textfield/themes/express.css index 498873727a..fc270817fa 100644 --- a/components/textfield/themes/express.css +++ b/components/textfield/themes/express.css @@ -13,13 +13,13 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Textfield { - --spectrum-textfield-border-color: var(--spectrum-gray-400); - --spectrum-textfield-border-color-hover: var(--spectrum-gray-500); - --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); - --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + .spectrum-Textfield { + --spectrum-textfield-border-color: var(--spectrum-gray-400); + --spectrum-textfield-border-color-hover: var(--spectrum-gray-500); + --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - --spectrum-textfield-border-width: var(--spectrum-border-width-200); - } + --spectrum-textfield-border-width: var(--spectrum-border-width-200); + } } diff --git a/components/textfield/themes/spectrum.css b/components/textfield/themes/spectrum.css index b7109c7e32..0645ffcc04 100644 --- a/components/textfield/themes/spectrum.css +++ b/components/textfield/themes/spectrum.css @@ -11,13 +11,13 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Textfield { - --spectrum-textfield-border-color: var(--spectrum-gray-500); - --spectrum-textfield-border-color-hover: var(--spectrum-gray-600); - --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); - --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + .spectrum-Textfield { + --spectrum-textfield-border-color: var(--spectrum-gray-500); + --spectrum-textfield-border-color-hover: var(--spectrum-gray-600); + --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - --spectrum-textfield-border-width: var(--spectrum-border-width-100); - } + --spectrum-textfield-border-width: var(--spectrum-border-width-100); + } } diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index c90a2856ec..69fa70a08b 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -11,114 +11,99 @@ governing permissions and limitations under the License. */ .spectrum-Thumbnail { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); --spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75); --spectrum-thumbnail-border-width: var(--spectrum-border-width-100); /* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ - --spectrum-thumbnail-border-color-rgba: rgba( - var(--spectrum-gray-800-rgb), - var(--spectrum-thumbnail-border-color-opacity) - ); - --spectrum-thumbnail-layer-border-width-inner: var( - --spectrum-border-width-400 - ); + --spectrum-thumbnail-border-color-rgba: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-color-opacity)); + --spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white); - --spectrum-thumbnail-layer-border-width-outer: var( - --spectrum-border-width-100 - ); + --spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); --spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); - --spectrum-thumbnail-border-width-selected: var(--spectrum-border-width-200); - --spectrum-thumbnail-border-color-selected: var(--spectrum-accent-color-800); + --spectrum-thumbnail-border-width-selected: var(--spectrum-border-width-200); + --spectrum-thumbnail-border-color-selected: var(--spectrum-accent-color-800); - --spectrum-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-thumbnail-color-opacity-disabled: var( - --spectrum-thumbnail-opacity-disabled - ); + --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); } .spectrum-Thumbnail--size50 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); } .spectrum-Thumbnail--size75 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75); } .spectrum-Thumbnail--size100 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100); } .spectrum-Thumbnail--size200 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200); } .spectrum-Thumbnail--size300 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300); } .spectrum-Thumbnail--size400 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400); } .spectrum-Thumbnail--size500 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); } .spectrum-Thumbnail--size600 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600); } .spectrum-Thumbnail--size700 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700); } .spectrum-Thumbnail--size800 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800); } .spectrum-Thumbnail--size900 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900); } .spectrum-Thumbnail--size1000 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000); } .spectrum-Thumbnail { - position: relative; - margin: 0; - padding: 0; - display: block; - - 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) - ); - - &::before { - content: ''; - z-index: 2; - position: absolute; - inline-size: 100%; - block-size: 100%; - border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); - box-shadow: inset 0 0 0 var(--mod-thumbnail-border-width, var(--spectrum-thumbnail-border-width)) var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, var(--spectrum-thumbnail-border-color-rgba))); - } + position: relative; + margin: 0; + padding: 0; + display: block; + + 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)); + + &::before { + content: ""; + z-index: 2; + position: absolute; + inline-size: 100%; + block-size: 100%; + border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); + box-shadow: inset 0 0 0 var(--mod-thumbnail-border-width, var(--spectrum-thumbnail-border-width)) var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, var(--spectrum-thumbnail-border-color-rgba))); + } &.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 { @@ -127,229 +112,108 @@ 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-color: var( - --highcontrast-thumbnail-focus-indicator-color, - var( - --mod-thumbnail-focus-indicator-color, - var(--spectrum-thumbnail-focus-indicator-color) - ) - ); - border-radius: var( - --mod-thumbnail-border-radius, - var(--spectrum-thumbnail-border-radius) - ); + border-width: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness)); + border-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-thumbnail-focus-indicator-color))); + border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); position: absolute; - inset-inline-start: calc( - ( - var( - --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) - ) - ) * -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) - ) - ) * -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) - ) - ) * -1 - ); + 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))) * -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))) * -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))) * -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))) * -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 */ - /* Friends should align to the top of the tabs */ - vertical-align: top; - overflow: hidden; - z-index: 0; + /* Friends should align to the top of the tabs */ + vertical-align: top; + overflow: hidden; + z-index: 0; } .spectrum-Thumbnail-layer { border-style: solid; - border-width: var( - --mod-thumbnail-layer-border-width-outer, - var(--spectrum-thumbnail-layer-border-width-outer) - ); - border-color: var( - --highcontrast-thumbnail-layer-border-color-outer, - var( - --mod-thumbnail-layer-border-color-outer, - var(--spectrum-thumbnail-layer-border-color-outer) - ) - ); - box-sizing: border-box; - - display: flex; - align-items: center; - justify-content: center; - - &::before { - content: none; - } + border-width: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer)); + border-color: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-thumbnail-layer-border-color-outer))); + box-sizing: border-box; + + display: flex; + align-items: center; + justify-content: center; + + &::before { + content: none; + } /* stylelint-disable declaration-block-no-redundant-longhand-properties */ &.is-selected { outline-style: solid; - outline-color: var( - --highcontrast-thumbnail-border-color-selected, - var( - --mod-thumbnail-border-color-selected, - var(--spectrum-thumbnail-border-color-selected) - ) - ); - 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) - ) - ); + outline-color: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-thumbnail-border-color-selected))); + outline-width: var(--mod-thumbnail-border-width-selected, var(--spectrum-thumbnail-border-width-selected)); + outline-offset: calc(var(--mod-thumbnail-border-width-selected, var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner))); } } .spectrum-Thumbnail-layer-inner { - display: flex; - align-items: center; - justify-content: center; - - inline-size: calc( - var(--spectrum-thumbnail-size) - - ( - ( - var( - --mod-thumbnail-layer-border-width-inner, - var(--spectrum-thumbnail-layer-border-width-inner) - ) - ) - ) * 2 - ); - block-size: calc( - var(--spectrum-thumbnail-size) - - ( - ( - var( - --mod-thumbnail-layer-border-width-inner, - var(--spectrum-thumbnail-layer-border-width-inner) - ) - ) - ) * 2 - ); + display: flex; + align-items: center; + justify-content: center; + + inline-size: calc(var(--spectrum-thumbnail-size) - ((var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)))) * 2); + block-size: calc(var(--spectrum-thumbnail-size) - ((var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)))) * 2); outline-style: solid; - outline-color: var( - --highcontrast-thumbnail-layer-border-color-inner, - var( - --mod-thumbnail-layer-border-color-inner, - var(--spectrum-thumbnail-layer-border-color-inner) - ) - ); - outline-width: calc( - var( - --mod-thumbnail-layer-border-width-inner, - var(--spectrum-thumbnail-layer-border-width-inner) - ) - - var( - --mod-thumbnail-layer-border-width-outer, - var(--spectrum-thumbnail-layer-border-width-outer) - ) - ); + outline-color: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-thumbnail-layer-border-color-inner))); + outline-width: calc(var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer))); } /* stylelint-enable declaration-block-no-redundant-longhand-properties */ .spectrum-Thumbnail-image-wrapper { - display: flex; - align-items: center; - justify-content: center; - inline-size: 100%; - block-size: 100%; + display: flex; + align-items: center; + justify-content: center; + inline-size: 100%; + block-size: 100%; } .spectrum-Thumbnail-image { - position: relative; - max-block-size: 100%; - max-inline-size: 100%; - z-index: 1; + position: relative; + max-block-size: 100%; + max-inline-size: 100%; + z-index: 1; } .spectrum-Thumbnail--cover { - .spectrum-Thumbnail-image { - block-size: 100%; - inline-size: 100%; - object-fit: cover; - object-position: center; - } + .spectrum-Thumbnail-image { + block-size: 100%; + inline-size: 100%; + object-fit: cover; + object-position: center; + } } .spectrum-Thumbnail-background { - position: absolute; - z-index: 0; - inset-inline-start: 0; - inset-block-start: 0; - inset-inline-end: 0; - inset-block-end: 0; - block-size: 100%; - inline-size: 100%; - background-size: cover; - background-position: center center; - border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); + position: absolute; + z-index: 0; + inset-inline-start: 0; + inset-block-start: 0; + inset-inline-end: 0; + inset-block-end: 0; + block-size: 100%; + inline-size: 100%; + background-size: cover; + background-position: center center; + border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); } /* Windows High Contrast Mode */ @media (forced-colors: active) { - .spectrum-Thumbnail { - /* Allow checkerboard pattern to be visible. */ - forced-color-adjust: none; + .spectrum-Thumbnail { + /* Allow checkerboard pattern to be visible. */ + forced-color-adjust: none; --highcontrast-thumbnail-border-color-selected: Highlight; --highcontrast-thumbnail-focus-indicator-color: Highlight; --highcontrast-thumbnail-border-color: CanvasText; diff --git a/components/toast/index.css b/components/toast/index.css index 838afaeb40..5f8f5cfcce 100644 --- a/components/toast/index.css +++ b/components/toast/index.css @@ -13,185 +13,185 @@ governing permissions and limitations under the License. @import "./themes/express.css"; .spectrum-Toast { - /* Hardcoded variables */ - --spectrum-toast-font-weight: var(--spectrum-regular-font-weight); + /* Hardcoded variables */ + --spectrum-toast-font-weight: var(--spectrum-regular-font-weight); - /* Size */ + /* Size */ - --spectrum-toast-font-size: var(--spectrum-font-size-100); - --spectrum-toast-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-toast-block-size: var(--spectrum-toast-height); - --spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --spectrum-toast-border-width: var(--spectrum-border-width-100); + --spectrum-toast-font-size: var(--spectrum-font-size-100); + --spectrum-toast-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-toast-block-size: var(--spectrum-toast-height); + --spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --spectrum-toast-border-width: var(--spectrum-border-width-100); - --spectrum-toast-line-height: var(--spectrum-line-height-100); - --spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-toast-line-height: var(--spectrum-line-height-100); + --spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - /* Space */ + /* Space */ - --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300); - --spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300); + --spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300); + --spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300); - --spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon); + --spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon); - --spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300); - --spectrum-toast-spacing-close-button: var(--spectrum-spacing-100); + --spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300); + --spectrum-toast-spacing-close-button: var(--spectrum-spacing-100); - --spectrum-toast-spacing-block-start: var(--spectrum-spacing-100); - --spectrum-toast-spacing-block-end: var(--spectrum-spacing-100); + --spectrum-toast-spacing-block-start: var(--spectrum-spacing-100); + --spectrum-toast-spacing-block-end: var(--spectrum-spacing-100); - --spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text); + --spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text); - /* Color */ + /* Color */ - --spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default); - --spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default); - --spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default); + --spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default); + --spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default); + --spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default); - --spectrum-toast-text-and-icon-color: var(--spectrum-white); + --spectrum-toast-text-and-icon-color: var(--spectrum-white); - --spectrum-toast-divider-color: var(--spectrum-transparent-white-300); + --spectrum-toast-divider-color: var(--spectrum-transparent-white-300); } @media (forced-colors: active) { - .spectrum-Toast { - /* Border is visible in high contrast mode */ - --highcontrast-toast-border-color: ButtonText; + .spectrum-Toast { + /* Border is visible in high contrast mode */ + --highcontrast-toast-border-color: ButtonText; - border: var(--mod-toast-border-width, var(--spectrum-toast-border-width)) solid var(--highcontrast-toast-border-color, transparent); - } + border: var(--mod-toast-border-width, var(--spectrum-toast-border-width)) solid var(--highcontrast-toast-border-color, transparent); + } } .spectrum-Toast { - box-sizing: border-box; - display: inline-flex; - flex-direction: row; - align-items: stretch; - min-block-size: var(--mod-toast-block-size, var(--spectrum-toast-block-size)); - max-inline-size: var(--mod-toast-max-inline-size, var(--spectrum-toast-max-inline-size)); + box-sizing: border-box; + display: inline-flex; + flex-direction: row; + align-items: stretch; + min-block-size: var(--mod-toast-block-size, var(--spectrum-toast-block-size)); + max-inline-size: var(--mod-toast-max-inline-size, var(--spectrum-toast-max-inline-size)); - border-radius: var(--mod-toast-corner-radius, var(--spectrum-toast-corner-radius)); + border-radius: var(--mod-toast-corner-radius, var(--spectrum-toast-corner-radius)); - padding-inline-start: var(--mod-toast-spacing-start-edge-to-text-and-icon, var(--spectrum-toast-spacing-start-edge-to-text-and-icon)); + padding-inline-start: var(--mod-toast-spacing-start-edge-to-text-and-icon, var(--spectrum-toast-spacing-start-edge-to-text-and-icon)); - font-size: var(--mod-toast-font-size, var(--spectrum-toast-font-size)); - font-weight: var(--mod-toast-font-weight, var(--spectrum-toast-font-weight)); + font-size: var(--mod-toast-font-size, var(--spectrum-toast-font-size)); + font-weight: var(--mod-toast-font-weight, var(--spectrum-toast-font-weight)); - -webkit-font-smoothing: antialiased; + -webkit-font-smoothing: antialiased; - background-color: var(--highcontrast-toast-background-color-default, var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default))); - color: var(--highcontrast-toast-background-color-default, var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default))); + background-color: var(--highcontrast-toast-background-color-default, var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default))); + color: var(--highcontrast-toast-background-color-default, var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default))); } .spectrum-Toast--negative { - background-color: var(--highcontrast-toast-negative-background-color-default, var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default))); - color: var(--highcontrast-toast-negative-background-color-default, var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default))); + background-color: var(--highcontrast-toast-negative-background-color-default, var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default))); + color: var(--highcontrast-toast-negative-background-color-default, var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default))); - .spectrum-Toast-closeButton:focus-visible:not(:active) { - color: var(--highcontrast-toast-negative-background-color-default, var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default))); - } + .spectrum-Toast-closeButton:focus-visible:not(:active) { + color: var(--highcontrast-toast-negative-background-color-default, var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default))); + } } .spectrum-Toast--info { - background-color: var(--highcontrast-toast-informative-background-color-default, var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default))); - color: var(--highcontrast-toast-informative-background-color-default, var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default))); + background-color: var(--highcontrast-toast-informative-background-color-default, var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default))); + color: var(--highcontrast-toast-informative-background-color-default, var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default))); - .spectrum-Toast-closeButton:focus-visible:not(:active) { - color: var(--highcontrast-toast-informative-background-color-default, var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default))); - } + .spectrum-Toast-closeButton:focus-visible:not(:active) { + color: var(--highcontrast-toast-informative-background-color-default, var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default))); + } } .spectrum-Toast--positive { - background-color: var(--highcontrast-toast-positive-background-color-default, var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default))); - color: var(--highcontrast-toast-positive-background-color-default, var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default))); + background-color: var(--highcontrast-toast-positive-background-color-default, var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default))); + color: var(--highcontrast-toast-positive-background-color-default, var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default))); - .spectrum-Toast-closeButton:focus-visible:not(:active) { - color: var(--highcontrast-toast-positive-background-color-default, var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default))); - } + .spectrum-Toast-closeButton:focus-visible:not(:active) { + color: var(--highcontrast-toast-positive-background-color-default, var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default))); + } } .spectrum-Toast-typeIcon { - flex-shrink: 0; - flex-grow: 0; + flex-shrink: 0; + flex-grow: 0; - margin-block-start: var(--mod-toast-spacing-top-edge-to-icon, var(--spectrum-toast-spacing-top-edge-to-icon)); - margin-inline-end: var(--mod-toast-spacing-icon-to-text, var(--spectrum-toast-spacing-icon-to-text)); - margin-inline-start: 0; + margin-block-start: var(--mod-toast-spacing-top-edge-to-icon, var(--spectrum-toast-spacing-top-edge-to-icon)); + margin-inline-end: var(--mod-toast-spacing-icon-to-text, var(--spectrum-toast-spacing-icon-to-text)); + margin-inline-start: 0; - color: var(--highcontrast-toast-text-and-icon-color, var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color))); + color: var(--highcontrast-toast-text-and-icon-color, var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color))); } .spectrum-Toast-content { - flex: 1 1 auto; - display: inline-block; - box-sizing: border-box; + flex: 1 1 auto; + display: inline-block; + box-sizing: border-box; - padding-block-start: calc(var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text)) - var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start))); - padding-block-end: calc(var(--mod-toast-spacing-bottom-edge-to-text, var(--spectrum-toast-spacing-bottom-edge-to-text)) - var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end))); + padding-block-start: calc(var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text)) - var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start))); + padding-block-end: calc(var(--mod-toast-spacing-bottom-edge-to-text, var(--spectrum-toast-spacing-bottom-edge-to-text)) - var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end))); - padding-inline-end: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal)); - padding-inline-start: 0; + padding-inline-end: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal)); + padding-inline-start: 0; - line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height)); + line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height)); - text-align: start; + text-align: start; - color: var(--highcontrast-toast-text-and-icon-color, var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color))); + color: var(--highcontrast-toast-text-and-icon-color, var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color))); - &:lang(ja), - &:lang(zh), - &:lang(ko) { - line-height: var(--mod-toast-line-height-cjk, var(--spectrum-toast-line-height-cjk)); - } + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-toast-line-height-cjk, var(--spectrum-toast-line-height-cjk)); + } } .spectrum-Toast-buttons { - display: flex; - flex: 0 0 auto; - align-items: flex-start; + display: flex; + flex: 0 0 auto; + align-items: flex-start; - margin-block-start: var(--mod-toast-spacing-top-edge-to-divider, var(--spectrum-toast-spacing-top-edge-to-divider)); - margin-block-end: var(--mod-toast-spacing-bottom-edge-to-divider, var(--spectrum-toast-spacing-bottom-edge-to-divider)); + margin-block-start: var(--mod-toast-spacing-top-edge-to-divider, var(--spectrum-toast-spacing-top-edge-to-divider)); + margin-block-end: var(--mod-toast-spacing-bottom-edge-to-divider, var(--spectrum-toast-spacing-bottom-edge-to-divider)); - /* Divider color for Text | Action Button */ - border-inline-start-color: var(--mod-toast-divider-color, var(--spectrum-toast-divider-color)); - padding-inline-end: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button)); + /* Divider color for Text | Action Button */ + border-inline-start-color: var(--mod-toast-divider-color, var(--spectrum-toast-divider-color)); + padding-inline-end: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button)); - .spectrum-CloseButton { - align-self: flex-start; - } + .spectrum-CloseButton { + align-self: flex-start; + } } .spectrum-Toast-body { - display: flex; - flex-wrap: wrap; - align-items: center; - flex: 1 1 auto; - align-self: center; - - padding-block-start: var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start)); - padding-block-end: var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end)); - - .spectrum-Button { - margin-inline-start: auto; - margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider)); - - &:dir(rtl) { - margin-inline-end: auto; - margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider)); - } - } - - & + .spectrum-Toast-buttons { - padding-inline-start: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button)); - - border-inline-start-width: 1px; - border-inline-start-style: solid; - } + display: flex; + flex-wrap: wrap; + align-items: center; + flex: 1 1 auto; + align-self: center; + + padding-block-start: var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start)); + padding-block-end: var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end)); + + .spectrum-Button { + margin-inline-start: auto; + margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider)); + + &:dir(rtl) { + margin-inline-end: auto; + margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider)); + } + } + + & + .spectrum-Toast-buttons { + padding-inline-start: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button)); + + border-inline-start-width: 1px; + border-inline-start-style: solid; + } } diff --git a/components/toast/themes/express.css b/components/toast/themes/express.css index 86cf741f93..d2567703fd 100644 --- a/components/toast/themes/express.css +++ b/components/toast/themes/express.css @@ -12,7 +12,7 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Toast { - --spectrum-toast-background-color-default: var(--spectrum-neutral-background-color-default); - } + .spectrum-Toast { + --spectrum-toast-background-color-default: var(--spectrum-neutral-background-color-default); + } } diff --git a/components/toast/themes/spectrum.css b/components/toast/themes/spectrum.css index 5ff0e5f14c..dfb6d06594 100644 --- a/components/toast/themes/spectrum.css +++ b/components/toast/themes/spectrum.css @@ -10,7 +10,7 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Toast { - --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - } + .spectrum-Toast { + --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + } } diff --git a/components/tooltip/themes/express.css b/components/tooltip/themes/express.css index f9afd07d73..fdd38dcc98 100644 --- a/components/tooltip/themes/express.css +++ b/components/tooltip/themes/express.css @@ -13,7 +13,7 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-Tooltip { - --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default); - } + .spectrum-Tooltip { + --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default); + } } diff --git a/components/tooltip/themes/spectrum.css b/components/tooltip/themes/spectrum.css index c0c75ea641..320c7a025e 100644 --- a/components/tooltip/themes/spectrum.css +++ b/components/tooltip/themes/spectrum.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-Tooltip { - --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); - } + .spectrum-Tooltip { + --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); + } } diff --git a/components/tray/index.css b/components/tray/index.css index 37428bf807..8d7eec8a32 100644 --- a/components/tray/index.css +++ b/components/tray/index.css @@ -11,97 +11,85 @@ governing permissions and limitations under the License. */ .spectrum-Tray { - /* Placeholder tokens */ - --spectrum-tray-exit-animation-delay: 0ms; - --spectrum-tray-entry-animation-delay: 160ms; + /* Placeholder tokens */ + --spectrum-tray-exit-animation-delay: 0ms; + --spectrum-tray-entry-animation-delay: 160ms; - /* Maximum width for landscape */ - --spectrum-tray-max-inline-size: 375px; + /* Maximum width for landscape */ + --spectrum-tray-max-inline-size: 375px; - /* https://spectrum.adobe.com/page/tray/#Maximum-height */ - --spectrum-tray-spacing-edge-to-tray-safe-zone: 64px; + /* https://spectrum.adobe.com/page/tray/#Maximum-height */ + --spectrum-tray-spacing-edge-to-tray-safe-zone: 64px; - --spectrum-tray-entry-animation-duration: var(--spectrum-animation-duration-500); - --spectrum-tray-exit-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-tray-entry-animation-duration: var(--spectrum-animation-duration-500); + --spectrum-tray-exit-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-tray-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-tray-background-color: var(--spectrum-background-layer-2-color); + --spectrum-tray-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-tray-background-color: var(--spectrum-background-layer-2-color); } .spectrum-Tray-wrapper { - inset-inline-start: 0; - - /* Positioned at the bottom of the window */ - position: fixed; - inset-block-end: 0; - display: flex; - justify-content: center; - inline-size: 100%; + inset-inline-start: 0; + + /* Positioned at the bottom of the window */ + position: fixed; + inset-block-end: 0; + display: flex; + justify-content: center; + inline-size: 100%; } .spectrum-Tray { - /* Default to full width when the viewport is in portrait orientation */ - inline-size: 100%; - --mod-modal-max-width: 100%; - max-inline-size: 100%; - - max-block-size: calc(100vh - var(--mod-tray-spacing-edge-to-tray-safe-zone, var(--spectrum-tray-spacing-edge-to-tray-safe-zone))); - margin-block-start: var(--mod-tray-spacing-edge-to-tray-safe-zone, var(--spectrum-tray-spacing-edge-to-tray-safe-zone)); - padding-block-start: var(--mod-tray-top-to-content-area, var(--spectrum-tray-top-to-content-area)); - padding-block-end: var(--mod-tray-bottom-to-content-area, var(--spectrum-tray-top-to-content-area)); - box-sizing: border-box; - overflow: auto; - outline: none; - border-radius: var(--mod-tray-corner-radius-portrait, 0) var(--mod-tray-corner-radius-portrait, 0) 0 0; - - /* Start offset by the animation distance */ - transform: translateY(100%); - - /* Exit animations */ - transition: opacity - var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) - cubic-bezier(0.5, 0, 1, 1) - var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)), - visibility - var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) - linear - calc(var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)) + var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration))), - transform - var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) - cubic-bezier(0.5, 0, 1, 1) - var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)); - - background-color: var(--highcontrast-tray-background-color, var(--mod-tray-background-color, var(--spectrum-tray-background-color))); - - &.is-open { - /* Entry animations */ - transition: transform - var(--mod-tray-entry-animation-duration, var(--spectrum-tray-entry-animation-duration)) - cubic-bezier(0, 0, 0.4, 1) - var(--mod-tray-entry-animation-delay, var(--spectrum-tray-entry-animation-delay)), - opacity var(--spectrum-tray-entry-animation-duration, var(--mod-tray-entry-animation-duration)) - cubic-bezier(0, 0, 0.4, 1) - var(--mod-tray-entry-animation-delay, var(--spectrum-tray-entry-animation-delay)); - transform: translateY(0); - } + /* Default to full width when the viewport is in portrait orientation */ + inline-size: 100%; + --mod-modal-max-width: 100%; + max-inline-size: 100%; + + max-block-size: calc(100vh - var(--mod-tray-spacing-edge-to-tray-safe-zone, var(--spectrum-tray-spacing-edge-to-tray-safe-zone))); + margin-block-start: var(--mod-tray-spacing-edge-to-tray-safe-zone, var(--spectrum-tray-spacing-edge-to-tray-safe-zone)); + padding-block-start: var(--mod-tray-top-to-content-area, var(--spectrum-tray-top-to-content-area)); + padding-block-end: var(--mod-tray-bottom-to-content-area, var(--spectrum-tray-top-to-content-area)); + box-sizing: border-box; + overflow: auto; + outline: none; + border-radius: var(--mod-tray-corner-radius-portrait, 0) var(--mod-tray-corner-radius-portrait, 0) 0 0; + + /* Start offset by the animation distance */ + transform: translateY(100%); + + /* Exit animations */ + transition: + opacity var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) cubic-bezier(0.5, 0, 1, 1) var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)), + visibility var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) linear calc(var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)) + var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration))), + transform var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) cubic-bezier(0.5, 0, 1, 1) var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)); + + background-color: var(--highcontrast-tray-background-color, var(--mod-tray-background-color, var(--spectrum-tray-background-color))); + + &.is-open { + /* Entry animations */ + transition: + transform var(--mod-tray-entry-animation-duration, var(--spectrum-tray-entry-animation-duration)) cubic-bezier(0, 0, 0.4, 1) var(--mod-tray-entry-animation-delay, var(--spectrum-tray-entry-animation-delay)), + opacity var(--spectrum-tray-entry-animation-duration, var(--mod-tray-entry-animation-duration)) cubic-bezier(0, 0, 0.4, 1) var(--mod-tray-entry-animation-delay, var(--spectrum-tray-entry-animation-delay)); + transform: translateY(0); + } } @media screen and (orientation: landscape) { - .spectrum-Tray { - border-start-start-radius: var(--mod-tray-corner-radius, var(--spectrum-tray-corner-radius)); - border-start-end-radius: var(--mod-tray-corner-radius, var(--spectrum-tray-corner-radius)); - max-inline-size: var(--mod-tray-max-inline-size, var(--spectrum-tray-max-inline-size)); - } + .spectrum-Tray { + border-start-start-radius: var(--mod-tray-corner-radius, var(--spectrum-tray-corner-radius)); + border-start-end-radius: var(--mod-tray-corner-radius, var(--spectrum-tray-corner-radius)); + max-inline-size: var(--mod-tray-max-inline-size, var(--spectrum-tray-max-inline-size)); + } } @media (forced-colors: active) { - .spectrum-Tray { - --highcontrast-tray-background-color: Canvas; + .spectrum-Tray { + --highcontrast-tray-background-color: Canvas; - border: solid; + border: solid; - & .spectrum-Dialog { - border: none; - } - } -} \ No newline at end of file + & .spectrum-Dialog { + border: none; + } + } +} diff --git a/components/typography/index.css b/components/typography/index.css index 5f5bdaa3a2..4a17f425e5 100644 --- a/components/typography/index.css +++ b/components/typography/index.css @@ -12,785 +12,784 @@ governing permissions and limitations under the License. /* Typography - Default */ .spectrum { - --spectrum-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; - --spectrum-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-font-style: var(--spectrum-default-font-style); - --spectrum-font-size: var(--spectrum-font-size-100); + --spectrum-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-font-style: var(--spectrum-default-font-style); + --spectrum-font-size: var(--spectrum-font-size-100); - font-family: var(--spectrum-font-family); - font-style: var(--spectrum-font-style); - font-size: var(--spectrum-font-size); + font-family: var(--spectrum-font-family); + font-style: var(--spectrum-font-style); + font-size: var(--spectrum-font-size); - &:lang(ar) { - font-family: var(--spectrum-font-family-ar); - } + &:lang(ar) { + font-family: var(--spectrum-font-family-ar); + } - &:lang(he) { - font-family: var(--spectrum-font-family-he); - } + &:lang(he) { + font-family: var(--spectrum-font-family-he); + } } /* Typography - Heading */ /* Heading tokens */ .spectrum-Heading { - --spectrum-heading-sans-serif-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family-stack); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --spectrum-heading-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family-stack); + --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --spectrum-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --spectrum-heading-font-color: var(--spectrum-heading-color); - - --spectrum-heading-margin-start: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier)); - --spectrum-heading-margin-end: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier)); + --spectrum-heading-font-color: var(--spectrum-heading-color); + --spectrum-heading-margin-start: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier)); + --spectrum-heading-margin-end: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier)); } /* Windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Heading { - --highcontrast-heading-font-color: Text; - } + .spectrum-Heading { + --highcontrast-heading-font-color: Text; + } } /* Heading t-shirt sizes */ .spectrum-Heading--sizeXXS { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxs); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxs); + --spectrum-heading-font-size: var(--spectrum-heading-size-xxs); + --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxs); } .spectrum-Heading--sizeXS { - --spectrum-heading-font-size: var(--spectrum-heading-size-xs); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xs); + --spectrum-heading-font-size: var(--spectrum-heading-size-xs); + --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xs); } .spectrum-Heading--sizeS { - --spectrum-heading-font-size: var(--spectrum-heading-size-s); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s); + --spectrum-heading-font-size: var(--spectrum-heading-size-s); + --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s); } .spectrum-Heading--sizeM { - --spectrum-heading-font-size: var(--spectrum-heading-size-m); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --spectrum-heading-font-size: var(--spectrum-heading-size-m); + --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); } .spectrum-Heading--sizeL { - --spectrum-heading-font-size: var(--spectrum-heading-size-l); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-l); + --spectrum-heading-font-size: var(--spectrum-heading-size-l); + --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-l); } .spectrum-Heading--sizeXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xl); + --spectrum-heading-font-size: var(--spectrum-heading-size-xl); + --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xl); } .spectrum-Heading--sizeXXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxl); + --spectrum-heading-font-size: var(--spectrum-heading-size-xxl); + --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxl); } .spectrum-Heading--sizeXXXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxxl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl); + --spectrum-heading-font-size: var(--spectrum-heading-size-xxxl); + --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl); } /* Heading styles */ .spectrum-Heading { - font-family: var(--mod-heading-sans-serif-font-family, var(--spectrum-heading-sans-serif-font-family)); - font-style: var(--mod-heading-sans-serif-font-style, var(--spectrum-heading-sans-serif-font-style)); - font-weight: var(--mod-heading-sans-serif-font-weight, var(--spectrum-heading-sans-serif-font-weight)); - font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); - color: var(--highcontrast-heading-font-color, var(--mod-heading-font-color, var(--spectrum-heading-font-color))); - line-height: var(--mod-heading-line-height, var(--spectrum-heading-line-height)); - margin-block-start: 0; - margin-block-end: 0; - - strong, - .spectrum-Heading-strong { - font-style: var(--mod-heading-sans-serif-strong-font-style, var(--spectrum-heading-sans-serif-strong-font-style)); - font-weight: var(--mod-heading-sans-serif-strong-font-weight, var(--spectrum-heading-sans-serif-strong-font-weight)); - } - - em, - .spectrum-Heading-emphasized { - font-style: var(--mod-heading-sans-serif-emphasized-font-style, var(--spectrum-heading-sans-serif-emphasized-font-style)); - font-weight: var(--mod-heading-sans-serif-emphasized-font-weight, var(--spectrum-heading-sans-serif-emphasized-font-weight)); - } - - .spectrum-Heading-strong.spectrum-Heading-emphasized, - strong em, - em strong { - font-style: var(--mod-heading-sans-serif-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-strong-emphasized-font-style)); - font-weight: var(--mod-heading-sans-serif-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-strong-emphasized-font-weight)); - } - - &:lang(zh), - &:lang(ja), - &:lang(ko) { - font-family: var(--mod-heading-cjk-font-family, var(--spectrum-heading-cjk-font-family)); - font-style: var(--mod-heading-cjk-font-style, var(--spectrum-heading-cjk-font-style)); - font-weight: var(--mod-heading-cjk-font-weight, var(--spectrum-heading-cjk-font-weight)); - font-size: var(--mod-heading-cjk-font-size, var(--spectrum-heading-cjk-font-size)); - - line-height: var(--mod-heading-cjk-line-height, var(--spectrum-heading-cjk-line-height)); - letter-spacing: var(--mod-heading-cjk-letter-spacing, var(--spectrum-heading-cjk-letter-spacing)); - - em, - .spectrum-Heading-emphasized { - font-style: var(--mod-heading-cjk-emphasized-font-style, var(--spectrum-heading-cjk-emphasized-font-style)); - font-weight: var(--mod-heading-cjk-emphasized-font-weight, var(--spectrum-heading-cjk-emphasized-font-weight)); - } - - strong, - .spectrum-Heading-strong { - font-style: var(--mod-heading-cjk-strong-font-style, var(--spectrum-heading-cjk-strong-font-style)); - font-weight: var(--mod-heading-cjk-strong-font-weight, var(--spectrum-heading-cjk-strong-font-weight)); - } - - .spectrum-Heading-strong.spectrum-Heading-emphasized, - strong em, - em strong { - font-style: var(--mod-heading-cjk-strong-emphasized-font-style, var(--spectrum-heading-cjk-strong-emphasized-font-style)); - font-weight: var(--mod-heading-cjk-strong-emphasized-font-weight, var(--spectrum-heading-cjk-strong-emphasized-font-weight)); - } - } + font-family: var(--mod-heading-sans-serif-font-family, var(--spectrum-heading-sans-serif-font-family)); + font-style: var(--mod-heading-sans-serif-font-style, var(--spectrum-heading-sans-serif-font-style)); + font-weight: var(--mod-heading-sans-serif-font-weight, var(--spectrum-heading-sans-serif-font-weight)); + font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); + color: var(--highcontrast-heading-font-color, var(--mod-heading-font-color, var(--spectrum-heading-font-color))); + line-height: var(--mod-heading-line-height, var(--spectrum-heading-line-height)); + margin-block-start: 0; + margin-block-end: 0; + + strong, + .spectrum-Heading-strong { + font-style: var(--mod-heading-sans-serif-strong-font-style, var(--spectrum-heading-sans-serif-strong-font-style)); + font-weight: var(--mod-heading-sans-serif-strong-font-weight, var(--spectrum-heading-sans-serif-strong-font-weight)); + } + + em, + .spectrum-Heading-emphasized { + font-style: var(--mod-heading-sans-serif-emphasized-font-style, var(--spectrum-heading-sans-serif-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-emphasized-font-weight, var(--spectrum-heading-sans-serif-emphasized-font-weight)); + } + + .spectrum-Heading-strong.spectrum-Heading-emphasized, + strong em, + em strong { + font-style: var(--mod-heading-sans-serif-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-strong-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-strong-emphasized-font-weight)); + } + + &:lang(zh), + &:lang(ja), + &:lang(ko) { + font-family: var(--mod-heading-cjk-font-family, var(--spectrum-heading-cjk-font-family)); + font-style: var(--mod-heading-cjk-font-style, var(--spectrum-heading-cjk-font-style)); + font-weight: var(--mod-heading-cjk-font-weight, var(--spectrum-heading-cjk-font-weight)); + font-size: var(--mod-heading-cjk-font-size, var(--spectrum-heading-cjk-font-size)); + + line-height: var(--mod-heading-cjk-line-height, var(--spectrum-heading-cjk-line-height)); + letter-spacing: var(--mod-heading-cjk-letter-spacing, var(--spectrum-heading-cjk-letter-spacing)); + + em, + .spectrum-Heading-emphasized { + font-style: var(--mod-heading-cjk-emphasized-font-style, var(--spectrum-heading-cjk-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-emphasized-font-weight, var(--spectrum-heading-cjk-emphasized-font-weight)); + } + + strong, + .spectrum-Heading-strong { + font-style: var(--mod-heading-cjk-strong-font-style, var(--spectrum-heading-cjk-strong-font-style)); + font-weight: var(--mod-heading-cjk-strong-font-weight, var(--spectrum-heading-cjk-strong-font-weight)); + } + + .spectrum-Heading-strong.spectrum-Heading-emphasized, + strong em, + em strong { + font-style: var(--mod-heading-cjk-strong-emphasized-font-style, var(--spectrum-heading-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-strong-emphasized-font-weight, var(--spectrum-heading-cjk-strong-emphasized-font-weight)); + } + } } /* Heading - Heavy */ .spectrum-Heading--heavy { - font-style: var(--mod-heading-sans-serif-heavy-font-style, var(--spectrum-heading-sans-serif-heavy-font-style)); - font-weight: var(--mod-heading-sans-serif-heavy-font-weight, var(--spectrum-heading-sans-serif-heavy-font-weight)); - - strong, - .spectrum-Heading-strong { - font-style: var(--mod-heading-sans-serif-heavy-strong-font-style, var(--spectrum-heading-sans-serif-heavy-strong-font-style)); - font-weight: var(--mod-heading-sans-serif-heavy-strong-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-font-weight)); - } - - em, - .spectrum-Heading-emphasized { - font-style: var(--mod-heading-sans-serif-heavy-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-emphasized-font-style)); - font-weight: var(--mod-heading-sans-serif-heavy-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight)); - } - - .spectrum-Heading-strong.spectrum-Heading-emphasized, - strong em, - em strong { - font-style: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style)); - font-weight: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight)); - } - - &:lang(zh), - &:lang(ja), - &:lang(ko) { - font-style: var(--mod-heading-cjk-heavy-font-style, var(--spectrum-heading-cjk-heavy-font-style)); - font-weight: var(--mod-heading-cjk-heavy-font-weight, var(--spectrum-heading-cjk-heavy-font-weight)); - - em, - .spectrum-Heading-emphasized { - font-style: var(--mod-heading-cjk-heavy-emphasized-font-style, var(--spectrum-heading-cjk-heavy-emphasized-font-style)); - font-weight: var(--mod-heading-cjk-heavy-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-emphasized-font-weight)); - } - - strong, - .spectrum-Heading-strong { - font-style: var(--mod-heading-cjk-heavy-strong-font-style, var(--spectrum-heading-cjk-heavy-strong-font-style)); - font-weight: var(--mod-heading-cjk-heavy-strong-font-weight, var(--spectrum-heading-cjk-heavy-strong-font-weight)); - } - - .spectrum-Heading-strong.spectrum-Heading-emphasized, - strong em, - em strong { - font-style: var(--mod-heading-cjk-heavy-strong-emphasized-font-style, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style)); - font-weight: var(--mod-heading-cjk-heavy-strong-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight)); - } - } + font-style: var(--mod-heading-sans-serif-heavy-font-style, var(--spectrum-heading-sans-serif-heavy-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-font-weight, var(--spectrum-heading-sans-serif-heavy-font-weight)); + + strong, + .spectrum-Heading-strong { + font-style: var(--mod-heading-sans-serif-heavy-strong-font-style, var(--spectrum-heading-sans-serif-heavy-strong-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-strong-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-font-weight)); + } + + em, + .spectrum-Heading-emphasized { + font-style: var(--mod-heading-sans-serif-heavy-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight)); + } + + .spectrum-Heading-strong.spectrum-Heading-emphasized, + strong em, + em strong { + font-style: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight)); + } + + &:lang(zh), + &:lang(ja), + &:lang(ko) { + font-style: var(--mod-heading-cjk-heavy-font-style, var(--spectrum-heading-cjk-heavy-font-style)); + font-weight: var(--mod-heading-cjk-heavy-font-weight, var(--spectrum-heading-cjk-heavy-font-weight)); + + em, + .spectrum-Heading-emphasized { + font-style: var(--mod-heading-cjk-heavy-emphasized-font-style, var(--spectrum-heading-cjk-heavy-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-heavy-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-emphasized-font-weight)); + } + + strong, + .spectrum-Heading-strong { + font-style: var(--mod-heading-cjk-heavy-strong-font-style, var(--spectrum-heading-cjk-heavy-strong-font-style)); + font-weight: var(--mod-heading-cjk-heavy-strong-font-weight, var(--spectrum-heading-cjk-heavy-strong-font-weight)); + } + + .spectrum-Heading-strong.spectrum-Heading-emphasized, + strong em, + em strong { + font-style: var(--mod-heading-cjk-heavy-strong-emphasized-font-style, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-heavy-strong-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight)); + } + } } /* Heading - Light */ .spectrum-Heading--light { - font-style: var(--mod-heading-sans-serif-light-font-style, var(--spectrum-heading-sans-serif-light-font-style)); - font-weight: var(--mod-heading-sans-serif-light-font-weight, var(--spectrum-heading-sans-serif-light-font-weight)); - - em, - .spectrum-Heading-emphasized { - font-style: var(--mod-heading-sans-serif-light-emphasized-font-style, var(--spectrum-heading-sans-serif-light-emphasized-font-style)); - font-weight: var(--mod-heading-sans-serif-light-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-emphasized-font-weight)); - } - - strong, - .spectrum-Heading-strong { - font-style: var(--mod-heading-sans-serif-light-strong-font-style, var(--spectrum-heading-sans-serif-light-strong-font-style)); - font-weight: var(--mod-heading-sans-serif-light-strong-font-weight, var(--spectrum-heading-sans-serif-light-strong-font-weight)); - } - - .spectrum-Heading-strong.spectrum-Heading-emphasized, - strong em, - em strong { - font-style: var(--mod-heading-sans-serif-light-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style)); - font-weight: var(--mod-heading-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight)); - } - - &:lang(zh), - &:lang(ja), - &:lang(ko) { - font-style: var(--mod-heading-cjk-light-font-style, var(--spectrum-heading-cjk-light-font-style)); - font-weight: var(--mod-heading-cjk-light-font-weight, var(--spectrum-heading-cjk-light-font-weight)); - - strong, - .spectrum-Heading-strong { - font-style: var(--mod-heading-cjk-light-strong-font-style, var(--spectrum-heading-cjk-light-strong-font-style)); - font-weight: var(--mod-heading-cjk-light-strong-font-weight, var(--spectrum-heading-cjk-light-strong-font-weight)); - } - - em, - .spectrum-Heading-emphasized { - font-style: var(--mod-heading-cjk-light-emphasized-font-style, var(--spectrum-heading-cjk-light-emphasized-font-style)); - font-weight: var(--mod-heading-cjk-light-emphasized-font-weight, var(--spectrum-heading-cjk-light-emphasized-font-weight)); - } - - .spectrum-Heading-strong.spectrum-Heading-emphasized, - strong em, - em strong { - font-style: var(--mod-heading-cjk-light-strong-emphasized-font-style, var(--spectrum-heading-cjk-light-strong-emphasized-font-style)); - font-weight: var(--mod-heading-cjk-light-strong-emphasized-font-weight, var(--spectrum-heading-cjk-light-strong-emphasized-font-weight)); - } - } + font-style: var(--mod-heading-sans-serif-light-font-style, var(--spectrum-heading-sans-serif-light-font-style)); + font-weight: var(--mod-heading-sans-serif-light-font-weight, var(--spectrum-heading-sans-serif-light-font-weight)); + + em, + .spectrum-Heading-emphasized { + font-style: var(--mod-heading-sans-serif-light-emphasized-font-style, var(--spectrum-heading-sans-serif-light-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-light-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-emphasized-font-weight)); + } + + strong, + .spectrum-Heading-strong { + font-style: var(--mod-heading-sans-serif-light-strong-font-style, var(--spectrum-heading-sans-serif-light-strong-font-style)); + font-weight: var(--mod-heading-sans-serif-light-strong-font-weight, var(--spectrum-heading-sans-serif-light-strong-font-weight)); + } + + .spectrum-Heading-strong.spectrum-Heading-emphasized, + strong em, + em strong { + font-style: var(--mod-heading-sans-serif-light-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight)); + } + + &:lang(zh), + &:lang(ja), + &:lang(ko) { + font-style: var(--mod-heading-cjk-light-font-style, var(--spectrum-heading-cjk-light-font-style)); + font-weight: var(--mod-heading-cjk-light-font-weight, var(--spectrum-heading-cjk-light-font-weight)); + + strong, + .spectrum-Heading-strong { + font-style: var(--mod-heading-cjk-light-strong-font-style, var(--spectrum-heading-cjk-light-strong-font-style)); + font-weight: var(--mod-heading-cjk-light-strong-font-weight, var(--spectrum-heading-cjk-light-strong-font-weight)); + } + + em, + .spectrum-Heading-emphasized { + font-style: var(--mod-heading-cjk-light-emphasized-font-style, var(--spectrum-heading-cjk-light-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-light-emphasized-font-weight, var(--spectrum-heading-cjk-light-emphasized-font-weight)); + } + + .spectrum-Heading-strong.spectrum-Heading-emphasized, + strong em, + em strong { + font-style: var(--mod-heading-cjk-light-strong-emphasized-font-style, var(--spectrum-heading-cjk-light-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-light-strong-emphasized-font-weight, var(--spectrum-heading-cjk-light-strong-emphasized-font-weight)); + } + } } /* Heading - Serif */ .spectrum-Heading--serif { - font-family: var(--mod-heading-serif-font-family, var(--spectrum-heading-serif-font-family)); - font-style: var(--mod-heading-serif-font-style, var(--spectrum-heading-serif-font-style)); - font-weight: var(--mod-heading-serif-font-weight, var(--spectrum-heading-serif-font-weight)); - - em, - .spectrum-Heading-emphasized { - font-style: var(--mod-heading-serif-emphasized-font-style, var(--spectrum-heading-serif-emphasized-font-style)); - font-weight: var(--mod-heading-serif-emphasized-font-weight, var(--spectrum-heading-serif-emphasized-font-weight)); - } - - strong, - .spectrum-Heading-strong { - font-style: var(--mod-heading-serif-strong-font-style, var(--spectrum-heading-serif-strong-font-style)); - font-weight: var(--mod-heading-serif-strong-font-weight, var(--spectrum-heading-serif-strong-font-weight)); - } - - .spectrum-Heading-strong.spectrum-Heading-emphasized, - strong em, - em strong { - font-style: var(--mod-heading-serif-strong-emphasized-font-style, var(--spectrum-heading-serif-strong-emphasized-font-style)); - font-weight: var(--mod-heading-serif-strong-emphasized-font-weight, var(--spectrum-heading-serif-strong-emphasized-font-weight)); - } + font-family: var(--mod-heading-serif-font-family, var(--spectrum-heading-serif-font-family)); + font-style: var(--mod-heading-serif-font-style, var(--spectrum-heading-serif-font-style)); + font-weight: var(--mod-heading-serif-font-weight, var(--spectrum-heading-serif-font-weight)); + + em, + .spectrum-Heading-emphasized { + font-style: var(--mod-heading-serif-emphasized-font-style, var(--spectrum-heading-serif-emphasized-font-style)); + font-weight: var(--mod-heading-serif-emphasized-font-weight, var(--spectrum-heading-serif-emphasized-font-weight)); + } + + strong, + .spectrum-Heading-strong { + font-style: var(--mod-heading-serif-strong-font-style, var(--spectrum-heading-serif-strong-font-style)); + font-weight: var(--mod-heading-serif-strong-font-weight, var(--spectrum-heading-serif-strong-font-weight)); + } + + .spectrum-Heading-strong.spectrum-Heading-emphasized, + strong em, + em strong { + font-style: var(--mod-heading-serif-strong-emphasized-font-style, var(--spectrum-heading-serif-strong-emphasized-font-style)); + font-weight: var(--mod-heading-serif-strong-emphasized-font-weight, var(--spectrum-heading-serif-strong-emphasized-font-weight)); + } } /* Heading - Serif - Heavy */ .spectrum-Heading--serif.spectrum-Heading--heavy { - font-style: var(--mod-heading-serif-heavy-font-style, var(--spectrum-heading-serif-heavy-font-style)); - font-weight: var(--mod-heading-serif-heavy-font-weight, var(--spectrum-heading-serif-heavy-font-weight)); + font-style: var(--mod-heading-serif-heavy-font-style, var(--spectrum-heading-serif-heavy-font-style)); + font-weight: var(--mod-heading-serif-heavy-font-weight, var(--spectrum-heading-serif-heavy-font-weight)); - strong, - .spectrum-Heading-strong { - font-style: var(--mod-heading-serif-heavy-strong-font-style, var(--spectrum-heading-serif-heavy-strong-font-style)); - font-weight: var(--mod-heading-serif-heavy-strong-font-weight, var(--spectrum-heading-serif-heavy-strong-font-weight)); - } + strong, + .spectrum-Heading-strong { + font-style: var(--mod-heading-serif-heavy-strong-font-style, var(--spectrum-heading-serif-heavy-strong-font-style)); + font-weight: var(--mod-heading-serif-heavy-strong-font-weight, var(--spectrum-heading-serif-heavy-strong-font-weight)); + } - em, - .spectrum-Heading-emphasized { - font-style: var(--mod-heading-serif-heavy-emphasized-font-style, var(--spectrum-heading-serif-heavy-emphasized-font-style)); - font-weight: var(--mod-heading-serif-heavy-emphasized-font-weight, var(--spectrum-heading-serif-heavy-emphasized-font-weight)); - } + em, + .spectrum-Heading-emphasized { + font-style: var(--mod-heading-serif-heavy-emphasized-font-style, var(--spectrum-heading-serif-heavy-emphasized-font-style)); + font-weight: var(--mod-heading-serif-heavy-emphasized-font-weight, var(--spectrum-heading-serif-heavy-emphasized-font-weight)); + } - .spectrum-Heading-strong.spectrum-Heading-emphasized, - strong em, - em strong { - font-style: var(--mod-heading-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-serif-heavy-strong-emphasized-font-style)); - font-weight: var(--mod-heading-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight)); - } + .spectrum-Heading-strong.spectrum-Heading-emphasized, + strong em, + em strong { + font-style: var(--mod-heading-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-serif-heavy-strong-emphasized-font-style)); + font-weight: var(--mod-heading-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight)); + } } /* Heading - Serif - Light */ .spectrum-Heading--serif.spectrum-Heading--light { - font-style: var(--mod-heading-serif-light-font-style, var(--spectrum-heading-serif-light-font-style)); - font-weight: var(--mod-heading-serif-light-font-weight, var(--spectrum-heading-serif-light-font-weight)); + font-style: var(--mod-heading-serif-light-font-style, var(--spectrum-heading-serif-light-font-style)); + font-weight: var(--mod-heading-serif-light-font-weight, var(--spectrum-heading-serif-light-font-weight)); - em, - .spectrum-Heading-emphasized { - font-style: var(--mod-heading-serif-light-emphasized-font-style, var(--spectrum-heading-serif-light-emphasized-font-style)); - font-weight: var(--mod-heading-serif-light-emphasized-font-weight, var(--spectrum-heading-serif-light-emphasized-font-weight)); - } + em, + .spectrum-Heading-emphasized { + font-style: var(--mod-heading-serif-light-emphasized-font-style, var(--spectrum-heading-serif-light-emphasized-font-style)); + font-weight: var(--mod-heading-serif-light-emphasized-font-weight, var(--spectrum-heading-serif-light-emphasized-font-weight)); + } - strong, - .spectrum-Heading-strong { - font-style: var(--mod-heading-serif-light-strong-font-style, var(--spectrum-heading-serif-light-strong-font-style)); - font-weight: var(--mod-heading-serif-light-strong-font-weight, var(--spectrum-heading-serif-light-strong-font-weight)); - } + strong, + .spectrum-Heading-strong { + font-style: var(--mod-heading-serif-light-strong-font-style, var(--spectrum-heading-serif-light-strong-font-style)); + font-weight: var(--mod-heading-serif-light-strong-font-weight, var(--spectrum-heading-serif-light-strong-font-weight)); + } - .spectrum-Heading-strong.spectrum-Heading-emphasized, - strong em, - em strong { - font-style: var(--mod-heading-serif-light-strong-emphasized-font-style, var(--spectrum-heading-serif-light-strong-emphasized-font-style)); - font-weight: var(--mod-heading-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-serif-light-strong-emphasized-font-weight)); - } + .spectrum-Heading-strong.spectrum-Heading-emphasized, + strong em, + em strong { + font-style: var(--mod-heading-serif-light-strong-emphasized-font-style, var(--spectrum-heading-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-heading-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-serif-light-strong-emphasized-font-weight)); + } } /* Add margin when inside a Typography component */ .spectrum-Typography .spectrum-Heading { - margin-block-start: var(--mod-heading-margin-start, var(--spectrum-heading-margin-start)); - margin-block-end: var(--mod-heading-margin-end, var(--spectrum-heading-margin-end)); + margin-block-start: var(--mod-heading-margin-start, var(--spectrum-heading-margin-start)); + margin-block-end: var(--mod-heading-margin-end, var(--spectrum-heading-margin-end)); } /* Body */ /* Body tokens */ .spectrum-Body { - --spectrum-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family-stack); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --spectrum-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-body-serif-font-family: var(--spectrum-serif-font-family-stack); + --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --spectrum-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --spectrum-body-margin: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier)); + --spectrum-body-margin: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier)); - --spectrum-body-font-color: var(--spectrum-body-color); + --spectrum-body-font-color: var(--spectrum-body-color); } /* Windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Body { - --highcontrast-body-font-color: Text; - } + .spectrum-Body { + --highcontrast-body-font-color: Text; + } } /* Body t-shirt sizes */ .spectrum-Body--sizeXS { - --spectrum-body-font-size: var(--spectrum-body-size-xs); + --spectrum-body-font-size: var(--spectrum-body-size-xs); } .spectrum-Body--sizeS { - --spectrum-body-font-size: var(--spectrum-body-size-s); + --spectrum-body-font-size: var(--spectrum-body-size-s); } .spectrum-Body--sizeM { - --spectrum-body-font-size: var(--spectrum-body-size-m); + --spectrum-body-font-size: var(--spectrum-body-size-m); } .spectrum-Body--sizeL { - --spectrum-body-font-size: var(--spectrum-body-size-l); + --spectrum-body-font-size: var(--spectrum-body-size-l); } .spectrum-Body--sizeXL { - --spectrum-body-font-size: var(--spectrum-body-size-xl); + --spectrum-body-font-size: var(--spectrum-body-size-xl); } .spectrum-Body--sizeXXL { - --spectrum-body-font-size: var(--spectrum-body-size-xxl); + --spectrum-body-font-size: var(--spectrum-body-size-xxl); } .spectrum-Body--sizeXXXL { - --spectrum-body-font-size: var(--spectrum-body-size-xxxl); + --spectrum-body-font-size: var(--spectrum-body-size-xxxl); } /* Body styles */ /* Body - Default */ .spectrum-Body { - font-family: var(--mod-body-sans-serif-font-family, var(--spectrum-body-sans-serif-font-family)); - font-style: var(--mod-body-sans-serif-font-style, var(--spectrum-body-sans-serif-font-style)); - font-weight: var(--mod-body-sans-serif-font-weight, var(--spectrum-body-sans-serif-font-weight)); - font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); - color: var(--highcontrast-body-font-color, var(--mod-body-font-color, var(--spectrum-body-font-color))); - margin-block-start: 0; - margin-block-end: 0; - - line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); - - strong, - .spectrum-Body-strong { - font-style: var(--mod-body-sans-serif-strong-font-style, var(--spectrum-body-sans-serif-strong-font-style)); - font-weight: var(--mod-body-sans-serif-strong-font-weight, var(--spectrum-body-sans-serif-strong-font-weight)); - } - - em, - .spectrum-Body-emphasized { - font-style: var(--mod-body-sans-serif-emphasized-font-style, var(--spectrum-body-sans-serif-emphasized-font-style)); - font-weight: var(--mod-body-sans-serif-emphasized-font-weight, var(--spectrum-body-sans-serif-emphasized-font-weight)); - } - - .spectrum-Body-strong.spectrum-Body-emphasized, - em strong, - strong em { - font-style: var(--mod-body-sans-serif-strong-emphasized-font-style, var(--spectrum-body-sans-serif-strong-emphasized-font-style)); - font-weight: var(--mod-body-sans-serif-strong-emphasized-font-weight, var(--spectrum-body-sans-serif-strong-emphasized-font-weight)); - } - - &:lang(zh), - &:lang(ja), - &:lang(ko) { - font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family)); - font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style)); - font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight)); - - line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height)); - - letter-spacing: var(--mod-body-cjk-letter-spacing, var(--spectrum-body-cjk-letter-spacing)); - - strong, - .spectrum-Body-strong { - font-style: var(--mod-body-cjk-strong-font-style, var(--spectrum-body-cjk-strong-font-style)); - font-weight: var(--mod-body-cjk-strong-font-weight, var(--spectrum-body-cjk-strong-font-weight)); - } - - em, - .spectrum-Body-emphasized { - font-style: var(--mod-body-cjk-emphasized-font-style, var(--spectrum-body-cjk-emphasized-font-style)); - font-weight: var(--mod-body-cjk-emphasized-font-weight, var(--spectrum-body-cjk-emphasized-font-weight)); - } - - .spectrum-Body-strong.spectrum-Body-emphasized, - em strong, - strong em { - font-style: var(--mod-body-cjk-strong-emphasized-font-style, var(--spectrum-body-cjk-strong-emphasized-font-style)); - font-weight: var(--mod-body-cjk-strong-emphasized-font-weight, var(--spectrum-body-cjk-strong-emphasized-font-weight)); - } - } + font-family: var(--mod-body-sans-serif-font-family, var(--spectrum-body-sans-serif-font-family)); + font-style: var(--mod-body-sans-serif-font-style, var(--spectrum-body-sans-serif-font-style)); + font-weight: var(--mod-body-sans-serif-font-weight, var(--spectrum-body-sans-serif-font-weight)); + font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); + color: var(--highcontrast-body-font-color, var(--mod-body-font-color, var(--spectrum-body-font-color))); + margin-block-start: 0; + margin-block-end: 0; + + line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); + + strong, + .spectrum-Body-strong { + font-style: var(--mod-body-sans-serif-strong-font-style, var(--spectrum-body-sans-serif-strong-font-style)); + font-weight: var(--mod-body-sans-serif-strong-font-weight, var(--spectrum-body-sans-serif-strong-font-weight)); + } + + em, + .spectrum-Body-emphasized { + font-style: var(--mod-body-sans-serif-emphasized-font-style, var(--spectrum-body-sans-serif-emphasized-font-style)); + font-weight: var(--mod-body-sans-serif-emphasized-font-weight, var(--spectrum-body-sans-serif-emphasized-font-weight)); + } + + .spectrum-Body-strong.spectrum-Body-emphasized, + em strong, + strong em { + font-style: var(--mod-body-sans-serif-strong-emphasized-font-style, var(--spectrum-body-sans-serif-strong-emphasized-font-style)); + font-weight: var(--mod-body-sans-serif-strong-emphasized-font-weight, var(--spectrum-body-sans-serif-strong-emphasized-font-weight)); + } + + &:lang(zh), + &:lang(ja), + &:lang(ko) { + font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family)); + font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style)); + font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight)); + + line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height)); + + letter-spacing: var(--mod-body-cjk-letter-spacing, var(--spectrum-body-cjk-letter-spacing)); + + strong, + .spectrum-Body-strong { + font-style: var(--mod-body-cjk-strong-font-style, var(--spectrum-body-cjk-strong-font-style)); + font-weight: var(--mod-body-cjk-strong-font-weight, var(--spectrum-body-cjk-strong-font-weight)); + } + + em, + .spectrum-Body-emphasized { + font-style: var(--mod-body-cjk-emphasized-font-style, var(--spectrum-body-cjk-emphasized-font-style)); + font-weight: var(--mod-body-cjk-emphasized-font-weight, var(--spectrum-body-cjk-emphasized-font-weight)); + } + + .spectrum-Body-strong.spectrum-Body-emphasized, + em strong, + strong em { + font-style: var(--mod-body-cjk-strong-emphasized-font-style, var(--spectrum-body-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-body-cjk-strong-emphasized-font-weight, var(--spectrum-body-cjk-strong-emphasized-font-weight)); + } + } } .spectrum-Body--serif { - font-family: var(--mod-body-serif-font-family, var(--spectrum-body-serif-font-family)); - font-weight: var(--mod-body-serif-font-weight, var(--spectrum-body-serif-font-weight)); - font-style: var(--mod-body-serif-font-style, var(--spectrum-body-serif-font-style)); - - strong, - .spectrum-Body-strong { - font-style: var(--mod-body-serif-strong-font-style, var(--spectrum-body-serif-strong-font-style)); - font-weight: var(--mod-body-serif-strong-font-weight, var(--spectrum-body-serif-strong-font-weight)); - } - - em, - .spectrum-Body-emphasized { - font-style: var(--mod-body-serif-emphasized-font-style, var(--spectrum-body-serif-emphasized-font-style)); - font-weight: var(--mod-body-serif-emphasized-font-weight, var(--spectrum-body-serif-emphasized-font-weight)); - } - - .spectrum-Body-strong.spectrum-Body-emphasized, - em strong, - strong em { - font-style: var(--mod-body-serif-strong-emphasized-font-style, var(--spectrum-body-serif-strong-emphasized-font-style)); - font-weight: var(--mod-body-serif-strong-emphasized-font-weight, var(--spectrum-body-serif-strong-emphasized-font-weight)); - } + font-family: var(--mod-body-serif-font-family, var(--spectrum-body-serif-font-family)); + font-weight: var(--mod-body-serif-font-weight, var(--spectrum-body-serif-font-weight)); + font-style: var(--mod-body-serif-font-style, var(--spectrum-body-serif-font-style)); + + strong, + .spectrum-Body-strong { + font-style: var(--mod-body-serif-strong-font-style, var(--spectrum-body-serif-strong-font-style)); + font-weight: var(--mod-body-serif-strong-font-weight, var(--spectrum-body-serif-strong-font-weight)); + } + + em, + .spectrum-Body-emphasized { + font-style: var(--mod-body-serif-emphasized-font-style, var(--spectrum-body-serif-emphasized-font-style)); + font-weight: var(--mod-body-serif-emphasized-font-weight, var(--spectrum-body-serif-emphasized-font-weight)); + } + + .spectrum-Body-strong.spectrum-Body-emphasized, + em strong, + strong em { + font-style: var(--mod-body-serif-strong-emphasized-font-style, var(--spectrum-body-serif-strong-emphasized-font-style)); + font-weight: var(--mod-body-serif-strong-emphasized-font-weight, var(--spectrum-body-serif-strong-emphasized-font-weight)); + } } /* Add margin when inside a Typography component */ .spectrum-Typography .spectrum-Body { - margin-block-end: var(--mod-body-margin, var(--spectrum-body-margin)); + margin-block-end: var(--mod-body-margin, var(--spectrum-body-margin)); } /* Detail */ /* Detail tokens */ .spectrum-Detail { - --spectrum-detail-sans-serif-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family-stack); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --spectrum-detail-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family-stack); + --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-detail-margin-start: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier)); - --spectrum-detail-margin-end: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier)); + --spectrum-detail-margin-start: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier)); + --spectrum-detail-margin-end: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier)); - --spectrum-detail-font-color: var(--spectrum-detail-color); + --spectrum-detail-font-color: var(--spectrum-detail-color); } /* Windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Detail { - --highcontrast-detail-font-color: Text; - } + .spectrum-Detail { + --highcontrast-detail-font-color: Text; + } } /* Detail t-shirt sizes */ .spectrum-Detail--sizeS { - --spectrum-detail-font-size: var(--spectrum-detail-size-s); + --spectrum-detail-font-size: var(--spectrum-detail-size-s); } .spectrum-Detail--sizeM { - --spectrum-detail-font-size: var(--spectrum-detail-size-m); + --spectrum-detail-font-size: var(--spectrum-detail-size-m); } .spectrum-Detail--sizeL { - --spectrum-detail-font-size: var(--spectrum-detail-size-l); + --spectrum-detail-font-size: var(--spectrum-detail-size-l); } .spectrum-Detail--sizeXL { - --spectrum-detail-font-size: var(--spectrum-detail-size-xl); + --spectrum-detail-font-size: var(--spectrum-detail-size-xl); } /* Detail styles */ .spectrum-Detail { - font-family: var(--mod-detail-sans-serif-font-family, var(--spectrum-detail-sans-serif-font-family)); - font-style: var(--mod-detail-sans-serif-font-style, var(--spectrum-detail-sans-serif-font-style)); - font-weight: var(--mod-detail-sans-serif-font-weight, var(--spectrum-detail-sans-serif-font-weight)); - font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); - margin-block-start: 0; - margin-block-end: 0; - - color: var(--highcontrast-detail-font-color, var(--mod-detail-font-color, var(--spectrum-detail-font-color))); - - line-height: var(--mod-detail-line-height, var(--spectrum-detail-line-height)); - letter-spacing: var(--mod-detail-letter-spacing, var(--spectrum-detail-letter-spacing)); - text-transform: uppercase; - - strong, - .spectrum-Detail-strong { - font-style: var(--mod-detail-sans-serif-strong-font-style, var(--spectrum-detail-sans-serif-strong-font-style)); - font-weight: var(--mod-detail-sans-serif-strong-font-weight, var(--spectrum-detail-sans-serif-strong-font-weight)); - } - - em, - .spectrum-Detail-emphasized { - font-style: var(--mod-detail-sans-serif-emphasized-font-style, var(--spectrum-detail-sans-serif-emphasized-font-style)); - font-weight: var(--mod-detail-sans-serif-emphasized-font-weight, var(--spectrum-detail-sans-serif-emphasized-font-weight)); - } - - .spectrum-Detail-strong.spectrum-Detail-emphasized, - em strong, - strong em { - font-style: var(--mod-detail-sans-serif-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-strong-emphasized-font-style)); - font-weight: var(--mod-detail-sans-serif-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-strong-emphasized-font-weight)); - } - - &:lang(zh), - &:lang(ja), - &:lang(ko) { - font-family: var(--mod-detail-cjk-font-family, var(--spectrum-detail-cjk-font-family)); - font-style: var(--mod-detail-cjk-font-style, var(--spectrum-detail-cjk-font-style)); - font-weight: var(--mod-detail-cjk-font-weight, var(--spectrum-detail-cjk-font-weight)); - - line-height: var(--mod-detail-cjk-line-height, var(--spectrum-detail-cjk-line-height)); - - strong, - .spectrum-Detail-strong { - font-style: var(--mod-detail-cjk-strong-font-style, var(--spectrum-detail-cjk-strong-font-style)); - font-weight: var(--mod-detail-cjk-strong-font-weight, var(--spectrum-detail-cjk-strong-font-weight)); - } - - em, - .spectrum-Detail-emphasized { - font-style: var(--mod-detail-cjk-emphasized-font-style, var(--spectrum-detail-cjk-emphasized-font-style)); - font-weight: var(--mod-detail-cjk-emphasized-font-weight, var(--spectrum-detail-cjk-emphasized-font-weight)); - } - - .spectrum-Detail-strong.spectrum-Detail-emphasized, - em strong, - strong em { - font-style: var(--mod-detail-cjk-strong-emphasized-font-style, var(--spectrum-detail-cjk-strong-emphasized-font-style)); - font-weight: var(--mod-detail-cjk-strong-emphasized-font-weight, var(--spectrum-detail-cjk-strong-emphasized-font-weight)); - } - } + font-family: var(--mod-detail-sans-serif-font-family, var(--spectrum-detail-sans-serif-font-family)); + font-style: var(--mod-detail-sans-serif-font-style, var(--spectrum-detail-sans-serif-font-style)); + font-weight: var(--mod-detail-sans-serif-font-weight, var(--spectrum-detail-sans-serif-font-weight)); + font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); + margin-block-start: 0; + margin-block-end: 0; + + color: var(--highcontrast-detail-font-color, var(--mod-detail-font-color, var(--spectrum-detail-font-color))); + + line-height: var(--mod-detail-line-height, var(--spectrum-detail-line-height)); + letter-spacing: var(--mod-detail-letter-spacing, var(--spectrum-detail-letter-spacing)); + text-transform: uppercase; + + strong, + .spectrum-Detail-strong { + font-style: var(--mod-detail-sans-serif-strong-font-style, var(--spectrum-detail-sans-serif-strong-font-style)); + font-weight: var(--mod-detail-sans-serif-strong-font-weight, var(--spectrum-detail-sans-serif-strong-font-weight)); + } + + em, + .spectrum-Detail-emphasized { + font-style: var(--mod-detail-sans-serif-emphasized-font-style, var(--spectrum-detail-sans-serif-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-emphasized-font-weight, var(--spectrum-detail-sans-serif-emphasized-font-weight)); + } + + .spectrum-Detail-strong.spectrum-Detail-emphasized, + em strong, + strong em { + font-style: var(--mod-detail-sans-serif-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-strong-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-strong-emphasized-font-weight)); + } + + &:lang(zh), + &:lang(ja), + &:lang(ko) { + font-family: var(--mod-detail-cjk-font-family, var(--spectrum-detail-cjk-font-family)); + font-style: var(--mod-detail-cjk-font-style, var(--spectrum-detail-cjk-font-style)); + font-weight: var(--mod-detail-cjk-font-weight, var(--spectrum-detail-cjk-font-weight)); + + line-height: var(--mod-detail-cjk-line-height, var(--spectrum-detail-cjk-line-height)); + + strong, + .spectrum-Detail-strong { + font-style: var(--mod-detail-cjk-strong-font-style, var(--spectrum-detail-cjk-strong-font-style)); + font-weight: var(--mod-detail-cjk-strong-font-weight, var(--spectrum-detail-cjk-strong-font-weight)); + } + + em, + .spectrum-Detail-emphasized { + font-style: var(--mod-detail-cjk-emphasized-font-style, var(--spectrum-detail-cjk-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-emphasized-font-weight, var(--spectrum-detail-cjk-emphasized-font-weight)); + } + + .spectrum-Detail-strong.spectrum-Detail-emphasized, + em strong, + strong em { + font-style: var(--mod-detail-cjk-strong-emphasized-font-style, var(--spectrum-detail-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-strong-emphasized-font-weight, var(--spectrum-detail-cjk-strong-emphasized-font-weight)); + } + } } .spectrum-Detail--serif { - font-family: var(--mod-detail-serif-font-family, var(--spectrum-detail-serif-font-family)); - font-style: var(--mod-detail-serif-font-style, var(--spectrum-detail-serif-font-style)); - font-weight: var(--mod-detail-serif-font-weight, var(--spectrum-detail-serif-font-weight)); - - strong, - .spectrum-Detail-strong { - font-style: var(--mod-detail-serif-strong-font-style, var(--spectrum-detail-serif-strong-font-style)); - font-weight: var(--mod-detail-serif-strong-font-weight, var(--spectrum-detail-serif-strong-font-weight)); - } - - em, - .spectrum-Detail-emphasized { - font-style: var(--mod-detail-serif-emphasized-font-style, var(--spectrum-detail-serif-emphasized-font-style)); - font-weight: var(--mod-detail-serif-emphasized-font-weight, var(--spectrum-detail-serif-emphasized-font-weight)); - } - - .spectrum-Detail-strong.spectrum-Detail-emphasized, - em strong, - strong em { - font-style: var(--mod-detail-serif-strong-emphasized-font-style, var(--spectrum-detail-serif-strong-emphasized-font-style)); - font-weight: var(--mod-detail-serif-strong-emphasized-font-weight, var(--spectrum-detail-serif-strong-emphasized-font-weight)); - } + font-family: var(--mod-detail-serif-font-family, var(--spectrum-detail-serif-font-family)); + font-style: var(--mod-detail-serif-font-style, var(--spectrum-detail-serif-font-style)); + font-weight: var(--mod-detail-serif-font-weight, var(--spectrum-detail-serif-font-weight)); + + strong, + .spectrum-Detail-strong { + font-style: var(--mod-detail-serif-strong-font-style, var(--spectrum-detail-serif-strong-font-style)); + font-weight: var(--mod-detail-serif-strong-font-weight, var(--spectrum-detail-serif-strong-font-weight)); + } + + em, + .spectrum-Detail-emphasized { + font-style: var(--mod-detail-serif-emphasized-font-style, var(--spectrum-detail-serif-emphasized-font-style)); + font-weight: var(--mod-detail-serif-emphasized-font-weight, var(--spectrum-detail-serif-emphasized-font-weight)); + } + + .spectrum-Detail-strong.spectrum-Detail-emphasized, + em strong, + strong em { + font-style: var(--mod-detail-serif-strong-emphasized-font-style, var(--spectrum-detail-serif-strong-emphasized-font-style)); + font-weight: var(--mod-detail-serif-strong-emphasized-font-weight, var(--spectrum-detail-serif-strong-emphasized-font-weight)); + } } /* Detail - Light */ .spectrum-Detail--light { - font-style: var(--mod-detail-sans-serif-light-font-style, var(--spectrum-detail-sans-serif-light-font-style)); - font-weight: var(--spectrum-detail-sans-serif-light-font-weight, var(--spectrum-detail-sans-serif-light-font-weight)); - - strong, - .spectrum-Detail-strong { - font-style: var(--mod-detail-sans-serif-light-strong-font-style, var(--spectrum-detail-sans-serif-light-strong-font-style)); - font-weight: var(--mod-detail-sans-serif-light-strong-font-weight, var(--spectrum-detail-sans-serif-light-strong-font-weight)); - } - - em, - .spectrum-Detail-emphasized { - font-style: var(--mod-detail-sans-serif-light-emphasized-font-style, var(--spectrum-detail-sans-serif-light-emphasized-font-style)); - font-weight: var(--mod-detail-sans-serif-light-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-emphasized-font-weight)); - } - - .spectrum-Detail-strong.spectrum-Body-emphasized, - em strong, - strong em { - font-style: var(--mod-detail-sans-serif-light-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style)); - font-weight: var(--mod-detail-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight)); - } - - &:lang(zh), - &:lang(ja), - &:lang(ko) { - font-style: var(--mod-detail-cjk-light-font-style, var(--spectrum-detail-cjk-light-font-style)); - font-weight: var(--mod-detail-cjk-light-font-weight, var(--spectrum-detail-cjk-light-font-weight)); - - strong, - .spectrum-Detail-strong { - font-style: var(--mod-detail-cjk-light-strong-font-style, var(--spectrum-detail-cjk-light-strong-font-style)); - font-weight: var(--mod-detail-cjk-light-strong-font-weight, var(--spectrum-detail-cjk-light-strong-font-weight)); - } - - em, - .spectrum-Detail-emphasized { - font-style: var(--mod-detail-cjk-light-emphasized-font-style, var(--spectrum-detail-cjk-light-emphasized-font-style)); - font-weight: var(--mod-detail-cjk-light-emphasized-font-weight, var(--spectrum-detail-cjk-light-emphasized-font-weight)); - } - - .spectrum-Detail-strong.spectrum-Detail-emphasized { - font-style: var(--mod-detail-cjk-light-strong-emphasized-font-style, var(--spectrum-detail-cjk-light-strong-emphasized-font-style)); - font-weight: var(--mod-detail-cjk-light-strong-emphasized-font-weight, var(--spectrum-detail-cjk-light-strong-emphasized-font-weight)); - } - } + font-style: var(--mod-detail-sans-serif-light-font-style, var(--spectrum-detail-sans-serif-light-font-style)); + font-weight: var(--spectrum-detail-sans-serif-light-font-weight, var(--spectrum-detail-sans-serif-light-font-weight)); + + strong, + .spectrum-Detail-strong { + font-style: var(--mod-detail-sans-serif-light-strong-font-style, var(--spectrum-detail-sans-serif-light-strong-font-style)); + font-weight: var(--mod-detail-sans-serif-light-strong-font-weight, var(--spectrum-detail-sans-serif-light-strong-font-weight)); + } + + em, + .spectrum-Detail-emphasized { + font-style: var(--mod-detail-sans-serif-light-emphasized-font-style, var(--spectrum-detail-sans-serif-light-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-light-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-emphasized-font-weight)); + } + + .spectrum-Detail-strong.spectrum-Body-emphasized, + em strong, + strong em { + font-style: var(--mod-detail-sans-serif-light-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight)); + } + + &:lang(zh), + &:lang(ja), + &:lang(ko) { + font-style: var(--mod-detail-cjk-light-font-style, var(--spectrum-detail-cjk-light-font-style)); + font-weight: var(--mod-detail-cjk-light-font-weight, var(--spectrum-detail-cjk-light-font-weight)); + + strong, + .spectrum-Detail-strong { + font-style: var(--mod-detail-cjk-light-strong-font-style, var(--spectrum-detail-cjk-light-strong-font-style)); + font-weight: var(--mod-detail-cjk-light-strong-font-weight, var(--spectrum-detail-cjk-light-strong-font-weight)); + } + + em, + .spectrum-Detail-emphasized { + font-style: var(--mod-detail-cjk-light-emphasized-font-style, var(--spectrum-detail-cjk-light-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-light-emphasized-font-weight, var(--spectrum-detail-cjk-light-emphasized-font-weight)); + } + + .spectrum-Detail-strong.spectrum-Detail-emphasized { + font-style: var(--mod-detail-cjk-light-strong-emphasized-font-style, var(--spectrum-detail-cjk-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-light-strong-emphasized-font-weight, var(--spectrum-detail-cjk-light-strong-emphasized-font-weight)); + } + } } .spectrum-Detail--serif.spectrum-Detail--light { - font-style: var(--mod-detail-serif-light-font-style, var(--spectrum-detail-serif-light-font-style)); - font-weight: var(--mod-detail-serif-light-font-weight, var(--spectrum-detail-serif-light-font-weight)); + font-style: var(--mod-detail-serif-light-font-style, var(--spectrum-detail-serif-light-font-style)); + font-weight: var(--mod-detail-serif-light-font-weight, var(--spectrum-detail-serif-light-font-weight)); - strong, - .spectrum-Detail-strong { - font-style: var(--mod-detail-serif-light-strong-font-style, var(--spectrum-detail-serif-light-strong-font-style)); - font-weight: var(--mod-detail-serif-light-strong-font-weight, var(--spectrum-detail-serif-light-strong-font-weight)); - } + strong, + .spectrum-Detail-strong { + font-style: var(--mod-detail-serif-light-strong-font-style, var(--spectrum-detail-serif-light-strong-font-style)); + font-weight: var(--mod-detail-serif-light-strong-font-weight, var(--spectrum-detail-serif-light-strong-font-weight)); + } - em, - .spectrum-Detail-emphasized { - font-style: var(--mod-detail-serif-light-emphasized-font-style, var(--spectrum-detail-serif-light-emphasized-font-style)); - font-weight: var(--mod-detail-serif-light-emphasized-font-weight, var(--spectrum-detail-serif-light-emphasized-font-weight)); - } + em, + .spectrum-Detail-emphasized { + font-style: var(--mod-detail-serif-light-emphasized-font-style, var(--spectrum-detail-serif-light-emphasized-font-style)); + font-weight: var(--mod-detail-serif-light-emphasized-font-weight, var(--spectrum-detail-serif-light-emphasized-font-weight)); + } - .spectrum-Detail-strong.spectrum-Body-emphasized, - em strong, - strong em { - font-style: var(--mod-detail-serif-light-strong-emphasized-font-style, var(--spectrum-detail-serif-light-strong-emphasized-font-style)); - font-weight: var(--mod-detail-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-serif-light-strong-emphasized-font-weight)); - } + .spectrum-Detail-strong.spectrum-Body-emphasized, + em strong, + strong em { + font-style: var(--mod-detail-serif-light-strong-emphasized-font-style, var(--spectrum-detail-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-serif-light-strong-emphasized-font-weight)); + } } /* Add margin when inside a Typography component */ .spectrum-Typography .spectrum-Detail { - margin-block-start: var(--mod-detail-margin-start, var(--spectrum-detail-margin-start)); - margin-block-end: var(--mod-detail-margin-end, var(--spectrum-detail-margin-end)); + margin-block-start: var(--mod-detail-margin-start, var(--spectrum-detail-margin-start)); + margin-block-end: var(--mod-detail-margin-end, var(--spectrum-detail-margin-end)); } /* Code */ /* Code tokens */ .spectrum-Code { - --spectrum-code-font-family: var(--spectrum-code-font-family-stack); - --spectrum-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --spectrum-code-font-color: var(--spectrum-code-color); + --spectrum-code-font-family: var(--spectrum-code-font-family-stack); + --spectrum-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --spectrum-code-font-color: var(--spectrum-code-color); } /* Windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Code { - --highcontrast-code-font-color: Text; - } + .spectrum-Code { + --highcontrast-code-font-color: Text; + } } /* Code t-shirt sizes */ .spectrum-Code--sizeXS { - --spectrum-code-font-size: var(--spectrum-code-size-xs); + --spectrum-code-font-size: var(--spectrum-code-size-xs); } .spectrum-Code--sizeS { - --spectrum-code-font-size: var(--spectrum-code-size-s); + --spectrum-code-font-size: var(--spectrum-code-size-s); } .spectrum-Code--sizeM { - --spectrum-code-font-size: var(--spectrum-code-size-m); + --spectrum-code-font-size: var(--spectrum-code-size-m); } .spectrum-Code--sizeL { - --spectrum-code-font-size: var(--spectrum-code-size-l); + --spectrum-code-font-size: var(--spectrum-code-size-l); } .spectrum-Code--sizeXL { - --spectrum-code-font-size: var(--spectrum-code-size-xl); + --spectrum-code-font-size: var(--spectrum-code-size-xl); } /* Code styles */ .spectrum-Code { - font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); - font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); - font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); - font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); - margin-block-start: 0; - margin-block-end: 0; - - line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); - - color: var(--highcontrast-code-font-color, var(--mod-code-font-color, var(--spectrum-code-font-color))); - - strong, - .spectrum-Code-strong { - font-style: var(--mod-code-strong-font-style, var(--spectrum-code-strong-font-style)); - font-weight: var(--mod-code-strong-font-weight, var(--spectrum-code-strong-font-weight)); - } - - em, - .spectrum-Code-emphasized { - font-style: var(--mod-code-emphasized-font-style, var(--spectrum-code-emphasized-font-style)); - font-weight: var(--mod-code-emphasized-font-weight, var(--spectrum-code-emphasized-font-weight)); - } - - .spectrum-Code-strong.spectrum-Code-emphasized, - em strong, - strong em { - font-style: var(--mod-code-strong-emphasized-font-style, var(--spectrum-code-strong-emphasized-font-style)); - font-weight: var(--mod-code-strong-emphasized-font-weight, var(--spectrum-code-strong-emphasized-font-weight)); - } - - &:lang(zh), - &:lang(ja), - &:lang(ko) { - font-family: var(--mod-code-cjk-font-family, var(--spectrum-code-cjk-font-family)); - font-style: var(--mod-code-cjk-font-style, var(--spectrum-code-cjk-font-style)); - font-weight: var(--mod-code-cjk-font-weight, var(--spectrum-code-cjk-font-weight)); - - line-height: var(--mod-code-cjk-line-height, var(--spectrum-code-cjk-line-height)); - letter-spacing: var(--mod-code-cjk-letter-spacing, var(--spectrum-code-cjk-letter-spacing)); - - strong, - .spectrum-Code-strong { - font-style: var(--mod-code-cjk-strong-font-style, var(--spectrum-code-cjk-strong-font-style)); - font-weight: var(--mod-code-cjk-strong-font-weight, var(--spectrum-code-cjk-strong-font-weight)); - } - - em, - .spectrum-Code-emphasized { - font-style: var(--mod-code-cjk-emphasized-font-style, var(--spectrum-code-cjk-emphasized-font-style)); - font-weight: var(--mod-code-cjk-emphasized-font-weight, var(--spectrum-code-cjk-emphasized-font-weight)); - } - - .spectrum-Code-strong.spectrum-Code-emphasized, - em strong, - strong em { - font-style: var(--mod-code-cjk-strong-emphasized-font-style, var(--spectrum-code-cjk-strong-emphasized-font-style)); - font-weight: var(--mod-code-cjk-strong-emphasized-font-weight, var(--spectrum-code-cjk-strong-emphasized-font-weight)); - } - } + font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); + font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); + font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); + font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); + margin-block-start: 0; + margin-block-end: 0; + + line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); + + color: var(--highcontrast-code-font-color, var(--mod-code-font-color, var(--spectrum-code-font-color))); + + strong, + .spectrum-Code-strong { + font-style: var(--mod-code-strong-font-style, var(--spectrum-code-strong-font-style)); + font-weight: var(--mod-code-strong-font-weight, var(--spectrum-code-strong-font-weight)); + } + + em, + .spectrum-Code-emphasized { + font-style: var(--mod-code-emphasized-font-style, var(--spectrum-code-emphasized-font-style)); + font-weight: var(--mod-code-emphasized-font-weight, var(--spectrum-code-emphasized-font-weight)); + } + + .spectrum-Code-strong.spectrum-Code-emphasized, + em strong, + strong em { + font-style: var(--mod-code-strong-emphasized-font-style, var(--spectrum-code-strong-emphasized-font-style)); + font-weight: var(--mod-code-strong-emphasized-font-weight, var(--spectrum-code-strong-emphasized-font-weight)); + } + + &:lang(zh), + &:lang(ja), + &:lang(ko) { + font-family: var(--mod-code-cjk-font-family, var(--spectrum-code-cjk-font-family)); + font-style: var(--mod-code-cjk-font-style, var(--spectrum-code-cjk-font-style)); + font-weight: var(--mod-code-cjk-font-weight, var(--spectrum-code-cjk-font-weight)); + + line-height: var(--mod-code-cjk-line-height, var(--spectrum-code-cjk-line-height)); + letter-spacing: var(--mod-code-cjk-letter-spacing, var(--spectrum-code-cjk-letter-spacing)); + + strong, + .spectrum-Code-strong { + font-style: var(--mod-code-cjk-strong-font-style, var(--spectrum-code-cjk-strong-font-style)); + font-weight: var(--mod-code-cjk-strong-font-weight, var(--spectrum-code-cjk-strong-font-weight)); + } + + em, + .spectrum-Code-emphasized { + font-style: var(--mod-code-cjk-emphasized-font-style, var(--spectrum-code-cjk-emphasized-font-style)); + font-weight: var(--mod-code-cjk-emphasized-font-weight, var(--spectrum-code-cjk-emphasized-font-weight)); + } + + .spectrum-Code-strong.spectrum-Code-emphasized, + em strong, + strong em { + font-style: var(--mod-code-cjk-strong-emphasized-font-style, var(--spectrum-code-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-code-cjk-strong-emphasized-font-weight, var(--spectrum-code-cjk-strong-emphasized-font-weight)); + } + } } diff --git a/components/underlay/index.css b/components/underlay/index.css index d3b4472b8e..67e9e2dbb1 100644 --- a/components/underlay/index.css +++ b/components/underlay/index.css @@ -10,50 +10,44 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import '@spectrum-css/commons/overlay.css'; +@import "@spectrum-css/commons/overlay.css"; .spectrum-Underlay { - --spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0); - --spectrum-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in); - --spectrum-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out); - --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600); - --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300); - --spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200); - - /* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */ - --spectrum-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));; + --spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0); + --spectrum-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in); + --spectrum-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out); + --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600); + --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300); + --spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200); + + /* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */ + --spectrum-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); } .spectrum-Underlay { - @extend %spectrum-overlay; + @extend %spectrum-overlay; - position: fixed; - inset-block: 0; - inset-inline: 0; + position: fixed; + inset-block: 0; + inset-inline: 0; - background-color: var(--mod-underlay-background-color, var(--spectrum-underlay-background-color)); + background-color: var(--mod-underlay-background-color, var(--spectrum-underlay-background-color)); - /* Float above things by default */ - z-index: 1; + /* Float above things by default */ + z-index: 1; - overflow: hidden; + overflow: hidden; - /* Exit animations */ - transition: opacity var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration)) - var(--mod-underlay-background-exit-animation-ease, var(--spectrum-underlay-background-exit-animation-ease)) - var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)), - visibility 0ms - linear calc( - var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)) + - var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration))); + /* Exit animations */ + transition: + opacity var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration)) var(--mod-underlay-background-exit-animation-ease, var(--spectrum-underlay-background-exit-animation-ease)) var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)), + visibility 0ms linear calc(var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)) + var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration))); } .spectrum-Underlay.is-open { - @extend %spectrum-overlay--open; + @extend %spectrum-overlay--open; - /* Entry animations */ - transition: opacity var(--mod-underlay-background-entry-animation-duration, var(--spectrum-underlay-background-entry-animation-duration)) - var(--mod-underlay-background-entry-animation-ease, var(--spectrum-underlay-background-entry-animation-ease)) - var(--mod-underlay-background-entry-animation-delay, var(--spectrum-underlay-background-entry-animation-delay)); + /* Entry animations */ + transition: opacity var(--mod-underlay-background-entry-animation-duration, var(--spectrum-underlay-background-entry-animation-duration)) var(--mod-underlay-background-entry-animation-ease, var(--spectrum-underlay-background-entry-animation-ease)) var(--mod-underlay-background-entry-animation-delay, var(--spectrum-underlay-background-entry-animation-delay)); } diff --git a/nx.json b/nx.json index b412ff5c36..b00808b124 100644 --- a/nx.json +++ b/nx.json @@ -137,7 +137,7 @@ "executor": "nx:run-commands", "options": { "commands": [ - "stylelint --fix --cache --allow-empty-input {projectRoot}/*.css {projectRoot}/**/*.css", + "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.css {projectRoot}/**/*.css && stylelint --fix --cache --allow-empty-input {projectRoot}/*.css {projectRoot}/**/*.css", "eslint --fix --cache --no-error-on-unmatched-pattern {projectRoot}/*.json {projectRoot}/stories/*.js", "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.{yml,md} {projectRoot}/**/*.{yml,md}" ]