diff --git a/.prettierrc b/.prettierrc index 76186d7b19d..202b6470b07 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,12 @@ { "tabWidth": 2, - "useTabs": true + "useTabs": true, + "overrides": [ + { + "files": "*.css", + "options": { + "printWidth": 500 + } + } + ] } diff --git a/components/accordion/index.css b/components/accordion/index.css index 643a33ed5dc..f7a228b78dd 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)); } } @@ -635,7 +330,7 @@ governing permissions and limitations under the License. &.is-open { > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator, > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator { - transform: var(--spectrum-logical-rotation,) rotate(90deg); + transform: var(--spectrum-logical-rotation) rotate(90deg); } > .spectrum-Accordion-itemContent { diff --git a/components/actionbar/index.css b/components/actionbar/index.css index 0c306f02923..303d175cdac 100644 --- a/components/actionbar/index.css +++ b/components/actionbar/index.css @@ -10,77 +10,77 @@ 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; + /* 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; + /* Account for fixed width */ + box-sizing: border-box; - /* Let clicks in blank space fall through */ - pointer-events: none; + /* Let clicks in blank space fall through */ + pointer-events: none; /* Take up no space and be invisible when not open */ block-size: 0; @@ -92,98 +92,98 @@ governing permissions and limitations under the License. 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-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 f833caed867..6ca86c976b6 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 f56b4e5081b..314ce50c2f7 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 30de8aaf3a6..019a158df44 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 7f78b2945f1..297ffb91660 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 73630a7c0b2..9a2b72cc920 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 0b606f3f6b3..0715d2a2433 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 79edc3c5243..978ab27bab7 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 6fd182f97c0..133220d9b60 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 a7afe4693d6..89ac8a8f9b9 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 f3911a868fb..ae5dc490861 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 29fdf09c0fd..2be7b5953c4 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 418275e4019..e35fd304eae 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,36 +90,36 @@ governing permissions and limitations under the License. } .spectrum-AssetCard { - /* contain selection indicator */ - position: relative; + /* contain selection indicator */ + position: relative; - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - inline-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size)); + inline-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size)); - cursor: pointer; + 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))); - } + &.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))); - } - } + /* 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)); - } - } + &:active { + .spectrum-AssetCard-assetContainer::after { + border-color: var(--mod-assetcard-border-color-down, var(--spectrum-assetcard-border-color-down)); + } + } - outline: none; + outline: none; &:focus-visible { .spectrum-AssetCard-assetContainer::before { @@ -130,257 +130,247 @@ governing permissions and limitations under the License. /* 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; } - /* 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 */ + &::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); + } } /* 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-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)); - } + .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))); - } - } + &: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))); - } - } + &: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-selectionIndicator { + background-color: var(--mod-assetcard-selectionindicator-background-color-default, var(--spectrum-assetcard-selectionindicator-background-color-default)); - .spectrum-AssetCard-selectionOrder { - display: none; - } - } + .spectrum-AssetCard-selectionOrder { + display: none; + } + } - &.is-selected, - &:focus-visible, - &:hover { - .spectrum-AssetCard-selectionIndicator { - display: flex; - pointer-events: all; - } - } + &.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-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; - } - } + .spectrum-AssetCard-checkbox { + display: none; + } + } - &.is-selected { - .spectrum-AssetCard-selectionIndicator { - display: flex; - pointer-events: all; - } - } + &.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 f12a249837b..d408471cc81 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 04fc20bce9e..ce6f6a73b83 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 ccb9ba09be3..b6e2caaba7b 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 a0014548253..64121adfaf9 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 9ed33e8a087..ac4def7b64c 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 3bbd6b5cacc..df36da24996 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 748097bbc91..b5ae1a6edbd 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -15,334 +15,317 @@ 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 495d6cf1fcc..76fa00c2608 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 2b1ded8454d..bb2940f23e3 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 ebc9683da69..0863caadbce 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 aecc2caf50f..662521d5f32 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -11,43 +11,44 @@ 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-button-gap: var(--spectrum-component-edge-to-visual-only-50); + --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 +56,416 @@ 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; - - /* width: 100%; */ + table-layout: fixed; - border-collapse: collapse; - border-spacing: 0; + /* width: 100%; */ - user-select: none; + border-collapse: collapse; + border-spacing: 0; + 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))); + } + + &:hover { + &.is-selected:not(.is-range-selection) { + &::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; /* stylelint-disable-line declaration-property-value-no-unknown */ + 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 c03b6a8c9e3..1db86d2f64d 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 9d467bd1010..97e8a1dc873 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -20,587 +20,580 @@ 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 02ceeaf5a85..dc1663477d3 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 62d8099dc28..7d8b6d69d57 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 fc8a4437db5..4742c88ba49 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 b7e935e3ec7..d450fef8be8 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 e7831a5d318..23a10da8f9e 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 24c5eb98cad..09799e27a0a 100644 --- a/components/closebutton/index.css +++ b/components/closebutton/index.css @@ -20,268 +20,264 @@ 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 482625bd921..cf34a126c05 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 e14e52e3628..8582aa41a7f 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 0b0b8b7477b..9b57e21fa44 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 cb163962bbc..8aa091eda07 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-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-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 aac86c5419e..f074f12b51a 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 80de34efd01..bdbfb2ac0c3 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 510561c9740..adfca816c9a 100644 --- a/components/colorhandle/index.css +++ b/components/colorhandle/index.css @@ -9,79 +9,72 @@ 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 - ); - --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; + --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); - 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)); + --spectrum-colorhandle-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-colorhandle-animation-easing: ease-in-out; - border-radius: 100%; + /* 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); - &::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%); - } + /* 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); - transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing)); + /* primary border on color handle */ + --spectrum-colorhandle-border-width: var(--spectrum-color-handle-border-width); + --spectrum-colorhandle-border-color: var(--spectrum-white); - &.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)); + --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%; +} - 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; - } +.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; diff --git a/components/colorloupe/index.css b/components/colorloupe/index.css index 287f6640bd2..a90c3ded6e4 100644 --- a/components/colorloupe/index.css +++ b/components/colorloupe/index.css @@ -9,87 +9,82 @@ 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 6750face813..0f753e31750 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -10,15 +10,15 @@ 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 */ @@ -34,102 +34,102 @@ governing permissions and limitations under the License. } .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 6a7df843ad5..e5ad1472ea6 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 698df728eb0..22950009d3f 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 beff3bc80d0..3bdf1eb57c0 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/commons/basebutton.css b/components/commons/basebutton.css index 00ca18e6808..29761faf75e 100644 --- a/components/commons/basebutton.css +++ b/components/commons/basebutton.css @@ -11,124 +11,119 @@ governing permissions and limitations under the License. */ %spectrum-BaseButton { - cursor: pointer; + cursor: pointer; - /* stylelint-disable-next-line property-no-vendor-prefix -- need to validate if this can be removed */ - -webkit-user-select: none; - user-select: none; + /* stylelint-disable-next-line property-no-vendor-prefix -- need to validate if this can be removed */ + -webkit-user-select: none; + user-select: none; - /* Contain halo */ - position: relative; + /* Contain halo */ + position: relative; - /* Show the button overflow in Edge. */ - overflow: visible; - display: inline-flex; - align-items: center; - justify-content: center; + /* Show the button overflow in Edge. */ + overflow: visible; + display: inline-flex; + align-items: center; + justify-content: center; - box-sizing: border-box; + box-sizing: border-box; - /* Remove button the margin in Firefox and Safari. */ - margin: 0; + /* Remove button the margin in Firefox and Safari. */ + margin: 0; - /* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */ - font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))); + /* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */ + font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))); - /* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */ - line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100))); - text-decoration: none; + /* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */ + line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100))); + text-decoration: none; + /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */ + text-transform: none; - /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */ - text-transform: none; + /* Adjacent buttons should be aligned correctly */ + vertical-align: top; - /* Adjacent buttons should be aligned correctly */ - vertical-align: top; + /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari. */ + -webkit-appearance: button; + border-style: solid; - /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari. */ - -webkit-appearance: button; - border-style: solid; + transition: background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, + box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out; - transition: background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out; + -webkit-font-smoothing: antialiased; - -webkit-font-smoothing: antialiased; + /* Font smoothing for Firefox */ + -moz-osx-font-smoothing: grayscale; - /* Font smoothing for Firefox */ - -moz-osx-font-smoothing: grayscale; + /* Fix Firefox */ + &::-moz-focus-inner { + /* Use uppercase PX so values don't get converted to rem */ + margin-block-start: -2px; + margin-block-end: -2px; + padding: 0; - /* Fix Firefox */ - &::-moz-focus-inner { - /* Use uppercase PX so values don't get converted to rem */ - margin-block-start: -2px; - margin-block-end: -2px; - padding: 0; + border: 0; - border: 0; + /* Remove the inner border and padding for button in Firefox. */ + border-style: none; + } - /* Remove the inner border and padding for button in Firefox. */ - border-style: none; - } + &:focus { + outline: none; + } - &:focus { - outline: none; - } - - &:disabled, - &.is-disabled { - cursor: default; - } + &:disabled, + &.is-disabled { + cursor: default; + } } %spectrum-ButtonIcon { - flex-shrink: 0; - max-block-size: 100%; + flex-shrink: 0; + max-block-size: 100%; } %spectrum-ButtonWithFocusRing { - &::after { - content: ""; + &::after { + content: ""; - position: absolute; - inset-block-start: 0; - inset-block-end: 0; - inset-inline-start: 0; - inset-inline-end: 0; + position: absolute; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: 0; + inset-inline-end: 0; - display: block; + display: block; - /* @deprecation --mod-focus-indicator-gap has been renamed and will be removed in a future version. */ - margin: calc(var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) * -1); + /* @deprecation --mod-focus-indicator-gap has been renamed and will be removed in a future version. */ + margin: calc(var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) * -1); - /* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */ - transition: opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out, - margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out; - } + /* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */ + transition: opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out, margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out; + } - &:focus-visible::after { - margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2); - } + &:focus-visible::after { + margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2); + } } - %spectrum-AnchorButton { - /* Make link text not selectable */ - user-select: none; + /* Make link text not selectable */ + user-select: none; - /* stylelint-disable-next-line property-no-vendor-prefix -- Remove appearance for clickable types in iOS and Safari. */ - -webkit-appearance: none; + /* stylelint-disable-next-line property-no-vendor-prefix -- Remove appearance for clickable types in iOS and Safari. */ + -webkit-appearance: none; } %spectrum-ButtonLabel { - align-self: center; - justify-self: center; + align-self: center; + justify-self: center; - /* Fixes horizontal alignment of text in anchor buttons */ - text-align: center; + /* Fixes horizontal alignment of text in anchor buttons */ + text-align: center; - &:empty { - display: none; - } + &:empty { + display: none; + } } diff --git a/components/commons/overlay.css b/components/commons/overlay.css index f64648da4f1..c184c27b8ec 100644 --- a/components/commons/overlay.css +++ b/components/commons/overlay.css @@ -14,38 +14,36 @@ governing permissions and limitations under the License. /** @note used in modal, popover, quickaction, tooltip, underlay */ %spectrum-overlay { - pointer-events: none; - visibility: hidden; - opacity: 0%; - transition: transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out, - opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out, - visibility 0ms linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)); + pointer-events: none; + visibility: hidden; + opacity: 0; + transition: transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out, opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out, visibility 0ms linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)); } /** @note used in modal, popover, quickaction, tooltip, underlay */ %spectrum-overlay--open { - pointer-events: auto; - visibility: visible; - opacity: 100%; - transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0ms)); + pointer-events: auto; + visibility: visible; + opacity: 1; + transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0ms)); } /** @note currently unused */ %spectrum-overlay--bottom--open { - transform: translateY(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))); + transform: translateY(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))); } /** @note currently unused */ %spectrum-overlay--top--open { - transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px)))); + transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px)))); } /** @note used in quickaction */ %spectrum-overlay--right--open { - transform: translateX(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))); + transform: translateX(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))); } /** @note used in quickaction */ %spectrum-overlay--left--open { - transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px)))); + transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px)))); } diff --git a/components/contextualhelp/index.css b/components/contextualhelp/index.css index 506abad51ea..1d4a4bb7b6f 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/index.css b/components/datepicker/index.css index 362ce4b4248..4c160a414e9 100644 --- a/components/datepicker/index.css +++ b/components/datepicker/index.css @@ -13,68 +13,68 @@ governing permissions and limitations under the License. @import "./themes/express.css"; .spectrum-DatePicker { - --spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100); - --spectrum-datepicker-border-radius-quiet: 0; - --spectrum-datepicker-border-width: var(--spectrum-border-width-100); - --spectrum-datepicker-min-width: var(--spectrum-field-width); - --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100); - - /* button */ - --spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500); - --spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default); - --spectrum-datepicker-pickerbutton-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100)); - --spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset)); - --spectrum-datepicker-quiet-button-offset: var(--spectrum-text-to-visual-100); - --spectrum-datepicker-icon-to-button: var(--spectrum-text-to-visual-100); - --spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100); - - /* focus */ - --spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100); - --spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100); - --spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color); - --spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75); - - /* color */ - --spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default); - --spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500); - --spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color); - - /* dash */ - --spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100); - --spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-datepicker-range-dash-marin-inline-start: calc( -0.5 * var(--spectrum-datepicker-dash-font-size)); - --spectrum-datepicker-range-dash-padding-top: 0; - - /* calculating widths */ - /* todo: if we add t-shirt sizing, this will be wrong ❤️ */ - --spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size)); - --spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height)); - --spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); - - --spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding)); - --spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)); - - --spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)); - --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); - --spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)); - --spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); - - /* padding inline end */ - --spectrum-datepicker-padding-inline-end: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2)); - --spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset)); - --spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2)); - --spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)); + --spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100); + --spectrum-datepicker-border-radius-quiet: 0; + --spectrum-datepicker-border-width: var(--spectrum-border-width-100); + --spectrum-datepicker-min-width: var(--spectrum-field-width); + --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100); + + /* button */ + --spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500); + --spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default); + --spectrum-datepicker-pickerbutton-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100)); + --spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset)); + --spectrum-datepicker-quiet-button-offset: var(--spectrum-text-to-visual-100); + --spectrum-datepicker-icon-to-button: var(--spectrum-text-to-visual-100); + --spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100); + + /* focus */ + --spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100); + --spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100); + --spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color); + --spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75); + + /* color */ + --spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default); + --spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500); + --spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color); + + /* dash */ + --spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100); + --spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-datepicker-range-dash-marin-inline-start: calc(-0.5 * var(--spectrum-datepicker-dash-font-size)); + --spectrum-datepicker-range-dash-padding-top: 0; + + /* calculating widths */ + /* todo: if we add t-shirt sizing, this will be wrong ❤️ */ + --spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size)); + --spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height)); + --spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); + + --spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding)); + --spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)); + + --spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)); + --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); + --spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)); + --spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); + + /* padding inline end */ + --spectrum-datepicker-padding-inline-end: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2)); + --spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset)); + --spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2)); + --spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)); } .spectrum-DatePicker { - position: relative; - display: inline-flex; - flex-direction: row; - flex-wrap: nowrap; - min-inline-size: var(--mod-datepicker-min-width, var(--spectrum-datepicker-min-width)); - border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)); + position: relative; + display: inline-flex; + flex-direction: row; + flex-wrap: nowrap; + min-inline-size: var(--mod-datepicker-min-width, var(--spectrum-datepicker-min-width)); + border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)); &.is-disabled { .spectrum-DatePicker-rangeDash { @@ -109,7 +109,7 @@ governing permissions and limitations under the License. /* standard and range invalid */ .is-invalid .spectrum-DatePicker-input { - padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid, var(--spectrum-datepicker-padding-inline-end-invalid)); + padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid, var(--spectrum-datepicker-padding-inline-end-invalid)); } /* quiet */ @@ -126,34 +126,34 @@ governing permissions and limitations under the License. /* quiet range */ .spectrum-DatePicker--quiet .spectrum-DatePicker-input { - &.spectrum-DatePicker-endField { - padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet)); - } + &.spectrum-DatePicker-endField { + padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet)); + } } .spectrum-DatePicker-button { - /* Be above textfield so box shadow shines through */ - position: absolute; - inset-inline-end: 0; + /* Be above textfield so box shadow shines through */ + position: absolute; + inset-inline-end: 0; } .spectrum-DatePicker--quiet { - border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet)); + border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet)); - .spectrum-DatePicker-button { - inline-size: auto; - inset-inline-end: calc(-1 * var(--mod-datepicker-quiet-button-offset, var(--spectrum-datepicker-quiet-button-offset))); + .spectrum-DatePicker-button { + inline-size: auto; + inset-inline-end: calc(-1 * var(--mod-datepicker-quiet-button-offset, var(--spectrum-datepicker-quiet-button-offset))); - &:disabled, - &:disabled:hover { - border-color: var(--mod-datepicker-border-color-disabled, var(--spectrum-datepicker-border-color-disabled)); - } + &:disabled, + &:disabled:hover { + border-color: var(--mod-datepicker-border-color-disabled, var(--spectrum-datepicker-border-color-disabled)); + } - &:disabled:not(.is-open) { - .spectrum-PickerButton-fill { - border-color: transparent; - } - } + &:disabled:not(.is-open) { + .spectrum-PickerButton-fill { + border-color: transparent; + } + } &:not(:disabled, .is-open) { .spectrum-PickerButton-fill { @@ -169,13 +169,13 @@ governing permissions and limitations under the License. } } - /* invalid bottom border color */ - &.is-invalid { - .spectrum-DatePicker-input, - .spectrum-DatePicker-button { - border-color: var(--highcontrast-datepicker-invalid-quiet-color, var(--mod-datepicker-invalid-quiet-color, var(--spectrum-datepicker-invalid-quiet-color))); - } - } + /* invalid bottom border color */ + &.is-invalid { + .spectrum-DatePicker-input, + .spectrum-DatePicker-button { + border-color: var(--highcontrast-datepicker-invalid-quiet-color, var(--mod-datepicker-invalid-quiet-color, var(--spectrum-datepicker-invalid-quiet-color))); + } + } } .spectrum-DatePicker--range { @@ -214,59 +214,70 @@ governing permissions and limitations under the License. } } - /* Input Group */ - &.spectrum-DatePicker--quiet { - border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet)); - - .spectrum-DatePicker-textfield { - min-inline-size: 0; - inline-size: var(--mod-datepicker-input-width-quiet, var(--spectrum-datepicker-input-width-quiet)); - - &:first-of-type { - inline-size: var(--mod-datepicker-range-input-width-quiet-first, var(--spectrum-datepicker-range-input-width-quiet-first)); - } - } - } - - /* Datetime Range */ - &.spectrum-DatePicker--datetimeRange { - /* Inputs */ - .spectrum-DatePicker-textfield { - inline-size: var(--mod-datepicker-datetime-input-width, var(--spectrum-datepicker-datetime-input-width)); - min-inline-size: 0; - - &:first-of-type { - inline-size: var(--mod-datepicker-datetime-input-width-first, var(--spectrum-datepicker-datetime-input-width-first)); - } - } - - &.spectrum-DatePicker--quiet { - .spectrum-DatePicker-textfield { - inline-size: var(--mod-datepicker-datetime-quiet-input-width, var(--spectrum-datepicker-datetime-quiet-input-width)); - - &:first-of-type { - inline-size: var(--mod-datepicker-datetime-quiet-input-width-first, var(--spectrum-datepicker-datetime-quiet-input-width-first)); - } - } - } - } - - /* Inputs */ - .spectrum-DatePicker-textfield { - flex: initial; - min-inline-size: 0; - inline-size: var(--mod-datepicker-input-width, var(--spectrum-datepicker-input-width)); - - &:first-of-type { - inline-size: var(--mod-datepicker-range-input-width-first, var(--spectrum-datepicker-range-input-width-first)); - } - } + &.is-keyboardFocused.spectrum-DatePicker--quiet { + /* quiet variant bottom border focus indicator */ + &::after { + margin: 0; + box-shadow: none; + border-radius: 0; + border-block-end: var(--mod-datepicker-focus-thickness, var(--spectrum-datepicker-focus-thickness)) solid var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color))); + inset-block-end: calc(-1 * var(--mod-datepicker-focus-line-gap, var(--spectrum-datepicker-focus-line-gap))); + } + } + + /* Input Group */ + &.spectrum-DatePicker--quiet { + border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet)); + + .spectrum-DatePicker-textfield { + min-inline-size: 0; + inline-size: var(--mod-datepicker-input-width-quiet, var(--spectrum-datepicker-input-width-quiet)); + + &:first-of-type { + inline-size: var(--mod-datepicker-range-input-width-quiet-first, var(--spectrum-datepicker-range-input-width-quiet-first)); + } + } + } + + /* Datetime Range */ + &.spectrum-DatePicker--datetimeRange { + /* Inputs */ + .spectrum-DatePicker-textfield { + inline-size: var(--mod-datepicker-datetime-input-width, var(--spectrum-datepicker-datetime-input-width)); + min-inline-size: 0; + + &:first-of-type { + inline-size: var(--mod-datepicker-datetime-input-width-first, var(--spectrum-datepicker-datetime-input-width-first)); + } + } + + &.spectrum-DatePicker--quiet { + .spectrum-DatePicker-textfield { + inline-size: var(--mod-datepicker-datetime-quiet-input-width, var(--spectrum-datepicker-datetime-quiet-input-width)); + + &:first-of-type { + inline-size: var(--mod-datepicker-datetime-quiet-input-width-first, var(--spectrum-datepicker-datetime-quiet-input-width-first)); + } + } + } + } + + /* Inputs */ + .spectrum-DatePicker-textfield { + flex: initial; + min-inline-size: 0; + inline-size: var(--mod-datepicker-input-width, var(--spectrum-datepicker-input-width)); + + &:first-of-type { + inline-size: var(--mod-datepicker-range-input-width-first, var(--spectrum-datepicker-range-input-width-first)); + } + } } - .spectrum-DatePicker-input { - /* fill space */ - flex: 1; - inline-size: 100%; +.spectrum-DatePicker-input { + /* fill space */ + flex: 1; + inline-size: 100%; &.spectrum-DatePicker-startField { border-inline-end: 0; @@ -283,13 +294,12 @@ governing permissions and limitations under the License. } } - /* "-" between inputs */ - .spectrum-DatePicker-rangeDash { - line-height: var(--mod-datepicker-dash-line-height, var(--spectrum-datepicker-dash-line-height)); - padding-block-start: var(--mod-datepicker-range-dash-padding-top, var(--spectrum-datepicker-range-dash-padding-top)); - flex: initial; - inline-size: 0; - z-index: 1; + &.spectrum-DatePicker-endField { + border-inline-start: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; + padding-inline-start: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding)); + } &::before { content: "–"; @@ -301,14 +311,27 @@ governing permissions and limitations under the License. vertical-align: middle; inline-size: var(--mod-datepicker-dash-font-size, var(--spectrum-datepicker-dash-font-size)); } - } + + &::before { + content: "–"; + display: inline-block; + margin-block: 0; + margin-inline: var(--mod-datepicker-range-dash-margin-left, var(--spectrum-datepicker-range-dash-marin-inline-start)); + overflow: hidden; + text-align: center; + vertical-align: middle; + inline-size: var(--mod-datepicker-dash-font-size, var(--spectrum-datepicker-dash-font-size)); + } /********* WHCM *********/ @media (forced-colors: active) { .spectrum-DatePicker { - --highcontrast-datepicker-dash-color-disabled: GrayText; - --highcontrast-datepicker-focus-ring-color: Highlight; - --highcontrast-datepicker-pickerbutton-border-color: Highlight; - --highcontrast-datepicker-invalid-quiet-color: Highlight; - } + --highcontrast-datepicker-dash-color-disabled: GrayText; + --highcontrast-datepicker-focus-ring-color: Highlight; + --highcontrast-datepicker-pickerbutton-border-color: Highlight; + --highcontrast-datepicker-invalid-quiet-color: Highlight; + } +} +} + } } diff --git a/components/datepicker/themes/express.css b/components/datepicker/themes/express.css index b292b5b103a..0e30009bd9e 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 ceea2ff22b3..c2a48351ac1 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 8d3f6dd8a97..3e3868fd3a2 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -24,13 +24,16 @@ governing permissions and limitations under the License. --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: var(--spectrum-gray-700); + --spectrum-dial-border-color: 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-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-min-max-tick-color: var(--spectrum-gray-600); + --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); + --spectrum-dial-border-color-key-focus: var(--spectrum-gray-50); --spectrum-dial-label-text-color: var(--spectrum-gray-700); --spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700); @@ -49,78 +52,95 @@ governing permissions and limitations under the License. --spectrum-dial-min-max-tick-angles: 45deg; - --spectrum-dial-width: 32px; - --spectrum-dial-height: 32px; + --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-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-container-width: 48px; + + --spectrum-dial-handle-marker-width: 12px; + --spectrum-dial-handle-marker-height: 2px; + + --spectrum-dial-handle-marker-border-radius: 1px; + + --spectrum-dial-handle-size: 100%; + --spectrum-dial-min-height: 0; + --spectrum-dial-controls-min-height: 0; + + --spectrum-dial-min-max-tick-angles: 45deg; + + --spectrum-dial-width: 32px; + --spectrum-dial-height: 32px; + + --spectrum-dial-handle-border-size: var(--spectrum-border-width-200); + --spectrum-dial-label-text-size: var(--spectrum-font-size-75); + --spectrum-dial-label-line-height: var(--spectrum-line-height-200); } .spectrum-Dial--small { - --spectrum-dial-width: 24px; - --spectrum-dial-height: 24px; + --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; + display: inline-block; + box-sizing: border-box; - position: relative; - z-index: auto; + position: relative; + z-index: auto; - vertical-align: top; + 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)); + 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; + border-radius: var(--mod-dial-border-radius, var(--spectrum-dial-border-radius)); + margin-block: 0; - outline: none; + outline: none; &::before, &::after { @@ -146,56 +166,56 @@ governing permissions and limitations under the License. } .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; - } + 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))); @@ -205,26 +225,30 @@ governing permissions and limitations under the License. } } - &: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-hover, var(--mod-dial-handle-marker-color-hover, var(--spectrum-dial-handle-marker-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))); - } - } + &: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))); - &: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))); + } + } - &::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. */ @@ -265,38 +289,51 @@ governing permissions and limitations under the License. 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))); - } - } - } + .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; + cursor: ns-resize; + cursor: -webkit-grabbing; + cursor: grabbing; user-select: none; - .spectrum-Dial { - .spectrum-Dial-label, - .spectrum-Dial-value { - cursor: inherit; - } - } + .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; + } } +} \ No newline at end of file diff --git a/components/dialog/index.css b/components/dialog/index.css index 30fe156565f..84d91afc30d 100644 --- a/components/dialog/index.css +++ b/components/dialog/index.css @@ -11,58 +11,57 @@ 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; - 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 { @@ -72,47 +71,48 @@ governing permissions and limitations under the License. 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 { @@ -120,24 +120,26 @@ governing permissions and limitations under the License. display: flex; /* Without this, buttons will be stretched */ - align-items: center; - justify-content: flex-end; - box-sizing: border-box; + /* Without this, buttons will be stretched */ + align-items: center; + justify-content: flex-end; + + 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 { @@ -155,39 +157,38 @@ governing permissions and limitations under the License. } .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; /* 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; + /* 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)); - outline: none; /* Hide focus outline */ + display: flex; + flex-wrap: wrap; /* Both selectors are required to override the button + button rule */ > *, @@ -200,33 +201,39 @@ governing permissions and limitations under the License. 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 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; - } + /* 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)); + + &.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 ." - ". . . . . . ."; + 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; @@ -242,11 +249,13 @@ governing permissions and limitations under the License. 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; - 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)); + /* 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)); } .spectrum-Dialog--fullscreen { @@ -258,7 +267,7 @@ governing permissions and limitations under the License. inline-size: 100%; block-size: 100%; - border-radius: 0; + border-radius: 0; } .spectrum-Dialog--fullscreen, @@ -266,31 +275,37 @@ governing permissions and limitations under the License. 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 .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-footer, .spectrum-Dialog-buttonGroup { @@ -326,62 +341,63 @@ governing permissions and limitations under the License. ". . . . . ."; } - .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--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; + } } +} \ No newline at end of file diff --git a/components/divider/index.css b/components/divider/index.css index d8e69872ba2..8d7f871d81a 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -11,68 +11,68 @@ 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%; - /* 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)); diff --git a/components/dropindicator/index.css b/components/dropindicator/index.css index 8b66dfbc830..37d5696ae6d 100644 --- a/components/dropindicator/index.css +++ b/components/dropindicator/index.css @@ -11,24 +11,21 @@ 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 { @@ -55,14 +52,8 @@ governing permissions and limitations under the License. } .spectrum-DropIndicator--horizontal { - block-size: var( - --mod-dropindicator-border-size, - var(--spectrum-dropindicator-border-size) - ); - margin: 0 var( - --mod-dropindicator-circle-size, - var(--spectrum-dropindicator-circle-size) - ); + block-size: var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)); + margin: 0 var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)); &::before, &::after { @@ -79,15 +70,9 @@ governing permissions and limitations under the License. } .spectrum-DropIndicator--vertical { - inline-size: var( - --mod-dropindicator-border-size, - var(--spectrum-dropindicator-border-size) - ); - margin-block: var( - --mod-dropindicator-circle-size, - var(--spectrum-dropindicator-circle-size) - ); - 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 { diff --git a/components/dropzone/index.css b/components/dropzone/index.css index df0e8e8e711..4d8e7f6c80a 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -11,105 +11,104 @@ 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)); - } + 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 */ @@ -119,53 +118,58 @@ governing permissions and limitations under the License. --mod-illustrated-message-display: none; } - &.is-filled.is-dragged { - --mod-drop-zone-content-display: flex; - } + /* Updated values for a nested illustrated message when state changes */ + --mod-illustrated-message-display: none; + } - &: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; - } -} + &.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 1b49fa7331f..c5757a72025 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 fd4b63b2f43..d2b1194be9e 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 b22bd972ce2..c06a08a62a5 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 dcf2189be8f..313c15f693e 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 33318286cba..4cd2e440b9f 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 5568b4ab278..e52ae8ee2ef 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 33fd98d49f8..2d18e604b27 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 17a0ef4273d..c8f978a81af 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 5e8ae9c2f0a..ead397e46e5 100644 --- a/components/illustratedmessage/index.css +++ b/components/illustratedmessage/index.css @@ -11,65 +11,65 @@ 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 { @@ -81,33 +81,33 @@ governing permissions and limitations under the License. } .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 fcbbaa9a4e2..8a6c102b903 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-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-infield-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --spectrum-infield-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-infield-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-infield-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); + --spectrum-infield-button-icon-color: var(--spectrum-neutral-content-color-default); + --spectrum-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); --spectrum-infield-button-fill-justify-content: center; &:disabled { - --mod-infield-button-background-color: var( - --mod-infield-button-background-color-disabled, - var(--spectrum-disabled-background-color) - ); - --mod-infield-button-background-color-hover: var( - --mod-infield-button-background-color-hover-disabled, - var(--spectrum-disabled-background-color) - ); - --mod-infield-button-background-color-down: var( - --mod-infield-button-background-color-down-disabled, - var(--spectrum-disabled-background-color) - ); - --mod-infield-button-border-color: var( - --mod-infield-button-border-color-disabled, - var(--spectrum-disabled-background-color) - ); - - --mod-infield-button-icon-color: var( - --mod-infield-button-icon-color-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-infield-button-icon-color-hover: var( - --mod-infield-button-icon-color-hover-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-infield-button-icon-color-down: var( - --mod-infield-button-icon-color-down-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-infield-button-icon-color-key-focus: var( - --mod-infield-button-icon-color-key-focus-disabled, - var(--spectrum-disabled-content-color) - ); + --mod-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color)); + --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); + --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); + --mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color)); + + --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color)); + --mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); + --mod-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); + --mod-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color)); } &.spectrum-InfieldButton--sizeS { @@ -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) - ); + /* 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; + 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; @@ -378,18 +229,9 @@ governing permissions and limitations under the License. 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)); } } @@ -402,35 +244,20 @@ governing permissions and limitations under the License. .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 d08bbd8cc6c..238ec7c6342 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 ae22ee72443..50df93a4ba6 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 98e85f10102..6a04c3ae186 100644 --- a/components/inlinealert/index.css +++ b/components/inlinealert/index.css @@ -11,18 +11,18 @@ 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); + /* 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); @@ -36,48 +36,48 @@ governing permissions and limitations under the License. --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); + /* 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 { @@ -86,77 +86,79 @@ governing permissions and limitations under the License. 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)); - 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; + /* Minimum space between header and icon */ + gap: var(--mod-inlinealert-spacing-header-to-icon, var(--spectrum-inlinealert-spacing-header-to-icon)); - min-block-size: var(--mod-inlinealert-header-min-block-size, var(--spectrum-inlinealert-header-min-block-size)); + 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; - color: var(--highcontrast-inlinealert-header-color, var(--mod-inlinealert-header-color, var(--spectrum-inlinealert-header-color))); + 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))); } .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 47aaf9c7cd5..ce33f80bf58 100644 --- a/components/link/index.css +++ b/components/link/index.css @@ -11,41 +11,41 @@ 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 { @@ -53,70 +53,72 @@ governing permissions and limitations under the License. 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 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 dee858148c5..da4286f8dd0 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -13,61 +13,58 @@ 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; + @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)); + 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)); + 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; + 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)) - ); - } + &::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 { @@ -82,33 +79,32 @@ governing permissions and limitations under the License. } .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::after { + --highcontrast-logic-button-focus-indicator-color: Highlight; + forced-color-adjust: none; + } .spectrum-LogicButton { forced-color-adjust: none; @@ -123,15 +119,25 @@ governing permissions and limitations under the License. --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; - } + &: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 77f2da11afa..5c5b66d32f8 100644 --- a/components/menu/index.css +++ b/components/menu/index.css @@ -11,215 +11,201 @@ 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; + .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-item-background-color-focus: Highlight; + --highcontrast-menu-item-color-focus: HighlightText; - --highcontrast-menu-checkmark-icon-color-default: Highlight; + --highcontrast-menu-checkmark-icon-color-default: Highlight; - --highcontrast-menu-item-color-disabled: GrayText; - --highcontrast-menu-item-focus-indicator-color: 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; + --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; - } + @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 { + /* Hide unstylable readability backplates. */ + forced-color-adjust: none; + } .spectrum-Menu-item:hover, .spectrum-Menu-item:focus { .spectrum-Menu-itemCheckbox { @@ -227,55 +213,43 @@ governing permissions and limitations under the License. --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--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))); - } + .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); - } - } - } + &: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)); - } + 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); @@ -284,327 +258,325 @@ governing permissions and limitations under the License. --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)); - } + &.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)); - - /* 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)); - } - } + /* 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)); + } + } } .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 { @@ -620,92 +592,92 @@ governing permissions and limitations under the License. } .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 +685,148 @@ 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-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-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))); - } +/* Disabled menu items */ +.spectrum-Menu-item.is-disabled, +.spectrum-Menu-item[aria-disabled="true"] { + background-color: transparent; - .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))); - } - } + .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))); + } - &: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-itemDescription { + color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled))); + } - &: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))); - } - } + .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))); + } - &: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))); - } - } -} + &:hover { + cursor: default; + background-color: transparent; -/* Disabled menu items */ -.spectrum-Menu-item.is-disabled, -.spectrum-Menu-item[aria-disabled="true"] { - 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-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))); - } - - &: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)); } +} \ No newline at end of file diff --git a/components/miller/index.css b/components/miller/index.css index 0d68c67fddd..08a14dd3de6 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 ada06633931..a93f52c7a69 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -92,28 +92,16 @@ 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 5d9e7c78b04..38557f79cb6 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 513b114a586..575bad28557 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 f0a6dd51889..1f29e328a48 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 8d9ba48d327..67ff51b4bd4 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -14,488 +14,477 @@ 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 4b305b4846f..277c53ee71d 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 c9452754589..81482c60362 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 47c289ec041..929112e76b8 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-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-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-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) - ); + 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) - ); + 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,73 +199,32 @@ governing permissions and limitations under the License. inline-size: 100%; gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap)); - background-color: var( - --mod-picker-button-background-color, - var(--spectrum-picker-button-background-color) - ); - border-color: var( - --mod-picker-button-border-color, - var(--spectrum-picker-button-border-color) - ); - border-width: var( - --mod-picker-button-border-width, - var(--spectrum-picker-button-border-width) - ); + background-color: var(--mod-picker-button-background-color, var(--spectrum-picker-button-background-color)); + border-color: var(--mod-picker-button-border-color, var(--spectrum-picker-button-border-color)); + border-width: var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width)); border-style: solid; padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)) - var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width))); - border-end-end-radius: var( - --mod-picker-button-border-radius, - var(--spectrum-picker-button-border-radius) - ); - border-end-start-radius: var( - --mod-picker-button-border-radius, - var(--spectrum-picker-button-border-radius) - ); - border-start-end-radius: var( - --mod-picker-button-border-radius, - var(--spectrum-picker-button-border-radius) - ); - border-start-start-radius: var( - --mod-picker-button-border-radius, - var(--spectrum-picker-button-border-radius) - ); + border-end-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); + border-end-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); + border-start-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); + border-start-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); - transition: border-color - var( - --mod-picker-button-background-animation-duration, - var(--spectrum-picker-button-background-animation-duration) - ) - ease-in-out; + 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)); } } diff --git a/components/pickerbutton/themes/express.css b/components/pickerbutton/themes/express.css index 76d7a370cfa..6e7ff17142f 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 5250be4186e..a7c9df57685 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 3e6ad5e71ca..2f397bd0d61 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 */ @@ -119,10 +119,10 @@ governing permissions and limitations under the License. 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 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 */ @@ -137,10 +137,10 @@ governing permissions and limitations under the License. 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 animates downward ⬇ */ + &.is-open { + transform: translateY(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))); + } } /* popover position is right of source */ @@ -153,10 +153,10 @@ governing permissions and limitations under the License. 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 animates towards right ⮕ */ + &.is-open { + transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))); + } } /* popover position is left of source */ @@ -169,54 +169,54 @@ governing permissions and limitations under the License. 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)))); - } + /* 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 */ @@ -260,19 +260,19 @@ governing permissions and limitations under the License. } } - /* 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)); - } - } + /* 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 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)); - } - } + /* 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)); + } + } /* popover position is bottom of source with tip pointing up △ */ &.spectrum-Popover--bottom, @@ -302,19 +302,19 @@ governing permissions and limitations under the License. } } - /* 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)); - } - } + /* 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; + } + } - /* 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)); - } - } + /* 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)); + } + } /* right, left, start, end popover position with tip default to pointing right ▷ */ &.spectrum-Popover--left, @@ -357,6 +357,14 @@ governing permissions and limitations under the License. } } + /* left popover with tip pointing right ▷ */ + &.spectrum-Popover--left, + &.spectrum-Popover--left-bottom, + &.spectrum-Popover--left-top { + .spectrum-Popover-tip { + inset-inline: 100% auto; + } + } /* popover with tip at top */ &.spectrum-Popover--right-top, @@ -379,12 +387,15 @@ governing permissions and limitations under the License. } } - /* 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%; + /* 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; + } + } &:dir(rtl) { transform: none; @@ -393,7 +404,6 @@ governing permissions and limitations under the License. transform: scaleX(-1); } } - } /* logical property - end popover position with tip pointing toward start - LTR default is ◁ **/ &.spectrum-Popover--end, @@ -406,10 +416,31 @@ governing permissions and limitations under the License. /* flip tip to point right ▷ */ transform: scaleX(-1); - &:dir(rtl) { - /* flip tip to point left ◁ */ - transform: scaleX(1); - } - } + &: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 d32007014d2..5c5e561a3e6 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 49785169d53..752fa669d13 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 252f0d7e576..b6fdacb6278 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -11,10 +11,10 @@ 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); + /* 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%; @@ -27,225 +27,233 @@ governing permissions and limitations under the License. /* --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-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 { @@ -271,10 +279,10 @@ governing permissions and limitations under the License. } @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 4bce74df7e1..fd384a8732a 100644 --- a/components/progresscircle/animation.css +++ b/components/progresscircle/animation.css @@ -11,491 +11,491 @@ 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 { diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css index 5184180a382..0f969ab3981 100644 --- a/components/progresscircle/index.css +++ b/components/progresscircle/index.css @@ -13,114 +13,99 @@ 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 */ @@ -140,25 +125,25 @@ governing permissions and limitations under the License. /* 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 */ @@ -177,9 +162,15 @@ governing permissions and limitations under the License. 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-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/index.css b/components/radio/index.css index 3256d3091f5..7c043c37ebe 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -20,385 +20,343 @@ governing permissions and limitations under the License. */ .spectrum-Radio { - /* state colors for all themes */ - --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); - --spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - /* focus ring all themes */ - --spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - - /* disabled all themes */ - --spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color); - --spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color); - - /* emphasized state colors selection indicator all themes */ - --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); - --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); - --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); - - /* selection indicator all themes */ - --spectrum-radio-border-width: var(--spectrum-border-width-200); - --spectrum-radio-button-background-color: var(--spectrum-gray-75); - - /* checked selection indicator */ - --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); - --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); - - /* spacing all themes */ - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - - /* text styles all themes */ - --spectrum-radio-font-size: var(--spectrum-font-size-100); - --spectrum-radio-line-height: var(--spectrum-line-height-100); - - /* animation all themes */ - --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100); - - /* CJK language support all themes */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100); - } - - /* default radio size for no t-shirt size */ - --spectrum-radio-height: var(--spectrum-component-height-100); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); - - /* default radio spacing for no t-shirt size */ - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + /* state colors for all themes */ + --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); + --spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + /* focus ring all themes */ + --spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + + /* disabled all themes */ + --spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color); + --spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color); + + /* emphasized state colors selection indicator all themes */ + --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); + --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); + --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); + + /* selection indicator all themes */ + --spectrum-radio-border-width: var(--spectrum-border-width-200); + --spectrum-radio-button-background-color: var(--spectrum-gray-75); + + /* checked selection indicator */ + --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); + --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); + --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); + + /* spacing all themes */ + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); + --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + + /* text styles all themes */ + --spectrum-radio-font-size: var(--spectrum-font-size-100); + --spectrum-radio-line-height: var(--spectrum-line-height-100); + + /* animation all themes */ + --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100); + + /* CJK language support all themes */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100); + } + + /* default radio size for no t-shirt size */ + --spectrum-radio-height: var(--spectrum-component-height-100); + --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); + + /* default radio spacing for no t-shirt size */ + --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); } .spectrum-Radio--sizeS { - --spectrum-radio-height: var(--spectrum-component-height-75); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small); + --spectrum-radio-height: var(--spectrum-component-height-75); + --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small); - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-75); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-75); + --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); - --spectrum-radio-font-size: var(--spectrum-font-size-75); + --spectrum-radio-font-size: var(--spectrum-font-size-75); } .spectrum-Radio--sizeM { - --spectrum-radio-height: var(--spectrum-component-height-100); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); + --spectrum-radio-height: var(--spectrum-component-height-100); + --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); + --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - --spectrum-radio-font-size: var(--spectrum-font-size-100); + --spectrum-radio-font-size: var(--spectrum-font-size-100); } .spectrum-Radio--sizeL { - --spectrum-radio-height: var(--spectrum-component-height-200); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large); + --spectrum-radio-height: var(--spectrum-component-height-200); + --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large); - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-200); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-200); + --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); - --spectrum-radio-font-size: var(--spectrum-font-size-200); + --spectrum-radio-font-size: var(--spectrum-font-size-200); } .spectrum-Radio--sizeXL { - --spectrum-radio-height: var(--spectrum-component-height-300); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-extra-large); + --spectrum-radio-height: var(--spectrum-component-height-300); + --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-extra-large); - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-300); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-300); + --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); - --spectrum-radio-font-size: var(--spectrum-font-size-300); + --spectrum-radio-font-size: var(--spectrum-font-size-300); } - - /* windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Radio { - /* high contrast text */ - --highcontrast-radio-neutral-content-color: CanvasText; - --highcontrast-radio-neutral-content-color-hover: CanvasText; - --highcontrast-radio-neutral-content-color-down: CanvasText; - --highcontrast-radio-neutral-content-color-focus: CanvasText; - - /* high contrast selector */ - --highcontrast-radio-button-border-color-default: ButtonText; - --highcontrast-radio-button-border-color-hover: Highlight; - --highcontrast-radio-button-border-color-down: ButtonText; - --highcontrast-radio-button-border-color-focus: Highlight; - - /* high contrast emphasized selector */ - --highcontrast-radio-emphasized-accent-color: ButtonText; - --highcontrast-radio-emphasized-accent-color-hover: Highlight; - --highcontrast-radio-emphasized-accent-color-down: ButtonText; - --highcontrast-radio-emphasized-accent-color-focus: Highlight; - - /* high contrast checked selector */ - --highcontrast-radio-button-checked-border-color-default: Highlight; - --highcontrast-radio-button-checked-border-color-hover: Highlight; - --highcontrast-radio-button-checked-border-color-down: Highlight; - --highcontrast-radio-button-checked-border-color-focus: Highlight; - - /* high contrast disabled text */ - --highcontrast-radio-disabled-content-color: GrayText; - - /* high contrast disabled selector */ - --highcontrast-radio-disabled-border-color: GrayText; - - /* high contrast focus ring */ - --highcontrast-radio-focus-indicator-color: CanvasText; - - /* ensure focus ring is visible if user agent has non-accessible system overrides */ - .spectrum-Radio-button { - &::after { - forced-color-adjust: none; - } - } - } + .spectrum-Radio { + /* high contrast text */ + --highcontrast-radio-neutral-content-color: CanvasText; + --highcontrast-radio-neutral-content-color-hover: CanvasText; + --highcontrast-radio-neutral-content-color-down: CanvasText; + --highcontrast-radio-neutral-content-color-focus: CanvasText; + + /* high contrast selector */ + --highcontrast-radio-button-border-color-default: ButtonText; + --highcontrast-radio-button-border-color-hover: Highlight; + --highcontrast-radio-button-border-color-down: ButtonText; + --highcontrast-radio-button-border-color-focus: Highlight; + + /* high contrast emphasized selector */ + --highcontrast-radio-emphasized-accent-color: ButtonText; + --highcontrast-radio-emphasized-accent-color-hover: Highlight; + --highcontrast-radio-emphasized-accent-color-down: ButtonText; + --highcontrast-radio-emphasized-accent-color-focus: Highlight; + + /* high contrast checked selector */ + --highcontrast-radio-button-checked-border-color-default: Highlight; + --highcontrast-radio-button-checked-border-color-hover: Highlight; + --highcontrast-radio-button-checked-border-color-down: Highlight; + --highcontrast-radio-button-checked-border-color-focus: Highlight; + + /* high contrast disabled text */ + --highcontrast-radio-disabled-content-color: GrayText; + + /* high contrast disabled selector */ + --highcontrast-radio-disabled-border-color: GrayText; + + /* high contrast focus ring */ + --highcontrast-radio-focus-indicator-color: CanvasText; + + /* ensure focus ring is visible if user agent has non-accessible system overrides */ + .spectrum-Radio-button { + &::after { + forced-color-adjust: none; + } + } + } } .spectrum-Radio { - display: inline-flex; - align-items: flex-start; - position: relative; - vertical-align: top; - - min-block-size: var(--mod-radio-height, var(--spectrum-radio-height)); - max-inline-size: 100%; - - &:hover { - /* selection indicator hover */ - .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-border-color-hover, - var(--mod-radio-button-border-color-hover, - var(--spectrum-radio-button-border-color-hover))); - } - - /* checked selection indicator hover */ - .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-checked-border-color-hover, - var(--mod-radio-button-checked-border-color-hover, - var(--spectrum-radio-button-checked-border-color-hover))); - } - - .spectrum-Radio-label { - color: var(--highcontrast-radio-neutral-content-color-hover, - var(--mod-radio-neutral-content-color-hover, - var(--spectrum-radio-neutral-content-color-hover))); - } - } - - &:active { - /* selection indicator active */ - .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-border-color-down, - var(--mod-radio-button-border-color-down, - var(--spectrum-radio-button-border-color-down))); - } - - /* checked selection indicator active */ - .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-checked-border-color-down, - var(--mod-radio-button-checked-border-color-down, - var(--spectrum-radio-button-checked-border-color-down))); - } - - .spectrum-Radio-label { - color: var(--highcontrast-radio-neutral-content-color-down, - var(--mod-radio-neutral-content-color-down, - var(--spectrum-radio-neutral-content-color-down))); - } - } - - &:focus { - /* selection indicator is focused state */ - .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-border-color-focus, - var(--mod-radio-button-border-color-focus, - var(--spectrum-radio-button-border-color-focus))); - } - - /* focus ring is focused state */ - .spectrum-Radio-button::after { - border-style: solid; - border-color: var(--highcontrast-radio-focus-indicator-color, - var(--mod-radio-focus-indicator-color, - var(--spectrum-radio-focus-indicator-color))); - border-width: var(--mod-radio-focus-indicator-thickness, - var(--spectrum-radio-focus-indicator-thickness)); - - inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); - block-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); - } - - /* selected selection indicator is focused state */ - .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-checked-border-color-focus, - var(--mod-radio-button-checked-border-color-focus, - var(--spectrum-radio-button-checked-border-color-focus))); - } - - .spectrum-Radio-label { - color: var(--highcontrast-radio-neutral-content-color-focus, - var(--mod-radio-neutral-content-color-focus, - var(--spectrum-radio-neutral-content-color-focus))); - } - } - - &.is-readOnly { - .spectrum-Radio-input:read-only { - cursor: initial; - } - - /* hide selection indicator */ - & .spectrum-Radio-button { - position: fixed; - inset-inline-end: 100%; - inset-block-end: 100%; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - } - - .spectrum-Radio-label, + display: inline-flex; + align-items: flex-start; + position: relative; + vertical-align: top; + + min-block-size: var(--mod-radio-height, var(--spectrum-radio-height)); + max-inline-size: 100%; + + &:hover { + /* selection indicator hover */ + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-button-border-color-hover, var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover))); + } + + /* checked selection indicator hover */ + .spectrum-Radio-input:checked + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover))); + } + + .spectrum-Radio-label { + color: var(--highcontrast-radio-neutral-content-color-hover, var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover))); + } + } + + &:active { + /* selection indicator active */ + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-button-border-color-down, var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down))); + } + + /* checked selection indicator active */ + .spectrum-Radio-input:checked + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down))); + } + + .spectrum-Radio-label { + color: var(--highcontrast-radio-neutral-content-color-down, var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down))); + } + } + + &:focus { + /* selection indicator is focused state */ + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-button-border-color-focus, var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus))); + } + + /* focus ring is focused state */ + .spectrum-Radio-button::after { + border-style: solid; + border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))); + border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness)); + + inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); + block-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); + } + + /* selected selection indicator is focused state */ + .spectrum-Radio-input:checked + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus))); + } + + .spectrum-Radio-label { + color: var(--highcontrast-radio-neutral-content-color-focus, var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus))); + } + } + + &.is-readOnly { + .spectrum-Radio-input:read-only { + cursor: initial; + } + + /* hide selection indicator */ + & .spectrum-Radio-button { + position: fixed; + inset-inline-end: 100%; + inset-block-end: 100%; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + } + + .spectrum-Radio-label, /* ensure disabled readonly has normal text color */ & .spectrum-Radio-input:disabled ~ .spectrum-Radio-label, & .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label { - margin-inline-start: auto; - color: inherit; - } - } + margin-inline-start: auto; + color: inherit; + } + } } .spectrum-Radio--emphasized { - /* selection indicator emphasized */ - .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color, - var(--mod-radio-emphasized-accent-color, - var(--spectrum-radio-emphasized-accent-color))); - } - - /* selection indicator emphasized hover */ - &:hover .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color-hover, - var(--mod-radio-emphasized-accent-color-hover, - var(--spectrum-radio-emphasized-accent-color-hover))); - } - - /* selection indicator emphasized active */ - &:active .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color-down, - var(--mod-radio-emphasized-accent-color-down, - var(--spectrum-radio-emphasized-accent-color-down))); - } - - /* selection indicator emphasized focus */ - &:focus .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color-focus, - var(--mod-radio-emphasized-accent-color-focus, - var(--spectrum-radio-emphasized-accent-color-focus))); - } + /* selection indicator emphasized */ + .spectrum-Radio-input:checked + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-emphasized-accent-color, var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color))); + } + + /* selection indicator emphasized hover */ + &:hover .spectrum-Radio-input:checked + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-emphasized-accent-color-hover, var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover))); + } + + /* selection indicator emphasized active */ + &:active .spectrum-Radio-input:checked + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-emphasized-accent-color-down, var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down))); + } + + /* selection indicator emphasized focus */ + &:focus .spectrum-Radio-input:checked + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-emphasized-accent-color-focus, var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus))); + } } /* selection indicator disabled */ .spectrum-Radio .spectrum-Radio-input, .spectrum-Radio .spectrum-Radio-input:checked { - &:disabled + .spectrum-Radio-button { - &::before { - border-color: var(--highcontrast-radio-disabled-border-color, - var(--mod-radio-disabled-border-color, - var(--spectrum-radio-disabled-border-color))); - } - } - - /* label disabled */ - &:disabled ~ .spectrum-Radio-label { - color: var(--highcontrast-radio-disabled-content-color, - var(--mod-radio-disabled-content-color, - var(--spectrum-radio-disabled-content-color))); - } + &:disabled + .spectrum-Radio-button { + &::before { + border-color: var(--highcontrast-radio-disabled-border-color, var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color))); + } + } + + /* label disabled */ + &:disabled ~ .spectrum-Radio-label { + color: var(--highcontrast-radio-disabled-content-color, var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color))); + } } .spectrum-Radio-input { - /* Change the font styles in all browsers for input. */ - font-family: inherit; - font-size: 100%; - line-height: var(--mod-radio-line-height, - var(--spectrum-radio-line-height)); - - /* 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="radio"] in IE 10-. */ - box-sizing: border-box; - - /* Remove the padding for [type="radio"] in IE 10-. */ - padding: 0; - - position: absolute; - inline-size: 100%; - block-size: 100%; - - opacity: 0; - z-index: 1; - - cursor: pointer; - - &:disabled { - cursor: default; - } - - /* selection indicator checked */ - &:checked + .spectrum-Radio-button { - &::before { - /* half of element width minus half of indicator width is checked border width */ - border-width: calc((var(--spectrum-radio-button-control-size) / 2) - (var(--spectrum-radio-button-selection-indicator) / 2)); - border-color: var(--highcontrast-radio-button-checked-border-color-default, - var(--mod-radio-button-checked-border-color-default, - var(--spectrum-radio-button-checked-border-color-default))); - } - } - - /* focused state */ - &:focus-visible { - + .spectrum-Radio-button::after { - border-width: var(--mod-radio-focus-indicator-thickness, - var(--spectrum-radio-focus-indicator-thickness)); - border-color: var(--highcontrast-radio-focus-indicator-color, - var(--mod-radio-focus-indicator-color, - var(--spectrum-radio-focus-indicator-color))); - border-style: solid; - - inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); - block-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); - } - } + /* Change the font styles in all browsers for input. */ + font-family: inherit; + font-size: 100%; + line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height)); + + /* 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="radio"] in IE 10-. */ + box-sizing: border-box; + + /* Remove the padding for [type="radio"] in IE 10-. */ + padding: 0; + + position: absolute; + inline-size: 100%; + block-size: 100%; + + opacity: 0; + z-index: 1; + + cursor: pointer; + + &:disabled { + cursor: default; + } + + /* selection indicator checked */ + &:checked + .spectrum-Radio-button { + &::before { + /* half of element width minus half of indicator width is checked border width */ + border-width: calc((var(--spectrum-radio-button-control-size) / 2) - (var(--spectrum-radio-button-selection-indicator) / 2)); + border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default))); + } + } + + /* focused state */ + &:focus-visible { + + .spectrum-Radio-button::after { + border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness)); + border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))); + border-style: solid; + + inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); + block-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); + } + } } .spectrum-Radio-label { - text-align: start; - margin-inline-start: var(--mod-radio-text-to-control, - var(--spectrum-radio-text-to-control)); - margin-block-start: var(--spectrum-radio-label-top-to-text); - margin-block-end: var(--spectrum-radio-label-bottom-to-text); + text-align: start; + margin-inline-start: var(--mod-radio-text-to-control, var(--spectrum-radio-text-to-control)); + margin-block-start: var(--spectrum-radio-label-top-to-text); + margin-block-end: var(--spectrum-radio-label-bottom-to-text); font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size)); @@ -406,85 +364,69 @@ governing permissions and limitations under the License. /* TODO: font weight and style tokens */ /* font-weight: var(--spectrum-radio-text-font-weight); **** missing token resolves to 400 ****/ /* font-style: var(--spectrum-radio-text-font-style); **** missing token resolves to normal ****/ - color: var(--highcontrast-radio-neutral-content-color, - var(--mod-radio-neutral-content-color, - var(--spectrum-radio-neutral-content-color))); - line-height: var(--mod-radio-line-height, - var(--spectrum-radio-line-height)); - - transition: color var(--mod-radio-animation-duration, - var(--spectrum-radio-animation-duration)) ease-in-out; - - /* CJK language support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - line-height: var(--mod-radio-line-height-cjk, var(--spectrum-radio-line-height-cjk)); - } + + /* TODO: font weight and style tokens */ + /* font-weight: var(--spectrum-radio-text-font-weight); **** missing token resolves to 400 ****/ + /* font-style: var(--spectrum-radio-text-font-style); **** missing token resolves to normal ****/ + color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))); + line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height)); + + transition: color var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out; + + /* CJK language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-radio-line-height-cjk, var(--spectrum-radio-line-height-cjk)); + } } .spectrum-Radio-button { - position: relative; - box-sizing: border-box; - inline-size: var(--mod-radio-button-control-size, - var(--spectrum-radio-button-control-size)); - block-size: var(--mod-radio-button-control-size, - var(--spectrum-radio-button-control-size)); - margin-block-start: var(--mod-radio-button-top-to-control, - var(--spectrum-radio-button-top-to-control)); - - flex-grow: 0; - flex-shrink: 0; - - /* selection indicator unchecked */ - &::before { - display: block; - z-index: 0; - content: ""; - box-sizing: border-box; - position: absolute; - - inline-size: var(--mod-radio-button-control-size, - var(--spectrum-radio-button-control-size)); - block-size: var(--mod-radio-button-control-size, - var(--spectrum-radio-button-control-size)); - - background-color: var(--highcontrast-radio-button-background-color, - var(--mod-radio-button-background-color, - var(--spectrum-radio-button-background-color))); - - border-radius: 50%; - border-width: var(--mod-radio-border-width, - var(--spectrum-radio-border-width)); - border-color: var(--highcontrast-radio-button-border-color-default, - var(--mod-radio-button-border-color-default, - var(--spectrum-radio-button-border-color-default))); - border-style: solid; - - transition: border var(--mod-radio-animation-duration, - var(--spectrum-radio-animation-duration)) ease-in-out, - box-shadow var(--mod-radio-animation-duration, - var(--spectrum-radio-animation-duration)) ease-in-out; - } - - /* focus ring is not focused state */ - &::after { - border-radius: 50%; - - content: ""; - display: block; - position: absolute; - inset-inline-start: 50%; - inset-block-start: 50%; - transform: translateX(-50%) translateY(-50%); - - transition: opacity var(--mod-radio-animation-duration, - var(--spectrum-radio-animation-duration)) ease-out, - margin var(--mod-radio-animation-duration, - var(--spectrum-radio-animation-duration)) ease-out; - - &:dir(rtl) { - transform: translateX(50%) translateY(-50%); - } - } + position: relative; + box-sizing: border-box; + inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size)); + block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size)); + margin-block-start: var(--mod-radio-button-top-to-control, var(--spectrum-radio-button-top-to-control)); + + flex-grow: 0; + flex-shrink: 0; + + /* selection indicator unchecked */ + &::before { + display: block; + z-index: 0; + content: ""; + box-sizing: border-box; + position: absolute; + + inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size)); + block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size)); + + background-color: var(--highcontrast-radio-button-background-color, var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color))); + + border-radius: 50%; + border-width: var(--mod-radio-border-width, var(--spectrum-radio-border-width)); + border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default))); + border-style: solid; + + transition: border var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out, box-shadow var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out; + } + + /* focus ring is not focused state */ + &::after { + border-radius: 50%; + + content: ""; + display: block; + position: absolute; + inset-inline-start: 50%; + inset-block-start: 50%; + transform: translateX(-50%) translateY(-50%); + + transition: opacity var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out, margin var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out; + + &:dir(rtl) { + transform: translateX(50%) translateY(-50%); + } + } } diff --git a/components/radio/themes/express.css b/components/radio/themes/express.css index 513b6a4f3d8..d000403cd72 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 4c9e4779bde..1766fe7f09d 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 ce541c773fa..cdeef181cb9 100644 --- a/components/rating/index.css +++ b/components/rating/index.css @@ -37,66 +37,86 @@ governing permissions and limitations under the License. --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); + /* 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 { @@ -111,22 +131,22 @@ governing permissions and limitations under the License. } .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))); + 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; @@ -146,16 +166,15 @@ governing permissions and limitations under the License. } } - &.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); + &.is-selected { + .spectrum-Rating-starActive { + display: block; + } - /* 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; - } + .spectrum-Rating-starInactive { + display: none; + } + } /* All stars following the hovered star */ &:hover ~ .spectrum-Rating-icon { @@ -171,92 +190,92 @@ governing permissions and limitations under the License. .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 bb636626d0c..7032a63fc2b 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 e393a121e46..a9d617948fd 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 dbe83a533f1..1450b590997 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 84cff57a925..c0408a65196 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 fa7ba731f31..18b60565efb 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 ca558437ef8..454dac1a678 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -11,60 +11,60 @@ 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); + /* 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); @@ -105,137 +105,133 @@ governing permissions and limitations under the License. } .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-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 { @@ -273,23 +269,27 @@ governing permissions and limitations under the License. forced-color-adjust: none; --highcontrast-sidenav-content-disabled-color: GrayText; - --highcontrast-sidenav-focus-ring-color: Highlight; + .spectrum-SideNav-item { + forced-color-adjust: none; + --highcontrast-sidenav-content-disabled-color: GrayText; - --highcontrast-sidenav-content-color-default-selected: SelectedItemText; - --highcontrast-sidenav-item-background-default-selected: SelectedItem; + --highcontrast-sidenav-focus-ring-color: Highlight; - --highcontrast-sidenav-background-key-focus-selected: Highlight; - --highcontrast-sidenav-background-hover-selected: Highlight; - --highcontrast-sidenav-item-background-down-selected: Highlight; + --highcontrast-sidenav-content-color-default-selected: SelectedItemText; + --highcontrast-sidenav-item-background-default-selected: SelectedItem; - --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-background-key-focus-selected: Highlight; + --highcontrast-sidenav-background-hover-selected: Highlight; + --highcontrast-sidenav-item-background-down-selected: Highlight; - --highcontrast-sidenav-top-level-font-color: ButtonText; - --highcontrast-sidenav-content-color-default: ButtonText; - --highcontrast-sidenav-content-color-down: HighlightText; - } -} + --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; + } +} +} \ No newline at end of file diff --git a/components/site/component.css b/components/site/component.css index c7c43ef564d..a83be7e85d2 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 132eba2db83..30d0dada9ed 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/index.css b/components/slider/index.css index 81fe996c63a..1b1b761ebd8 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -13,18 +13,18 @@ governing permissions and limitations under the License. @import "./themes/express.css"; .spectrum-Slider { - /* default sizing, matches t-shirt size M */ - --spectrum-slider-font-size: var(--spectrum-font-size-75); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --spectrum-slider-control-height: var(--spectrum-component-height-100); - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - - /* TODO: placeholder value for sideLabel variant value width */ - --spectrum-slider-value-inline-size: 18px; + /* default sizing, matches t-shirt size M */ + --spectrum-slider-font-size: var(--spectrum-font-size-75); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --spectrum-slider-control-height: var(--spectrum-component-height-100); + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); + --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); + --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + + /* TODO: placeholder value for sideLabel variant value width */ + --spectrum-slider-value-inline-size: 18px; &:dir(rtl), &:dir(rtl) { @@ -32,346 +32,340 @@ governing permissions and limitations under the License. } } - .spectrum-Slider--sizeS { - --spectrum-slider-font-size: var(--spectrum-font-size-75); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small); - --spectrum-slider-control-height: var(--spectrum-component-height-75); - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100); + --spectrum-slider-font-size: var(--spectrum-font-size-75); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small); + --spectrum-slider-control-height: var(--spectrum-component-height-75); + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small); + --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); + --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100); } .spectrum-Slider--sizeL { - --spectrum-slider-font-size: var(--spectrum-font-size-100); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large); - --spectrum-slider-control-height: var(--spectrum-component-height-200); - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --spectrum-slider-font-size: var(--spectrum-font-size-100); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large); + --spectrum-slider-control-height: var(--spectrum-component-height-200); + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large); + --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); + --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - /* TODO: placeholder value for sideLabel variant value width */ - --spectrum-slider-value-inline-size: 18px; + /* TODO: placeholder value for sideLabel variant value width */ + --spectrum-slider-value-inline-size: 18px; } .spectrum-Slider--sizeXL { - --spectrum-slider-font-size: var(--spectrum-font-size-200); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large); - --spectrum-slider-control-height: var(--spectrum-component-height-300); - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --spectrum-slider-font-size: var(--spectrum-font-size-200); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large); + --spectrum-slider-control-height: var(--spectrum-component-height-300); + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); + --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); + --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - /* TODO: placeholder value for sideLabel variant value width */ - --spectrum-slider-value-inline-size: 22px; + /* TODO: placeholder value for sideLabel variant value width */ + --spectrum-slider-value-inline-size: 22px; } .spectrum-Slider { - --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - - --spectrum-slider-min-size: var(--spectrum-spacing-900); - - --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75); - --spectrum-slider-label-margin-start: var(--spectrum-spacing-300); - --spectrum-slider-handle-border-width: var(--spectrum-border-width-200); - --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2); - --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2); - --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1); - --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2)); - --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4); - --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); - --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200); - --spectrum-slider-tick-mark-border-radius: 2px; - --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100); - - /* colors */ - --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default); - --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100); - - /* values */ - --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); - --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - - --spectrum-slider-range-track-reset: 0; + --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); + + --spectrum-slider-min-size: var(--spectrum-spacing-900); + + --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75); + --spectrum-slider-label-margin-start: var(--spectrum-spacing-300); + --spectrum-slider-handle-border-width: var(--spectrum-border-width-200); + --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2); + --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2); + --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1); + --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2)); + --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4); + --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); + --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200); + --spectrum-slider-tick-mark-border-radius: 2px; + --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100); + + /* colors */ + --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default); + --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100); + + /* values */ + --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); + --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + + --spectrum-slider-range-track-reset: 0; } .spectrum-Slider { - position: relative; + position: relative; - /* Don't let z-index'd child elements float above other things on the page */ - z-index: 1; - display: block; - min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size)); + /* Don't let z-index'd child elements float above other things on the page */ + z-index: 1; + display: block; + min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size)); - user-select: none; + user-select: none; } .spectrum-Slider--sideLabel { - display: flex; - align-items: center; + display: flex; + align-items: center; - .spectrum-Slider-labelContainer { - margin-block-start: 0; - } + .spectrum-Slider-labelContainer { + margin-block-start: 0; + } - .spectrum-Slider-labelContainer + .spectrum-Slider-controls { - margin-block-start: 0; - } + .spectrum-Slider-labelContainer + .spectrum-Slider-controls { + margin-block-start: 0; + } - .spectrum-Slider-controls { - margin-inline-end: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)); - } + .spectrum-Slider-controls { + margin-inline-end: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)); + } - .spectrum-Slider-value { - margin-inline-start: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline)); - inline-size: var(--mod-slider-value-inline-size, var(--spectrum-slider-value-inline-size)); - text-align: start; - } + .spectrum-Slider-value { + margin-inline-start: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline)); + inline-size: var(--mod-slider-value-inline-size, var(--spectrum-slider-value-inline-size)); + text-align: start; + } } .spectrum-Slider-controls { - display: inline-block; - box-sizing: border-box; - cursor: pointer; - position: relative; - z-index: auto; + display: inline-block; + box-sizing: border-box; + cursor: pointer; + position: relative; + z-index: auto; - /* These calculations prevent the track from spilling outside of the control */ - inline-size: calc(100% - calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin))) * 2); - margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)); + /* These calculations prevent the track from spilling outside of the control */ + inline-size: calc(100% - calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin))) * 2); + margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)); - block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); - vertical-align: top; + block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); + vertical-align: top; } .spectrum-Slider-labelContainer + .spectrum-Slider-controls { - margin-block-start: calc(-1 * var(--spectrum-slider-control-to-field-label)); + margin-block-start: calc(-1 * var(--spectrum-slider-control-to-field-label)); } /* TODO: Sliders with ticks + tick mark labels require more margin-block-end. As of February 2023 we do not have tokens yet tokens for Ramp and Tick variants, using control-height here instead. */ .spectrum-Slider--tick { - margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); + margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); } .spectrum-Slider-track, .spectrum-Slider-fill { - block-size: var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)); - box-sizing: border-box; - - position: absolute; - z-index: 1; - inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)) / 2); - inset-inline-start: 0; - inset-inline-end: auto; - pointer-events: none; - - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap)); - margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); - - &::before { - content: ""; - display: block; - block-size: 100%; - - /* reset all border radii */ - border-start-start-radius: 0; - border-end-start-radius: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; - } + block-size: var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)); + box-sizing: border-box; + + position: absolute; + z-index: 1; + inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)) / 2); + inset-inline-start: 0; + inset-inline-end: auto; + pointer-events: none; + + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap)); + margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + + &::before { + content: ""; + display: block; + block-size: 100%; + + /* reset all border radii */ + border-start-start-radius: 0; + border-end-start-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; + } } .spectrum-Slider-track { - &:first-of-type { - &::before { - border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); - border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); - } - } + &:first-of-type { + &::before { + border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + } + } - &:last-of-type { - &::before { - border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); - border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); - } - } + &:last-of-type { + &::before { + border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + } + } } .spectrum-Slider-track ~ .spectrum-Slider-track { - inset-inline-start: auto; - inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); - padding-block: 0; - padding-inline-start: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)); - padding-inline-end: 0; - margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); - margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + inset-inline-start: auto; + inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); + padding-block: 0; + padding-inline-start: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)); + padding-inline-end: 0; + margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); + margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); } - /* over-write for Range, without the LTR RTL post-css hack */ .spectrum-Slider--range { - .spectrum-Slider-track ~ .spectrum-Slider-track { - padding-inline: var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)) var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)); - inset-inline: auto; - margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); - } + .spectrum-Slider-track ~ .spectrum-Slider-track { + padding-inline: var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)) var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)); + inset-inline: auto; + margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); + } } .spectrum-Slider-fill { - margin-inline-start: 0; - padding-block: 0; - padding-inline-start: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap))); - padding-inline-end: 0; + margin-inline-start: 0; + padding-block: 0; + padding-inline-start: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap))); + padding-inline-end: 0; } .spectrum-Slider-fill--right { - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap))); + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap))); } .spectrum-Slider--range { - .spectrum-Slider-value { - user-select: text; - } - - .spectrum-Slider-track { - &:first-of-type { - padding-inline-start: 0; - padding-inline-end: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)); - inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); - inset-inline-end: auto; - margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); - } - - &:first-of-type::before { - border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); - border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); - } - - &:last-of-type { - padding-inline-start: var(--spectrum-slider-track-handleoffset); - padding-inline-end: 0; - inset-inline-start: auto; - inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); - margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); - } - - &:last-of-type::before { - border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); - border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); - } - } + .spectrum-Slider-value { + user-select: text; + } + + .spectrum-Slider-track { + &:first-of-type { + padding-inline-start: 0; + padding-inline-end: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)); + inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); + inset-inline-end: auto; + margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + } + + &:first-of-type::before { + border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + } + + &:last-of-type { + padding-inline-start: var(--spectrum-slider-track-handleoffset); + padding-inline-end: 0; + inset-inline-start: auto; + inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); + margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + } + + &:last-of-type::before { + border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + } + } } .spectrum-Slider-ramp { - margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2); - block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)); + margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2); + block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)); - position: absolute; - inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); - inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + position: absolute; + inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); - svg { - inline-size: 100%; - block-size: 100%; + svg { + inline-size: 100%; + block-size: 100%; - /* Flip the ramp automatically for RTL */ - transform: var(--spectrum-logical-rotation); - } + /* Flip the ramp automatically for RTL */ + transform: var(--spectrum-logical-rotation); + } } .spectrum-Slider-handle { - position: absolute; - inset-inline-start: 0; - z-index: 2; - display: inline-block; - box-sizing: border-box; - - inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); - block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); - - inset-block-start: calc( - var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2 - ); - margin-block: 0; - margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0; - border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width)); - border-style: solid; - - border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-border-radius)); - - transition: border-width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; - - outline: none; - - &:active, - &.is-dragged { - border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down)); - } - - &:active, - &.is-focused, - &.is-dragged, - &.is-tophandle { - z-index: 3; - } - - /* Focus indicator. */ - &::before { - content: ""; - display: block; - position: absolute; - inset-inline-start: 50%; - inset-block-start: 50%; - - transition: box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, - inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, - block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out; - - inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); - block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); - border-radius: 100%; - - transform: translate(-50%, -50%); - - &:dir(rtl) { - transform: translate(50%, -50%); - } - } - - /* Keyboard focused */ - &.is-focused { - &::before { - inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2); - block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2); - } - } + position: absolute; + inset-inline-start: 0; + z-index: 2; + display: inline-block; + box-sizing: border-box; + + inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + + inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2); + margin-block: 0; + margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0; + border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width)); + border-style: solid; + + border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-border-radius)); + + transition: border-width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + + outline: none; + + &:active, + &.is-dragged { + border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down)); + } + + &:active, + &.is-focused, + &.is-dragged, + &.is-tophandle { + z-index: 3; + } + + /* Focus indicator. */ + &::before { + content: ""; + display: block; + position: absolute; + inset-inline-start: 50%; + inset-block-start: 50%; + + transition: box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out; + + inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + border-radius: 100%; + + transform: translate(-50%, -50%); + + &:dir(rtl) { + transform: translate(50%, -50%); + } + } + + /* Keyboard focused */ + &.is-focused { + &::before { + inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2); + block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2); + } + } } .spectrum-Slider-input { - /* Remove the margin for input in Firefox and Safari. */ - margin: 0; + /* Remove the margin for input in Firefox and Safari. */ + margin: 0; - inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); - block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); - padding: 0; - position: absolute; + inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + padding: 0; + position: absolute; inset-block-start: var(--mod-slider-input-top-size, var(--spectrum-slider-input-top-size)); inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left)); @@ -382,406 +376,390 @@ governing permissions and limitations under the License. border: 0; pointer-events: none; - &:focus { - outline: none; - } + &:focus { + outline: none; + } } .spectrum-Slider-labelContainer { - display: flex; - align-items: center; - position: relative; - inline-size: auto; + display: flex; + align-items: center; + position: relative; + inline-size: auto; - font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); - line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); + font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); + line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); - margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text)); + margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text)); - /* international support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - line-height: var(--mod-slider-cjk-line-height, var(--spectrum-slider-cjk-line-height)); - } + /* international support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-slider-cjk-line-height, var(--spectrum-slider-cjk-line-height)); + } } .spectrum-Slider-label { - padding-inline-start: 0; - flex-grow: 1; - font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); + padding-inline-start: 0; + flex-grow: 1; + font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); } .spectrum-Slider-value { - flex-grow: 0; - padding-inline-end: 0; - cursor: default; - font-feature-settings: "tnum"; - text-align: end; + flex-grow: 0; + padding-inline-end: 0; + cursor: default; + font-feature-settings: "tnum"; + text-align: end; } .spectrum-Slider-value { - margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start)); + margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start)); } - /* setting tick marks in relation to label */ .spectrum-Slider--tick { - .spectrum-Slider-handle { - background-color: var(--highcontrast-slider-tick-handle-background-color, var(--mod-slider-tick-handle-background-color, var(--spectrum-slider-tick-handle-background-color))); - } - - .spectrum-Slider-controls { - margin-block-start: - calc( - var(--spectrum-text-to-visual-75) - - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 - - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2 - ); - } - - .spectrum-Slider-tickLabel { - margin-block-start: - calc( - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) + var(--spectrum-text-to-visual-75) - ); - } + .spectrum-Slider-handle { + background-color: var(--highcontrast-slider-tick-handle-background-color, var(--mod-slider-tick-handle-background-color, var(--spectrum-slider-tick-handle-background-color))); + } + + .spectrum-Slider-controls { + margin-block-start: calc(var(--spectrum-text-to-visual-75) - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2); + } + + .spectrum-Slider-tickLabel { + margin-block-start: calc(var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) + var(--spectrum-text-to-visual-75)); + } } /* TODO: missing core-tokens for tick variant */ .spectrum-Slider-ticks { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; - z-index: 0; + z-index: 0; - margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); - /* TODO: missing core-token for handle fill-color */ - &~.spectrum-Slider-handleContainer { - .spectrum-Slider-handle { - background: var(--mod-slider-ticks-handle-background-color, var(--spectrum-slider-ticks-handle-background-color)); - } - } + /* TODO: missing core-token for handle fill-color */ + & ~ .spectrum-Slider-handleContainer { + .spectrum-Slider-handle { + background: var(--mod-slider-ticks-handle-background-color, var(--spectrum-slider-ticks-handle-background-color)); + } + } } .spectrum-Slider-tick { - position: relative; + position: relative; - inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)); + inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)); - /* tick marks are centered half based on slider control height and tick height */ - inset-block-start: calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / 2 - - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 - ); + /* tick marks are centered half based on slider control height and tick height */ + inset-block-start: calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2); + &::after { + display: block; + position: absolute; + inset-block-start: 0; + inset-inline-start: calc(50% - calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2)); + content: ""; + inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)); + block-size: var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)); - &::after { - display: block; - position: absolute; - inset-block-start: 0; - inset-inline-start: calc(50% - calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2)); - content: ""; - inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)); - block-size: var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)); - - border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius)); - } - - .spectrum-Slider-tickLabel { - display: flex; - align-items: center; - justify-content: center; + border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius)); + } + .spectrum-Slider-tickLabel { + display: flex; + align-items: center; + justify-content: center; - font-size: var(--mod-font-size-75, var(--spectrum-font-size-75)); - line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); - } + font-size: var(--mod-font-size-75, var(--spectrum-font-size-75)); + line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); + } - &:first-of-type, - &:last-of-type { - .spectrum-Slider-tickLabel { - display: block; - position: absolute; - margin-inline: 0; - } - } + &:first-of-type, + &:last-of-type { + .spectrum-Slider-tickLabel { + display: block; + position: absolute; + margin-inline: 0; + } + } - &:first-of-type { - /* fix off-by-one alignment */ - inset-inline-start: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2); + &:first-of-type { + /* fix off-by-one alignment */ + inset-inline-start: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2); - .spectrum-Slider-tickLabel { - inset-inline-start: 0; - } - } + .spectrum-Slider-tickLabel { + inset-inline-start: 0; + } + } - &:last-of-type { - /* fix off-by-one alignment */ - inset-inline-end: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2); + &:last-of-type { + /* fix off-by-one alignment */ + inset-inline-end: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2); - .spectrum-Slider-tickLabel { - inset-inline-end: 0; - } - } + .spectrum-Slider-tickLabel { + inset-inline-end: 0; + } + } } /* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */ .spectrum-Slider-handleContainer, .spectrum-Slider-trackContainer { - inline-size: calc(100% + var(--spectrum-slider-handle-size)); + inline-size: calc(100% + var(--spectrum-slider-handle-size)); - position: absolute; - inset-block-start: 0; + position: absolute; + inset-block-start: 0; - margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1); + margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1); } .spectrum-Slider-trackContainer { - block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); + block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); - /* stop edges from peeking out */ - overflow: hidden; + /* stop edges from peeking out */ + overflow: hidden; } /* Applies to the filled-offset variant to keep track the same color for highcontrast mode */ .spectrum-Slider-track { - &::before { - background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); - } + &::before { + background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); + } } /* All variants other than filled-offset get a new track color for highcontrast mode */ .spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)) { - &::before { - background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); - } + &::before { + background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); + } } .spectrum-Slider-labelContainer { - color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color))); + color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color))); } - .spectrum-Slider--filled { - .spectrum-Slider-track:first-child { - &::before { - background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); - } - } + .spectrum-Slider-track:first-child { + &::before { + background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + } + } } .spectrum-Slider-fill { - &::before { - background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); - } + &::before { + background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + } } .spectrum-Slider-ramp { - path { - fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color))); - } + path { + fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color))); + } } .spectrum-Slider-handle { - border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color))); - background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))); + border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color))); + background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))); - &:hover { - border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover))); - } + &:hover { + border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover))); + } - /* Keyboard focused with focus indicator. */ - &.is-focused { - border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))); + /* Keyboard focused with focus indicator. */ + &.is-focused { + border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))); - &::before { - box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus))); - } - } + &::before { + box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus))); + } + } - &:active, - &.is-dragged { - border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); - } + &:active, + &.is-dragged { + border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); + } } - .spectrum-Slider--ramp { - .spectrum-Slider-handle { - box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active))); - background: var(--mod-slider-ramp-handle-background-color, var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color))); - } + .spectrum-Slider-handle { + box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active))); + background: var(--mod-slider-ramp-handle-background-color, var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color))); + } } .spectrum-Slider-input { - background: transparent; + background: transparent; } .spectrum-Slider-tick { - &::after { - background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))); - } + &::after { + background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))); + } } .spectrum-Slider-handle { - &.is-dragged { - border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); - background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))); - } + &.is-dragged { + border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); + background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))); + } } - .spectrum-Slider--range { - .spectrum-Slider-track { - &:not(:first-of-type, :last-of-type)::before { - background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); - } - } + .spectrum-Slider-track { + &:not(:first-of-type, :last-of-type)::before { + background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + } + } } .spectrum-Slider.is-disabled { - cursor: default; + cursor: default; + + .spectrum-Slider-controls { + cursor: default; + } + + .spectrum-Slider-tickLabel { + color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))); + } + + .spectrum-Slider-labelContainer { + color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))); + } + + .spectrum-Slider-handle { + border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled))); + background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color))); + cursor: default; + pointer-events: none; + + &:hover, + &:active { + border-color: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color))); + background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))); + } + } + + .spectrum-Slider-track { + &::before { + background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))); + } + } + + &.spectrum-Slider--filled { + .spectrum-Slider-track:first-child::before { + background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))); + } + } - .spectrum-Slider-controls { - cursor: default; - } - - .spectrum-Slider-tickLabel { - color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))); - } - - .spectrum-Slider-labelContainer { - color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))); - } - - .spectrum-Slider-handle { - border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled))); - background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color))); - cursor: default; - pointer-events: none; - - &:hover, - &:active { - border-color: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color))); - background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))); - } - } - - .spectrum-Slider-track { - &::before { - background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))); - } - } - - &.spectrum-Slider--filled { - .spectrum-Slider-track:first-child::before { - background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))); - } - } - - .spectrum-Slider-fill { - &::before { - background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))); - } - } - - .spectrum-Slider-ramp { - path { - fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled))); - } - } - - .spectrum-Slider-tick { - &::after { - background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled))); - } - } - - &.spectrum-Slider--range { - .spectrum-Slider-track:not(:first-of-type, :last-of-type)::before { - background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))); - } - } + .spectrum-Slider-fill { + &::before { + background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))); + } + } + + .spectrum-Slider-ramp { + path { + fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled))); + } + } + + .spectrum-Slider-tick { + &::after { + background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled))); + } + } + + &.spectrum-Slider--range { + .spectrum-Slider-track:not(:first-of-type, :last-of-type)::before { + background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))); + } + } } @media (forced-colors: active) { - .spectrum-Slider { - /* over-writes */ - --highcontrast-slider-track-color: ButtonText; - --highcontrast-slider-track-color-static: ButtonText; - --highcontrast-slider-track-fill-color: ButtonText; - --highcontrast-slider-filled-track-fill-color: Highlight; - --highcontrast-slider-ramp-track-color: ButtonText; - --highcontrast-slider-ramp-track-color-disabled: GrayText; - --highcontrast-slider-tick-mark-color: ButtonText; - --highcontrast-slider-handle-border-color: ButtonText; - --highcontrast-slider-handle-border-color-hover: Highlight; - --highcontrast-slider-handle-border-color-down: Highlight; - --highcontrast-slider-handle-border-color-key-focus: Highlight; - --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText; - --highcontrast-slider-handle-background-color: ButtonFace; - --highcontrast-slider-ramp-handle-border-color-active: ButtonFace; - --highcontrast-slider-ramp-handle-background-color: ButtonFace; - - --spectrum-slider-track-color: ButtonText; - --spectrum-slider-track-fill-color: ButtonText; - --spectrum-slider-ramp-track-color: ButtonText; - --spectrum-slider-ramp-track-color-disabled: GrayText; - - --spectrum-slider-handle-background-color: ButtonFace; - --spectrum-slider-handle-background-color-disabled: GrayText; - --spectrum-slider-handle-border-color: ButtonText; - --spectrum-slider-handle-disabled-background-color: GrayText; - - --spectrum-slider-tick-mark-color: ButtonText; - --spectrum-slider-tick-mark-color-disabled: GrayText; - - --spectrum-slider-handle-border-color-hover: Highlight; - --spectrum-slider-handle-border-color-down: Highlight; - --spectrum-slider-handle-border-color-key-focus: Highlight; - --spectrum-slider-handle-focus-ring-color-key-focus: Highlight; - - --spectrum-slider-track-color-disabled: GrayText; - --spectrum-slider-track-fill-color-disabled: GrayText; - - --spectrum-slider-handle-border-color-disabled: GrayText; - - --spectrum-slider-label-text-color: CanvasText; - --spectrum-slider-label-text-color-disabled: GrayText; - - --spectrum-slider-ramp-handle-border-color-active: ButtonText; - - .spectrum-Slider-handle.is-focused::before { - forced-color-adjust: none; - } - - .spectrum-Slider--ramp .spectrum-Slider-handle { - /* forced-color-adjust required to ensure the "circle" around the handle is transparent */ - forced-color-adjust: none; - } - - /* Slider control hover and focus colors for high contrast mode */ - /* Filled and range variants are excluded since the filled portion of the track uses Highlight */ - &:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) { - .spectrum-Slider-controls:hover, - .spectrum-Slider-controls:active, - .spectrum-Slider-controls:focus-within, - .spectrum-Slider-controls.is-focused { - --highcontrast-slider-track-fill-color: Highlight; - --highcontrast-slider-track-color: Highlight; - --highcontrast-slider-handle-border-color: Highlight; - --highcontrast-slider-ramp-track-color: Highlight; - --highcontrast-slider-tick-mark-color: Highlight; - } - } - - /* Slider handle turns transparent in high contrast mode for ramp */ - &.is-disabled { - .spectrum-Slider-ramp + .spectrum-Slider-handle { - fill: ButtonFace; - background-color: ButtonFace; - } - } - } + .spectrum-Slider { + /* over-writes */ + --highcontrast-slider-track-color: ButtonText; + --highcontrast-slider-track-color-static: ButtonText; + --highcontrast-slider-track-fill-color: ButtonText; + --highcontrast-slider-filled-track-fill-color: Highlight; + --highcontrast-slider-ramp-track-color: ButtonText; + --highcontrast-slider-ramp-track-color-disabled: GrayText; + --highcontrast-slider-tick-mark-color: ButtonText; + --highcontrast-slider-handle-border-color: ButtonText; + --highcontrast-slider-handle-border-color-hover: Highlight; + --highcontrast-slider-handle-border-color-down: Highlight; + --highcontrast-slider-handle-border-color-key-focus: Highlight; + --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText; + --highcontrast-slider-handle-background-color: ButtonFace; + --highcontrast-slider-ramp-handle-border-color-active: ButtonFace; + --highcontrast-slider-ramp-handle-background-color: ButtonFace; + + --spectrum-slider-track-color: ButtonText; + --spectrum-slider-track-fill-color: ButtonText; + --spectrum-slider-ramp-track-color: ButtonText; + --spectrum-slider-ramp-track-color-disabled: GrayText; + + --spectrum-slider-handle-background-color: ButtonFace; + --spectrum-slider-handle-background-color-disabled: GrayText; + --spectrum-slider-handle-border-color: ButtonText; + --spectrum-slider-handle-disabled-background-color: GrayText; + + --spectrum-slider-tick-mark-color: ButtonText; + --spectrum-slider-tick-mark-color-disabled: GrayText; + + --spectrum-slider-handle-border-color-hover: Highlight; + --spectrum-slider-handle-border-color-down: Highlight; + --spectrum-slider-handle-border-color-key-focus: Highlight; + --spectrum-slider-handle-focus-ring-color-key-focus: Highlight; + + --spectrum-slider-track-color-disabled: GrayText; + --spectrum-slider-track-fill-color-disabled: GrayText; + + --spectrum-slider-handle-border-color-disabled: GrayText; + + --spectrum-slider-label-text-color: CanvasText; + --spectrum-slider-label-text-color-disabled: GrayText; + + --spectrum-slider-ramp-handle-border-color-active: ButtonText; + + .spectrum-Slider-handle.is-focused::before { + forced-color-adjust: none; + } + + .spectrum-Slider--ramp .spectrum-Slider-handle { + /* forced-color-adjust required to ensure the "circle" around the handle is transparent */ + forced-color-adjust: none; + } + + /* Slider control hover and focus colors for high contrast mode */ + /* Filled and range variants are excluded since the filled portion of the track uses Highlight */ + &:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) { + .spectrum-Slider-controls:hover, + .spectrum-Slider-controls:active, + .spectrum-Slider-controls:focus-within, + .spectrum-Slider-controls.is-focused { + --highcontrast-slider-track-fill-color: Highlight; + --highcontrast-slider-track-color: Highlight; + --highcontrast-slider-handle-border-color: Highlight; + --highcontrast-slider-ramp-track-color: Highlight; + --highcontrast-slider-tick-mark-color: Highlight; + } + } + + /* Slider handle turns transparent in high contrast mode for ramp */ + &.is-disabled { + .spectrum-Slider-ramp + .spectrum-Slider-handle { + fill: ButtonFace; + background-color: ButtonFace; + } + } + } } diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css index 1df5f6ef8ee..ea48b2a0dd7 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 90f77d3b6db..2b0aeaf991e 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/splitview/index.css b/components/splitview/index.css index f40bd050a95..d6ab73ed4ff 100644 --- a/components/splitview/index.css +++ b/components/splitview/index.css @@ -11,149 +11,137 @@ governing permissions and limitations under the License. */ .spectrum-SplitView { - --spectrum-splitview-vertical-width: 100%; - --spectrum-splitview-vertical-gripper-width: 50%; - --spectrum-splitview-vertical-gripper-outer-width: 100%; - --spectrum-splitview-vertical-gripper-reset: 0; - - --spectrum-splitview-background-color: var(--spectrum-gray-100); - --spectrum-splitview-handle-background-color: var(--spectrum-gray-300); - --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400); - --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800); - --spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color); - --spectrum-splitview-handle-width: var(--spectrum-border-width-200); - - --spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75); - --spectrum-splitview-gripper-width: var(--spectrum-border-width-400); - --spectrum-splitview-gripper-height: 16px; /* No good token to use for this */ - --spectrum-splitview-gripper-border-width-horizontal: 3px; /* No good token to use for this */ - --spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400); - + --spectrum-splitview-vertical-width: 100%; + --spectrum-splitview-vertical-gripper-width: 50%; + --spectrum-splitview-vertical-gripper-outer-width: 100%; + --spectrum-splitview-vertical-gripper-reset: 0; + + --spectrum-splitview-background-color: var(--spectrum-gray-100); + --spectrum-splitview-handle-background-color: var(--spectrum-gray-300); + --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400); + --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800); + --spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color); + --spectrum-splitview-handle-width: var(--spectrum-border-width-200); + + --spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75); + --spectrum-splitview-gripper-width: var(--spectrum-border-width-400); + --spectrum-splitview-gripper-height: 16px; /* No good token to use for this */ + --spectrum-splitview-gripper-border-width-horizontal: 3px; /* No good token to use for this */ + --spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400); } - .spectrum-SplitView { - display: flex; - overflow: hidden; + display: flex; + overflow: hidden; } .spectrum-SplitView-pane { - block-size: 100%; - background-color: var(--mod-splitview-background-color, var(--spectrum-splitview-background-color)); + block-size: 100%; + background-color: var(--mod-splitview-background-color, var(--spectrum-splitview-background-color)); } .spectrum-SplitView-gripper { - content: ""; - display: block; - position: absolute; - border-style: solid; - border-radius: var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius)); - border-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); - - inset-block-start: 50%; - transform: translate(0, -50%); - - /* Prevent touch-action on handle */ - touch-action: none; - - /* half of (width + horizontal border - handle width) * -1 (for negative opposite) */ - inset-inline-start: calc( - ( - ( - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + - (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) - ) / 2 - ) * -1 - ); - inline-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)); - block-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height)); - border-block-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical)); - border-inline-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal)); - - &::before { - background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); - } + content: ""; + display: block; + position: absolute; + border-style: solid; + border-radius: var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius)); + border-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); + + inset-block-start: 50%; + transform: translate(0, -50%); + + /* Prevent touch-action on handle */ + touch-action: none; + + /* half of (width + horizontal border - handle width) * -1 (for negative opposite) */ + inset-inline-start: calc(((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2) * -1); + inline-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)); + block-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height)); + border-block-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical)); + border-inline-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal)); + + &::before { + background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); + } } .spectrum-SplitView-splitter { - /* Contains the gripper */ - position: relative; - - background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); - - /* Prevent text selection while dragging */ - user-select: none; - - inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); - block-size: 100%; - z-index: 1; - - &.is-collapsed-start, - &.is-collapsed-end { - /* make the center line of the gripper */ - .spectrum-SplitView-gripper::before { - content: ""; - position: absolute; - - inset-block-start: 0; - inset-inline-start: calc( - 50% - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2) - ); - inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); - block-size: 100%; - } - } - - &.is-collapsed-start { - .spectrum-SplitView-gripper { - inset-inline-start: 0; - } - } - - &.is-collapsed-end { - .spectrum-SplitView-gripper { - inset-inline-end: 0; - inset-inline-start: auto; - } - } + /* Contains the gripper */ + position: relative; + + background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); + + /* Prevent text selection while dragging */ + user-select: none; + + inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); + block-size: 100%; + z-index: 1; + + &.is-collapsed-start, + &.is-collapsed-end { + /* make the center line of the gripper */ + .spectrum-SplitView-gripper::before { + content: ""; + position: absolute; + + inset-block-start: 0; + inset-inline-start: calc(50% - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2)); + inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); + block-size: 100%; + } + } + + &.is-collapsed-start { + .spectrum-SplitView-gripper { + inset-inline-start: 0; + } + } + + &.is-collapsed-end { + .spectrum-SplitView-gripper { + inset-inline-end: 0; + inset-inline-start: auto; + } + } } .spectrum-SplitView-splitter.is-draggable { - &:hover, - &.is-hovered { - background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); + &:hover, + &.is-hovered { + background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); - .spectrum-SplitView-gripper { - border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); - } + .spectrum-SplitView-gripper { + border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); + } - .spectrum-SplitView-gripper::before { - background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); - } - } + .spectrum-SplitView-gripper::before { + background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); + } + } - &:active, - &.is-active { - background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); + &:active, + &.is-active { + background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); - .spectrum-SplitView-gripper { - border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); - } + .spectrum-SplitView-gripper { + border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); + } - /* Center line of gripper */ - .spectrum-SplitView-gripper::before { - background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); - } - } + /* Center line of gripper */ + .spectrum-SplitView-gripper::before { + background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); + } + } - &:focus { - outline: none; - } + &:focus { + outline: none; + } - &:focus-visible { - outline: none; - background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); + &:focus-visible { + outline: none; + background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); .spectrum-SplitView-gripper { border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); @@ -167,80 +155,66 @@ governing permissions and limitations under the License. } .spectrum-SplitView--vertical { - flex-direction: column; - - .spectrum-SplitView-pane { - block-size: auto; - inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width)); - } - - .spectrum-SplitView-gripper { - /* half of (height + vertical border - handle width) * -1 (for negative opposite) */ - inset-block-start: calc( - ( - ( - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + - (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) - ) / 2 - ) * -1 - ); - - transform: translate( - calc(-1 * var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width))), - 0 - ); - inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)); - inline-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height)); - block-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)); - - /* opposite of default border-width */ - border-block-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal)); - border-inline-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical)); - } - - .spectrum-SplitView-splitter { - inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width)); - block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); - } - - .spectrum-SplitView-splitter.is-collapsed-start, - .spectrum-SplitView-splitter.is-collapsed-end { - .spectrum-SplitView-gripper { - inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)); - } - - /* make the center line of the gripper */ - .spectrum-SplitView-gripper::before { - inset-block-start: calc( - var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) - - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2) - ); - inset-inline-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset)); - inline-size: var(--mod-splitview-vertical-gripper-outer-width, var(--spectrum-splitview-vertical-gripper-outer-width)); - block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); - } - } - - .spectrum-SplitView-splitter.is-collapsed-start { - .spectrum-SplitView-gripper { - inset-block-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset)); - } - } - - .spectrum-SplitView-splitter.is-collapsed-end { - .spectrum-SplitView-gripper { - inset-block-start: auto; - inset-block-end: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset)); - } - } + flex-direction: column; + + .spectrum-SplitView-pane { + block-size: auto; + inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width)); + } + + .spectrum-SplitView-gripper { + /* half of (height + vertical border - handle width) * -1 (for negative opposite) */ + inset-block-start: calc(((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2) * -1); + + transform: translate(calc(-1 * var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width))), 0); + inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)); + inline-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height)); + block-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)); + + /* opposite of default border-width */ + border-block-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal)); + border-inline-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical)); + } + + .spectrum-SplitView-splitter { + inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width)); + block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); + } + + .spectrum-SplitView-splitter.is-collapsed-start, + .spectrum-SplitView-splitter.is-collapsed-end { + .spectrum-SplitView-gripper { + inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)); + } + + /* make the center line of the gripper */ + .spectrum-SplitView-gripper::before { + inset-block-start: calc(var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2)); + inset-inline-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset)); + inline-size: var(--mod-splitview-vertical-gripper-outer-width, var(--spectrum-splitview-vertical-gripper-outer-width)); + block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); + } + } + + .spectrum-SplitView-splitter.is-collapsed-start { + .spectrum-SplitView-gripper { + inset-block-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset)); + } + } + + .spectrum-SplitView-splitter.is-collapsed-end { + .spectrum-SplitView-gripper { + inset-block-start: auto; + inset-block-end: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset)); + } + } } @media (forced-colors: active) { - .spectrum-SplitView { - --highcontrast-splitview-handle-background-color: CanvasText; - --highcontrast-splitview-handle-background-color-hover: CanvasText; - --highcontrast-splitview-handle-background-color-down: CanvasText; - --highcontrast-splitview-handle-background-color-focus: Highlight; - } + .spectrum-SplitView { + --highcontrast-splitview-handle-background-color: CanvasText; + --highcontrast-splitview-handle-background-color-hover: CanvasText; + --highcontrast-splitview-handle-background-color-down: CanvasText; + --highcontrast-splitview-handle-background-color-focus: Highlight; + } } diff --git a/components/statuslight/index.css b/components/statuslight/index.css index 23b3058e5ff..f70b1d909c5 100644 --- a/components/statuslight/index.css +++ b/components/statuslight/index.css @@ -11,96 +11,96 @@ 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) { @@ -116,138 +116,138 @@ governing permissions and limitations under the License. } .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)); - - --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; - } + /* 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)); + + /* 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 7b4d11919e0..fca8dd470bf 100644 --- a/components/steplist/index.css +++ b/components/steplist/index.css @@ -11,64 +11,64 @@ 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 { @@ -92,52 +92,52 @@ governing permissions and limitations under the License. /* 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; + outline: none; + position: relative; + display: inline-block; + margin: 0; - /* Don't let tooltips mess up alignment */ - vertical-align: bottom; + /* 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); + 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 { @@ -150,12 +150,10 @@ governing permissions and limitations under the License. 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; - } - } + .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; + } /* Selected state */ &.is-selected { @@ -184,148 +182,148 @@ governing permissions and limitations under the License. } .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)); } /* 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) { @@ -341,3 +339,4 @@ governing permissions and limitations under the License. } } } +} \ No newline at end of file diff --git a/components/stepper/index.css b/components/stepper/index.css index 1f3df985605..332b1c4d2e5 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 835ebeb952b..e7342f3dd74 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 a59b448068d..70cdd1305e0 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 0fbf80340c0..9a3cd183a65 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -16,51 +16,50 @@ governing permissions and limitations under the License. --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); + /* 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%); @@ -74,13 +73,13 @@ governing permissions and limitations under the License. /* 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 { + --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; @@ -99,35 +98,26 @@ 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 { @@ -144,8 +134,16 @@ governing permissions and limitations under the License. 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; + .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; &::before { border-radius: 0; @@ -158,50 +156,41 @@ governing permissions and limitations under the License. } } - /* Swatch fill: Image, Gradient, SVG */ - &.is-image { - .spectrum-Swatch-fill { - &::before { - background-color: transparent; - } - } - } + /* 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); - } + &.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; - } - } + .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: 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 +203,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 +216,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 +250,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 +271,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 */ @@ -314,24 +301,24 @@ governing permissions and limitations under the License. } .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 +351,18 @@ 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; } +} \ No newline at end of file diff --git a/components/swatchgroup/index.css b/components/swatchgroup/index.css index 7f4b981971e..abade96836e 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 360f8b0f97f..ee0a28e7e32 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -13,153 +13,153 @@ 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 { @@ -167,148 +167,145 @@ governing permissions and limitations under the License. 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)); + /* positions the pseudo elements relative to this one */ + position: relative; - /* 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; + inline-size: var(--mod-switch-control-width, var(--spectrum-switch-control-width)); - flex-grow: 0; - flex-shrink: 0; + /* 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; - vertical-align: middle; + flex-grow: 0; + flex-shrink: 0; - 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; + vertical-align: middle; - block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); + 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; - inset-inline-start: 0; - inset-inline-end: 0; + block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); - border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2); + inset-inline-start: 0; + inset-inline-end: 0; - &::before { - display: block; - position: absolute; - content: ""; - box-sizing: border-box; - } + border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2); - /* :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; + &::before { + display: block; + position: absolute; + content: ""; + box-sizing: border-box; + } - inline-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); - block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); + /* :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; - inset-block-start: 0; - inset-inline-start: 0; + inline-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); + block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); - 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; - } + inset-block-start: 0; + inset-inline-start: 0; - /* :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; - } + 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-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))); - } + & ~ .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 { @@ -326,167 +323,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 24bcac61171..25629db7ddb 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 30120df2455..d533f85fe07 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 09f92a6b11d..d29eb74949e 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -11,50 +11,50 @@ 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)); @@ -62,54 +62,56 @@ governing permissions and limitations under the License. /* ----- */ - --spectrum-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus); - --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover); - --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + /* ----- */ - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular); + --spectrum-table-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-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-table-focus-indicator-color: var(--spectrum-focus-indicator-color); + /* 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-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-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-table-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-table-transition-duration: var(--spectrum-animation-duration-100); + --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); - /* 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-transition-duration: var(--spectrum-animation-duration-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); + /* 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-font-weight: var(--spectrum-bold-font-weight); - --spectrum-table-section-header-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); - /* 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-section-header-font-weight: var(--spectrum-bold-font-weight); + --spectrum-table-section-header-background-color: var(--spectrum-gray-200); - --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); + /* 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); - /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341 + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + + /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341 and for modifying emphasized/non-emphasized background colors from the root element. */ - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color))); - --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized))); - --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-non-emphasized-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus))); + --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 +120,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)); - } + /* 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)); + &.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)); + /* 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)); - } + /* 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)); + &.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)); + /* 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)); - } + /* 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)); - } + /* 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)); + &.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)); + /* 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)); - } + /* 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)); + &.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)); + /* 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)); - } + /* 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 { + --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-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 { + &: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-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-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))); + --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)); + 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); + 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)); + /* 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)); + 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)); + 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; + 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); - } + .spectrum-Table-sortedIcon, + .spectrum-Table-menuIcon { + color: var(--spectrum-table-icon-color); + } - &.is-sortable { - cursor: var(--mod-table-cursor-header-sortable, pointer); + &.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))); - } + &: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))); - } + &: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 { + --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: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))); - } - } + &: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, + &.is-sorted-desc { + .spectrum-Table-sortedIcon { + display: inline-block; + } + } - &.is-sorted-asc { - .spectrum-Table-sortedIcon { - transform: rotateZ(-90deg); - } - } + &.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)); + 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))); + &.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; - } + /* Make sure negative offset outline is not covered by borders. */ + --mod-table-border-color: transparent; + } } /* Outside border, row divider lines, and rounded corners: @@ -522,173 +524,149 @@ 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))); - } + &: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))); - } + &: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: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))); - } + .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)); - } + 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)); - } + &: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; - } + &: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))); - } + &: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))); - } + &: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-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, + .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))); + &.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); + /* 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))); @@ -697,52 +675,46 @@ governing permissions and limitations under the License. } .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-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)); + .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))); - } + /* 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))); - } + --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); - &: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 { + 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 { @@ -757,86 +729,73 @@ governing permissions and limitations under the License. ); /* 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; - } + /* Block spacing must be moved to calculated margin on the checkbox element. */ + padding-block: 0; - &.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-checkbox { + --mod-checkbox-spacing: 0px; + min-block-size: initial; + } - &.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)); - } + &.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; - } + --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. + /* 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)) - )); + 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; @@ -844,32 +803,30 @@ governing permissions and limitations under the License. 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-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))); + } - .spectrum-Table-cell:last-child { - border-inline-end: none; - } - } + /* 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 *********/ @@ -907,44 +864,67 @@ governing permissions and limitations under the License. } } - .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 - ) - ); - } + &[data-tier="3"] { + --spectrum-table-row-tier: 3; + } - &[hidden]{ - display: none; - } + &[data-tier="4"] { + --spectrum-table-row-tier: 4; + } + + &[data-tier="5"] { + --spectrum-table-row-tier: 5; + } + + &[data-tier="6"] { + --spectrum-table-row-tier: 6; + } + + .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)); + } + + .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)); + } + + &[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))); + --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)); @@ -952,28 +932,28 @@ governing permissions and limitations under the License. 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); + border-radius: 0; + background: transparent; + border: 0; + color: var(--spectrum-table-icon-color); - transform: var(--spectrum-logical-rotation); + transform: var(--spectrum-logical-rotation); - &[aria-expanded="true"]{ - transform: var(--spectrum-logical-rotation,) rotate(90deg); - } + &[aria-expanded="true"] { + transform: var(--spectrum-logical-rotation) rotate(90deg); + } - &::after { - display: none; - } + &::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))); - } + &: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))); - } + &: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))); @@ -983,69 +963,61 @@ governing permissions and limitations under the License. } } - &: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))); + &: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 - ); - } -} + 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)); - } + --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) - ); - } + /* 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)); - } + 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); - } + .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 72ec7fc2cdc..6e7becd3781 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 522a35a183a..f7d6b4a3edc 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 b0383ebd1b9..5b42bbcd60e 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 88319c8854f..3e298c16be7 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -13,503 +13,477 @@ 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))); + 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 */ /* 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; - } - } + .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 720c1b53f71..df4e53c65e1 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 8c02defb2f8..adef9fa26b7 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 8db3c546e97..d9673bec23b 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 dfea49a1646..5edeb0588a5 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,7 +461,6 @@ governing permissions and limitations under the License. } /* stylelint-enable selector-no-vendor-prefix */ - /*** Input Placeholder Text ***/ &::placeholder { opacity: 1; @@ -870,249 +510,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 +609,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 +619,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 +635,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 +649,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 +671,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 +702,11 @@ governing permissions and limitations under the License. /*** Text Area ***/ .spectrum-Textfield--multiline { - --spectrum-textfield-input-line-height: normal; + --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 { + 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 +716,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 498873727aa..fc270817fa8 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 b7109c7e321..0645ffcc04e 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 c90a2856ecb..69fa70a08bd 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 838afaeb408..5f8f5cfcce9 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 86cf741f932..d2567703fd2 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 5ff0e5f14c0..dfb6d065942 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/index.css b/components/tooltip/index.css index fb8b0f74467..bacfac8a5b9 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -14,41 +14,41 @@ governing permissions and limitations under the License. @import "@spectrum-css/commons/overlay.css"; .spectrum-Tooltip { - --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100); - /* override if additional spacing to source is required */ - --spectrum-tooltip-margin: 0px; + /* override if additional spacing to source is required */ + --spectrum-tooltip-margin: 0px; - --spectrum-tooltip-height: var(--spectrum-component-height-75); - --spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100); + --spectrum-tooltip-height: var(--spectrum-component-height-75); + --spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100); - --spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - --spectrum-tooltip-font-size: var(--spectrum-font-size-75); - --spectrum-tooltip-line-height: var(--spectrum-line-height-100); - --spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight); + --spectrum-tooltip-font-size: var(--spectrum-font-size-75); + --spectrum-tooltip-line-height: var(--spectrum-line-height-100); + --spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight); - /* horizontal spacing */ - --spectrum-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + /* horizontal spacing */ + --spectrum-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); - /* vertical spacing */ - --spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75); - --spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75); + /* vertical spacing */ + --spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75); + --spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75); - /* icon spacing */ - --spectrum-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); - --spectrum-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --spectrum-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); + /* icon spacing */ + --spectrum-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); + --spectrum-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --spectrum-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); - /* colors */ - --spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default); - --spectrum-tooltip-background-color-positive: var(--spectrum-positive-background-color-default); - --spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default); + /* colors */ + --spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default); + --spectrum-tooltip-background-color-positive: var(--spectrum-positive-background-color-default); + --spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default); - --spectrum-tooltip-content-color: var(--spectrum-white); + --spectrum-tooltip-content-color: var(--spectrum-white); /* tip */ --spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); @@ -63,121 +63,125 @@ governing permissions and limitations under the License. /* Tip inset from container edges for clip-paths calculation, to fix hairline gap in Chrome cause by antialiasing. */ --spectrum-tooltip-tip-antialiasing-inset: 0.5px; - /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ - --spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + /* Width and height of square element used to render the tip triangle. */ + --spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size); - /* neutral background changes per theme */ - --spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral); -} + /* Percentage value of height divided by width, for calculating clip-path within a square tip. */ + --spectrum-tooltip-tip-height-percentage: 50%; -@media (forced-colors: active) { - .spectrum-Tooltip { - border: 1px solid transparent; - } + /* Tip inset from container edges for clip-paths calculation, to fix hairline gap in Chrome cause by antialiasing. */ + --spectrum-tooltip-tip-antialiasing-inset: 0.5px; - .spectrum-Tooltip-tip { - forced-color-adjust: none; - --highcontrast-tooltip-background-color-default: CanvasText; - --highcontrast-tooltip-background-color-informative: CanvasText; - --highcontrast-tooltip-background-color-positive: CanvasText; - --highcontrast-tooltip-background-color-negative: CanvasText; - } + /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ + --spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + + /* neutral background changes per theme */ + --spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral); } +@media (forced-colors: active) { + .spectrum-Tooltip { + border: 1px solid transparent; + } + + .spectrum-Tooltip-tip { + forced-color-adjust: none; + --highcontrast-tooltip-background-color-default: CanvasText; + --highcontrast-tooltip-background-color-informative: CanvasText; + --highcontrast-tooltip-background-color-positive: CanvasText; + --highcontrast-tooltip-background-color-negative: CanvasText; + } +} .spectrum-Tooltip { - @extend %spectrum-overlay; + @extend %spectrum-overlay; - position: relative; + position: relative; - display: inline-flex; - flex-direction: row; - align-items: center; - box-sizing: border-box; + display: inline-flex; + flex-direction: row; + align-items: center; + box-sizing: border-box; - vertical-align: top; + vertical-align: top; - inline-size: auto; - padding-inline: var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline)); + inline-size: auto; + padding-inline: var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline)); - border-radius: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius)); + border-radius: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius)); - block-size: auto; - min-block-size: var(--mod-tooltip-height, var(--spectrum-tooltip-height)); - max-inline-size: var(--mod-tooltip-max-inline-size, var(--spectrum-tooltip-max-inline-size)); + block-size: auto; + min-block-size: var(--mod-tooltip-height, var(--spectrum-tooltip-height)); + max-inline-size: var(--mod-tooltip-max-inline-size, var(--spectrum-tooltip-max-inline-size)); - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); - color: var(--mod-tooltip-content-color, var(--spectrum-tooltip-content-color)); + background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); + color: var(--mod-tooltip-content-color, var(--spectrum-tooltip-content-color)); - font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size)); - font-weight: var(--mod-tooltip-font-weight, var(--spectrum-tooltip-font-weight)); - line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height)); - word-break: break-word; - -webkit-font-smoothing: antialiased; + font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size)); + font-weight: var(--mod-tooltip-font-weight, var(--spectrum-tooltip-font-weight)); + line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height)); + word-break: break-word; + -webkit-font-smoothing: antialiased; cursor: default; user-select: none; - /* CJK language support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - line-height: var(--mod-tooltip-cjk-line-height, var(--spectrum-tooltip-cjk-line-height)); - } + /* CJK language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-tooltip-cjk-line-height, var(--spectrum-tooltip-cjk-line-height)); + } - p { - margin: 0; - } + p { + margin: 0; + } } /****** Variants ******/ .spectrum-Tooltip--info { - background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); + background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); } .spectrum-Tooltip--positive { - background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive))); + background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive))); } .spectrum-Tooltip--negative { - background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); + background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); } .spectrum-Tooltip.is-open { - @extend %spectrum-overlay--open; + @extend %spectrum-overlay--open; } /****** Tip Base Styles ******/ .spectrum-Tooltip-tip { - position: absolute; + position: absolute; - block-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); - inline-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); + block-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); + inline-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); inset-block-start: 100%; inset-inline-start: 50%; transform: translateX(-50%); - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); + background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); - /* Default: Pointing down ▽ */ - clip-path: polygon( - 0 calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), - 50% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), - 100% calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) - ); + /* Default: Pointing down ▽ */ + clip-path: polygon(0 calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 50% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 100% calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)))); - .spectrum-Tooltip--info & { - background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); - } + .spectrum-Tooltip--info & { + background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); + } - .spectrum-Tooltip--positive & { - background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive))); - } + .spectrum-Tooltip--positive & { + background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive))); + } - .spectrum-Tooltip--negative & { - background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); - } + .spectrum-Tooltip--negative & { + background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); + } /*** Tip Placement ***/ /* tip is horizontal at bottom pointing down ▽ */ @@ -203,17 +207,17 @@ governing permissions and limitations under the License. inset-block: auto 100%; } - /* tip is horizontal and at the edge */ - .spectrum-Tooltip--top-left &, - .spectrum-Tooltip--bottom-left &, - .spectrum-Tooltip--top-right &, - .spectrum-Tooltip--bottom-right &, - .spectrum-Tooltip--top-start &, - .spectrum-Tooltip--bottom-start &, - .spectrum-Tooltip--top-end &, - .spectrum-Tooltip--bottom-end & { - transform: none; - } + /* tip is horizontal and at the edge */ + .spectrum-Tooltip--top-left &, + .spectrum-Tooltip--bottom-left &, + .spectrum-Tooltip--top-right &, + .spectrum-Tooltip--bottom-right &, + .spectrum-Tooltip--top-start &, + .spectrum-Tooltip--bottom-start &, + .spectrum-Tooltip--top-end &, + .spectrum-Tooltip--bottom-end & { + transform: none; + } /* tip is horizontal at left △ ▽ */ .spectrum-Tooltip--top-left &, @@ -232,22 +236,22 @@ governing permissions and limitations under the License. .spectrum-Tooltip--bottom-start & { inset-inline: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)) auto; - &:dir(rtl) { - right: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); - left: auto; - } - } + &:dir(rtl) { + right: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + left: auto; + } + } /* logical property - tip is horizontal at end △ ▽ */ .spectrum-Tooltip--top-end &, .spectrum-Tooltip--bottom-end & { inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); - &:dir(rtl) { - left: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); - right: auto; - } - } + &:dir(rtl) { + left: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + right: auto; + } + } /* tip right left start end resets ◁ ▷ */ .spectrum-Tooltip--right &, @@ -325,56 +329,47 @@ governing permissions and limitations under the License. inset-block-end: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); } - /* tip logical property - Start pointing tip reversed to point toward end ▷ for RTL. */ - .spectrum-Tooltip--end &, - .spectrum-Tooltip--end-top &, - .spectrum-Tooltip--end-bottom & { - &:dir(rtl) { - clip-path: polygon( - calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, - calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50% - ); - right: auto; - left: 100%; - } - } - - /* tip logical property - End pointing tip reversed to point toward start ◁ for RTL. */ - .spectrum-Tooltip--start &, - .spectrum-Tooltip--start-top &, - .spectrum-Tooltip--start-bottom & { - &:dir(rtl) { - clip-path: polygon( - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%, - calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, - calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0 - ); - left: auto; - right: 100%; - } - } + /* tip logical property - Start pointing tip reversed to point toward end ▷ for RTL. */ + .spectrum-Tooltip--end &, + .spectrum-Tooltip--end-top &, + .spectrum-Tooltip--end-bottom & { + &:dir(rtl) { + clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%); + right: auto; + left: 100%; + } + } + + /* tip logical property - End pointing tip reversed to point toward start ◁ for RTL. */ + .spectrum-Tooltip--start &, + .spectrum-Tooltip--start-top &, + .spectrum-Tooltip--start-bottom & { + &:dir(rtl) { + clip-path: polygon(var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0); + left: auto; + right: 100%; + } + } } /****** Icon ******/ .spectrum-Tooltip-typeIcon { - /* subtract tooltip padding from icon start margin */ - margin-inline-start: calc(var(--mod-tooltip-icon-spacing-inline-start, var(--spectrum-tooltip-icon-spacing-inline-start)) - - var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline))); - margin-inline-end: var(--mod-tooltip-icon-spacing-inline-end, var(--spectrum-tooltip-icon-spacing-inline-end)); - margin-block-start: var(--mod-tooltip-icon-spacing-block-start, var(--spectrum-tooltip-icon-spacing-block-start)); - inline-size: var(--mod-tooltip-icon-width, var(--spectrum-tooltip-icon-width)); - block-size: var(--mod-tooltip-icon-height, var(--spectrum-tooltip-icon-height)); - align-self: flex-start; - flex-shrink: 0; + /* subtract tooltip padding from icon start margin */ + margin-inline-start: calc(var(--mod-tooltip-icon-spacing-inline-start, var(--spectrum-tooltip-icon-spacing-inline-start)) - var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline))); + margin-inline-end: var(--mod-tooltip-icon-spacing-inline-end, var(--spectrum-tooltip-icon-spacing-inline-end)); + margin-block-start: var(--mod-tooltip-icon-spacing-block-start, var(--spectrum-tooltip-icon-spacing-block-start)); + inline-size: var(--mod-tooltip-icon-width, var(--spectrum-tooltip-icon-width)); + block-size: var(--mod-tooltip-icon-height, var(--spectrum-tooltip-icon-height)); + align-self: flex-start; + flex-shrink: 0; } /****** Label ******/ .spectrum-Tooltip-label { - /* Make sure line height is correct to prevent problems in Windows */ - line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height)); - margin-block-start: var(--mod-tooltip-spacing-block-start, var(--spectrum-tooltip-spacing-block-start)); - margin-block-end: var(--mod-tooltip-spacing-block-end, var(--spectrum-tooltip-spacing-block-end)); + /* Make sure line height is correct to prevent problems in Windows */ + line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height)); + margin-block-start: var(--mod-tooltip-spacing-block-start, var(--spectrum-tooltip-spacing-block-start)); + margin-block-end: var(--mod-tooltip-spacing-block-end, var(--spectrum-tooltip-spacing-block-end)); } /****** Tooltip Placement and Animation Direction ******/ @@ -388,10 +383,10 @@ governing permissions and limitations under the License. margin-block-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); - /* tooltip animates upward ⬆ */ - &.is-open { - transform: translateY(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); - } + /* tooltip animates upward ⬆ */ + &.is-open { + transform: translateY(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); + } } /* tooltip position is at bottom of source */ @@ -403,10 +398,10 @@ governing permissions and limitations under the License. margin-block-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); - /* Tooltip animates downward ⬇ */ - &.is-open { - transform: translateY(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); - } + /* Tooltip animates downward ⬇ */ + &.is-open { + transform: translateY(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + } } /* tooltip position is right of source */ @@ -416,10 +411,10 @@ governing permissions and limitations under the License. margin-inline-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); - /* Tooltip animates to right ⮕ */ - &.is-open { - transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); - } + /* Tooltip animates to right ⮕ */ + &.is-open { + transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + } } /* tooltip position is left of source */ @@ -429,56 +424,54 @@ governing permissions and limitations under the License. margin-inline-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); - /* Tooltip animates to left ⬅ */ - &.is-open { - transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); - } + /* Tooltip animates to left ⬅ */ + &.is-open { + transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); + } } /* logical property - tooltip is horizontally at start */ .spectrum-Tooltip--start, .spectrum-Tooltip--start-top, .spectrum-Tooltip--start-bottom { - margin-inline-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) - + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); - - /* LTR read, tooltip animates towards left ⬅ */ - &.is-open { - transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); - } - - /* RTL read, tooltip animates towards right ⮕ */ - &:dir(rtl) { - &.is-open { - transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); - } - } + margin-inline-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); + + /* LTR read, tooltip animates towards left ⬅ */ + &.is-open { + transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); + } + + /* RTL read, tooltip animates towards right ⮕ */ + &:dir(rtl) { + &.is-open { + transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + } + } } /* logical property - tooltip is horizontally at end */ .spectrum-Tooltip--end, .spectrum-Tooltip--end-top, .spectrum-Tooltip--end-bottom { - margin-inline-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) - + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); - - /* LTR read, tooltip animates towards right ⮕ */ - &.is-open { - transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); - } - - /* RTL read, tooltip animates towards left ⬅ */ - &:dir(rtl) { - &.is-open { - transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); - } - } + margin-inline-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); + + /* LTR read, tooltip animates towards right ⮕ */ + &.is-open { + transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + } + + /* RTL read, tooltip animates towards left ⬅ */ + &:dir(rtl) { + &.is-open { + transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); + } + } } /*** CSS Hover Animation ***/ .u-tooltip-showOnHover { - display: inline-block; - position: relative; + display: inline-block; + position: relative; .spectrum-Tooltip { position: absolute; @@ -489,17 +482,15 @@ governing permissions and limitations under the License. transition: transform var(--spectrum-tooltip-animation-duration) ease-in-out; } - .spectrum-Tooltip-label { - /* Don't try to wrap as the mechanism used for this helper does not support wrapping */ - max-inline-size: none; - } + /* Required for animations to work, !important for diff scaling to work */ + visibility: visible !important; + transition: transform var(--spectrum-tooltip-animation-duration) ease-in-out; + } - &:hover .spectrum-Tooltip, - &:focus .spectrum-Tooltip, - &.is-focused .spectrum-Tooltip, - *:focus .spectrum-Tooltip { - opacity: 1; - } + .spectrum-Tooltip-label { + /* Don't try to wrap as the mechanism used for this helper does not support wrapping */ + max-inline-size: none; + } .spectrum-Tooltip--top, .spectrum-Tooltip--top-left, @@ -556,15 +547,14 @@ governing permissions and limitations under the License. inset-inline-end: 100%; } - /* RTL */ - &:dir(rtl) { - .spectrum-Tooltip--start, - .spectrum-Tooltip--start-top, - .spectrum-Tooltip--start-bottom { - left: 100%; - right: auto; - } - } + .spectrum-Tooltip--left, + .spectrum-Tooltip--left-bottom, + .spectrum-Tooltip--left-top, + .spectrum-Tooltip--start, + .spectrum-Tooltip--start-top, + .spectrum-Tooltip--start-bottom { + inset-inline-end: 100%; + } .spectrum-Tooltip--right, .spectrum-Tooltip--right-top, @@ -575,97 +565,105 @@ governing permissions and limitations under the License. inset-inline: 100% auto; } - /* RTL */ - &:dir(rtl) { - .spectrum-Tooltip--end, - .spectrum-Tooltip--end-top, - .spectrum-Tooltip--end-bottom { - left: auto; - right: 100%; - } - } - - &:hover, - &:focus, - &.is-focused, - *:focus { - .spectrum-Tooltip--top, - .spectrum-Tooltip--top-left, - .spectrum-Tooltip--top-right, - .spectrum-Tooltip--top-start, - .spectrum-Tooltip--top-end { - transform: translate(-50%, calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1)); - } - } - - &:hover, - &:focus, - &.is-focused, - *:focus { - .spectrum-Tooltip--bottom, - .spectrum-Tooltip--bottom-left, - .spectrum-Tooltip--bottom-right, - .spectrum-Tooltip--bottom-start, - .spectrum-Tooltip--bottom-end { - transform: translate(-50%, var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); - } - } - - - &:hover, - &:focus, - &.is-focused, - *:focus { - .spectrum-Tooltip--left, - .spectrum-Tooltip--left-bottom, - .spectrum-Tooltip--left-top, - .spectrum-Tooltip--start, - .spectrum-Tooltip--start-top, - .spectrum-Tooltip--start-bottom { - transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%); - } - } - - /* stylelint-disable max-nesting-depth */ - /* RTL */ - &:dir(rtl) { - &:hover, - &:focus, - &.is-focused, - *:focus { - .spectrum-Tooltip--start, - .spectrum-Tooltip--start-top, - .spectrum-Tooltip--start-bottom { - transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%); - } - } - } - - &:hover, - &:focus, - &.is-focused, - *:focus { - .spectrum-Tooltip--right, - .spectrum-Tooltip--right-top, - .spectrum-Tooltip--right-bottom, - .spectrum-Tooltip--end, - .spectrum-Tooltip--end-top, - .spectrum-Tooltip--end-bottom { - transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%); - } - } - - /* RTL */ - &:dir(rtl) { - &:hover, - &:focus, - &.is-focused, - *:focus { - .spectrum-Tooltip--end, - .spectrum-Tooltip--end-top, - .spectrum-Tooltip--end-bottom { - transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%); - } - } - } + .spectrum-Tooltip--right, + .spectrum-Tooltip--right-top, + .spectrum-Tooltip--right-bottom, + .spectrum-Tooltip--end, + .spectrum-Tooltip--end-top, + .spectrum-Tooltip--end-bottom { + inset-inline: 100% auto; + } + + /* RTL */ + &:dir(rtl) { + .spectrum-Tooltip--end, + .spectrum-Tooltip--end-top, + .spectrum-Tooltip--end-bottom { + left: auto; + right: 100%; + } + } + + &:hover, + &:focus, + &.is-focused, + *:focus { + .spectrum-Tooltip--top, + .spectrum-Tooltip--top-left, + .spectrum-Tooltip--top-right, + .spectrum-Tooltip--top-start, + .spectrum-Tooltip--top-end { + transform: translate(-50%, calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1)); + } + } + + &:hover, + &:focus, + &.is-focused, + *:focus { + .spectrum-Tooltip--bottom, + .spectrum-Tooltip--bottom-left, + .spectrum-Tooltip--bottom-right, + .spectrum-Tooltip--bottom-start, + .spectrum-Tooltip--bottom-end { + transform: translate(-50%, var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + } + } + + &:hover, + &:focus, + &.is-focused, + *:focus { + .spectrum-Tooltip--left, + .spectrum-Tooltip--left-bottom, + .spectrum-Tooltip--left-top, + .spectrum-Tooltip--start, + .spectrum-Tooltip--start-top, + .spectrum-Tooltip--start-bottom { + transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%); + } + } + + /* stylelint-disable max-nesting-depth */ + /* RTL */ + &:dir(rtl) { + &:hover, + &:focus, + &.is-focused, + *:focus { + .spectrum-Tooltip--start, + .spectrum-Tooltip--start-top, + .spectrum-Tooltip--start-bottom { + transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%); + } + } + } + + &:hover, + &:focus, + &.is-focused, + *:focus { + .spectrum-Tooltip--right, + .spectrum-Tooltip--right-top, + .spectrum-Tooltip--right-bottom, + .spectrum-Tooltip--end, + .spectrum-Tooltip--end-top, + .spectrum-Tooltip--end-bottom { + transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%); + } + } + + /* RTL */ + &:dir(rtl) { + &:hover, + &:focus, + &.is-focused, + *:focus { + .spectrum-Tooltip--end, + .spectrum-Tooltip--end-top, + .spectrum-Tooltip--end-bottom { + transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%); + } + } + } } diff --git a/components/tooltip/themes/express.css b/components/tooltip/themes/express.css index f9afd07d738..fdd38dcc986 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 c0c75ea6415..320c7a025ea 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 37428bf8073..b07a45fda29 100644 --- a/components/tray/index.css +++ b/components/tray/index.css @@ -11,21 +11,21 @@ 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 { @@ -40,63 +40,49 @@ governing permissions and limitations under the License. } .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; + /* 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); - } + + /* 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; @@ -104,4 +90,4 @@ governing permissions and limitations under the License. border: none; } } -} \ No newline at end of file +} diff --git a/components/treeview/index.css b/components/treeview/index.css index 26b23eef661..f5600568a88 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -11,51 +11,51 @@ governing permissions and limitations under the License. */ .spectrum-TreeView { - --spectrum-treeview-line-height: var(--spectrum-line-height-200); - --spectrum-treeview-margin-block: 1.0em; - --spectrum-treeview-font-size: var(--spectrum-font-size-100); + --spectrum-treeview-line-height: var(--spectrum-line-height-200); + --spectrum-treeview-margin-block: 1em; + --spectrum-treeview-font-size: var(--spectrum-font-size-100); - --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-100); - --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-medium); + --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-100); + --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-medium); - --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-100); - --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-100); + --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-100); + --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-100); - --spectrum-treeview-section-spacing: var(--spectrum-treeview-item-indentation-medium); - --spectrum-treeview-heading-font-weight: var(--spectrum-bold-font-weight); - --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-treeview-section-spacing: var(--spectrum-treeview-item-indentation-medium); + --spectrum-treeview-heading-font-weight: var(--spectrum-bold-font-weight); + --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-treeview-item-border-size: var(--spectrum-border-width-200); - --spectrum-treeview-item-border-size-selected: 1px; - --spectrum-treeview-item-border-radius: 0px; + --spectrum-treeview-item-border-size: var(--spectrum-border-width-200); + --spectrum-treeview-item-border-size-selected: 1px; + --spectrum-treeview-item-border-radius: 0px; - --spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800); - --spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700); + --spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800); + --spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200); - --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200); + --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200); + --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200); - --spectrum-treeview-item-border-color-quiet-selected: transparent; + --spectrum-treeview-item-border-color-quiet-selected: transparent; - --spectrum-treeview-item-icon-gap: var(--spectrum-text-to-visual-75); - --spectrum-treeview-item-icon-color: var(--spectrum-gray-700); - --spectrum-treeview-item-icon-color-hover: var(--spectrum-gray-900); - --spectrum-treeview-item-icon-color-focus: var(--spectrum-gray-900); - --spectrum-treeview-item-icon-color-selected: var(--spectrum-gray-900); - --spectrum-treeview-item-icon-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-treeview-item-icon-gap: var(--spectrum-text-to-visual-75); + --spectrum-treeview-item-icon-color: var(--spectrum-gray-700); + --spectrum-treeview-item-icon-color-hover: var(--spectrum-gray-900); + --spectrum-treeview-item-icon-color-focus: var(--spectrum-gray-900); + --spectrum-treeview-item-icon-color-selected: var(--spectrum-gray-900); + --spectrum-treeview-item-icon-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-treeview-item-text-color: var(--spectrum-neutral-content-color-default); - --spectrum-treeview-item-text-color-selected: var(--spectrum-gray-900); - --spectrum-treeview-item-text-color-disabled: var(--spectrum-gray-500); - --spectrum-treeview-item-text-color-focus: var(--spectrum-gray-900); - --spectrum-treeview-item-text-color-hover: var(--spectrum-gray-900); + --spectrum-treeview-item-text-color: var(--spectrum-neutral-content-color-default); + --spectrum-treeview-item-text-color-selected: var(--spectrum-gray-900); + --spectrum-treeview-item-text-color-disabled: var(--spectrum-gray-500); + --spectrum-treeview-item-text-color-focus: var(--spectrum-gray-900); + --spectrum-treeview-item-text-color-hover: var(--spectrum-gray-900); - --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-100)); - --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium); + --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-100)); + --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium); - --spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px); + --spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px); - --spectrum-treeview-indicator-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-treeview-indicator-animation-duration: var(--spectrum-animation-duration-100); &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); @@ -63,351 +63,349 @@ governing permissions and limitations under the License. } .spectrum-TreeView--sizeS { - --spectrum-treeview-font-size: var(--spectrum-font-size-75); + --spectrum-treeview-font-size: var(--spectrum-font-size-75); - --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-75); - --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-small); - --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-75); + --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-small); + --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-75); - --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-75)); - --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-75); - --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-small); + --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-75); + --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-75)); + --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-75); + --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-small); - --spectrum-treeview-item-min-block-size-thumbnail-offset: 6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset: 6px; } .spectrum-TreeView--sizeL { - --spectrum-treeview-font-size: var(--spectrum-font-size-200); + --spectrum-treeview-font-size: var(--spectrum-font-size-200); - --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-large); - --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-200); - --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-large); + --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-200); + --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-200); - --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-200)); - --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-200); - --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-large); + --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-200); + --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-200)); + --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-200); + --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-large); - --spectrum-treeview-item-min-block-size-thumbnail-offset: 0px; + --spectrum-treeview-item-min-block-size-thumbnail-offset: 0px; } .spectrum-TreeView--sizeXL { - --spectrum-treeview-font-size: var(--spectrum-font-size-300); + --spectrum-treeview-font-size: var(--spectrum-font-size-300); - --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-extra-large); - --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-300); - --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-300); + --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-extra-large); + --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-300); + --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-300); - --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-300)); - --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-300); - --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large); + --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-300); + --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-300)); + --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-300); + --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large); - --spectrum-treeview-item-min-block-size-thumbnail-offset: 0px; + --spectrum-treeview-item-min-block-size-thumbnail-offset: 0px; } .spectrum-TreeView--quiet { - --mod-treeview-item-background-color-selected: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-quiet-selected, var(--spectrum-treeview-item-background-color-quiet-selected))); - --mod-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent)); + --mod-treeview-item-background-color-selected: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-quiet-selected, var(--spectrum-treeview-item-background-color-quiet-selected))); + --mod-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent)); } .spectrum-TreeView--thumbnail { - --mod-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size-thumbnail, calc( - var(--spectrum-treeview-item-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset) - )); + --mod-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size-thumbnail, calc(var(--spectrum-treeview-item-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset))); } .spectrum-TreeView--detached { - --mod-treeview-item-border-radius: var(--mod-treeview-item-border-radius-detached, var(--spectrum-corner-radius-100)); + --mod-treeview-item-border-radius: var(--mod-treeview-item-border-radius-detached, var(--spectrum-corner-radius-100)); } -@media (forced-colors: active){ - .spectrum-TreeView { - --highcontrast-treeview-item-background-color-selected: Highlight; - --highcontrast-treeview-item-border-color-selected: Highlight; - --highcontrast-treeview-item-text-color-selected: HighlightText; - --highcontrast-treeview-item-icon-color-selected: HighlightText; - - --highcontrast-treeview-item-icon-color: LinkText; - --highcontrast-treeview-item-text-color: LinkText; - - --highcontrast-treeview-item-background-color-focus: Highlight; - --highcontrast-treeview-item-text-color-focus: HighlightText; - --highcontrast-treeview-item-border-color-focus: CanvasText; - --highcontrast-treeview-item-icon-color-focus: HighlightText; - - --highcontrast-treeview-item-background-color-disabled: Canvas; - --highcontrast-treeview-item-text-color-disabled: GrayText; - --highcontrast-treeview-item-icon-color-disabled: GrayText; - - --highcontrast-treeview-heading-color: CanvasText; - } - - @supports (color: SelectedItem) { - .spectrum-TreeView { - --highcontrast-treeview-item-background-color-selected: SelectedItem; - --highcontrast-treeview-item-border-color-selected: SelectedItem; - --highcontrast-treeview-item-text-color-selected: SelectedItemText; - --highcontrast-treeview-item-icon-color-selected: SelectedItemText; - } - } - - .spectrum-TreeView-itemLabel { - forced-color-adjust: none; - background: transparent; - } - - .spectrum-TreeView-itemLink::before { - forced-color-adjust: none; - } +@media (forced-colors: active) { + .spectrum-TreeView { + --highcontrast-treeview-item-background-color-selected: Highlight; + --highcontrast-treeview-item-border-color-selected: Highlight; + --highcontrast-treeview-item-text-color-selected: HighlightText; + --highcontrast-treeview-item-icon-color-selected: HighlightText; + + --highcontrast-treeview-item-icon-color: LinkText; + --highcontrast-treeview-item-text-color: LinkText; + + --highcontrast-treeview-item-background-color-focus: Highlight; + --highcontrast-treeview-item-text-color-focus: HighlightText; + --highcontrast-treeview-item-border-color-focus: CanvasText; + --highcontrast-treeview-item-icon-color-focus: HighlightText; + + --highcontrast-treeview-item-background-color-disabled: Canvas; + --highcontrast-treeview-item-text-color-disabled: GrayText; + --highcontrast-treeview-item-icon-color-disabled: GrayText; + + --highcontrast-treeview-heading-color: CanvasText; + } + + @supports (color: SelectedItem) { + .spectrum-TreeView { + --highcontrast-treeview-item-background-color-selected: SelectedItem; + --highcontrast-treeview-item-border-color-selected: SelectedItem; + --highcontrast-treeview-item-text-color-selected: SelectedItemText; + --highcontrast-treeview-item-icon-color-selected: SelectedItemText; + } + } + + .spectrum-TreeView-itemLabel { + forced-color-adjust: none; + background: transparent; + } + + .spectrum-TreeView-itemLink::before { + forced-color-adjust: none; + } } .spectrum-TreeView { - display: block; - position: relative; - padding: 0; - list-style: none; - outline: none; - user-select: none; - line-height: var(--mod-treeview-line-height, var(--spectrum-treeview-line-height)); - margin-block: var(--mod-treeview-margin-block, var(--spectrum-treeview-margin-block)); - font-size: var(--mod-treeview-font-size, var(--spectrum-treeview-font-size)); - - /* Close (hide) nested treeviews by default. */ - .spectrum-TreeView { - position: static; - block-size: 0; - display: none; - padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)); - margin-block: 0; - } + display: block; + position: relative; + padding: 0; + list-style: none; + outline: none; + user-select: none; + line-height: var(--mod-treeview-line-height, var(--spectrum-treeview-line-height)); + margin-block: var(--mod-treeview-margin-block, var(--spectrum-treeview-margin-block)); + font-size: var(--mod-treeview-font-size, var(--spectrum-treeview-font-size)); + + /* Close (hide) nested treeviews by default. */ + .spectrum-TreeView { + position: static; + block-size: 0; + display: none; + padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)); + margin-block: 0; + } } .spectrum-TreeView-item { - /* Don't let child treeviews that are open spill out */ - overflow: hidden; - - &.is-open { - > .spectrum-TreeView-itemLink > .spectrum-TreeView-itemIndicator { - /* Rotate the chevron */ - transform: var(--spectrum-logical-rotation,) rotate(90deg); - } - - > .spectrum-TreeView { - /* Open the treeview */ - block-size: auto; - display: block; - } - } - - &.is-selected, - &.is-drop-target { - > .spectrum-TreeView-itemLink { - color: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-treeview-item-text-color-selected))); - - &::before { - background-color: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-selected))); - } - - .spectrum-TreeView-itemIcon { - color: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-treeview-item-icon-color-selected))); - } - } - - > .spectrum-TreeView-itemLink:not(:focus-visible) { - &::before { - border-color: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-treeview-item-border-color-selected))); - } - } - } - - &.is-selected { - > .spectrum-TreeView-itemLink:not(:focus-visible) { - &::before { - border-width: var(--mod-treeview-item-border-size-selected, var(--spectrum-treeview-item-border-size-selected)); - } - } - } - - &.is-drop-target { - > .spectrum-TreeView-itemLink { - &::before { - border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)); - } - } - } - - &.is-disabled { - > .spectrum-TreeView-itemLink { - color: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-treeview-item-text-color-disabled))); - - &::before { - background-color: var(--highcontrast-treeview-item-background-color-disabled, transparent); - } - - .spectrum-Icon { - color: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-treeview-item-icon-color-disabled))); - } - } - } + /* Don't let child treeviews that are open spill out */ + overflow: hidden; + + &.is-open { + > .spectrum-TreeView-itemLink > .spectrum-TreeView-itemIndicator { + /* Rotate the chevron */ + transform: var(--spectrum-logical-rotation) rotate(90deg); + } + + > .spectrum-TreeView { + /* Open the treeview */ + block-size: auto; + display: block; + } + } + + &.is-selected, + &.is-drop-target { + > .spectrum-TreeView-itemLink { + color: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-treeview-item-text-color-selected))); + + &::before { + background-color: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-selected))); + } + + .spectrum-TreeView-itemIcon { + color: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-treeview-item-icon-color-selected))); + } + } + + > .spectrum-TreeView-itemLink:not(:focus-visible) { + &::before { + border-color: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-treeview-item-border-color-selected))); + } + } + } + + &.is-selected { + > .spectrum-TreeView-itemLink:not(:focus-visible) { + &::before { + border-width: var(--mod-treeview-item-border-size-selected, var(--spectrum-treeview-item-border-size-selected)); + } + } + } + + &.is-drop-target { + > .spectrum-TreeView-itemLink { + &::before { + border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)); + } + } + } + + &.is-disabled { + > .spectrum-TreeView-itemLink { + color: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-treeview-item-text-color-disabled))); + + &::before { + background-color: var(--highcontrast-treeview-item-background-color-disabled, transparent); + } + + .spectrum-Icon { + color: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-treeview-item-icon-color-disabled))); + } + } + } } .spectrum-TreeView-itemLabel { - overflow: hidden; - text-overflow: ellipsis; - position: relative; + overflow: hidden; + text-overflow: ellipsis; + position: relative; } .spectrum-TreeView-itemLink { - box-sizing: border-box; - display: flex; - flex-flow: row nowrap; - align-items: center; - - min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size)); - padding-inline: var(--mod-treeview-item-padding-inline-start, var(--spectrum-treeview-item-padding-inline-start)) var(--mod-treeview-item-padding-inline-end, var(--spectrum-treeview-item-padding-inline-end)); - - color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-treeview-item-text-color))); - - text-decoration: none; - outline: none; - cursor: pointer; - - /* Prevent weirdness that can cause the vertical bar to fall down. */ - white-space: nowrap; - overflow: hidden; - - /* Background for hover, focus, and selection, that extends the full width of the list. */ - &::before { - content: '\00a0'; - box-sizing: border-box; - position: absolute; - inset-inline: 0; - min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size)); - - border-style: solid; - border-color: transparent; - border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)) 0; - background-color: transparent; - color: transparent; - } - - &:focus-visible { - color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-treeview-item-text-color-focus))); - - &::before { - background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-focus, var(--spectrum-treeview-item-background-color-focus))); - border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)); - border-color: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-treeview-item-border-color-focus))); - } - - .spectrum-TreeView-itemIcon { - color: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-treeview-item-icon-color-focus))); - } - } - - &:hover { - color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-treeview-item-text-color-hover))); - - &::before { - background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-hover, var(--spectrum-treeview-item-background-color-hover))); - } - - .spectrum-TreeView-itemIcon { - color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-treeview-item-icon-color-hover))); - } - } + box-sizing: border-box; + display: flex; + flex-flow: row nowrap; + align-items: center; + + min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size)); + padding-inline: var(--mod-treeview-item-padding-inline-start, var(--spectrum-treeview-item-padding-inline-start)) var(--mod-treeview-item-padding-inline-end, var(--spectrum-treeview-item-padding-inline-end)); + + color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-treeview-item-text-color))); + + text-decoration: none; + outline: none; + cursor: pointer; + + /* Prevent weirdness that can cause the vertical bar to fall down. */ + white-space: nowrap; + overflow: hidden; + + /* Background for hover, focus, and selection, that extends the full width of the list. */ + &::before { + content: "\00a0"; + box-sizing: border-box; + position: absolute; + inset-inline: 0; + min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size)); + + border-style: solid; + border-color: transparent; + border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)) 0; + background-color: transparent; + color: transparent; + } + + &:focus-visible { + color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-treeview-item-text-color-focus))); + + &::before { + background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-focus, var(--spectrum-treeview-item-background-color-focus))); + border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)); + border-color: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-treeview-item-border-color-focus))); + } + + .spectrum-TreeView-itemIcon { + color: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-treeview-item-icon-color-focus))); + } + } + + &:hover { + color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-treeview-item-text-color-hover))); + + &::before { + background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-hover, var(--spectrum-treeview-item-background-color-hover))); + } + + .spectrum-TreeView-itemIcon { + color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-treeview-item-icon-color-hover))); + } + } } .spectrum-TreeView-itemIcon { - position: relative; - vertical-align: top; - flex-shrink: 0; - margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap)); - color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-treeview-item-icon-color))); + position: relative; + vertical-align: top; + flex-shrink: 0; + margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap)); + color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-treeview-item-icon-color))); } .spectrum-TreeView-itemIndicator { - display: block; - box-sizing: content-box; - position: relative; - flex-shrink: 0; + display: block; + box-sizing: content-box; + position: relative; + flex-shrink: 0; - /* Make sure the hover background pseudo element doesn't block clicks on the chevron. */ - z-index: 1; + /* Make sure the hover background pseudo element doesn't block clicks on the chevron. */ + z-index: 1; - padding-inline: var(--mod-treeview-indicator-padding-inline, var(--spectrum-treeview-indicator-padding)); - padding-block: var(--mod-treeview-indicator-padding-block, var(--spectrum-treeview-indicator-padding)); - margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, var(--spectrum-treeview-indicator-margin-inline-start)); + padding-inline: var(--mod-treeview-indicator-padding-inline, var(--spectrum-treeview-indicator-padding)); + padding-block: var(--mod-treeview-indicator-padding-block, var(--spectrum-treeview-indicator-padding)); + margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, var(--spectrum-treeview-indicator-margin-inline-start)); - transition: transform ease var(--mod-treeview-indicator-animation-duration, var(--spectrum-treeview-indicator-animation-duration)); - pointer-events: all; - transform: var(--spectrum-logical-rotation); + transition: transform ease var(--mod-treeview-indicator-animation-duration, var(--spectrum-treeview-indicator-animation-duration)); + pointer-events: all; + transform: var(--spectrum-logical-rotation); } /* Section headings */ .spectrum-TreeView-section > .spectrum-TreeView { - display: block; - block-size: auto; - padding-inline-start: 0; + display: block; + block-size: auto; + padding-inline-start: 0; } .spectrum-TreeView-section:not(:first-child) { - margin-block-start: var(--mod-treeview-section-spacing, var(--spectrum-treeview-section-spacing)); + margin-block-start: var(--mod-treeview-section-spacing, var(--spectrum-treeview-section-spacing)); } .spectrum-TreeView-heading { - padding-block-end: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-treeview-heading-bottom-to-text)); - font-weight: var(--mod-treeview-heading-font-weight, var(--spectrum-treeview-heading-font-weight)); - color: var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, inherit)); + padding-block-end: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-treeview-heading-bottom-to-text)); + font-weight: var(--mod-treeview-heading-font-weight, var(--spectrum-treeview-heading-font-weight)); + color: var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, inherit)); } /* Indentation levels used with Flat structure variant. */ .spectrum-TreeView-item--indent1 { - padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)); + padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)); } .spectrum-TreeView-item--indent2 { - padding-inline-start: calc(2 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(2 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent3 { - padding-inline-start: calc(3 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(3 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent4 { - padding-inline-start: calc(4 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(4 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent5 { - padding-inline-start: calc(5 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(5 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent6 { - padding-inline-start: calc(6 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(6 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent7 { - padding-inline-start: calc(7 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(7 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent8 { - padding-inline-start: calc(8 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(8 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent9 { - padding-inline-start: calc(9 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(9 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent10 { - padding-inline-start: calc(10 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(10 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } /* ***** VARIANTS ***** */ .spectrum-TreeView--thumbnail { - .spectrum-TreeView-itemThumbnail { - flex-shrink: 0; - margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap)); - } + .spectrum-TreeView-itemThumbnail { + flex-shrink: 0; + margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap)); + } } diff --git a/components/typography/index.css b/components/typography/index.css index 5f5bdaa3a2e..ee77a525a78 100644 --- a/components/typography/index.css +++ b/components/typography/index.css @@ -15,684 +15,683 @@ governing permissions and limitations under the License. --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 */ @@ -706,91 +705,91 @@ governing permissions and limitations under the License. /* 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 d3b4472b8e7..26bcdd3925e 100644 --- a/components/underlay/index.css +++ b/components/underlay/index.css @@ -10,50 +10,43 @@ 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/components/well/index.css b/components/well/index.css index 5637577003b..604dda1a37c 100644 --- a/components/well/index.css +++ b/components/well/index.css @@ -11,18 +11,18 @@ governing permissions and limitations under the License. */ .spectrum-Well { - --spectrum-well-border-width: var(--spectrum-border-width-100); + --spectrum-well-border-width: var(--spectrum-border-width-100); } .spectrum-Well { - text-align: start; - display: block; - min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width)); - padding: var(--mod-well-padding, var(--spectrum-well-padding)); - margin-block-start: var(--mod-well-margin-top, var(--spectrum-well-margin-top)); - border-width: var(--mod-well-border-width, var(--spectrum-well-border-width)); - border-style: solid; - border-radius: var(--mod-well-border-radius, var(--spectrum-well-border-radius)); - background-color: var(--mod-well-background-color, rgba(var(--spectrum-gray-800-rgb), 0.02)); - border-color: var(--mod-well-border-color, var(--spectrum-well-border-color)); + text-align: start; + display: block; + min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width)); + padding: var(--mod-well-padding, var(--spectrum-well-padding)); + margin-block-start: var(--mod-well-margin-top, var(--spectrum-well-margin-top)); + border-width: var(--mod-well-border-width, var(--spectrum-well-border-width)); + border-style: solid; + border-radius: var(--mod-well-border-radius, var(--spectrum-well-border-radius)); + background-color: var(--mod-well-background-color, rgba(var(--spectrum-gray-800-rgb), 0.02)); + border-color: var(--mod-well-border-color, var(--spectrum-well-border-color)); } diff --git a/package.json b/package.json index 4f5baf2d94d..a9c3e52cc43 100644 --- a/package.json +++ b/package.json @@ -1,129 +1,130 @@ { - "private": true, - "name": "spectrum-css-monorepo", - "version": "0.0.0", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "scripts": { - "build": "yarn builder tag:component", - "build:preview": "nx build storybook", - "build:site": "nx build docs", - "builder": "nx run-many --target build --projects", - "cache:clean": "nx reset", - "changeset": "changeset", - "ci": "cross-env NODE_ENV=production yarn builder tag:component,ui-icons", - "ci:storybook": "cross-env NODE_ENV=production nx run storybook:build:ci", - "clean": "yarn cleaner tag:component", - "clean:docs": "rimraf dist", - "clean:preview": "nx clean storybook", - "cleaner": "nx run-many --target clean --projects", - "compare": "cross-env NODE_ENV=production node ./tasks/compare-compiled-output.js", - "dev": "cross-env NODE_ENV=production nx run storybook:build:docs && nx start docs", - "format": "yarn formatter tag:component", - "formatter": "nx run-many --target format --projects", - "preinstall": "command -v nvm >/dev/null 2>&1 && nvm use || exit 0", - "lint": "yarn linter tag:component", - "linter": "nx run-many --target lint --verbose --projects", - "new": "nx run @spectrum-css/generator:new", - "precommit": "lint-staged --allow-empty --config lint-staged.config.js", - "prepare": "husky install && run-p refresh:directory refresh:env && yarn refresh:config", - "refresh:config": "test -n $BASH_VERSION && bash ./tasks/chromatic-config-creation.sh || exit 0", - "refresh:directory": "test -n $BASH_VERSION && bash ./tasks/clean-up-after-migration.sh || exit 0", - "refresh:env": "test -n $BASH_VERSION && bash ./tasks/copy-env-from-root.sh || exit 0", - "release": "cross-env NODE_ENV=production nx reset && yarn builder token,tag:component,ui-icons && changeset publish", - "release:site": "cross-env NODE_ENV=production yarn build:site && gh-pages -d dist/ -f -e .", - "start": "cross-env NODE_ENV=development nx start storybook", - "test": "cross-env NODE_ENV=production nx test storybook", - "test:plugins": "cross-env NODE_ENV=production nx run-many --target test --projects tag:stylelint", - "tester": "cross-env NODE_ENV=production nx run storybook:test:scope", - "validate": "yarn validator tag:component", - "validator": "nx run-many --target validate --verbose --projects", - "version:packages": "changeset version && yarn --mode=\"update-lockfile\"" - }, - "workspaces": [ - "components/*", - "plugins/*", - "tokens", - "ui-icons", - "site", - "generator", - ".storybook", - ".github/actions/*" - ], - "devDependencies": { - "@changesets/changelog-github": "^0.5.0", - "@changesets/cli": "^2.27.1", - "@commitlint/cli": "^19.2.2", - "@commitlint/config-conventional": "^19.2.2", - "@nx/devkit": "^18.2.4", - "@spectrum-css/cyclebutton": "^3.1.3", - "@spectrum-css/quickaction": "^3.1.1", - "@spectrum-css/searchwithin": "^5.1.3", - "@spectrum-css/splitbutton": "^8.1.2", - "at-rule-packer": "^0.4.2", - "autoprefixer": "^10.4.17", - "colors": "^1.4.0", - "conventional-changelog-spectrum": "^1.0.2", - "cross-env": "^7.0.3", - "diff": "^5.1.0", - "diff2html": "^3.4.45", - "eslint": "^8.57.0", - "eslint-plugin-jsonc": "^2.15.1", - "eslint-plugin-prettier": "^5.1.3", - "fast-glob": "^3.3.2", - "gh-pages": "^6.1.1", - "husky": "^9.0.11", - "jsonc-eslint-parser": "^2.4.0", - "lint-staged": "^15.2.2", - "lodash": "^4.17.21", - "node-gyp": "^10.1.0", - "npm-registry-fetch": "^16.1.0", - "npm-run-all": "^4.1.5", - "nunjucks": "^3.2.4", - "nx": "^18.2.4", - "open": "^10.0.3", - "pajv": "^1.2.0", - "postcss": "^8.4.35", - "postcss-combininator": "^2.0.0", - "postcss-discard-comments": "^6.0.2", - "postcss-discard-empty": "^6.0.3", - "postcss-extend": "^1.0.5", - "postcss-hover-media-feature": "^1.0.2", - "postcss-import": "^16.0.1", - "postcss-load-config": "^5.0.3", - "postcss-preset-env": "^9.5.2", - "postcss-reporter": "^7.1.0", - "postcss-splitinator": "^2.0.0", - "prettier": "^2.8.8", - "prettier-package-json": "^2.8.0", - "rimraf": "^5.0.5", - "stylelint": "^15.11.0", - "stylelint-config-clean-order": "^5.4.1", - "stylelint-config-standard": "^34.0.0", - "stylelint-header": "^1.0.0", - "stylelint-high-performance-animation": "^1.10.0", - "stylelint-selector-bem-pattern": "^3.0.1", - "stylelint-use-logical": "^2.1.2", - "tar": "^7.0.1", - "yargs": "^17.7.2" - }, - "engines": { - "node": ">=18.12" - }, - "browserslist": [ - "last 2 Edge versions", - "last 2 Chrome versions", - "last 2 Firefox versions", - "last 2 Safari versions", - "last 2 iOS versions" - ], - "packageManager": "yarn@4.1.1" + "private": true, + "name": "spectrum-css-monorepo", + "version": "0.0.0", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "scripts": { + "build": "yarn builder tag:component", + "build:preview": "nx build storybook", + "build:site": "nx build docs", + "builder": "nx run-many --target build --projects", + "cache:clean": "nx reset", + "changeset": "changeset", + "ci": "cross-env NODE_ENV=production yarn builder tag:component,ui-icons", + "ci:storybook": "cross-env NODE_ENV=production nx run storybook:build:ci", + "clean": "yarn cleaner tag:component", + "clean:docs": "rimraf dist", + "clean:preview": "nx clean storybook", + "cleaner": "nx run-many --target clean --projects", + "compare": "cross-env NODE_ENV=production node ./tasks/compare-compiled-output.js", + "dev": "cross-env NODE_ENV=production nx run storybook:build:docs && nx start docs", + "format": "yarn formatter tag:component", + "formatter": "nx run-many --target format --projects", + "preinstall": "command -v nvm >/dev/null 2>&1 && nvm use || exit 0", + "lint": "yarn linter tag:component", + "linter": "nx run-many --target lint --verbose --projects", + "new": "nx run @spectrum-css/generator:new", + "precommit": "lint-staged --allow-empty --config lint-staged.config.js", + "prepare": "husky install && run-p refresh:directory refresh:env && yarn refresh:config", + "refresh:config": "test -n $BASH_VERSION && bash ./tasks/chromatic-config-creation.sh || exit 0", + "refresh:directory": "test -n $BASH_VERSION && bash ./tasks/clean-up-after-migration.sh || exit 0", + "refresh:env": "test -n $BASH_VERSION && bash ./tasks/copy-env-from-root.sh || exit 0", + "release": "cross-env NODE_ENV=production nx reset && yarn builder token,tag:component,ui-icons && changeset publish", + "release:site": "cross-env NODE_ENV=production yarn build:site && gh-pages -d dist/ -f -e .", + "start": "cross-env NODE_ENV=development nx start storybook", + "test": "cross-env NODE_ENV=production nx test storybook", + "test:plugins": "cross-env NODE_ENV=production nx run-many --target test --projects tag:stylelint", + "tester": "cross-env NODE_ENV=production nx run storybook:test:scope", + "validate": "yarn validator tag:component", + "validator": "nx run-many --target validate --verbose --projects", + "version:packages": "changeset version && yarn --mode=\"update-lockfile\"" + }, + "workspaces": [ + "components/*", + "plugins/*", + "tokens", + "ui-icons", + "site", + "generator", + ".storybook", + ".github/actions/*" + ], + "devDependencies": { + "@changesets/changelog-github": "^0.5.0", + "@changesets/cli": "^2.27.1", + "@commitlint/cli": "^19.2.2", + "@commitlint/config-conventional": "^19.2.2", + "@nx/devkit": "^18.2.4", + "@spectrum-css/cyclebutton": "^3.1.3", + "@spectrum-css/quickaction": "^3.1.1", + "@spectrum-css/searchwithin": "^5.1.3", + "@spectrum-css/splitbutton": "^8.1.2", + "at-rule-packer": "^0.4.2", + "autoprefixer": "^10.4.17", + "colors": "^1.4.0", + "conventional-changelog-spectrum": "^1.0.2", + "cross-env": "^7.0.3", + "css-declaration-sorter": "^7.2.0", + "cssnano": "^6.1.2", + "cssnano-preset-advanced": "^6.1.2", + "diff": "^5.1.0", + "diff2html": "^3.4.45", + "eslint": "^8.57.0", + "eslint-plugin-jsonc": "^2.15.1", + "eslint-plugin-prettier": "^5.1.3", + "fast-glob": "^3.3.2", + "gh-pages": "^6.1.1", + "husky": "^9.0.11", + "jsonc-eslint-parser": "^2.4.0", + "lint-staged": "^15.2.2", + "lodash": "^4.17.21", + "node-gyp": "^10.1.0", + "npm-registry-fetch": "^16.1.0", + "npm-run-all": "^4.1.5", + "nunjucks": "^3.2.4", + "nx": "^18.2.4", + "open": "^10.0.3", + "pajv": "^1.2.0", + "postcss": "^8.4.35", + "postcss-combininator": "^2.0.0", + "postcss-extend": "^1.0.5", + "postcss-hover-media-feature": "^1.0.2", + "postcss-import": "^16.0.1", + "postcss-load-config": "^5.0.3", + "postcss-preset-env": "^9.5.2", + "postcss-reporter": "^7.1.0", + "postcss-splitinator": "^2.0.0", + "prettier": "^2.8.8", + "prettier-package-json": "^2.8.0", + "rimraf": "^5.0.5", + "stylelint": "^15.11.0", + "stylelint-config-clean-order": "^5.4.1", + "stylelint-config-standard": "^34.0.0", + "stylelint-header": "^1.0.0", + "stylelint-high-performance-animation": "^1.10.0", + "stylelint-selector-bem-pattern": "^3.0.1", + "stylelint-use-logical": "^2.1.2", + "tar": "^7.0.1", + "yargs": "^17.7.2" + }, + "engines": { + "node": ">=18.12" + }, + "browserslist": [ + "last 2 Edge versions", + "last 2 Chrome versions", + "last 2 Firefox versions", + "last 2 Safari versions", + "last 2 iOS versions" + ], + "packageManager": "yarn@4.1.1" } diff --git a/postcss.config.js b/postcss.config.js index b4aa80812d8..56839b76231 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -85,13 +85,15 @@ module.exports = ({ /* --------------------------------------------------- */ /* ------------------- SASS-LIKE UTILITIES ----------- */ "postcss-extend": {}, + "postcss-hover-media-feature": {}, + /* --------------------------------------------------- */ + /* ------------------- VARIABLE PARSING -------------- */ "postcss-splitinator": { processIdentifier: (identifier) => identifier === "express" ? "spectrum--express" : identifier, ...splitinatorOptions, }, "postcss-combininator": combine ? {} : false, - "postcss-hover-media-feature": {}, ...additionalPlugins, /* --------------------------------------------------- */ /* ------------------- POLYFILLS --------------------- */ @@ -124,12 +126,17 @@ module.exports = ({ }, }, /* --------------------------------------------------- */ - /* ------------------- CLEAN-UP TASKS ---------------- */ - "postcss-discard-empty": {}, + /* ------------------- ORGANIZE/DEDUPE --------------- */ "at-rule-packer": {}, - "postcss-discard-comments": !keepComments - ? { removeAllButFirst: true } - : false, + cssnano: { + preset: [ + "cssnano-preset-advanced", + { + colormin: false, + cssDeclarationSorter: false, // @todo { order: "smacss" } + }, + ], + }, /* --------------------------------------------------- */ /* ------------------- REPORTING --------------------- */ stylelint: lint diff --git a/tasks/component-builder.js b/tasks/component-builder.js index 7379d2b248d..6c0276e4168 100644 --- a/tasks/component-builder.js +++ b/tasks/component-builder.js @@ -86,7 +86,7 @@ async function extractProperties( content, regex = /(--mod-(?:\w|-)+)(?!:|\w|-)/g ) { - if (!content) return new Set(); + if (!content) return new Set(); // assign the matches to an array through the spread operator and map the results to the first capture group return new Set([...content.matchAll(regex)].map((match) => match[1]) ?? []); @@ -99,83 +99,83 @@ async function extractProperties( * @returns Promise */ async function extractModifiers(filepath, { cwd } = {}) { - if (!fs.existsSync(filepath)) return Promise.resolve(); - - const content = await fsp.readFile(filepath, { encoding: "utf-8" }); - - /* Remove duplicates using a Set and sort the results (default is alphabetical) */ - const found = await extractProperties(content); - const spectrum = await extractProperties(content, /(--spectrum-(?:\w|-)+)(?!:|\w|-)/g); - const system = await extractProperties(content, /(--system-(?:\w|-)+)(?!:|\w|-)/g); - const highContrast = await extractProperties(content, /(--highcontrast-(?:\w|-)+)(?!:|\w|-)/g); - - const selectors = new Set(); - const root = postcss.parse(content); - root.walkRules(rule => { - if (rule.selector) selectors.add(rule.selector); - }); - - if (!fs.existsSync(path.join(cwd, "dist"))) { - fs.mkdirSync(path.join(cwd, "dist")); - } - - const promises = []; - if (found.size > 0) { - // If the metadata folder doesn't exist, create it - if (!fs.existsSync(path.join(cwd, "metadata"))) { - fs.mkdirSync(path.join(cwd, "metadata")); - } - - promises.push( - fsp.writeFile( - path.join(cwd, `metadata/mods.md`), - prettier.format( - [ - "| Modifiable custom properties |\n| --- |", - ...[...found].sort().map((result) => `| \`${result}\` |`), - ].join("\n"), - { parser: "markdown" } - ), - { encoding: "utf-8" } - ) - .then(() => `${"✓".green} ${"metadata/mods.md".padEnd(20, " ").yellow} ${'-- deprecated --'.gray}`) - .catch((err) => { - if (!err) return; - console.log(`${"✗".red} ${"metadata/mods.md".yellow} not written`); - return Promise.reject(err); - }) - ); - } - - promises.push( - fsp.writeFile( - path.join(cwd, `dist/metadata.json`), - prettier.format( - JSON.stringify({ - selectors: [...selectors].sort(), - mods: [...found].sort(), - spectrum: [...spectrum].sort(), - system: [...system].sort(), - a11y: [...highContrast].sort(), - }, null, 2), - { parser: "json" } - ), - { encoding: "utf-8" } - ).then(() => { - const stats = fs.statSync(path.join(cwd, `dist/metadata.json`)); - return [ + if (!fs.existsSync(filepath)) return Promise.resolve(); + + const content = await fsp.readFile(filepath, { encoding: "utf-8" }); + + /* Remove duplicates using a Set and sort the results (default is alphabetical) */ + const found = await extractProperties(content); + const spectrum = await extractProperties(content, /(--spectrum-(?:\w|-)+)(?!:|\w|-)/g); + const system = await extractProperties(content, /(--system-(?:\w|-)+)(?!:|\w|-)/g); + const highContrast = await extractProperties(content, /(--highcontrast-(?:\w|-)+)(?!:|\w|-)/g); + + const selectors = new Set(); + const root = postcss.parse(content); + root.walkRules(rule => { + if (rule.selector) selectors.add(rule.selector); + }); + + if (!fs.existsSync(path.join(cwd, "dist"))) { + fs.mkdirSync(path.join(cwd, "dist")); + } + + const promises = []; + if (found.size > 0) { + // If the metadata folder doesn't exist, create it + if (!fs.existsSync(path.join(cwd, "metadata"))) { + fs.mkdirSync(path.join(cwd, "metadata")); + } + + promises.push( + fsp.writeFile( + path.join(cwd, "metadata/mods.md"), + prettier.format( + [ + "| Modifiable custom properties |\n| --- |", + ...[...found].sort().map((result) => `| \`${result}\` |`), + ].join("\n"), + { parser: "markdown" } + ), + { encoding: "utf-8" } + ) + .then(() => `${"✓".green} ${"metadata/mods.md".padEnd(20, " ").yellow} ${"-- deprecated --".gray}`) + .catch((err) => { + if (!err) return; + console.log(`${"✗".red} ${"metadata/mods.md".yellow} not written`); + return Promise.reject(err); + }) + ); + } + + promises.push( + fsp.writeFile( + path.join(cwd, "dist/metadata.json"), + prettier.format( + JSON.stringify({ + selectors: [...selectors].sort(), + mods: [...found].sort(), + spectrum: [...spectrum].sort(), + system: [...system].sort(), + a11y: [...highContrast].sort(), + }, null, 2), + { parser: "json" } + ), + { encoding: "utf-8" } + ).then(() => { + const stats = fs.statSync(path.join(cwd, "dist/metadata.json")); + return [ `${"✓".green} ${"dist/metadata.json".padEnd(20, " ").yellow} ${bytesToSize(stats.size).gray}`, `🔍 ${`${found.size}`.underline} modifiable custom propert${found.size === 1 ? "y" : "ies"}`, `🔍 ${`${selectors.size}`.underline} selector${found.size === 1 ? "" : "s"}`, - ]; - }).catch((err) => { - if (!err) return; - console.log(`${"✗".red} ${"dist/metadata.json".yellow} not written`); - return Promise.reject(err); - }) - ); - - return Promise.all(promises); + ]; + }).catch((err) => { + if (!err) return; + console.log(`${"✗".red} ${"dist/metadata.json".yellow} not written`); + return Promise.reject(err); + }) + ); + + return Promise.all(promises); } /** @@ -190,71 +190,68 @@ async function extractModifiers(filepath, { cwd } = {}) { * @returns {Promise<(string|void)[]>} Returns either the CSS content or void */ async function processCSS(content, input, output, { - cwd, - clean = false, - ...postCSSOptions + cwd, + ...postCSSOptions } = {}) { - if (!content) return Promise.reject(new Error(`This function requires content be provided`)); - - const { plugins, options } = await postcssrc( - { - cwd, - env: process.env.NODE_ENV ?? "development", - from: input, - to: output, - verbose: false, - ...postCSSOptions, - }, - __dirname // This is the path to the directory where the postcss.config.js lives - ); - - const result = await postcss(plugins).process(content, options); - - if (result.error) return Promise.reject(result.error); - - if (!result.css) return Promise.reject(new Error(`No CSS was generated from the provided content for ${relativePrint(input, { cwd })}`)); - - if (!fs.existsSync(path.dirname(output))) { - await fsp.mkdir(path.dirname(output), { recursive: true }).catch((err) => { - if (!err) return; - // @todo pretty print these are relative paths - console.log(`${"✗".red} problem making the ${relativePrint(path.dirname(output), { cwd }).yellow} directory`); - return Promise.reject(err); - }); - } - - const promises = []; - - if (result.css) { - // @todo update build to use prettier formatted results - // const formatted = prettier.format(result.css.trimStart(), { parser: "css", printWidth: 180 }); - const formatted = result.css.trimStart(); - promises.push( - fsp.writeFile(output, formatted).then(() => { - const stats = fs.statSync(output); - return `${"✓".green} ${relativePrint(output, { cwd }).padEnd(20, " ").yellow} ${bytesToSize(stats.size).gray}`; - }).catch((err) => { - if (!err) return; - console.log(`${"✗".red} ${relativePrint(output, { cwd }).yellow} not written`); - return Promise.reject(err); - }) - ); - } - - if (result.map) { - promises.push( - fsp.writeFile(`${output}.map`, result.map.toString().trimStart()).then(() => { - const stats = fs.statSync(output); - return `${"✓".green} ${relativePrint(`${output}.map`, { cwd }).padEnd(20, " ").yellow} ${bytesToSize(stats.size).gray}`; - }).catch((err) => { - if (!err) return; - console.log(`${"✗".red} ${relativePrint(`${output}.map`, { cwd }).yellow} not written`); - return Promise.reject(err); - }) - ); - } - - return Promise.all(promises); + if (!content) return Promise.reject(new Error("This function requires content be provided")); + + const { plugins, options } = await postcssrc( + { + cwd, + env: process.env.NODE_ENV ?? "development", + from: input, + to: output, + verbose: false, + ...postCSSOptions, + }, + __dirname // This is the path to the directory where the postcss.config.js lives + ); + + const result = await postcss(plugins).process(content, options); + + if (result.error) return Promise.reject(result.error); + + if (!result.css) return Promise.reject(new Error(`No CSS was generated from the provided content for ${relativePrint(input, { cwd })}`)); + + if (!fs.existsSync(path.dirname(output))) { + await fsp.mkdir(path.dirname(output), { recursive: true }).catch((err) => { + if (!err) return; + // @todo pretty print these are relative paths + console.log(`${"✗".red} problem making the ${relativePrint(path.dirname(output), { cwd }).yellow} directory`); + return Promise.reject(err); + }); + } + + const promises = []; + + if (result.css) { + const formatted = prettier.format(result.css, { parser: "css", printWidth: 500 }); + promises.push( + fsp.writeFile(output, formatted).then(() => { + const stats = fs.statSync(output); + return `${"✓".green} ${relativePrint(output, { cwd }).padEnd(20, " ").yellow} ${bytesToSize(stats.size).gray}`; + }).catch((err) => { + if (!err) return; + console.log(`${"✗".red} ${relativePrint(output, { cwd }).yellow} not written`); + return Promise.reject(err); + }) + ); + } + + if (result.map) { + promises.push( + fsp.writeFile(`${output}.map`, result.map.toString().trimStart()).then(() => { + const stats = fs.statSync(output); + return `${"✓".green} ${relativePrint(`${output}.map`, { cwd }).padEnd(20, " ").yellow} ${bytesToSize(stats.size).gray}`; + }).catch((err) => { + if (!err) return; + console.log(`${"✗".red} ${relativePrint(`${output}.map`, { cwd }).yellow} not written`); + return Promise.reject(err); + }) + ); + } + + return Promise.all(promises); } /** @@ -267,44 +264,44 @@ async function processCSS(content, input, output, { * @returns {Promise<{ content: string, input: string }[]>} */ async function fetchContent(globs = [], { - cwd, - shouldCombine = false, - ...fastGlobOptions + cwd, + shouldCombine = false, + ...fastGlobOptions } = {}) { - const files = await fg(globs, { - onlyFiles: true, - ...fastGlobOptions, - cwd, - }); - - if (!files.length) return Promise.resolve([]); - - const fileData = await Promise.all( - files.map(async (file) => ({ - input: path.join(cwd, file), - content: await fsp.readFile(path.join(cwd, file), "utf8") - })) - ); - - // Combine the content into 1 file; @todo do this in future using CSS imports - if (shouldCombine) { - let content = ""; - fileData.forEach(dataset => { - if (dataset.content) content += '\n\n' + dataset.content; - }); - - return Promise.resolve([{ - content, - input: fileData[0].input - }]); - } - - return Promise.all( - files.map(async (file) => ({ - content: await fsp.readFile(path.join(cwd, file), "utf8"), - input: file, - })) - ); + const files = await fg(globs, { + onlyFiles: true, + ...fastGlobOptions, + cwd, + }); + + if (!files.length) return Promise.resolve([]); + + const fileData = await Promise.all( + files.map(async (file) => ({ + input: path.join(cwd, file), + content: await fsp.readFile(path.join(cwd, file), "utf8") + })) + ); + + // Combine the content into 1 file; @todo do this in future using CSS imports + if (shouldCombine) { + let content = ""; + fileData.forEach(dataset => { + if (dataset.content) content += "\n\n" + dataset.content; + }); + + return Promise.resolve([{ + content, + input: fileData[0].input + }]); + } + + return Promise.all( + files.map(async (file) => ({ + content: await fsp.readFile(path.join(cwd, file), "utf8"), + input: file, + })) + ); } /** @@ -316,18 +313,18 @@ async function fetchContent(globs = [], { * @returns Promise */ async function copy(from, to, { cwd } = {}) { - if (!fs.existsSync(from)) return; - - const content = await fsp.readFile(from, { encoding: "utf-8" }); - if (!content) return; - /** @todo add support for injecting a deprecation notice as a comment after the copyright */ - return fsp.writeFile(to, content, { encoding: "utf-8" }) - .then(() => `${"✓".green} ${relativePrint(to, { cwd }).padEnd(20, " ").yellow} ${"-- deprecated --".gray}`) - .catch((err) => { - if (!err) return; - console.log(`${"✗".red} ${relativePrint(from, { cwd }).gray} could not be copied to ${relativePrint(to, { cwd }).yellow}`); - return Promise.reject(err); - }); + if (!fs.existsSync(from)) return; + + const content = await fsp.readFile(from, { encoding: "utf-8" }); + if (!content) return; + /** @todo add support for injecting a deprecation notice as a comment after the copyright */ + return fsp.writeFile(to, content, { encoding: "utf-8" }) + .then(() => `${"✓".green} ${relativePrint(to, { cwd }).padEnd(20, " ").yellow} ${"-- deprecated --".gray}`) + .catch((err) => { + if (!err) return; + console.log(`${"✗".red} ${relativePrint(from, { cwd }).gray} could not be copied to ${relativePrint(to, { cwd }).yellow}`); + return Promise.reject(err); + }); } /** @@ -337,10 +334,10 @@ async function copy(from, to, { cwd } = {}) { * @returns Promise */ async function cleanFolder({ cwd = process.cwd() } = {}) { - // Nothing to do if there's no input file - if (!fs.existsSync(path.join(cwd, "dist"))) return Promise.resolve(); + // Nothing to do if there's no input file + if (!fs.existsSync(path.join(cwd, "dist"))) return Promise.resolve(); - return fsp.rm(path.join(cwd, "dist"), { recursive: true, force: true }).then(() => fsp.mkdir(path.join(cwd, "dist"))); + return fsp.rm(path.join(cwd, "dist"), { recursive: true, force: true }).then(() => fsp.mkdir(path.join(cwd, "dist"))); } /** @@ -351,31 +348,31 @@ async function cleanFolder({ cwd = process.cwd() } = {}) { * @returns Promise */ async function build({ cwd = process.cwd(), clean = false } = {}) { - // Nothing to do if there's no input file - if (!fs.existsSync(path.join(cwd, "index.css"))) return; - - const content = await fsp.readFile(path.join(cwd, "index.css"), "utf8"); - - return Promise.all([ - // This was buildCSS - processCSS(content, path.join(cwd, "index.css"), path.join(cwd, "dist", "index.css"), { cwd, clean }) - .then(async (reports) => - Promise.all([ - // After building, extract the available modifiers - extractModifiers(path.join(cwd, "dist/index.css"), { cwd }), - // Copy index.css to index-vars.css for backwards compat, log as deprecated - copy(path.join(cwd, "dist/index.css"), path.join(cwd, "dist/index-vars.css"), { cwd }), - ]) - // Return the console output to be logged - .then(r => [r, ...reports]) - ), - // This was buildCSSWithoutThemes - processCSS(content, path.join(cwd, "index.css"), path.join(cwd, "dist/index-base.css"), { - cwd, - clean, - lint: false, - }), - ]); + // Nothing to do if there's no input file + if (!fs.existsSync(path.join(cwd, "index.css"))) return; + + const content = await fsp.readFile(path.join(cwd, "index.css"), "utf8"); + + return Promise.all([ + // This was buildCSS + processCSS(content, path.join(cwd, "index.css"), path.join(cwd, "dist", "index.css"), { cwd, clean }) + .then(async (reports) => + Promise.all([ + // After building, extract the available modifiers + extractModifiers(path.join(cwd, "dist/index.css"), { cwd }), + // Copy index.css to index-vars.css for backwards compat, log as deprecated + copy(path.join(cwd, "dist/index.css"), path.join(cwd, "dist/index-vars.css"), { cwd }), + ]) + // Return the console output to be logged + .then(r => [r, ...reports]) + ), + // This was buildCSSWithoutThemes + processCSS(content, path.join(cwd, "index.css"), path.join(cwd, "dist/index-base.css"), { + cwd, + clean, + lint: false, + }), + ]); } /** @@ -386,28 +383,28 @@ async function build({ cwd = process.cwd(), clean = false } = {}) { * @returns Promise */ async function buildThemes({ cwd = process.cwd(), clean = false } = {}) { - // This fetches the content of the files and returns an array of objects with the content and input paths - const contentData = await fetchContent(["themes/*.css"], { cwd, clean }); - - // Nothing to do if there's no content - if (!contentData || contentData.length === 0) return; - - return Promise.all( - contentData.map(async ({ content, input }) => { - const promises = [ - processCSS(content, path.join(cwd, input), path.join(cwd, "dist", input), { cwd, clean, lint: false }) - ]; - - // Additional processing for the express output because it includes both it and spectrum's content - if (path.basename(input, ".css") === "express") { - promises.push( - processCSS(content, path.join(cwd, input), path.join(cwd, "dist/index-theme.css"), { cwd, clean, lint: false }) - ); - } - - return Promise.all(promises); - }) - ); + // This fetches the content of the files and returns an array of objects with the content and input paths + const contentData = await fetchContent(["themes/*.css"], { cwd, clean }); + + // Nothing to do if there's no content + if (!contentData || contentData.length === 0) return; + + return Promise.all( + contentData.map(async ({ content, input }) => { + const promises = [ + processCSS(content, path.join(cwd, input), path.join(cwd, "dist", input), { cwd, clean, lint: false }) + ]; + + // Additional processing for the express output because it includes both it and spectrum's content + if (path.basename(input, ".css") === "express") { + promises.push( + processCSS(content, path.join(cwd, input), path.join(cwd, "dist/index-theme.css"), { cwd, clean, lint: false }) + ); + } + + return Promise.all(promises); + }) + ); } /** @@ -419,61 +416,62 @@ async function buildThemes({ cwd = process.cwd(), clean = false } = {}) { * @returns Promise */ async function main({ - componentName = process.env.NX_TASK_TARGET_PROJECT, - cwd, - clean, + componentName = process.env.NX_TASK_TARGET_PROJECT, + cwd, + clean, } = {}) { - if (!cwd && (componentName)) { - cwd = path.join(dirs.components, componentName); - } + if (!cwd && (componentName)) { + cwd = path.join(dirs.components, componentName); + } - if (!componentName) { - componentName = cwd ? getPackageFromPath(cwd) : process.env.NX_TASK_TARGET_PROJECT; - } + if (!componentName) { + componentName = cwd ? getPackageFromPath(cwd) : process.env.NX_TASK_TARGET_PROJECT; + } - if (typeof clean === "undefined") { - clean = process.env.NODE_ENV === "production"; - } + if (typeof clean === "undefined") { + clean = process.env.NODE_ENV === "production"; + } - const key = `[build] ${`@spectrum-css/${componentName}`.cyan}`; - console.time(key); + const key = `[build] ${`@spectrum-css/${componentName}`.cyan}`; + console.time(key); - return Promise.all([ - ...(clean ? [cleanFolder({ cwd })] : []), - build({ cwd, clean }), - buildThemes({ cwd, clean }), - ]).then((report) => { - const logs = report.flat(Infinity).filter(Boolean); + return Promise.all([ + ...(clean ? [cleanFolder({ cwd })] : []), + build({ cwd, clean }), + buildThemes({ cwd, clean }), + ]).then((report) => { + const logs = report.flat(Infinity).filter(Boolean); - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); + console.log(`\n\n${key} 🔨`); + console.log(`${"".padStart(30, "-")}`); - if (logs && logs.length > 0) { - logs.sort((a,) => { - if (a.includes('✓')) return -1; - if (a.includes('🔍')) return 0; - return 1; - }).forEach(log => console.log(log)); - } else console.log(`No assets created.`.gray) + if (logs && logs.length > 0) { + logs.sort((a,) => { + if (a.includes("✓")) return -1; + if (a.includes("🔍")) return 0; + return 1; + }).forEach(log => console.log(log)); + } + else console.log("No assets created.".gray); - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); + console.log(`${"".padStart(30, "-")}`); + console.timeEnd(key); + console.log(""); - }).catch((err) => { + }).catch((err) => { - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); + console.log(`\n\n${key} 🔨`); + console.log(`${"".padStart(30, "-")}`); - console.trace(err); + console.trace(err); - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); + console.log(`${"".padStart(30, "-")}`); + console.timeEnd(key); + console.log(""); - process.exit(1); - }); -}; + process.exit(1); + }); +} exports.processCSS = processCSS; exports.fetchContent = fetchContent; diff --git a/yarn.lock b/yarn.lock index e850c46a101..10ea8e5ddf5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10331,6 +10331,15 @@ __metadata: languageName: node linkType: hard +"css-declaration-sorter@npm:^7.2.0": + version: 7.2.0 + resolution: "css-declaration-sorter@npm:7.2.0" + peerDependencies: + postcss: ^8.0.9 + checksum: 10c0/d8516be94f8f2daa233ef021688b965c08161624cbf830a4d7ee1099429437c0ee124d35c91b1c659cfd891a68e8888aa941726dab12279bc114aaed60a94606 + languageName: node + linkType: hard + "css-functions-list@npm:^3.2.1": version: 3.2.1 resolution: "css-functions-list@npm:3.2.1" @@ -10460,6 +10469,63 @@ __metadata: languageName: node linkType: hard +"cssnano-preset-advanced@npm:^6.1.2": + version: 6.1.2 + resolution: "cssnano-preset-advanced@npm:6.1.2" + dependencies: + autoprefixer: "npm:^10.4.19" + browserslist: "npm:^4.23.0" + cssnano-preset-default: "npm:^6.1.2" + postcss-discard-unused: "npm:^6.0.5" + postcss-merge-idents: "npm:^6.0.3" + postcss-reduce-idents: "npm:^6.0.3" + postcss-zindex: "npm:^6.0.2" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/22d3ddab258e6b31e7e2e7c48712f023b60fadb2813929752dace0326e28cd250830b5420a33f81b01df52d2460cb5f999fff5907f58508809efe1a8a739a707 + languageName: node + linkType: hard + +"cssnano-preset-default@npm:^6.1.2": + version: 6.1.2 + resolution: "cssnano-preset-default@npm:6.1.2" + dependencies: + browserslist: "npm:^4.23.0" + css-declaration-sorter: "npm:^7.2.0" + cssnano-utils: "npm:^4.0.2" + postcss-calc: "npm:^9.0.1" + postcss-colormin: "npm:^6.1.0" + postcss-convert-values: "npm:^6.1.0" + postcss-discard-comments: "npm:^6.0.2" + postcss-discard-duplicates: "npm:^6.0.3" + postcss-discard-empty: "npm:^6.0.3" + postcss-discard-overridden: "npm:^6.0.2" + postcss-merge-longhand: "npm:^6.0.5" + postcss-merge-rules: "npm:^6.1.1" + postcss-minify-font-values: "npm:^6.1.0" + postcss-minify-gradients: "npm:^6.0.3" + postcss-minify-params: "npm:^6.1.0" + postcss-minify-selectors: "npm:^6.0.4" + postcss-normalize-charset: "npm:^6.0.2" + postcss-normalize-display-values: "npm:^6.0.2" + postcss-normalize-positions: "npm:^6.0.2" + postcss-normalize-repeat-style: "npm:^6.0.2" + postcss-normalize-string: "npm:^6.0.2" + postcss-normalize-timing-functions: "npm:^6.0.2" + postcss-normalize-unicode: "npm:^6.1.0" + postcss-normalize-url: "npm:^6.0.2" + postcss-normalize-whitespace: "npm:^6.0.2" + postcss-ordered-values: "npm:^6.0.2" + postcss-reduce-initial: "npm:^6.1.0" + postcss-reduce-transforms: "npm:^6.0.2" + postcss-svgo: "npm:^6.0.3" + postcss-unique-selectors: "npm:^6.0.4" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/af99021f936763850f5f35dc9e6a9dfb0da30856dea36e0420b011da2a447099471db2a5f3d1f5f52c0489da186caf9a439d8f048a80f82617077efb018333fa + languageName: node + linkType: hard + "cssnano-utils@npm:^4.0.2": version: 4.0.2 resolution: "cssnano-utils@npm:4.0.2" @@ -10469,6 +10535,18 @@ __metadata: languageName: node linkType: hard +"cssnano@npm:^6.1.2": + version: 6.1.2 + resolution: "cssnano@npm:6.1.2" + dependencies: + cssnano-preset-default: "npm:^6.1.2" + lilconfig: "npm:^3.1.1" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/4df0dc0389b34b38acb09b7cfb07267b0eda95349c6d5e9b7666acc7200bb33359650869a60168e9d878298b05f4ad2c7f070815c90551720a3f4e1037f79691 + languageName: node + linkType: hard + "csso@npm:^5.0.5": version: 5.0.5 resolution: "csso@npm:5.0.5" @@ -15198,7 +15276,7 @@ __metadata: languageName: node linkType: hard -"lilconfig@npm:^3.0.0": +"lilconfig@npm:^3.0.0, lilconfig@npm:^3.1.1": version: 3.1.1 resolution: "lilconfig@npm:3.1.1" checksum: 10c0/311b559794546894e3fe176663427326026c1c644145be9e8041c58e268aa9328799b8dfe7e4dd8c6a4ae305feae95a1c9e007db3569f35b42b6e1bc8274754c @@ -17838,6 +17916,18 @@ __metadata: languageName: node linkType: hard +"postcss-calc@npm:^9.0.1": + version: 9.0.1 + resolution: "postcss-calc@npm:9.0.1" + dependencies: + postcss-selector-parser: "npm:^6.0.11" + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.2.2 + checksum: 10c0/e0df07337162dbcaac5d6e030c7fd289e21da8766a9daca5d6b2b3c8094bb524ae5d74c70048ea7fe5fe4960ce048c60ac97922d917c3bbff34f58e9d2b0eb0e + languageName: node + linkType: hard + "postcss-clamp@npm:^4.1.0": version: 4.1.0 resolution: "postcss-clamp@npm:4.1.0" @@ -17912,6 +18002,20 @@ __metadata: languageName: node linkType: hard +"postcss-colormin@npm:^6.1.0": + version: 6.1.0 + resolution: "postcss-colormin@npm:6.1.0" + dependencies: + browserslist: "npm:^4.23.0" + caniuse-api: "npm:^3.0.0" + colord: "npm:^2.9.3" + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/0802963fa0d8f2fe408b2e088117670f5303c69a58c135f0ecf0e5ceff69e95e87111b22c4e29c9adb2f69aa8d3bc175f4e8e8708eeb99c9ffc36c17064de427 + languageName: node + linkType: hard + "postcss-combine-duplicated-selectors@npm:^10.0.3": version: 10.0.3 resolution: "postcss-combine-duplicated-selectors@npm:10.0.3" @@ -17932,6 +18036,18 @@ __metadata: languageName: unknown linkType: soft +"postcss-convert-values@npm:^6.1.0": + version: 6.1.0 + resolution: "postcss-convert-values@npm:6.1.0" + dependencies: + browserslist: "npm:^4.23.0" + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/a80066965cb58fe8fcaf79f306b32c83fc678e1f0678e43f4db3e9fee06eed6db92cf30631ad348a17492769d44757400493c91a33ee865ee8dedea9234a11f5 + languageName: node + linkType: hard + "postcss-custom-media@npm:^10.0.4": version: 10.0.4 resolution: "postcss-custom-media@npm:10.0.4" @@ -18007,6 +18123,15 @@ __metadata: languageName: node linkType: hard +"postcss-discard-duplicates@npm:^6.0.3": + version: 6.0.3 + resolution: "postcss-discard-duplicates@npm:6.0.3" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/24d2f00e54668f2837eb38a64b1751d7a4a73b2752f9749e61eb728f1fae837984bc2b339f7f5207aff5f66f72551253489114b59b9ba21782072677a81d7d1b + languageName: node + linkType: hard + "postcss-discard-empty@npm:^6.0.3": version: 6.0.3 resolution: "postcss-discard-empty@npm:6.0.3" @@ -18016,6 +18141,26 @@ __metadata: languageName: node linkType: hard +"postcss-discard-overridden@npm:^6.0.2": + version: 6.0.2 + resolution: "postcss-discard-overridden@npm:6.0.2" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/fda70ef3cd4cb508369c5bbbae44d7760c40ec9f2e65df1cd1b6e0314317fb1d25ae7f64987ca84e66889c1e9d1862487a6ce391c159dfe04d536597bfc5030d + languageName: node + linkType: hard + +"postcss-discard-unused@npm:^6.0.5": + version: 6.0.5 + resolution: "postcss-discard-unused@npm:6.0.5" + dependencies: + postcss-selector-parser: "npm:^6.0.16" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/fca82f17395a7fcc78eab4e03dfb05958beb240c10cacb3836b832c6ea99f5259980c70890a9b7d8b67adf8071b61f3fcf1b432c7a116397aaf67909366da5cc + languageName: node + linkType: hard + "postcss-double-position-gradients@npm:^5.0.6": version: 5.0.6 resolution: "postcss-double-position-gradients@npm:5.0.6" @@ -18187,6 +18332,30 @@ __metadata: languageName: node linkType: hard +"postcss-merge-idents@npm:^6.0.3": + version: 6.0.3 + resolution: "postcss-merge-idents@npm:6.0.3" + dependencies: + cssnano-utils: "npm:^4.0.2" + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/fdb51d971df33218bd5fdd9619e5a4d854e23affcea51f96bf4391260cb8d0bec937854582fa9a19bde1fa1b2a43fa5a2f179da23a3adeb8e8d292a4749a8ed7 + languageName: node + linkType: hard + +"postcss-merge-longhand@npm:^6.0.5": + version: 6.0.5 + resolution: "postcss-merge-longhand@npm:6.0.5" + dependencies: + postcss-value-parser: "npm:^4.2.0" + stylehacks: "npm:^6.1.1" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/5a223a7f698c05ab42e9997108a7ff27ea1e0c33a11a353d65a04fc89c3b5b750b9e749550d76b6406329117a055adfc79dde7fee48dca5c8e167a2854ae3fea + languageName: node + linkType: hard + "postcss-merge-rules@npm:^6.1.1": version: 6.1.1 resolution: "postcss-merge-rules@npm:6.1.1" @@ -18201,6 +18370,54 @@ __metadata: languageName: node linkType: hard +"postcss-minify-font-values@npm:^6.1.0": + version: 6.1.0 + resolution: "postcss-minify-font-values@npm:6.1.0" + dependencies: + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/0d6567170c22a7db42096b5eac298f041614890fbe01759a9fa5ccda432f2bb09efd399d92c11bf6675ae13ccd259db4602fad3c358317dee421df5f7ab0a003 + languageName: node + linkType: hard + +"postcss-minify-gradients@npm:^6.0.3": + version: 6.0.3 + resolution: "postcss-minify-gradients@npm:6.0.3" + dependencies: + colord: "npm:^2.9.3" + cssnano-utils: "npm:^4.0.2" + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/7fcbcec94fe5455b89fe1b424a451198e60e0407c894bbacdc062d9fdef2f8571b483b5c3bb17f22d2f1249431251b2de22e1e4e8b0614d10624f8ee6e71afd2 + languageName: node + linkType: hard + +"postcss-minify-params@npm:^6.1.0": + version: 6.1.0 + resolution: "postcss-minify-params@npm:6.1.0" + dependencies: + browserslist: "npm:^4.23.0" + cssnano-utils: "npm:^4.0.2" + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/e5c38c3e5fb42e2ca165764f983716e57d854a63a477f7389ccc94cd2ab8123707006613bd7f29acc6eafd296fff513aa6d869c98ac52590f886d641cb21a59e + languageName: node + linkType: hard + +"postcss-minify-selectors@npm:^6.0.4": + version: 6.0.4 + resolution: "postcss-minify-selectors@npm:6.0.4" + dependencies: + postcss-selector-parser: "npm:^6.0.16" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/695ec2e1e3a7812b0cabe1105d0ed491760be3d8e9433914fb5af1fc30a84e6dc24089cd31b7e300de620b8e7adf806526c1acf8dd14077a7d1d2820c60a327c + languageName: node + linkType: hard + "postcss-modules-extract-imports@npm:^3.0.0": version: 3.1.0 resolution: "postcss-modules-extract-imports@npm:3.1.0" @@ -18258,6 +18475,104 @@ __metadata: languageName: node linkType: hard +"postcss-normalize-charset@npm:^6.0.2": + version: 6.0.2 + resolution: "postcss-normalize-charset@npm:6.0.2" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/af32a3b4cf94163d728b8aa935b2494c9f69fbc96a33b35f67ae15dbdef7fcc8732569df97cbaaf20ca6c0103c39adad0cfce2ba07ffed283796787f6c36f410 + languageName: node + linkType: hard + +"postcss-normalize-display-values@npm:^6.0.2": + version: 6.0.2 + resolution: "postcss-normalize-display-values@npm:6.0.2" + dependencies: + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/782761850c7e697fdb6c3ff53076de716a71b60f9e835efb2f7ef238de347c88b5d55f0d43cf5c608e1ee58de65360e3d9fccd5f20774bba08ded7c87d8a5651 + languageName: node + linkType: hard + +"postcss-normalize-positions@npm:^6.0.2": + version: 6.0.2 + resolution: "postcss-normalize-positions@npm:6.0.2" + dependencies: + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/9fdd42a47226bbda5f68774f3c4c3a90eb4fa708aef5a997c6a52fe6cac06585c9774038fe3bc1aa86a203c29223b8d8db6ebe7580c1aa293154f2b48db0b038 + languageName: node + linkType: hard + +"postcss-normalize-repeat-style@npm:^6.0.2": + version: 6.0.2 + resolution: "postcss-normalize-repeat-style@npm:6.0.2" + dependencies: + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/9133ccbdf1286920c1cd0d01c1c5fa0bd3251b717f2f3e47d691dcc44978ac1dc419d20d9ae5428bd48ee542059e66b823ba699356f5968ccced5606c7c7ca34 + languageName: node + linkType: hard + +"postcss-normalize-string@npm:^6.0.2": + version: 6.0.2 + resolution: "postcss-normalize-string@npm:6.0.2" + dependencies: + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/fecc2d52c4029b24fecf2ca2fb45df5dbdf9f35012194ad4ea80bc7be3252cdcb21a0976400902320595aa6178f2cc625cc804c6b6740aef6efa42105973a205 + languageName: node + linkType: hard + +"postcss-normalize-timing-functions@npm:^6.0.2": + version: 6.0.2 + resolution: "postcss-normalize-timing-functions@npm:6.0.2" + dependencies: + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/a22af0b3374704e59ae70bbbcc66b7029137e284f04e30a2ad548818d1540d6c1ed748dd8f689b9b6df5c1064085a00ad07b6f7e25ffaad49d4e661b616cdeae + languageName: node + linkType: hard + +"postcss-normalize-unicode@npm:^6.1.0": + version: 6.1.0 + resolution: "postcss-normalize-unicode@npm:6.1.0" + dependencies: + browserslist: "npm:^4.23.0" + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/ff5746670d94dd97b49a0955c3c71ff516fb4f54bbae257f877d179bacc44a62e50a0fd6e7ddf959f2ca35c335de4266b0c275d880bb57ad7827189339ab1582 + languageName: node + linkType: hard + +"postcss-normalize-url@npm:^6.0.2": + version: 6.0.2 + resolution: "postcss-normalize-url@npm:6.0.2" + dependencies: + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/4718f1c0657788d2c560b340ee8e0a4eb3eb053eba6fbbf489e9a6e739b4c5f9ce1957f54bd03497c50a1f39962bf6ab9ff6ba4976b69dd160f6afd1670d69b7 + languageName: node + linkType: hard + +"postcss-normalize-whitespace@npm:^6.0.2": + version: 6.0.2 + resolution: "postcss-normalize-whitespace@npm:6.0.2" + dependencies: + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/d5275a88e29a894aeb83a2a833e816d2456dbf3f39961628df596ce205dcc4895186a023812ff691945e0804241ccc53e520d16591b5812288474b474bbaf652 + languageName: node + linkType: hard + "postcss-opacity-percentage@npm:^2.0.0": version: 2.0.0 resolution: "postcss-opacity-percentage@npm:2.0.0" @@ -18267,6 +18582,18 @@ __metadata: languageName: node linkType: hard +"postcss-ordered-values@npm:^6.0.2": + version: 6.0.2 + resolution: "postcss-ordered-values@npm:6.0.2" + dependencies: + cssnano-utils: "npm:^4.0.2" + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/aece23a289228aa804217a85f8da198d22b9123f02ca1310b81834af380d6fbe115e4300683599b4a2ab7f1c6a1dbd6789724c47c38e2b0a3774f2ea4b4f0963 + languageName: node + linkType: hard + "postcss-overflow-shorthand@npm:^5.0.1": version: 5.0.1 resolution: "postcss-overflow-shorthand@npm:5.0.1" @@ -18388,6 +18715,40 @@ __metadata: languageName: node linkType: hard +"postcss-reduce-idents@npm:^6.0.3": + version: 6.0.3 + resolution: "postcss-reduce-idents@npm:6.0.3" + dependencies: + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/d9f9209e52ebb3d1d7feefc0be24fc74792e064e0fdec99554f050c6b882c61073d5d40986c545061b30e5ead881615e92c965dc765d8d83b2dec10d6a664e1f + languageName: node + linkType: hard + +"postcss-reduce-initial@npm:^6.1.0": + version: 6.1.0 + resolution: "postcss-reduce-initial@npm:6.1.0" + dependencies: + browserslist: "npm:^4.23.0" + caniuse-api: "npm:^3.0.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/a8f28cf51ce9a1b9423cce1a01c1d7cbee90125930ec36435a0073e73aef402d90affe2fd3600c964b679cf738869fda447b95a9acce74414e9d67d5c6ba8646 + languageName: node + linkType: hard + +"postcss-reduce-transforms@npm:^6.0.2": + version: 6.0.2 + resolution: "postcss-reduce-transforms@npm:6.0.2" + dependencies: + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/755ef27b3d083f586ac831f0c611a66e76f504d27e2100dc7674f6b86afad597901b4520cb889fe58ca70e852aa7fd0c0acb69a63d39dfe6a95860b472394e7c + languageName: node + linkType: hard + "postcss-replace-overflow-wrap@npm:^4.0.0": version: 4.0.0 resolution: "postcss-replace-overflow-wrap@npm:4.0.0" @@ -18456,7 +18817,7 @@ __metadata: languageName: node linkType: hard -"postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.0.16, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4": +"postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.0.16, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4": version: 6.0.16 resolution: "postcss-selector-parser@npm:6.0.16" dependencies: @@ -18483,6 +18844,29 @@ __metadata: languageName: unknown linkType: soft +"postcss-svgo@npm:^6.0.3": + version: 6.0.3 + resolution: "postcss-svgo@npm:6.0.3" + dependencies: + postcss-value-parser: "npm:^4.2.0" + svgo: "npm:^3.2.0" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/994b15a88cbb411f32cfa98957faa5623c76f2d75fede51f5f47238f06b367ebe59c204fecbdaf21ccb9e727239a4b290087e04c502392658a0c881ddfbd61f2 + languageName: node + linkType: hard + +"postcss-unique-selectors@npm:^6.0.4": + version: 6.0.4 + resolution: "postcss-unique-selectors@npm:6.0.4" + dependencies: + postcss-selector-parser: "npm:^6.0.16" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/bfb99d8a7c675c93f2e65c9d9d563477bfd46fdce9e2727d42d57982b31ccbaaf944e8034bfbefe48b3119e77fba7eb1b181c19b91cb3a5448058fa66a7c9ae9 + languageName: node + linkType: hard + "postcss-value-parser@npm:^4.0.0, postcss-value-parser@npm:^4.1.0, postcss-value-parser@npm:^4.2.0": version: 4.2.0 resolution: "postcss-value-parser@npm:4.2.0" @@ -18490,6 +18874,15 @@ __metadata: languageName: node linkType: hard +"postcss-zindex@npm:^6.0.2": + version: 6.0.2 + resolution: "postcss-zindex@npm:6.0.2" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/346291703e1f2dd954144d2bb251713dad6ae10e8aa05c3873dee2fc7a30d72da7866bec060abd932b9b839bc1495f73d813dde5312750a69d7ad33c435ce7ea + languageName: node + linkType: hard + "postcss@npm:^5.0.4": version: 5.2.18 resolution: "postcss@npm:5.2.18" @@ -20483,6 +20876,9 @@ __metadata: colors: "npm:^1.4.0" conventional-changelog-spectrum: "npm:^1.0.2" cross-env: "npm:^7.0.3" + css-declaration-sorter: "npm:^7.2.0" + cssnano: "npm:^6.1.2" + cssnano-preset-advanced: "npm:^6.1.2" diff: "npm:^5.1.0" diff2html: "npm:^3.4.45" eslint: "npm:^8.57.0" @@ -20503,8 +20899,6 @@ __metadata: pajv: "npm:^1.2.0" postcss: "npm:^8.4.35" postcss-combininator: "npm:^2.0.0" - postcss-discard-comments: "npm:^6.0.2" - postcss-discard-empty: "npm:^6.0.3" postcss-extend: "npm:^1.0.5" postcss-hover-media-feature: "npm:^1.0.2" postcss-import: "npm:^16.0.1" @@ -20981,6 +21375,18 @@ __metadata: languageName: node linkType: hard +"stylehacks@npm:^6.1.1": + version: 6.1.1 + resolution: "stylehacks@npm:6.1.1" + dependencies: + browserslist: "npm:^4.23.0" + postcss-selector-parser: "npm:^6.0.16" + peerDependencies: + postcss: ^8.4.31 + checksum: 10c0/2dd2bccfd8311ff71492e63a7b8b86c3d7b1fff55d4ba5a2357aff97743e633d351cdc2f5ae3c0057637d00dab4ef5fc5b218a1b370e4585a41df22b5a5128be + languageName: node + linkType: hard + "stylelint-config-clean-order@npm:^5.4.1": version: 5.4.2 resolution: "stylelint-config-clean-order@npm:5.4.2"