diff --git a/components/accordion/index.css b/components/accordion/index.css index 66f3f082c0..682dbada52 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -14,27 +14,156 @@ @import "./themes/spectrum-two.css"; .spectrum-Accordion { - /** @note used for internal calculation on itemHeader and iconContainer */ + --spectrum-accordion-item-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); + --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); + --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text); + --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator); + --spectrum-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text); + --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium); + --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium); + --spectrum-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content); + --spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content); + --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75); + + /* Text header */ + --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack); + --spectrum-accordion-item-header-font-weight: var(--spectrum-bold-font-weight); + --spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); + --spectrum-accordion-item-header-line-height: 1.25; + + /* Text body */ + --spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack); + --spectrum-accordion-item-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-accordion-item-content-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s); + --spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100); + + /* Colors */ + --spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default)); + --spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover)); + --spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down)); + --spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus)); + + /* Label */ + --spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color); + --spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); + + /* Body */ + --spectrum-accordion-item-content-color: var(--spectrum-body-color); + + /* Focus indicator */ + --spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color); + --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)))) ); - display: block; - list-style: none; - padding: 0; - margin: 0; + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } &:lang(ja), &:lang(zh), &:lang(ko) { - --spectrum-accordion-item-header-line-height: var(--spectrum-accordion-item-header-line-height-cjk); - --spectrum-accordion-item-content-line-height: var(--spectrum-accordion-item-content-line-height-cjk); + --spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100); } +} - &:dir(rtl) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); +.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--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--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--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--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--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--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--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--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-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--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-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--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-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 { + display: block; + list-style: none; + padding: 0; + margin: 0; } .spectrum-Accordion-item { @@ -55,42 +184,6 @@ 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)); - - &.is-open { - .spectrum-Accordion-itemHeader:hover { - background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover)); - } - - > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator, - > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator { - transform: var(--spectrum-logical-rotation,) rotate(90deg); - } - - > .spectrum-Accordion-itemContent { - display: block; - } - } - - &.is-disabled { - .spectrum-Accordion-itemHeader { - cursor: default; - - &, - &:hover, - &:focus-visible { - 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)); - } - } - - .spectrum-Accordion-itemContent { - color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color)); - } - } } .spectrum-Accordion-itemHeading { @@ -164,7 +257,6 @@ 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)); @@ -192,6 +284,33 @@ } } +.spectrum-Accordion-item { + &.is-open { + .spectrum-Accordion-itemHeader:hover { + background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover)); + } + } +} + +.spectrum-Accordion-item.is-disabled { + .spectrum-Accordion-itemHeader { + &, + &:hover, + &:focus-visible { + 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)); + } + } + + .spectrum-Accordion-itemContent { + color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color)); + } +} + @media (forced-colors: active) { .spectrum-Accordion-itemHeader { &::after { @@ -203,3 +322,22 @@ } } } + +.spectrum-Accordion-item { + &.is-open { + > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator, + > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator { + transform: var(--spectrum-logical-rotation,) rotate(90deg); + } + + > .spectrum-Accordion-itemContent { + display: block; + } + } + + &.is-disabled { + .spectrum-Accordion-itemHeader { + cursor: default; + } + } +} diff --git a/components/accordion/metadata/metadata.json b/components/accordion/metadata/metadata.json index 5dafeb2d2c..ff47de4a43 100644 --- a/components/accordion/metadata/metadata.json +++ b/components/accordion/metadata/metadata.json @@ -2,6 +2,17 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Accordion", + ".spectrum-Accordion--compact", + ".spectrum-Accordion--compact.spectrum-Accordion--sizeL", + ".spectrum-Accordion--compact.spectrum-Accordion--sizeS", + ".spectrum-Accordion--compact.spectrum-Accordion--sizeXL", + ".spectrum-Accordion--sizeL", + ".spectrum-Accordion--sizeS", + ".spectrum-Accordion--sizeXL", + ".spectrum-Accordion--spacious", + ".spectrum-Accordion--spacious.spectrum-Accordion--sizeL", + ".spectrum-Accordion--spacious.spectrum-Accordion--sizeS", + ".spectrum-Accordion--spacious.spectrum-Accordion--sizeXL", ".spectrum-Accordion-item", ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent", ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader", @@ -25,20 +36,6 @@ ".spectrum-Accordion-itemHeading", ".spectrum-Accordion-itemIconContainer", ".spectrum-Accordion-itemIconContainer:dir(rtl)", - ".spectrum-Accordion.spectrum-Accordion--compact", - ".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeL", - ".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeM", - ".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeS", - ".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeXL", - ".spectrum-Accordion.spectrum-Accordion--sizeL", - ".spectrum-Accordion.spectrum-Accordion--sizeM", - ".spectrum-Accordion.spectrum-Accordion--sizeS", - ".spectrum-Accordion.spectrum-Accordion--sizeXL", - ".spectrum-Accordion.spectrum-Accordion--spacious", - ".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeL", - ".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeM", - ".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeS", - ".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeXL", ".spectrum-Accordion:dir(rtl)", ".spectrum-Accordion:lang(ja)", ".spectrum-Accordion:lang(ko)", @@ -128,7 +125,6 @@ "--spectrum-accordion-item-content-font-style", "--spectrum-accordion-item-content-font-weight", "--spectrum-accordion-item-content-line-height", - "--spectrum-accordion-item-content-line-height-cjk", "--spectrum-accordion-item-header-bottom-to-text-space", "--spectrum-accordion-item-header-color-default", "--spectrum-accordion-item-header-color-down", @@ -140,7 +136,6 @@ "--spectrum-accordion-item-header-font-style", "--spectrum-accordion-item-header-font-weight", "--spectrum-accordion-item-header-line-height", - "--spectrum-accordion-item-header-line-height-cjk", "--spectrum-accordion-item-header-top-to-text-space", "--spectrum-accordion-item-height", "--spectrum-accordion-item-width", @@ -203,105 +198,7 @@ "--spectrum-neutral-content-color-key-focus", "--spectrum-sans-font-family-stack" ], - "system-theme": [ - "--system-accordion-background-color-default", - "--system-accordion-background-color-down", - "--system-accordion-background-color-hover", - "--system-accordion-background-color-key-focus", - "--system-accordion-compact-item-header-bottom-to-text-space", - "--system-accordion-compact-item-header-top-to-text-space", - "--system-accordion-compact-item-height", - "--system-accordion-compact-size-l-item-header-bottom-to-text-space", - "--system-accordion-compact-size-l-item-header-top-to-text-space", - "--system-accordion-compact-size-l-item-height", - "--system-accordion-compact-size-m-item-header-bottom-to-text-space", - "--system-accordion-compact-size-m-item-header-top-to-text-space", - "--system-accordion-compact-size-m-item-height", - "--system-accordion-compact-size-s-item-header-bottom-to-text-space", - "--system-accordion-compact-size-s-item-header-top-to-text-space", - "--system-accordion-compact-size-s-item-height", - "--system-accordion-compact-size-xl-item-header-bottom-to-text-space", - "--system-accordion-compact-size-xl-item-header-top-to-text-space", - "--system-accordion-compact-size-xl-item-height", - "--system-accordion-component-edge-to-text", - "--system-accordion-corner-radius", - "--system-accordion-disclosure-indicator-height", - "--system-accordion-disclosure-indicator-to-text-space", - "--system-accordion-divider-color", - "--system-accordion-edge-to-disclosure-indicator-space", - "--system-accordion-edge-to-text-space", - "--system-accordion-focus-indicator-color", - "--system-accordion-focus-indicator-gap", - "--system-accordion-focus-indicator-thickness", - "--system-accordion-item-content-area-bottom-to-content", - "--system-accordion-item-content-area-top-to-content", - "--system-accordion-item-content-color", - "--system-accordion-item-content-disabled-color", - "--system-accordion-item-content-font", - "--system-accordion-item-content-font-size", - "--system-accordion-item-content-font-style", - "--system-accordion-item-content-font-weight", - "--system-accordion-item-content-line-height", - "--system-accordion-item-content-line-height-cjk", - "--system-accordion-item-header-bottom-to-text-space", - "--system-accordion-item-header-color-default", - "--system-accordion-item-header-color-down", - "--system-accordion-item-header-color-hover", - "--system-accordion-item-header-color-key-focus", - "--system-accordion-item-header-disabled-color", - "--system-accordion-item-header-font", - "--system-accordion-item-header-font-size", - "--system-accordion-item-header-font-style", - "--system-accordion-item-header-font-weight", - "--system-accordion-item-header-line-height", - "--system-accordion-item-header-line-height-cjk", - "--system-accordion-item-header-top-to-text-space", - "--system-accordion-item-height", - "--system-accordion-item-width", - "--system-accordion-size-l-component-edge-to-text", - "--system-accordion-size-l-disclosure-indicator-height", - "--system-accordion-size-l-item-content-font-size", - "--system-accordion-size-l-item-header-bottom-to-text-space", - "--system-accordion-size-l-item-header-font-size", - "--system-accordion-size-l-item-header-top-to-text-space", - "--system-accordion-size-l-item-height", - "--system-accordion-size-m-component-edge-to-text", - "--system-accordion-size-m-disclosure-indicator-height", - "--system-accordion-size-m-item-content-font-size", - "--system-accordion-size-m-item-header-bottom-to-text-space", - "--system-accordion-size-m-item-header-font-size", - "--system-accordion-size-m-item-header-top-to-text-space", - "--system-accordion-size-m-item-height", - "--system-accordion-size-s-component-edge-to-text", - "--system-accordion-size-s-disclosure-indicator-height", - "--system-accordion-size-s-item-content-font-size", - "--system-accordion-size-s-item-header-bottom-to-text-space", - "--system-accordion-size-s-item-header-font-size", - "--system-accordion-size-s-item-header-top-to-text-space", - "--system-accordion-size-s-item-height", - "--system-accordion-size-xl-component-edge-to-text", - "--system-accordion-size-xl-disclosure-indicator-height", - "--system-accordion-size-xl-item-content-font-size", - "--system-accordion-size-xl-item-header-bottom-to-text-space", - "--system-accordion-size-xl-item-header-font-size", - "--system-accordion-size-xl-item-header-top-to-text-space", - "--system-accordion-size-xl-item-height", - "--system-accordion-spacious-item-header-bottom-to-text-space", - "--system-accordion-spacious-item-header-line-height", - "--system-accordion-spacious-item-header-top-to-text-space", - "--system-accordion-spacious-size-l-item-header-bottom-to-text-space", - "--system-accordion-spacious-size-l-item-header-line-height", - "--system-accordion-spacious-size-l-item-header-top-to-text-space", - "--system-accordion-spacious-size-m-item-header-bottom-to-text-space", - "--system-accordion-spacious-size-m-item-header-line-height", - "--system-accordion-spacious-size-m-item-header-top-to-text-space", - "--system-accordion-spacious-size-s-item-header-bottom-to-text-space", - "--system-accordion-spacious-size-s-item-header-line-height", - "--system-accordion-spacious-size-s-item-header-top-to-text-space", - "--system-accordion-spacious-size-xl-item-header-bottom-to-text-space", - "--system-accordion-spacious-size-xl-item-header-line-height", - "--system-accordion-spacious-size-xl-item-header-top-to-text-space" - ], + "system-theme": ["--system-accordion-divider-color"], "passthroughs": [], "high-contrast": [] } diff --git a/components/accordion/themes/spectrum-two.css b/components/accordion/themes/spectrum-two.css index 3a1538aa0d..867faa6692 100644 --- a/components/accordion/themes/spectrum-two.css +++ b/components/accordion/themes/spectrum-two.css @@ -13,148 +13,6 @@ @container style(--system: spectrum) { .spectrum-Accordion { - --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); - --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-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content); - --spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content); - - /* 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-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-line-height: var(--spectrum-line-height-100); - - /* Colors */ - --spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default)); - --spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover)); - --spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down)); - --spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus)); - - /* Label */ - --spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color); - --spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); - - /* Body */ - --spectrum-accordion-item-content-color: var(--spectrum-body-color); - - /* Focus indicator */ - --spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color); - - /* Divider */ --spectrum-accordion-divider-color: var(--spectrum-gray-200); - - --spectrum-accordion-item-header-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-accordion-item-content-line-height-cjk: var(--spectrum-cjk-line-height-100); - - &, - &.spectrum-Accordion--sizeM { - --spectrum-accordion-item-height: var(--spectrum-component-height-200); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s); - --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--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-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--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-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--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-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--compact { - &.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--sizeM { - --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--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--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--spacious { - &.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--sizeM { - --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--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--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); - } - } } } diff --git a/components/actionbar/index.css b/components/actionbar/index.css index 2c32111154..b4f040d3be 100644 --- a/components/actionbar/index.css +++ b/components/actionbar/index.css @@ -13,6 +13,49 @@ @import "./themes/spectrum-two.css"; +.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); + + /* 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); + + /* 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); + } +} + /* windows high contrast mode */ @media (forced-colors: active) { .spectrum-ActionBar { diff --git a/components/actionbar/metadata/metadata.json b/components/actionbar/metadata/metadata.json index 5667273c04..3632db90bf 100644 --- a/components/actionbar/metadata/metadata.json +++ b/components/actionbar/metadata/metadata.json @@ -14,7 +14,10 @@ ".spectrum-ActionBar--fixed", ".spectrum-ActionBar--flexible .spectrum-ActionBar-popover", ".spectrum-ActionBar--sticky", - ".spectrum-ActionBar.is-open" + ".spectrum-ActionBar.is-open", + ".spectrum-ActionBar:lang(ja)", + ".spectrum-ActionBar:lang(ko)", + ".spectrum-ActionBar:lang(zh)" ], "modifiers": [ "--mod-actionbar-corner-radius", @@ -86,28 +89,8 @@ "--spectrum-white" ], "system-theme": [ - "--system-action-bar-corner-radius", - "--system-action-bar-emphasized-background-color", - "--system-action-bar-emphasized-item-counter-color", - "--system-action-bar-height", - "--system-action-bar-item-counter-color", - "--system-action-bar-item-counter-font-size", - "--system-action-bar-item-counter-line-height", - "--system-action-bar-item-counter-line-height-cjk", "--system-action-bar-popover-background-color", - "--system-action-bar-popover-border-color", - "--system-action-bar-shadow-blur", - "--system-action-bar-shadow-color", - "--system-action-bar-shadow-horizontal", - "--system-action-bar-shadow-vertical", - "--system-action-bar-spacing-action-group-end", - "--system-action-bar-spacing-action-group-top", - "--system-action-bar-spacing-close-button-end", - "--system-action-bar-spacing-close-button-start", - "--system-action-bar-spacing-close-button-top", - "--system-action-bar-spacing-item-counter-end", - "--system-action-bar-spacing-item-counter-top", - "--system-action-bar-spacing-outer-edge" + "--system-action-bar-popover-border-color" ], "passthroughs": [], "high-contrast": ["--highcontrast-actionbar-popover-border-color"] diff --git a/components/actionbar/themes/spectrum-two.css b/components/actionbar/themes/spectrum-two.css index 598114e335..157c2dc929 100644 --- a/components/actionbar/themes/spectrum-two.css +++ b/components/actionbar/themes/spectrum-two.css @@ -13,45 +13,8 @@ @container style(--system: spectrum) { .spectrum-ActionBar { - --spectrum-actionbar-height: var(--spectrum-action-bar-height); - --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100); - - /* item counter field label */ - --spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-100); - --spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100); - --spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default); - - /* cjk language support for item counter */ - --spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100); - /* colors - applied to popover */ --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25); --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); - - /* emphasized variation colors */ - --spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default); - --spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white); - - /* spacing of action bar bottom and horizontal outer edge */ - --spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300); - - /* spacing of close button */ - --spectrum-actionbar-spacing-close-button-top: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-close-button-start: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-close-button-end: var(--spectrum-spacing-75); - - /* spacing of item counter field label */ - --spectrum-actionbar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter); - --spectrum-actionbar-spacing-item-counter-end: var(--spectrum-spacing-400); - - /* spacing of action group */ - --spectrum-actionbar-spacing-action-group-top: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-action-group-end: var(--spectrum-spacing-100); - - /* drop shadow */ - --spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-x); - --spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-y); - --spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-blur); - --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color); } } diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 1201af0c86..5730c14420 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -14,6 +14,115 @@ @import "@spectrum-css/commons/basebutton.css"; @import "./themes/spectrum-two.css"; +.spectrum-ActionButton { + --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100); + --spectrum-actionbutton-border-width: var(--spectrum-border-width-100); + + --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-actionbutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)); + + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } + + &.is-selected { + --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); + --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); + --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); + --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus)); + + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-50)); + + &.spectrum-ActionButton--emphasized { + --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); + --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); + --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); + --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); + + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); + } + } +} + +.spectrum-ActionButton--sizeXS { + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-50) * 2) + var(--spectrum-workflow-icon-size-50)); + --spectrum-actionbutton-height: var(--spectrum-component-height-50); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-50); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width)); +} + +.spectrum-ActionButton--sizeS { + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-75) * 2) + var(--spectrum-workflow-icon-size-75)); + --spectrum-actionbutton-height: var(--spectrum-component-height-75); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-75); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-75) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-75) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width)); +} + +.spectrum-ActionButton--sizeM { + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100)); + --spectrum-actionbutton-height: var(--spectrum-component-height-100); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-100); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width)); +} + +.spectrum-ActionButton--sizeL { + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-200) * 2) + var(--spectrum-workflow-icon-size-200)); + --spectrum-actionbutton-height: var(--spectrum-component-height-200); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-200); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-200) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-200) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width)); +} + +.spectrum-ActionButton--sizeXL { + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-300) * 2) + var(--spectrum-workflow-icon-size-300)); + --spectrum-actionbutton-height: var(--spectrum-component-height-300); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-300); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-300) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width)); +} + @media (forced-colors: active) { .spectrum-ActionButton { &::after { @@ -57,12 +166,6 @@ .spectrum-ActionButton { @extend %spectrum-BaseButton; - --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)); - - --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-actionbutton-edge-to-visual-size) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-actionbutton-edge-to-text-size) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-actionbutton-edge-to-visual-only-size) - var(--spectrum-actionbutton-border-width)); - position: relative; min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width)); @@ -80,10 +183,6 @@ border-color: var(--highcontrast-actionbutton-border-color-default, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default))); - &:dir(rtl) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); - } - &: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))); @@ -108,38 +207,6 @@ 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))); } - - &.is-selected { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected); - --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected); - --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected); - --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected); - - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected); - - &.spectrum-ActionButton--emphasized { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized); - --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized); - --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized); - --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized); - - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized); - } - - &.spectrum-ActionButton--staticWhite, - &.spectrum-ActionButton--staticBlack { - --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color); - } - } } a.spectrum-ActionButton { diff --git a/components/actionbutton/metadata/metadata.json b/components/actionbutton/metadata/metadata.json index 37a9d68bcc..35335820cd 100644 --- a/components/actionbutton/metadata/metadata.json +++ b/components/actionbutton/metadata/metadata.json @@ -2,6 +2,11 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-ActionButton", + ".spectrum-ActionButton--sizeL", + ".spectrum-ActionButton--sizeM", + ".spectrum-ActionButton--sizeS", + ".spectrum-ActionButton--sizeXL", + ".spectrum-ActionButton--sizeXS", ".spectrum-ActionButton-hold", ".spectrum-ActionButton-hold + .spectrum-ActionButton-icon", ".spectrum-ActionButton-icon", @@ -14,22 +19,11 @@ ".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon", ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label", ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized", - ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack", - ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite", ".spectrum-ActionButton.spectrum-ActionButton--quiet", - ".spectrum-ActionButton.spectrum-ActionButton--sizeL", - ".spectrum-ActionButton.spectrum-ActionButton--sizeM", - ".spectrum-ActionButton.spectrum-ActionButton--sizeS", - ".spectrum-ActionButton.spectrum-ActionButton--sizeXL", - ".spectrum-ActionButton.spectrum-ActionButton--sizeXS", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected", - ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected.spectrum-ActionButton--emphasized", - ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet", ".spectrum-ActionButton.spectrum-ActionButton--staticWhite", ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected", - ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected.spectrum-ActionButton--emphasized", - ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet", ".spectrum-ActionButton::-moz-focus-inner", ".spectrum-ActionButton:active", ".spectrum-ActionButton:after", @@ -90,7 +84,6 @@ "--mod-actionbutton-icon-size", "--mod-actionbutton-label-color", "--mod-actionbutton-min-width", - "--mod-actionbutton-static-content-color", "--mod-actionbutton-text-to-visual", "--mod-animation-duration-100", "--mod-line-height-100", @@ -122,11 +115,8 @@ "--spectrum-actionbutton-content-color-hover", "--spectrum-actionbutton-edge-to-hold-icon", "--spectrum-actionbutton-edge-to-text", - "--spectrum-actionbutton-edge-to-text-size", "--spectrum-actionbutton-edge-to-visual", "--spectrum-actionbutton-edge-to-visual-only", - "--spectrum-actionbutton-edge-to-visual-only-size", - "--spectrum-actionbutton-edge-to-visual-size", "--spectrum-actionbutton-focus-indicator-border-radius", "--spectrum-actionbutton-focus-indicator-color", "--spectrum-actionbutton-focus-indicator-gap", @@ -143,7 +133,6 @@ "--spectrum-accent-background-color-hover", "--spectrum-accent-background-color-key-focus", "--spectrum-animation-duration-100", - "--spectrum-black", "--spectrum-border-width-100", "--spectrum-component-edge-to-text-100", "--spectrum-component-edge-to-text-200", @@ -166,13 +155,7 @@ "--spectrum-component-height-50", "--spectrum-component-height-75", "--spectrum-corner-radius-100", - "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", - "--spectrum-disabled-content-color", - "--spectrum-disabled-static-black-border-color", - "--spectrum-disabled-static-black-content-color", - "--spectrum-disabled-static-white-border-color", - "--spectrum-disabled-static-white-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -187,7 +170,6 @@ "--spectrum-gray-50", "--spectrum-gray-500", "--spectrum-gray-600", - "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-logical-rotation", "--spectrum-neutral-background-color-selected-default", @@ -199,8 +181,6 @@ "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", "--spectrum-sans-font-family-stack", - "--spectrum-static-black-focus-indicator-color", - "--spectrum-static-white-focus-indicator-color", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", @@ -228,7 +208,6 @@ "--spectrum-workflow-icon-size-75" ], "system-theme": [ - "--system-action-button-animation-duration", "--system-action-button-background-color-default", "--system-action-button-background-color-disabled", "--system-action-button-background-color-down", @@ -239,177 +218,36 @@ "--system-action-button-border-color-down", "--system-action-button-border-color-focus", "--system-action-button-border-color-hover", - "--system-action-button-border-radius", - "--system-action-button-border-width", - "--system-action-button-content-color-default", - "--system-action-button-content-color-disabled", - "--system-action-button-content-color-down", - "--system-action-button-content-color-focus", - "--system-action-button-content-color-hover", - "--system-action-button-edge-to-hold-icon", - "--system-action-button-edge-to-text-size", - "--system-action-button-edge-to-visual-only-size", - "--system-action-button-edge-to-visual-size", - "--system-action-button-focus-indicator-color", - "--system-action-button-focus-indicator-gap", - "--system-action-button-focus-indicator-thickness", - "--system-action-button-font-size", - "--system-action-button-height", - "--system-action-button-icon-size", - "--system-action-button-min-width", "--system-action-button-quiet-background-color-default", - "--system-action-button-quiet-background-color-disabled", "--system-action-button-quiet-background-color-down", "--system-action-button-quiet-background-color-focus", "--system-action-button-quiet-background-color-hover", - "--system-action-button-quiet-border-color-default", - "--system-action-button-quiet-border-color-disabled", - "--system-action-button-quiet-border-color-down", - "--system-action-button-quiet-border-color-focus", - "--system-action-button-quiet-border-color-hover", - "--system-action-button-selected-background-color-default", - "--system-action-button-selected-background-color-disabled", - "--system-action-button-selected-background-color-down", - "--system-action-button-selected-background-color-focus", - "--system-action-button-selected-background-color-hover", - "--system-action-button-selected-border-color-default", - "--system-action-button-selected-border-color-disabled", - "--system-action-button-selected-border-color-down", - "--system-action-button-selected-border-color-focus", - "--system-action-button-selected-border-color-hover", - "--system-action-button-selected-content-color-default", - "--system-action-button-selected-content-color-down", - "--system-action-button-selected-content-color-focus", - "--system-action-button-selected-content-color-hover", - "--system-action-button-selected-emphasized-background-color-default", - "--system-action-button-selected-emphasized-background-color-down", - "--system-action-button-selected-emphasized-background-color-focus", - "--system-action-button-selected-emphasized-background-color-hover", - "--system-action-button-selected-emphasized-content-color-default", - "--system-action-button-selected-emphasized-content-color-down", - "--system-action-button-selected-emphasized-content-color-focus", - "--system-action-button-selected-emphasized-content-color-hover", - "--system-action-button-size-l-edge-to-hold-icon", - "--system-action-button-size-l-edge-to-text-size", - "--system-action-button-size-l-edge-to-visual-only-size", - "--system-action-button-size-l-edge-to-visual-size", - "--system-action-button-size-l-font-size", - "--system-action-button-size-l-height", - "--system-action-button-size-l-icon-size", - "--system-action-button-size-l-min-width", - "--system-action-button-size-l-text-to-visual", - "--system-action-button-size-m-edge-to-hold-icon", - "--system-action-button-size-m-edge-to-text-size", - "--system-action-button-size-m-edge-to-visual-only-size", - "--system-action-button-size-m-edge-to-visual-size", - "--system-action-button-size-m-font-size", - "--system-action-button-size-m-height", - "--system-action-button-size-m-icon-size", - "--system-action-button-size-m-min-width", - "--system-action-button-size-m-text-to-visual", - "--system-action-button-size-s-edge-to-hold-icon", - "--system-action-button-size-s-edge-to-text-size", - "--system-action-button-size-s-edge-to-visual-only-size", - "--system-action-button-size-s-edge-to-visual-size", - "--system-action-button-size-s-font-size", - "--system-action-button-size-s-height", - "--system-action-button-size-s-icon-size", - "--system-action-button-size-s-min-width", - "--system-action-button-size-s-text-to-visual", - "--system-action-button-size-xl-edge-to-hold-icon", - "--system-action-button-size-xl-edge-to-text-size", - "--system-action-button-size-xl-edge-to-visual-only-size", - "--system-action-button-size-xl-edge-to-visual-size", - "--system-action-button-size-xl-font-size", - "--system-action-button-size-xl-height", - "--system-action-button-size-xl-icon-size", - "--system-action-button-size-xl-min-width", - "--system-action-button-size-xl-text-to-visual", - "--system-action-button-size-xs-edge-to-hold-icon", - "--system-action-button-size-xs-edge-to-text-size", - "--system-action-button-size-xs-edge-to-visual-only-size", - "--system-action-button-size-xs-edge-to-visual-size", - "--system-action-button-size-xs-font-size", - "--system-action-button-size-xs-height", - "--system-action-button-size-xs-icon-size", - "--system-action-button-size-xs-min-width", - "--system-action-button-size-xs-text-to-visual", "--system-action-button-static-black-background-color-default", - "--system-action-button-static-black-background-color-disabled", "--system-action-button-static-black-background-color-down", "--system-action-button-static-black-background-color-focus", "--system-action-button-static-black-background-color-hover", "--system-action-button-static-black-border-color-default", - "--system-action-button-static-black-border-color-disabled", "--system-action-button-static-black-border-color-down", "--system-action-button-static-black-border-color-focus", "--system-action-button-static-black-border-color-hover", - "--system-action-button-static-black-content-color-default", - "--system-action-button-static-black-content-color-disabled", - "--system-action-button-static-black-content-color-down", - "--system-action-button-static-black-content-color-focus", - "--system-action-button-static-black-content-color-hover", - "--system-action-button-static-black-focus-indicator-color", - "--system-action-button-static-black-quiet-border-color-default", - "--system-action-button-static-black-quiet-border-color-disabled", - "--system-action-button-static-black-quiet-border-color-down", - "--system-action-button-static-black-quiet-border-color-focus", - "--system-action-button-static-black-quiet-border-color-hover", "--system-action-button-static-black-selected-background-color-default", "--system-action-button-static-black-selected-background-color-disabled", "--system-action-button-static-black-selected-background-color-down", "--system-action-button-static-black-selected-background-color-focus", "--system-action-button-static-black-selected-background-color-hover", - "--system-action-button-static-black-selected-border-color-disabled", - "--system-action-button-static-black-selected-content-color-default", - "--system-action-button-static-black-selected-content-color-down", - "--system-action-button-static-black-selected-content-color-focus", - "--system-action-button-static-black-selected-content-color-hover", - "--system-action-button-static-black-selected-emphasized-background-color-default", - "--system-action-button-static-black-selected-emphasized-background-color-down", - "--system-action-button-static-black-selected-emphasized-background-color-focus", - "--system-action-button-static-black-selected-emphasized-background-color-hover", - "--system-action-button-static-black-selected-emphasized-content-color-default", - "--system-action-button-static-black-selected-emphasized-content-color-down", - "--system-action-button-static-black-selected-emphasized-content-color-focus", - "--system-action-button-static-black-selected-emphasized-content-color-hover", "--system-action-button-static-white-background-color-default", - "--system-action-button-static-white-background-color-disabled", "--system-action-button-static-white-background-color-down", "--system-action-button-static-white-background-color-focus", "--system-action-button-static-white-background-color-hover", "--system-action-button-static-white-border-color-default", - "--system-action-button-static-white-border-color-disabled", "--system-action-button-static-white-border-color-down", "--system-action-button-static-white-border-color-focus", "--system-action-button-static-white-border-color-hover", - "--system-action-button-static-white-content-color-default", - "--system-action-button-static-white-content-color-disabled", - "--system-action-button-static-white-content-color-down", - "--system-action-button-static-white-content-color-focus", - "--system-action-button-static-white-content-color-hover", - "--system-action-button-static-white-focus-indicator-color", - "--system-action-button-static-white-quiet-border-color-default", - "--system-action-button-static-white-quiet-border-color-disabled", - "--system-action-button-static-white-quiet-border-color-down", - "--system-action-button-static-white-quiet-border-color-focus", - "--system-action-button-static-white-quiet-border-color-hover", "--system-action-button-static-white-selected-background-color-default", "--system-action-button-static-white-selected-background-color-disabled", "--system-action-button-static-white-selected-background-color-down", "--system-action-button-static-white-selected-background-color-focus", - "--system-action-button-static-white-selected-background-color-hover", - "--system-action-button-static-white-selected-border-color-disabled", - "--system-action-button-static-white-selected-content-color-default", - "--system-action-button-static-white-selected-content-color-down", - "--system-action-button-static-white-selected-content-color-focus", - "--system-action-button-static-white-selected-content-color-hover", - "--system-action-button-static-white-selected-emphasized-background-color-default", - "--system-action-button-static-white-selected-emphasized-background-color-down", - "--system-action-button-static-white-selected-emphasized-background-color-focus", - "--system-action-button-static-white-selected-emphasized-background-color-hover", - "--system-action-button-static-white-selected-emphasized-content-color-default", - "--system-action-button-text-to-visual" + "--system-action-button-static-white-selected-background-color-hover" ], "passthroughs": [ "--mod-button-animation-duration", diff --git a/components/actionbutton/metadata/mods.md b/components/actionbutton/metadata/mods.md index 0c91d4059b..2acd63c511 100644 --- a/components/actionbutton/metadata/mods.md +++ b/components/actionbutton/metadata/mods.md @@ -47,7 +47,6 @@ | `--mod-actionbutton-icon-size` | | `--mod-actionbutton-label-color` | | `--mod-actionbutton-min-width` | -| `--mod-actionbutton-static-content-color` | | `--mod-actionbutton-text-to-visual` | | `--mod-animation-duration-100` | | `--mod-line-height-100` | diff --git a/components/actionbutton/themes/spectrum-two.css b/components/actionbutton/themes/spectrum-two.css index 4cd413e0d4..158a5d601d 100644 --- a/components/actionbutton/themes/spectrum-two.css +++ b/components/actionbutton/themes/spectrum-two.css @@ -13,19 +13,6 @@ @container style(--system: spectrum) { .spectrum-ActionButton { - --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100); - --spectrum-actionbutton-border-width: var(--spectrum-border-width-100); - - --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-actionbutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-50); --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); @@ -38,142 +25,12 @@ --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-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--sizeM { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100)); - --spectrum-actionbutton-height: var(--spectrum-component-height-100); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-100); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - - --spectrum-actionbutton-edge-to-visual-size: var(--spectrum-component-edge-to-visual-100); - --spectrum-actionbutton-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-100); - --spectrum-actionbutton-edge-to-text-size: var(--spectrum-component-edge-to-text-100); - } - - &.spectrum-ActionButton--sizeXS { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-50) * 2) + var(--spectrum-workflow-icon-size-50)); - --spectrum-actionbutton-height: var(--spectrum-component-height-50); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-50); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); - - --spectrum-actionbutton-edge-to-visual-size: var(--spectrum-component-edge-to-visual-50); - --spectrum-actionbutton-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-50); - --spectrum-actionbutton-edge-to-text-size: var(--spectrum-component-edge-to-text-50); - } - - &.spectrum-ActionButton--sizeS { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-75) * 2) + var(--spectrum-workflow-icon-size-75)); - --spectrum-actionbutton-height: var(--spectrum-component-height-75); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-75); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); - - --spectrum-actionbutton-edge-to-visual-size: var(--spectrum-component-edge-to-visual-75); - --spectrum-actionbutton-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-75); - --spectrum-actionbutton-edge-to-text-size: var(--spectrum-component-edge-to-text-75); - } - - &.spectrum-ActionButton--sizeL { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-200) * 2) + var(--spectrum-workflow-icon-size-200)); - --spectrum-actionbutton-height: var(--spectrum-component-height-200); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-200); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); - - --spectrum-actionbutton-edge-to-visual-size: var(--spectrum-component-edge-to-visual-200); - --spectrum-actionbutton-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-200); - --spectrum-actionbutton-edge-to-text-size: var(--spectrum-component-edge-to-text-200); - } - - &.spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-300) * 2) + var(--spectrum-workflow-icon-size-300)); - --spectrum-actionbutton-height: var(--spectrum-component-height-300); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-300); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); - - --spectrum-actionbutton-edge-to-visual-size: var(--spectrum-component-edge-to-visual-300); - --spectrum-actionbutton-edge-to-visual-only-size: var(--spectrum-component-edge-to-visual-only-300); - --spectrum-actionbutton-edge-to-text-size: var(--spectrum-component-edge-to-text-300); - } - - &.is-selected { - --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-background-color-selected-default); - --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - --spectrum-actionbutton-content-color-default: var(--spectrum-gray-50); - --spectrum-actionbutton-content-color-hover: var(--spectrum-gray-50); - --spectrum-actionbutton-content-color-down: var(--spectrum-gray-50); - --spectrum-actionbutton-content-color-focus: var(--spectrum-gray-50); - - --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-background-color-disabled: var(--spectrum-disabled-background-color); - - &.spectrum-ActionButton--emphasized { - --spectrum-actionbutton-background-color-default: var(--spectrum-accent-background-color-default); - --spectrum-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-actionbutton-background-color-down: var(--spectrum-accent-background-color-down); - --spectrum-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus); - - --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--quiet { --spectrum-actionbutton-background-color-default: transparent; --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100); - --spectrum-actionbutton-background-color-disabled: transparent; - - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - --spectrum-actionbutton-border-color-disabled: transparent; - } - - &.spectrum-ActionButton--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 { @@ -181,21 +38,11 @@ --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-400); --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-500); --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-disabled: transparent; --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-500); --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-600); --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-700); --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-600); - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - - --spectrum-actionbutton-content-color-default: var(--spectrum-black); - --spectrum-actionbutton-content-color-hover: var(--spectrum-black); - --spectrum-actionbutton-content-color-down: var(--spectrum-black); - --spectrum-actionbutton-content-color-focus: var(--spectrum-black); - --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - - --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); &.is-selected { --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-900); @@ -203,24 +50,6 @@ --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-1000); --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-1000); --spectrum-actionbutton-background-color-disabled: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-border-color-disabled: transparent; - - --spectrum-actionbutton-content-color-default: var(--spectrum-white); - --spectrum-actionbutton-content-color-hover: var(--spectrum-white); - --spectrum-actionbutton-content-color-down: var(--spectrum-white); - --spectrum-actionbutton-content-color-focus: var(--spectrum-white); - - &.spectrum-ActionButton--emphasized { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-900); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-1000); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-1000); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-1000); - - --spectrum-actionbutton-content-color-default: var(--spectrum-gray-50); - --spectrum-actionbutton-content-color-hover: var(--spectrum-gray-900); - --spectrum-actionbutton-content-color-down: var(--spectrum-gray-900); - --spectrum-actionbutton-content-color-focus: var(--spectrum-gray-900); - } } } @@ -229,21 +58,11 @@ --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-400); --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-500); --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-disabled: transparent; --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-500); --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-600); --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-700); --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-600); - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - - --spectrum-actionbutton-content-color-default: var(--spectrum-white); - --spectrum-actionbutton-content-color-hover: var(--spectrum-white); - --spectrum-actionbutton-content-color-down: var(--spectrum-white); - --spectrum-actionbutton-content-color-focus: var(--spectrum-white); - --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - - --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); &.is-selected { --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-900); @@ -251,22 +70,6 @@ --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-1000); --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-1000); --spectrum-actionbutton-background-color-disabled: var(--spectrum-transparent-white-300); - - --spectrum-actionbutton-border-color-disabled: transparent; - - --spectrum-actionbutton-content-color-default: var(--spectrum-black); - --spectrum-actionbutton-content-color-hover: var(--spectrum-black); - --spectrum-actionbutton-content-color-down: var(--spectrum-black); - --spectrum-actionbutton-content-color-focus: var(--spectrum-black); - - &.spectrum-ActionButton--emphasized { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-900); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-1000); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-1000); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-1000); - - --spectrum-actionbutton-content-color-default: var(--spectrum-gray-50); - } } } } diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css index 71e9d4ea1c..84d45052f5 100644 --- a/components/actiongroup/index.css +++ b/components/actiongroup/index.css @@ -13,6 +13,25 @@ @import "./themes/spectrum-two.css"; +.spectrum-ActionGroup { + --spectrum-actiongroup-button-spacing-reset: 0; + --spectrum-actiongroup-border-radius-reset: 0; + --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100); +} + +.spectrum-ActionGroup--sizeXS, +.spectrum-ActionGroup--sizeS { + --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-75); + --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75); +} + +.spectrum-ActionGroup--sizeM, +.spectrum-ActionGroup--sizeL, +.spectrum-ActionGroup--sizeXL { + --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-100); + --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-100); +} + .spectrum-ActionGroup { display: flex; flex-wrap: wrap; @@ -53,7 +72,7 @@ z-index: 0; &:first-child { - /* @passthrough -- Action button passthrough styling */ + /* 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)); @@ -62,7 +81,7 @@ } & + .spectrum-ActionGroup-item { - /* @passthrough -- Action button passthrough styling */ + /* 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)); @@ -70,7 +89,7 @@ } &:last-child { - /* @passthrough -- Action button passthrough styling */ + /* 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)); @@ -105,7 +124,7 @@ border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); &:first-child { - /* @passthrough -- Action button passthrough styling */ + /* 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)); @@ -123,7 +142,7 @@ } &:last-child { - /* @passthrough -- Action button passthrough styling */ + /* 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)); diff --git a/components/actiongroup/metadata/metadata.json b/components/actiongroup/metadata/metadata.json index 19d6e15f1d..a21ae470df 100644 --- a/components/actiongroup/metadata/metadata.json +++ b/components/actiongroup/metadata/metadata.json @@ -20,12 +20,12 @@ ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical", ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item", + ".spectrum-ActionGroup--sizeL", + ".spectrum-ActionGroup--sizeM", + ".spectrum-ActionGroup--sizeS", + ".spectrum-ActionGroup--sizeXL", + ".spectrum-ActionGroup--sizeXS", ".spectrum-ActionGroup--vertical", - ".spectrum-ActionGroup.spectrum-ActionGroup--sizeL", - ".spectrum-ActionGroup.spectrum-ActionGroup--sizeM", - ".spectrum-ActionGroup.spectrum-ActionGroup--sizeS", - ".spectrum-ActionGroup.spectrum-ActionGroup--sizeXL", - ".spectrum-ActionGroup.spectrum-ActionGroup--sizeXS", ".spectrum-ActionGroup.spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical):not(.spectrum-ActionGroup--compact) .spectrum-ActionGroup-item" ], "modifiers": [ @@ -54,24 +54,9 @@ "--spectrum-spacing-75" ], "system-theme": [ - "--system-action-group-border-radius", - "--system-action-group-border-radius-reset", - "--system-action-group-button-spacing-reset", "--system-action-group-gap-size-compact", "--system-action-group-horizontal-spacing-compact", - "--system-action-group-horizontal-spacing-regular", - "--system-action-group-size-l-horizontal-spacing-regular", - "--system-action-group-size-l-vertical-spacing-regular", - "--system-action-group-size-m-horizontal-spacing-regular", - "--system-action-group-size-m-vertical-spacing-regular", - "--system-action-group-size-s-horizontal-spacing-regular", - "--system-action-group-size-s-vertical-spacing-regular", - "--system-action-group-size-xl-horizontal-spacing-regular", - "--system-action-group-size-xl-vertical-spacing-regular", - "--system-action-group-size-xs-horizontal-spacing-regular", - "--system-action-group-size-xs-vertical-spacing-regular", - "--system-action-group-vertical-spacing-compact", - "--system-action-group-vertical-spacing-regular" + "--system-action-group-vertical-spacing-compact" ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], "high-contrast": [] diff --git a/components/actiongroup/themes/spectrum-two.css b/components/actiongroup/themes/spectrum-two.css index a41e85bc1a..b25c0f945b 100644 --- a/components/actiongroup/themes/spectrum-two.css +++ b/components/actiongroup/themes/spectrum-two.css @@ -18,23 +18,5 @@ /* account for button border */ --spectrum-actiongroup-horizontal-spacing-compact: -1px; --spectrum-actiongroup-vertical-spacing-compact: -1px; - - --spectrum-actiongroup-button-spacing-reset: 0; - --spectrum-actiongroup-border-radius-reset: 0; - --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100); - - &, - &.spectrum-ActionGroup--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--sizeXS, - &.spectrum-ActionGroup--sizeS { - --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-75); - --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75); - } } } diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css index ca3644aaf2..4bb0c4088f 100644 --- a/components/alertbanner/index.css +++ b/components/alertbanner/index.css @@ -14,23 +14,41 @@ @import "./themes/spectrum-two.css"; .spectrum-AlertBanner { - /* @passthrough start -- settings for nested Divider */ + --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); + --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); + --spectrum-alert-banner-size: auto; + --spectrum-alert-banner-font-size: var(--spectrum-font-size-100); + --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + + /* spacing */ + --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300); + --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- internal reference below; todo solve for this edge case in the plugin */ + --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon); + --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text); + + /* colors */ + --spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default); + --spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default); + --spectrum-alert-banner-font-color: var(--spectrum-white); + + /* settings for nested Divider */ --mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider)); --mod-divider-vertical-height: auto; --mod-divider-vertical-align: stretch; - /* @passthrough end */ - /* @passthrough start -- settings for nested Button */ + /* 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; - /* @passthrough end */ - /* @passthrough start -- settings for nested CloseButton */ + /* 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; - /* @passthrough end */ display: none; justify-content: space-between; @@ -39,7 +57,7 @@ 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-neutral-background, var(--mod-alert-banner-neutral-background, var(--spectrum-alert-banner-neutral-background))); + 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 { diff --git a/components/alertbanner/metadata/metadata.json b/components/alertbanner/metadata/metadata.json index fef03ef707..161b075d25 100644 --- a/components/alertbanner/metadata/metadata.json +++ b/components/alertbanner/metadata/metadata.json @@ -24,7 +24,7 @@ "--mod-alert-banner-max-inline-size", "--mod-alert-banner-min-height", "--mod-alert-banner-negative-background", - "--mod-alert-banner-neutral-background", + "--mod-alert-banner-netural-background", "--mod-alert-banner-size", "--mod-alert-banner-start-edge", "--mod-alert-banner-text-to-button-horizontal", @@ -48,6 +48,7 @@ "--spectrum-alert-banner-min-height", "--spectrum-alert-banner-minimum-height", "--spectrum-alert-banner-negative-background", + "--spectrum-alert-banner-netural-background", "--spectrum-alert-banner-neutral-background", "--spectrum-alert-banner-size", "--spectrum-alert-banner-start-edge", @@ -71,24 +72,7 @@ "--spectrum-white", "--spectrum-workflow-icon-size-100" ], - "system-theme": [ - "--system-alert-banner-bottom-text", - "--system-alert-banner-font-color", - "--system-alert-banner-font-size", - "--system-alert-banner-icon-size", - "--system-alert-banner-icon-to-text", - "--system-alert-banner-informative-background", - "--system-alert-banner-max-inline-size", - "--system-alert-banner-min-height", - "--system-alert-banner-negative-background", - "--system-alert-banner-neutral-background", - "--system-alert-banner-size", - "--system-alert-banner-start-edge", - "--system-alert-banner-text-to-button-horizontal", - "--system-alert-banner-text-to-divider", - "--system-alert-banner-top-icon", - "--system-alert-banner-top-text" - ], + "system-theme": ["--system-alert-banner-neutral-background"], "passthroughs": [ "--mod-button-margin-block", "--mod-button-margin-left", diff --git a/components/alertbanner/metadata/mods.md b/components/alertbanner/metadata/mods.md index 55726ac5b7..7d70038551 100644 --- a/components/alertbanner/metadata/mods.md +++ b/components/alertbanner/metadata/mods.md @@ -12,7 +12,7 @@ | `--mod-alert-banner-max-inline-size` | | `--mod-alert-banner-min-height` | | `--mod-alert-banner-negative-background` | -| `--mod-alert-banner-neutral-background` | +| `--mod-alert-banner-netural-background` | | `--mod-alert-banner-size` | | `--mod-alert-banner-start-edge` | | `--mod-alert-banner-text-to-button-horizontal` | diff --git a/components/alertbanner/themes/spectrum-two.css b/components/alertbanner/themes/spectrum-two.css index 7c2bc3ef0e..3e038dbd7a 100644 --- a/components/alertbanner/themes/spectrum-two.css +++ b/components/alertbanner/themes/spectrum-two.css @@ -14,25 +14,5 @@ @container style(--system: spectrum) { .spectrum-AlertBanner { --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); - - --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); - --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --spectrum-alert-banner-size: auto; - --spectrum-alert-banner-font-size: var(--spectrum-font-size-100); - --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); - - /* spacing */ - --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300); - --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); - --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon); - --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text); - - /* colors */ - --spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default); - --spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default); - --spectrum-alert-banner-font-color: var(--spectrum-white); } } diff --git a/components/alertdialog/index.css b/components/alertdialog/index.css index 16db0afabb..50fd340b0c 100644 --- a/components/alertdialog/index.css +++ b/components/alertdialog/index.css @@ -14,9 +14,39 @@ @import "./themes/spectrum-two.css"; .spectrum-AlertDialog { - /* @passthrough -- mods for nested component */ + --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; diff --git a/components/alertdialog/metadata/metadata.json b/components/alertdialog/metadata/metadata.json index 77bb8a39bf..03bf62123f 100644 --- a/components/alertdialog/metadata/metadata.json +++ b/components/alertdialog/metadata/metadata.json @@ -78,28 +78,7 @@ "--spectrum-spacing-300", "--spectrum-workflow-icon-size-100" ], - "system-theme": [ - "--system-alert-dialog-body-color", - "--system-alert-dialog-body-font-family", - "--system-alert-dialog-body-font-size", - "--system-alert-dialog-body-font-style", - "--system-alert-dialog-body-font-weight", - "--system-alert-dialog-body-line-height", - "--system-alert-dialog-divider-to-description", - "--system-alert-dialog-error-icon-color", - "--system-alert-dialog-icon-size", - "--system-alert-dialog-max-width", - "--system-alert-dialog-min-width", - "--system-alert-dialog-title-color", - "--system-alert-dialog-title-font-family", - "--system-alert-dialog-title-font-size", - "--system-alert-dialog-title-font-style", - "--system-alert-dialog-title-font-weight", - "--system-alert-dialog-title-line-height", - "--system-alert-dialog-title-to-divider", - "--system-alert-dialog-title-to-icon", - "--system-alert-dialog-warning-icon-color" - ], + "system-theme": [], "passthroughs": ["--mod-buttongroup-justify-content", "--mod-icon-color"], "high-contrast": [] } diff --git a/components/alertdialog/themes/spectrum-two.css b/components/alertdialog/themes/spectrum-two.css index fd99483cdb..3b48a570c2 100644 --- a/components/alertdialog/themes/spectrum-two.css +++ b/components/alertdialog/themes/spectrum-two.css @@ -10,35 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-AlertDialog { - --spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); - --spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); - --spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); - - /* color */ - --spectrum-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color); - --spectrum-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); - - /* typography */ - --spectrum-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-alert-dialog-title-font-size: var(--spectrum-alert-dialog-title-size); - --spectrum-alert-dialog-title-line-height: var(--spectrum-heading-line-height); - --spectrum-alert-dialog-title-color: var(--spectrum-heading-color); - - --spectrum-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-alert-dialog-body-font-size: var(--spectrum-alert-dialog-description-size); - --spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-100); - --spectrum-alert-dialog-body-color: var(--spectrum-body-color); - - /* spacing */ - --spectrum-alert-dialog-title-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300); - --spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300); - } -} diff --git a/components/asset/index.css b/components/asset/index.css index 2f7a433341..5457355b0b 100644 --- a/components/asset/index.css +++ b/components/asset/index.css @@ -14,6 +14,8 @@ @import "./themes/spectrum-two.css"; .spectrum-Asset { + --spectrum-asset-transition-duration: var(--spectrum-animation-duration-100); + display: flex; align-items: center; justify-content: center; @@ -26,7 +28,7 @@ max-inline-size: 100%; max-block-size: 100%; object-fit: contain; - transition: opacity var(--spectrum-asset-transition-duration); + transition: opacity var(--spectrum-animation-duration-100); } .spectrum-Asset-folder, @@ -37,16 +39,16 @@ } .spectrum-Asset-folderBackground { - fill: var(--highcontrast-asset-folder-background-color, var(--mod-asset-folder-background-color, var(--spectrum-asset-folder-background-color))); + 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-asset-file-background-color))); + 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-asset-icon-outline-color)); + fill: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500)); } @media (forced-colors: active) { diff --git a/components/asset/metadata/metadata.json b/components/asset/metadata/metadata.json index 7a5849fd4c..4ae12c808a 100644 --- a/components/asset/metadata/metadata.json +++ b/components/asset/metadata/metadata.json @@ -28,13 +28,14 @@ "--spectrum-animation-duration-100", "--spectrum-gray-200", "--spectrum-gray-25", + "--spectrum-gray-300", + "--spectrum-gray-50", "--spectrum-gray-500" ], "system-theme": [ "--system-asset-file-background-color", "--system-asset-folder-background-color", - "--system-asset-icon-outline-color", - "--system-asset-transition-duration" + "--system-asset-icon-outline-color" ], "passthroughs": [], "high-contrast": [ diff --git a/components/asset/themes/spectrum-two.css b/components/asset/themes/spectrum-two.css index 76ac6f0f85..5eda732011 100644 --- a/components/asset/themes/spectrum-two.css +++ b/components/asset/themes/spectrum-two.css @@ -13,7 +13,6 @@ @container style(--system: spectrum) { .spectrum-Asset { - --spectrum-asset-transition-duration: var(--spectrum-animation-duration-100); --spectrum-asset-folder-background-color: var(--spectrum-gray-200); --spectrum-asset-file-background-color: var(--spectrum-gray-25); --spectrum-asset-icon-outline-color: var(--spectrum-gray-500); diff --git a/components/assetcard/index.css b/components/assetcard/index.css index d688bbf4c9..39f9c84620 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -15,6 +15,55 @@ /* 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-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-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); + /* contain selection indicator */ position: relative; @@ -25,7 +74,28 @@ cursor: pointer; - outline: none; + &:lang(zh), + &:lang(ja), + &:lang(ko) { + --spectrum-assetcard-title-font-family: var(--spectrum-cjk-font-family-stack); + --spectrum-assetcard-title-font-style: var(--spectrum-heading-cjk-font-style); + --spectrum-assetcard-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --spectrum-assetcard-title-font-size: var(--spectrum-heading-cjk-size-xs); + --spectrum-assetcard-title-line-height: var(--spectrum-heading-cjk-line-height); + --spectrum-assetcard-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + + --spectrum-assetcard-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --spectrum-assetcard-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --spectrum-assetcard-header-content-line-height: var(--spectrum-body-cjk-line-height); + --spectrum-assetcard-header-content-font-style: var(--spectrum-body-cjk-font-style); + --spectrum-assetcard-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + + --spectrum-assetcard-content-font-family: var(--spectrum-cjk-font-family-stack); + --spectrum-assetcard-content-font-weight: var(--spectrum-body-cjk-font-weight); + --spectrum-assetcard-content-line-height: var(--spectrum-body-cjk-line-height); + --spectrum-assetcard-content-font-style: var(--spectrum-body-cjk-font-style); + --spectrum-assetcard-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + } &.is-selected, &:hover, @@ -46,6 +116,8 @@ } } + outline: none; + &:focus-visible { .spectrum-AssetCard-assetContainer::before { opacity: 1; @@ -106,7 +178,9 @@ 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); } @@ -194,7 +268,7 @@ border-radius: var(--mod-assetcard-selectionindicator-border-radius, var(--spectrum-assetcard-selectionindicator-border-radius)); - box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) var(--spectrum-assetcard-selectionindicator-box-shadow-color); + 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)); diff --git a/components/assetcard/metadata/metadata.json b/components/assetcard/metadata/metadata.json index 88ba0c42e0..67bcbea100 100644 --- a/components/assetcard/metadata/metadata.json +++ b/components/assetcard/metadata/metadata.json @@ -179,96 +179,12 @@ "--spectrum-white" ], "system-theme": [ - "--system-asset-card-asset-animation-duration", - "--system-asset-card-asset-container-border-size", - "--system-asset-card-asset-size", "--system-asset-card-background-color", - "--system-asset-card-border-color", - "--system-asset-card-border-color-down", - "--system-asset-card-border-color-hover", - "--system-asset-card-border-radius", - "--system-asset-card-content-font-family", - "--system-asset-card-content-font-style", - "--system-asset-card-content-font-weight", - "--system-asset-card-content-letter-spacing", - "--system-asset-card-content-line-height", - "--system-asset-card-content-margin-block-start", - "--system-asset-card-content-text-color", - "--system-asset-card-focus-indicator-thickness", - "--system-asset-card-focus-ring-gap", - "--system-asset-card-header-content-font-family", - "--system-asset-card-header-content-font-style", - "--system-asset-card-header-content-font-weight", - "--system-asset-card-header-content-letter-spacing", - "--system-asset-card-header-content-line-height", - "--system-asset-card-header-content-text-color", - "--system-asset-card-header-margin-block-start", - "--system-asset-card-lang-ja-content-font-family", - "--system-asset-card-lang-ja-content-font-style", - "--system-asset-card-lang-ja-content-font-weight", - "--system-asset-card-lang-ja-content-letter-spacing", - "--system-asset-card-lang-ja-content-line-height", - "--system-asset-card-lang-ja-header-content-font-family", - "--system-asset-card-lang-ja-header-content-font-style", - "--system-asset-card-lang-ja-header-content-font-weight", - "--system-asset-card-lang-ja-header-content-letter-spacing", - "--system-asset-card-lang-ja-header-content-line-height", - "--system-asset-card-lang-ja-title-font-family", - "--system-asset-card-lang-ja-title-font-size", - "--system-asset-card-lang-ja-title-font-style", - "--system-asset-card-lang-ja-title-font-weight", - "--system-asset-card-lang-ja-title-letter-spacing", - "--system-asset-card-lang-ja-title-line-height", - "--system-asset-card-lang-ko-content-font-family", - "--system-asset-card-lang-ko-content-font-style", - "--system-asset-card-lang-ko-content-font-weight", - "--system-asset-card-lang-ko-content-letter-spacing", - "--system-asset-card-lang-ko-content-line-height", - "--system-asset-card-lang-ko-header-content-font-family", - "--system-asset-card-lang-ko-header-content-font-style", - "--system-asset-card-lang-ko-header-content-font-weight", - "--system-asset-card-lang-ko-header-content-letter-spacing", - "--system-asset-card-lang-ko-header-content-line-height", - "--system-asset-card-lang-ko-title-font-family", - "--system-asset-card-lang-ko-title-font-size", - "--system-asset-card-lang-ko-title-font-style", - "--system-asset-card-lang-ko-title-font-weight", - "--system-asset-card-lang-ko-title-letter-spacing", - "--system-asset-card-lang-ko-title-line-height", - "--system-asset-card-lang-zh-content-font-family", - "--system-asset-card-lang-zh-content-font-style", - "--system-asset-card-lang-zh-content-font-weight", - "--system-asset-card-lang-zh-content-letter-spacing", - "--system-asset-card-lang-zh-content-line-height", - "--system-asset-card-lang-zh-header-content-font-family", - "--system-asset-card-lang-zh-header-content-font-style", - "--system-asset-card-lang-zh-header-content-font-weight", - "--system-asset-card-lang-zh-header-content-letter-spacing", - "--system-asset-card-lang-zh-header-content-line-height", - "--system-asset-card-lang-zh-title-font-family", - "--system-asset-card-lang-zh-title-font-size", - "--system-asset-card-lang-zh-title-font-style", - "--system-asset-card-lang-zh-title-font-weight", - "--system-asset-card-lang-zh-title-letter-spacing", - "--system-asset-card-lang-zh-title-line-height", "--system-asset-card-overlay-background-color", "--system-asset-card-overlay-background-color-opacity", "--system-asset-card-overlay-background-color-rgb", "--system-asset-card-selectionindicator-background-color-default", - "--system-asset-card-selectionindicator-blur", - "--system-asset-card-selectionindicator-border-radius", - "--system-asset-card-selectionindicator-box-shadow-color", - "--system-asset-card-selectionindicator-color", - "--system-asset-card-selectionindicator-font-size", - "--system-asset-card-selectionindicator-font-weight", - "--system-asset-card-selectionindicator-offset-y", - "--system-asset-card-selectionindicator-size", - "--system-asset-card-title-font-family", - "--system-asset-card-title-font-style", - "--system-asset-card-title-font-weight", - "--system-asset-card-title-letter-spacing", - "--system-asset-card-title-line-height", - "--system-asset-card-title-text-color" + "--system-asset-card-selectionindicator-box-shadow-color" ], "passthroughs": [], "high-contrast": [ diff --git a/components/assetcard/themes/spectrum-two.css b/components/assetcard/themes/spectrum-two.css index 86de8e84b9..f38045fb75 100644 --- a/components/assetcard/themes/spectrum-two.css +++ b/components/assetcard/themes/spectrum-two.css @@ -14,80 +14,8 @@ @container style(--system: spectrum) { .spectrum-AssetCard { --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); - - /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */ - --spectrum-assetcard-asset-size: 224px; --spectrum-assetcard-background-color: var(--spectrum-gray-75); - --spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-assetcard-asset-container-border-size: 1px; - --spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300); - - --spectrum-assetcard-border-radius: var(--spectrum-corner-radius-100); - --spectrum-assetcard-border-color: transparent; - --spectrum-assetcard-border-color-hover: var(--spectrum-gray-500); - --spectrum-assetcard-border-color-down: var(--spectrum-gray-600); - - --spectrum-assetcard-focus-ring-gap: 5px; - --spectrum-assetcard-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - - /* selection indicator - checkbox or number */ --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9); --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300); - --spectrum-assetcard-selectionindicator-size: var(--spectrum-card-selection-background-size); - --spectrum-assetcard-selectionindicator-border-radius: var(--spectrum-corner-radius-100); - --spectrum-assetcard-selectionindicator-offset-y: 4px; - --spectrum-assetcard-selectionindicator-blur: 6px; - --spectrum-assetcard-selectionindicator-color: var(--spectrum-white); - --spectrum-assetcard-selectionindicator-font-weight: var(--spectrum-bold-font-weight); - --spectrum-assetcard-selectionindicator-font-size: var(--spectrum-font-size-400); - - /* title */ - --spectrum-assetcard-title-text-color: var(--spectrum-gray-900); - --spectrum-assetcard-title-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-assetcard-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-assetcard-title-font-style: var(--spectrum-default-font-style); - --spectrum-assetcard-title-line-height: var(--spectrum-line-height-100); - --spectrum-assetcard-title-letter-spacing: 0; - - /* header content */ - --spectrum-assetcard-header-content-text-color: var(--spectrum-gray-900); - --spectrum-assetcard-header-content-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-assetcard-header-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-assetcard-header-content-font-style: var(--spectrum-default-font-style); - --spectrum-assetcard-header-content-line-height: var(--spectrum-line-height-200); - --spectrum-assetcard-header-content-letter-spacing: 0; - - /* content */ - --spectrum-assetcard-content-text-color: var(--spectrum-gray-700); - --spectrum-assetcard-content-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-assetcard-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-assetcard-content-font-style: var(--spectrum-default-font-style); - --spectrum-assetcard-content-line-height: var(--spectrum-line-height-200); - --spectrum-assetcard-content-letter-spacing: 0; - - --spectrum-assetcard-content-margin-block-start: var(--spectrum-spacing-75); - - &:lang(zh), - &:lang(ja), - &:lang(ko) { - --spectrum-assetcard-title-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-assetcard-title-font-style: var(--spectrum-heading-cjk-font-style); - --spectrum-assetcard-title-font-weight: var(--spectrum-heading-cjk-font-weight); - --spectrum-assetcard-title-font-size: var(--spectrum-heading-cjk-size-xs); - --spectrum-assetcard-title-line-height: var(--spectrum-heading-cjk-line-height); - --spectrum-assetcard-title-letter-spacing: var(--spectrum-cjk-letter-spacing); - - --spectrum-assetcard-header-content-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-assetcard-header-content-font-weight: var(--spectrum-body-cjk-font-weight); - --spectrum-assetcard-header-content-line-height: var(--spectrum-body-cjk-line-height); - --spectrum-assetcard-header-content-font-style: var(--spectrum-body-cjk-font-style); - --spectrum-assetcard-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); - - --spectrum-assetcard-content-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-assetcard-content-font-weight: var(--spectrum-body-cjk-font-weight); - --spectrum-assetcard-content-line-height: var(--spectrum-body-cjk-line-height); - --spectrum-assetcard-content-font-style: var(--spectrum-body-cjk-font-style); - --spectrum-assetcard-content-letter-spacing: var(--spectrum-cjk-letter-spacing); - } } } diff --git a/components/assetcard/themes/spectrum.css b/components/assetcard/themes/spectrum.css index 82d712f640..c3e7ef9e0a 100644 --- a/components/assetcard/themes/spectrum.css +++ b/components/assetcard/themes/spectrum.css @@ -18,9 +18,7 @@ @container style(--system: legacy) { .spectrum-AssetCard { --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); - --spectrum-assetcard-background-color: var(--spectrum-gray-200); - --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9); --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-200); } diff --git a/components/assetlist/index.css b/components/assetlist/index.css index 23d20183e4..7a1d12726c 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -14,6 +14,28 @@ @import "./themes/spectrum-two.css"; .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); + + /* 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); + margin-block-start: 0; margin-block-end: 0; padding: 0; diff --git a/components/assetlist/metadata/metadata.json b/components/assetlist/metadata/metadata.json index 3c3bb7c195..6aa102a6dc 100644 --- a/components/assetlist/metadata/metadata.json +++ b/components/assetlist/metadata/metadata.json @@ -94,23 +94,8 @@ "--spectrum-spacing-75" ], "system-theme": [ - "--system-asset-list-child-indicator-animation", - "--system-asset-list-item-animation", "--system-asset-list-item-background-color-down", - "--system-asset-list-item-background-color-hover", - "--system-asset-list-item-border-radius", - "--system-asset-list-item-font-size", - "--system-asset-list-item-font-weight", - "--system-asset-list-item-height", - "--system-asset-list-item-label-padding-inline-start", - "--system-asset-list-item-margin-block-end", - "--system-asset-list-item-padding-inline-end", - "--system-asset-list-item-padding-inline-start", - "--system-asset-list-label-color", - "--system-asset-list-thumbnail-height", - "--system-asset-list-thumbnail-margin-inline-start", - "--system-asset-list-thumbnail-width", - "--system-asset-list-width" + "--system-asset-list-item-background-color-hover" ], "passthroughs": [], "high-contrast": [ diff --git a/components/assetlist/themes/spectrum-two.css b/components/assetlist/themes/spectrum-two.css index d0ebc859b1..0624623caf 100644 --- a/components/assetlist/themes/spectrum-two.css +++ b/components/assetlist/themes/spectrum-two.css @@ -13,28 +13,7 @@ @container style(--system: spectrum) { .spectrum-AssetList { - --spectrum-assetlist-width: 272px; - --spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100); - - /* item */ - --spectrum-assetlist-item-height: var(--spectrum-spacing-600); - --spectrum-assetlist-item-padding-inline-start: var(--spectrum-spacing-300); - --spectrum-assetlist-item-padding-inline-end: var(--spectrum-spacing-300); - --spectrum-assetlist-item-margin-block-end: var(--spectrum-spacing-75); - --spectrum-assetlist-item-border-radius: var(--spectrum-spacing-75); - --spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100); - --spectrum-assetlist-item-font-size: var(--spectrum-font-size-100); - --spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight); --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200); --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); - - /* thumbnail */ - --spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400); - --spectrum-assetlist-thumbnail-height: var(--spectrum-spacing-400); - --spectrum-assetlist-thumbnail-margin-inline-start: var(--spectrum-spacing-100); - - /* label */ - --spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100); - --spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default); } } diff --git a/components/avatar/index.css b/components/avatar/index.css index 2ebb576d16..74fd79f725 100644 --- a/components/avatar/index.css +++ b/components/avatar/index.css @@ -13,6 +13,66 @@ @import "./themes/spectrum-two.css"; +.spectrum-Avatar { + --spectrum-avatar-color-opacity: 1; + + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); + + --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); + + --spectrum-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color); + + --spectrum-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled); +} + +.spectrum-Avatar--size50 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-50); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-50); +} + +.spectrum-Avatar--size75 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-75); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-75); +} + +.spectrum-Avatar--size100 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); +} + +.spectrum-Avatar--size200 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-200); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-200); +} + +.spectrum-Avatar--size300 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-300); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-300); +} + +.spectrum-Avatar--size400 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-400); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-400); +} + +.spectrum-Avatar--size500 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-500); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-500); +} + +.spectrum-Avatar--size600 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-600); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-600); +} + +.spectrum-Avatar--size700 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-700); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-700); +} + @media (forced-colors: active) { .spectrum-Avatar { --highcontrast-avatar-focus-indicator-color: CanvasText; @@ -20,8 +80,6 @@ } .spectrum-Avatar { - --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); - display: inline-block; position: relative; inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)); @@ -42,26 +100,24 @@ &.is-disabled { opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled))); } +} - &:not(.is-disabled) { - &.is-focused, - &: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)); - } - } +.spectrum-Avatar.is-focused:not(.is-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)); } } diff --git a/components/avatar/metadata/metadata.json b/components/avatar/metadata/metadata.json index 7961c5c4ca..856050ffc2 100644 --- a/components/avatar/metadata/metadata.json +++ b/components/avatar/metadata/metadata.json @@ -2,20 +2,20 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Avatar", + ".spectrum-Avatar--size100", + ".spectrum-Avatar--size200", + ".spectrum-Avatar--size300", + ".spectrum-Avatar--size400", + ".spectrum-Avatar--size50", + ".spectrum-Avatar--size500", + ".spectrum-Avatar--size600", + ".spectrum-Avatar--size700", + ".spectrum-Avatar--size75", ".spectrum-Avatar-image", ".spectrum-Avatar-link", ".spectrum-Avatar.is-disabled", ".spectrum-Avatar.is-focused:not(.is-disabled):after", - ".spectrum-Avatar.spectrum-Avatar--size100", - ".spectrum-Avatar.spectrum-Avatar--size200", - ".spectrum-Avatar.spectrum-Avatar--size300", - ".spectrum-Avatar.spectrum-Avatar--size400", - ".spectrum-Avatar.spectrum-Avatar--size50", - ".spectrum-Avatar.spectrum-Avatar--size500", - ".spectrum-Avatar.spectrum-Avatar--size600", - ".spectrum-Avatar.spectrum-Avatar--size700", - ".spectrum-Avatar.spectrum-Avatar--size75", - ".spectrum-Avatar:not(.is-disabled):focus-visible:after" + ".spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after" ], "modifiers": [ "--mod-avatar-block-size", @@ -52,33 +52,7 @@ "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness" ], - "system-theme": [ - "--system-avatar-block-size", - "--system-avatar-color-opacity", - "--system-avatar-color-opacity-disabled", - "--system-avatar-focus-indicator-color", - "--system-avatar-focus-indicator-gap", - "--system-avatar-focus-indicator-thickness", - "--system-avatar-inline-size", - "--system-avatar-size-100-block-size", - "--system-avatar-size-100-inline-size", - "--system-avatar-size-200-block-size", - "--system-avatar-size-200-inline-size", - "--system-avatar-size-300-block-size", - "--system-avatar-size-300-inline-size", - "--system-avatar-size-400-block-size", - "--system-avatar-size-400-inline-size", - "--system-avatar-size-50-block-size", - "--system-avatar-size-50-inline-size", - "--system-avatar-size-500-block-size", - "--system-avatar-size-500-inline-size", - "--system-avatar-size-600-block-size", - "--system-avatar-size-600-inline-size", - "--system-avatar-size-700-block-size", - "--system-avatar-size-700-inline-size", - "--system-avatar-size-75-block-size", - "--system-avatar-size-75-inline-size" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-avatar-color-opacity-disabled", diff --git a/components/avatar/themes/spectrum-two.css b/components/avatar/themes/spectrum-two.css index d6de93fbec..3b48a570c2 100644 --- a/components/avatar/themes/spectrum-two.css +++ b/components/avatar/themes/spectrum-two.css @@ -10,61 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-Avatar { - --spectrum-avatar-color-opacity: 1; - - --spectrum-avatar-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--size100 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); - } - - &.spectrum-Avatar--size50 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-50); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-50); - } - - &.spectrum-Avatar--size75 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-75); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-75); - } - - &.spectrum-Avatar--size200 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-200); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-200); - } - - &.spectrum-Avatar--size300 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-300); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-300); - } - - &.spectrum-Avatar--size400 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-400); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-400); - } - - &.spectrum-Avatar--size500 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-500); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-500); - } - - &.spectrum-Avatar--size600 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-600); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-600); - } - - &.spectrum-Avatar--size700 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-700); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-700); - } - } -} diff --git a/components/badge/index.css b/components/badge/index.css index d418a81d5d..c43f334ea3 100644 --- a/components/badge/index.css +++ b/components/badge/index.css @@ -13,10 +13,144 @@ @import "./themes/spectrum-two.css"; +.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); + + --highcontrast-badge-border-color: CanvasText; +} + +/* text and icon color is black for these background colors */ +.spectrum-Badge--orange, +.spectrum-Badge--yellow, +.spectrum-Badge--chartreuse, +.spectrum-Badge--celery { + --spectrum-badge-label-icon-color: var(--spectrum-black); +} + +/* dark theme all non-semantic colors are black */ +.spectrum-Badge--gray, +.spectrum-Badge--red, +.spectrum-Badge--green, +.spectrum-Badge--seafoam, +.spectrum-Badge--cyan, +.spectrum-Badge--blue, +.spectrum-Badge--indigo, +.spectrum-Badge--purple, +.spectrum-Badge--fuchsia, +.spectrum-Badge--magenta { + --spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary); +} + +.spectrum-Badge--sizeS { + --spectrum-badge-height: var(--spectrum-component-height-75); + + /* label */ + --spectrum-badge-font-size: var(--spectrum-font-size-75); + --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-75); + --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-75); + --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-75); + + /* icon */ + --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-75); + --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-75); + --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75); +} + +.spectrum-Badge--sizeL { + --spectrum-badge-height: var(--spectrum-component-height-100); + + /* label */ + --spectrum-badge-font-size: var(--spectrum-font-size-200); + --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-200); + --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-200); + --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-200); + + /* icon */ + --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-200); + --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-200); + --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-200); +} + +.spectrum-Badge--sizeXL { + --spectrum-badge-height: var(--spectrum-component-height-100); + + /* label */ + --spectrum-badge-font-size: var(--spectrum-font-size-300); + --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-300); + --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-300); + --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-300); + + /* icon */ + --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-300); + --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-300); + --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300); +} + /* windows high contrast mode */ @media (forced-colors: active) { .spectrum-Badge { - --highcontrast-badge-border-color: CanvasText; + border-color: var(--highcontrast-badge-border-color); } } @@ -34,9 +168,7 @@ -moz-osx-font-smoothing: auto; border-radius: var(--mod-badge-corner-radius, var(--spectrum-badge-corner-radius)); - border-width: 1px; - border-style: solid; - border-color: var(--highcontrast-badge-border-color, transparent); + 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)); diff --git a/components/badge/metadata/metadata.json b/components/badge/metadata/metadata.json index 7bad0f5844..c8be859d83 100644 --- a/components/badge/metadata/metadata.json +++ b/components/badge/metadata/metadata.json @@ -25,6 +25,9 @@ ".spectrum-Badge--purple", ".spectrum-Badge--red", ".spectrum-Badge--seafoam", + ".spectrum-Badge--sizeL", + ".spectrum-Badge--sizeS", + ".spectrum-Badge--sizeXL", ".spectrum-Badge--yellow", ".spectrum-Badge-icon", ".spectrum-Badge-icon + .spectrum-Badge-label", @@ -32,25 +35,7 @@ ".spectrum-Badge-label", ".spectrum-Badge-label:lang(ja)", ".spectrum-Badge-label:lang(ko)", - ".spectrum-Badge-label:lang(zh)", - ".spectrum-Badge.spectrum-Badge--blue", - ".spectrum-Badge.spectrum-Badge--celery", - ".spectrum-Badge.spectrum-Badge--chartreuse", - ".spectrum-Badge.spectrum-Badge--cyan", - ".spectrum-Badge.spectrum-Badge--fuchsia", - ".spectrum-Badge.spectrum-Badge--gray", - ".spectrum-Badge.spectrum-Badge--green", - ".spectrum-Badge.spectrum-Badge--indigo", - ".spectrum-Badge.spectrum-Badge--magenta", - ".spectrum-Badge.spectrum-Badge--orange", - ".spectrum-Badge.spectrum-Badge--purple", - ".spectrum-Badge.spectrum-Badge--red", - ".spectrum-Badge.spectrum-Badge--seafoam", - ".spectrum-Badge.spectrum-Badge--sizeL", - ".spectrum-Badge.spectrum-Badge--sizeM", - ".spectrum-Badge.spectrum-Badge--sizeS", - ".spectrum-Badge.spectrum-Badge--sizeXL", - ".spectrum-Badge.spectrum-Badge--yellow" + ".spectrum-Badge-label:lang(zh)" ], "modifiers": [ "--mod-badge-background-color-accent", @@ -190,96 +175,7 @@ "--spectrum-workflow-icon-size-75", "--spectrum-yellow-background-color-default" ], - "system-theme": [ - "--system-badge-background-color-accent", - "--system-badge-background-color-blue", - "--system-badge-background-color-celery", - "--system-badge-background-color-chartreuse", - "--system-badge-background-color-cyan", - "--system-badge-background-color-default", - "--system-badge-background-color-fuchsia", - "--system-badge-background-color-gray", - "--system-badge-background-color-green", - "--system-badge-background-color-indigo", - "--system-badge-background-color-informative", - "--system-badge-background-color-magenta", - "--system-badge-background-color-negative", - "--system-badge-background-color-notice", - "--system-badge-background-color-orange", - "--system-badge-background-color-positive", - "--system-badge-background-color-purple", - "--system-badge-background-color-red", - "--system-badge-background-color-seafoam", - "--system-badge-background-color-yellow", - "--system-badge-blue-label-icon-color", - "--system-badge-celery-label-icon-color", - "--system-badge-chartreuse-label-icon-color", - "--system-badge-corner-radius", - "--system-badge-cyan-label-icon-color", - "--system-badge-font-size", - "--system-badge-fuchsia-label-icon-color", - "--system-badge-gray-label-icon-color", - "--system-badge-green-label-icon-color", - "--system-badge-height", - "--system-badge-icon-only-spacing-horizontal", - "--system-badge-icon-spacing-horizontal", - "--system-badge-icon-spacing-vertical-top", - "--system-badge-icon-text-spacing", - "--system-badge-indigo-label-icon-color", - "--system-badge-label-icon-color", - "--system-badge-label-spacing-horizontal", - "--system-badge-label-spacing-vertical-bottom", - "--system-badge-label-spacing-vertical-top", - "--system-badge-line-height", - "--system-badge-line-height-cjk", - "--system-badge-magenta-label-icon-color", - "--system-badge-orange-label-icon-color", - "--system-badge-purple-label-icon-color", - "--system-badge-red-label-icon-color", - "--system-badge-seafoam-label-icon-color", - "--system-badge-size-l-font-size", - "--system-badge-size-l-height", - "--system-badge-size-l-icon-only-spacing-horizontal", - "--system-badge-size-l-icon-spacing-horizontal", - "--system-badge-size-l-icon-spacing-vertical-top", - "--system-badge-size-l-icon-text-spacing", - "--system-badge-size-l-label-spacing-horizontal", - "--system-badge-size-l-label-spacing-vertical-bottom", - "--system-badge-size-l-label-spacing-vertical-top", - "--system-badge-size-l-workflow-icon-size", - "--system-badge-size-m-font-size", - "--system-badge-size-m-height", - "--system-badge-size-m-icon-only-spacing-horizontal", - "--system-badge-size-m-icon-spacing-horizontal", - "--system-badge-size-m-icon-spacing-vertical-top", - "--system-badge-size-m-icon-text-spacing", - "--system-badge-size-m-label-spacing-horizontal", - "--system-badge-size-m-label-spacing-vertical-bottom", - "--system-badge-size-m-label-spacing-vertical-top", - "--system-badge-size-m-workflow-icon-size", - "--system-badge-size-s-font-size", - "--system-badge-size-s-height", - "--system-badge-size-s-icon-only-spacing-horizontal", - "--system-badge-size-s-icon-spacing-horizontal", - "--system-badge-size-s-icon-spacing-vertical-top", - "--system-badge-size-s-icon-text-spacing", - "--system-badge-size-s-label-spacing-horizontal", - "--system-badge-size-s-label-spacing-vertical-bottom", - "--system-badge-size-s-label-spacing-vertical-top", - "--system-badge-size-s-workflow-icon-size", - "--system-badge-size-xl-font-size", - "--system-badge-size-xl-height", - "--system-badge-size-xl-icon-only-spacing-horizontal", - "--system-badge-size-xl-icon-spacing-horizontal", - "--system-badge-size-xl-icon-spacing-vertical-top", - "--system-badge-size-xl-icon-text-spacing", - "--system-badge-size-xl-label-spacing-horizontal", - "--system-badge-size-xl-label-spacing-vertical-bottom", - "--system-badge-size-xl-label-spacing-vertical-top", - "--system-badge-size-xl-workflow-icon-size", - "--system-badge-workflow-icon-size", - "--system-badge-yellow-label-icon-color" - ], + "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-badge-border-color"] } diff --git a/components/badge/themes/spectrum-two.css b/components/badge/themes/spectrum-two.css index 133baf759f..3b48a570c2 100644 --- a/components/badge/themes/spectrum-two.css +++ b/components/badge/themes/spectrum-two.css @@ -10,134 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-Badge { - /* badge styling for all t-shirt sizes and all themes */ - --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100); - - /* label text styles for all t-shirt sizes and all themes */ - --spectrum-badge-line-height: var(--spectrum-line-height-100); - --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); - - /* text and icon color default white for all t-shirt sizes and all themes */ - --spectrum-badge-label-icon-color: var(--spectrum-white); - - /* background color default for all t-shirt sizes and all themes */ - --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - - /* semantic background colors for all t-shirt sizes and all themes */ - --spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default); - --spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default); - --spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default); - --spectrum-badge-background-color-positive: var(--spectrum-positive-background-color-default); - --spectrum-badge-background-color-notice: var(--spectrum-notice-background-color-default); - - /* non-semantic background colors */ - --spectrum-badge-background-color-gray: var(--spectrum-gray-background-color-default); - --spectrum-badge-background-color-red: var(--spectrum-red-background-color-default); - --spectrum-badge-background-color-orange: var(--spectrum-orange-background-color-default); - --spectrum-badge-background-color-yellow: var(--spectrum-yellow-background-color-default); - --spectrum-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default); - --spectrum-badge-background-color-celery: var(--spectrum-celery-background-color-default); - --spectrum-badge-background-color-green: var(--spectrum-green-background-color-default); - --spectrum-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default); - --spectrum-badge-background-color-cyan: var(--spectrum-cyan-background-color-default); - --spectrum-badge-background-color-blue: var(--spectrum-blue-background-color-default); - --spectrum-badge-background-color-indigo: var(--spectrum-indigo-background-color-default); - --spectrum-badge-background-color-purple: var(--spectrum-purple-background-color-default); - --spectrum-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default); - --spectrum-badge-background-color-magenta: var(--spectrum-magenta-background-color-default); - - /* text and icon color is black for these background colors */ - &.spectrum-Badge--orange, - &.spectrum-Badge--yellow, - &.spectrum-Badge--chartreuse, - &.spectrum-Badge--celery { - --spectrum-badge-label-icon-color: var(--spectrum-black); - } - - /* dark theme all non-semantic colors are black */ - &.spectrum-Badge--gray, - &.spectrum-Badge--red, - &.spectrum-Badge--green, - &.spectrum-Badge--seafoam, - &.spectrum-Badge--cyan, - &.spectrum-Badge--blue, - &.spectrum-Badge--indigo, - &.spectrum-Badge--purple, - &.spectrum-Badge--fuchsia, - &.spectrum-Badge--magenta { - --spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary); - } - - &, - &.spectrum-Badge--sizeM { - --spectrum-badge-height: var(--spectrum-component-height-100); - - /* label */ - --spectrum-badge-font-size: var(--spectrum-font-size-100); - --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 */ - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); - --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); - } - - &.spectrum-Badge--sizeS { - --spectrum-badge-height: var(--spectrum-component-height-75); - - /* label */ - --spectrum-badge-font-size: var(--spectrum-font-size-75); - --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-75); - --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-75); - --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-75); - - /* icon */ - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-75); - --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-75); - --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75); - } - - &.spectrum-Badge--sizeL { - --spectrum-badge-height: var(--spectrum-component-height-100); - - /* label */ - --spectrum-badge-font-size: var(--spectrum-font-size-200); - --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-200); - --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-200); - --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-200); - - /* icon */ - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-200); - --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-200); - --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-200); - } - - &.spectrum-Badge--sizeXL { - --spectrum-badge-height: var(--spectrum-component-height-100); - - /* label */ - --spectrum-badge-font-size: var(--spectrum-font-size-300); - --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-300); - --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-300); - --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-300); - - /* icon */ - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-300); - --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-300); - --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-300); - --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300); - } - } -} diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css index 899eaa4d62..22eeb22fd1 100644 --- a/components/breadcrumb/index.css +++ b/components/breadcrumb/index.css @@ -13,6 +13,101 @@ @import "./themes/spectrum-two.css"; +.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); +} + /* windows high contrast mode */ @media (forced-colors: active) { .spectrum-Breadcrumbs { @@ -108,15 +203,6 @@ &:last-of-type { block-size: auto; inline-size: 100%; - - 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 { @@ -141,6 +227,17 @@ 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)); diff --git a/components/breadcrumb/metadata/metadata.json b/components/breadcrumb/metadata/metadata.json index 5e1aac479c..561253d9ef 100644 --- a/components/breadcrumb/metadata/metadata.json +++ b/components/breadcrumb/metadata/metadata.json @@ -190,62 +190,7 @@ "--spectrum-text-underline-gap", "--spectrum-text-underline-thickness" ], - "system-theme": [ - "--system-breadcrumbs-action-button-color", - "--system-breadcrumbs-action-button-color-disabled", - "--system-breadcrumbs-action-button-spacing-block", - "--system-breadcrumbs-action-button-spacing-block-between-multiline", - "--system-breadcrumbs-action-button-spacing-block-compact", - "--system-breadcrumbs-action-button-spacing-block-multiline", - "--system-breadcrumbs-action-button-spacing-inline", - "--system-breadcrumbs-action-button-spacing-inline-start", - "--system-breadcrumbs-block-size", - "--system-breadcrumbs-block-size-compact", - "--system-breadcrumbs-block-size-multiline", - "--system-breadcrumbs-focus-indicator-color", - "--system-breadcrumbs-focus-indicator-gap", - "--system-breadcrumbs-focus-indicator-thickness", - "--system-breadcrumbs-font-family", - "--system-breadcrumbs-font-family-compact", - "--system-breadcrumbs-font-family-compact-current", - "--system-breadcrumbs-font-family-current", - "--system-breadcrumbs-font-family-multiline", - "--system-breadcrumbs-font-family-multiline-current", - "--system-breadcrumbs-font-size", - "--system-breadcrumbs-font-size-compact", - "--system-breadcrumbs-font-size-compact-current", - "--system-breadcrumbs-font-size-current", - "--system-breadcrumbs-font-size-multiline", - "--system-breadcrumbs-font-size-multiline-current", - "--system-breadcrumbs-font-weight", - "--system-breadcrumbs-font-weight-compact", - "--system-breadcrumbs-font-weight-compact-current", - "--system-breadcrumbs-font-weight-current", - "--system-breadcrumbs-font-weight-multiline", - "--system-breadcrumbs-font-weight-multiline-current", - "--system-breadcrumbs-icon-spacing-block", - "--system-breadcrumbs-icon-spacing-block-between-multiline", - "--system-breadcrumbs-icon-spacing-block-compact", - "--system-breadcrumbs-icon-spacing-block-start-multiline", - "--system-breadcrumbs-inline-end", - "--system-breadcrumbs-inline-start", - "--system-breadcrumbs-item-link-border-radius", - "--system-breadcrumbs-line-height", - "--system-breadcrumbs-separator-color", - "--system-breadcrumbs-separator-spacing-inline", - "--system-breadcrumbs-text-color", - "--system-breadcrumbs-text-color-current", - "--system-breadcrumbs-text-color-disabled", - "--system-breadcrumbs-text-decoration-gap", - "--system-breadcrumbs-text-decoration-thickness", - "--system-breadcrumbs-text-spacing-block-between-multiline", - "--system-breadcrumbs-text-spacing-block-end", - "--system-breadcrumbs-text-spacing-block-end-compact", - "--system-breadcrumbs-text-spacing-block-end-multiline", - "--system-breadcrumbs-text-spacing-block-start", - "--system-breadcrumbs-text-spacing-block-start-compact", - "--system-breadcrumbs-text-spacing-block-start-multiline" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-breadcrumbs-action-button-color", diff --git a/components/breadcrumb/themes/spectrum-two.css b/components/breadcrumb/themes/spectrum-two.css index 43469d54dd..3b48a570c2 100644 --- a/components/breadcrumb/themes/spectrum-two.css +++ b/components/breadcrumb/themes/spectrum-two.css @@ -10,100 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-Breadcrumbs { - /* block size */ - --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --spectrum-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact); - --spectrum-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline); - - /* text regular */ - --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-100); - --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200); - --spectrum-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); - - /* text regular active item */ - --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --spectrum-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); - - /* text compact */ - --spectrum-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --spectrum-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight); - - /* text compact active item */ - --spectrum-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100); - --spectrum-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight); - - /* text multiline */ - --spectrum-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --spectrum-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight); - - /* text multiline active item */ - --spectrum-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300); - --spectrum-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight); - - /* hover, active, focus underline */ - --spectrum-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness); - --spectrum-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap); - - /* space between items */ - --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-text-to-visual-100); - - /* vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text); - --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text); - --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-icon); - - /* compact vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start-compact: var(--spectrum-breadcrumbs-top-to-text-compact); - --spectrum-breadcrumbs-text-spacing-block-end-compact: var(--spectrum-breadcrumbs-bottom-to-text-compact); - --spectrum-breadcrumbs-icon-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-separator-icon-compact); - - /* multiline vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-text-multiline); - --spectrum-breadcrumbs-text-spacing-block-end-multiline: var(--spectrum-breadcrumbs-bottom-to-text-multiline); - --spectrum-breadcrumbs-text-spacing-block-between-multiline: var(--spectrum-breadcrumbs-top-text-to-bottom-text); /* vertical between lines */ - --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-separator-icon-multiline); - --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline); /* vertical between lines */ - - /* horizontal outer spacing of list */ - --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text); - --spectrum-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text); - - /* menu action button icon spacing */ - --spectrum-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon); - - /* action button spacing */ - --spectrum-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu); - --spectrum-breadcrumbs-action-button-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* compact */ - - --spectrum-breadcrumbs-action-button-spacing-inline-start: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); /* if icon is first item */ - - --spectrum-breadcrumbs-action-button-spacing-block-multiline: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* multiline */ - --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); /* multiline */ - - /* Focus Indicator */ - --spectrum-breadcrumbs-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - - /* placeholder for border radius for focus indicator */ - --spectrum-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-100); - - /* Colors */ - --spectrum-breadcrumbs-text-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-breadcrumbs-text-color-current: var(--spectrum-neutral-content-color-default); - --spectrum-breadcrumbs-text-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-breadcrumbs-separator-color: var(--spectrum-neutral-content-color-default); - --spectrum-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color); - } -} diff --git a/components/button/index.css b/components/button/index.css index 0edf733e8b..663fda1516 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -16,11 +16,91 @@ /* default for all buttons */ .spectrum-Button { - @extend %spectrum-BaseButton; - @extend %spectrum-ButtonWithFocusRing; + --spectrum-button-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-button-border-radius: calc(var(--spectrum-button-height) / 2); + --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); - /* @passthrough -- ProgressCircle */ --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-height: var(--spectrum-component-height-75); + + --spectrum-button-font-size: var(--spectrum-font-size-75); + + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75); + --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small); + --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75); +} + +.spectrum-Button--sizeM { + --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); + + --spectrum-button-height: var(--spectrum-component-height-100); + + --spectrum-button-font-size: var(--spectrum-font-size-100); + + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium); + --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); +} + +.spectrum-Button--sizeL { + --spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); + + --spectrum-button-height: var(--spectrum-component-height-200); + + --spectrum-button-font-size: var(--spectrum-font-size-200); + + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200); + --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large); + --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-200); +} + +.spectrum-Button--sizeXL { + --spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); + + --spectrum-button-height: var(--spectrum-component-height-300); + + --spectrum-button-font-size: var(--spectrum-font-size-300); + + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300); + --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large); + --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300); +} + +.spectrum-Button { + @extend %spectrum-BaseButton; + @extend %spectrum-ButtonWithFocusRing; border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius)); border-width: var(--mod-button-border-width, var(--spectrum-button-border-width)); @@ -37,44 +117,24 @@ padding-inline: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)); position: relative; - /* Remove button the margin in Firefox and Safari. */ - margin-block: var(--mod-button-margin-block, 0); - margin-inline-end: var(--mod-button-margin-right, 0); - margin-inline-start: var(--mod-button-margin-left, 0); + /* let staticColor variants inherit their color */ + color: inherit; - 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, - border-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out, - 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; + 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; } - &: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))); - } - - &: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))); - } - .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. */ - --spectrum-button-icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-size, var(--spectrum-button-intended-icon-size))); + /* Any block-size difference between the intended workflow icon size and actual icon used. + Helps support any existing use of smaller UI icons instead of intended Workflow icons. */ + --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-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(--spectrum-button-icon-size-difference, 0px) / 2))); + 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; @@ -82,8 +142,9 @@ align-self: flex-start; } - .spectrum-Icon + .spectrum-Button-label { - text-align: var(--mod-button-text-align-with-icon, 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 { @@ -101,32 +162,90 @@ border-radius: 50%; } } +} - &:focus-visible, - &.is-focused { - /* Remove the default focus outline */ - box-shadow: none; - outline: none; +a.spectrum-Button { + @extend %spectrum-AnchorButton; +} - 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))); +.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); +} +.spectrum-Button .spectrum-Icon + .spectrum-Button-label { + 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(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)))); + 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, calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)))); + 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], @@ -172,20 +291,6 @@ } } -a.spectrum-Button { - @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); -} - /* Disable button label wrap */ .spectrum-Button--noWrap { .spectrum-Button-label { @@ -195,19 +300,13 @@ a.spectrum-Button { } } + /* Static color variants */ -.spectrum-Button.spectrum-Button--staticWhite { +.spectrum-Button--staticWhite { --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); - - &.is-selected { - --mod-button-content-color-default: var(--mod-button-static-content-color); - --mod-button-content-color-hover: var(--mod-button-static-content-color); - --mod-button-content-color-down: var(--mod-button-static-content-color); - --mod-button-content-color-focus: var(--mod-button-static-content-color); - } } -.spectrum-Button.spectrum-Button--staticBlack { +.spectrum-Button--staticBlack { --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); } @@ -230,20 +329,20 @@ a.spectrum-Button { --highcontrast-button-content-color-disabled: GrayText; --highcontrast-button-border-color-disabled: GrayText; - /* @passthrough start */ --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); --mod-button-animation-duration: 0s; - /* @passthrough end */ .spectrum-Button-label { forced-color-adjust: none; } - &: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; + &: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 { diff --git a/components/button/metadata/metadata.json b/components/button/metadata/metadata.json index f4df1d2470..651d44b65a 100644 --- a/components/button/metadata/metadata.json +++ b/components/button/metadata/metadata.json @@ -7,43 +7,36 @@ ".spectrum-Button .spectrum-Icon + .spectrum-Button-label", ".spectrum-Button .spectrum-ProgressCircle", ".spectrum-Button--noWrap .spectrum-Button-label", + ".spectrum-Button--sizeL", + ".spectrum-Button--sizeM", + ".spectrum-Button--sizeS", + ".spectrum-Button--sizeXL", + ".spectrum-Button--staticBlack", + ".spectrum-Button--staticWhite", ".spectrum-Button-label", ".spectrum-Button-label:empty", ".spectrum-Button.is-disabled", - ".spectrum-Button.is-focused", ".spectrum-Button.is-focused:after", ".spectrum-Button.is-pending", ".spectrum-Button.is-pending .spectrum-Button-label", ".spectrum-Button.is-pending .spectrum-Icon", ".spectrum-Button.is-pending .spectrum-ProgressCircle", ".spectrum-Button.is-selected", - ".spectrum-Button.is-selected.spectrum-Button--emphasized", - ".spectrum-Button.spectrum-Button--accent", ".spectrum-Button.spectrum-Button--accent.spectrum-Button--fill", - ".spectrum-Button.spectrum-Button--accent.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--iconOnly", ".spectrum-Button.spectrum-Button--iconOnly .spectrum-Icon", ".spectrum-Button.spectrum-Button--iconOnly:after", - ".spectrum-Button.spectrum-Button--negative", - ".spectrum-Button.spectrum-Button--negative.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--primary", ".spectrum-Button.spectrum-Button--primary.spectrum-Button--outline", - ".spectrum-Button.spectrum-Button--quiet", ".spectrum-Button.spectrum-Button--secondary", ".spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline", - ".spectrum-Button.spectrum-Button--sizeL", - ".spectrum-Button.spectrum-Button--sizeM", - ".spectrum-Button.spectrum-Button--sizeS", - ".spectrum-Button.spectrum-Button--sizeXL", ".spectrum-Button.spectrum-Button--staticBlack", ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline", - ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet", ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary", ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--staticWhite", ".spectrum-Button.spectrum-Button--staticWhite.is-selected", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline", - ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline", ".spectrum-Button::-moz-focus-inner", @@ -85,7 +78,6 @@ "--mod-button-edge-to-text", "--mod-button-edge-to-visual", "--mod-button-edge-to-visual-only", - "--mod-button-focus-indicator-color", "--mod-button-focus-indicator-gap", "--mod-button-focus-ring-border-radius", "--mod-button-focus-ring-color", @@ -102,11 +94,6 @@ "--mod-button-max-inline-size", "--mod-button-min-width", "--mod-button-padding-label-to-icon", - "--mod-button-static-content-color", - "--mod-button-static-white-content-color-default", - "--mod-button-static-white-content-color-down", - "--mod-button-static-white-content-color-focus", - "--mod-button-static-white-content-color-hover", "--mod-button-text-align", "--mod-button-text-align-with-icon", "--mod-button-top-to-icon", @@ -144,11 +131,11 @@ "--spectrum-button-edge-to-visual", "--spectrum-button-edge-to-visual-only", "--spectrum-button-focus-indicator-color", + "--spectrum-button-focus-ring-border-radius", "--spectrum-button-focus-ring-gap", "--spectrum-button-focus-ring-thickness", "--spectrum-button-font-size", "--spectrum-button-height", - "--spectrum-button-icon-size-difference", "--spectrum-button-intended-icon-size", "--spectrum-button-line-height", "--spectrum-button-min-width", @@ -162,21 +149,7 @@ "--spectrum-button-top-to-text-small" ], "global": [ - "--spectrum-accent-background-color-default", - "--spectrum-accent-background-color-down", - "--spectrum-accent-background-color-hover", - "--spectrum-accent-background-color-key-focus", - "--spectrum-accent-color-1000", - "--spectrum-accent-color-1100", - "--spectrum-accent-color-200", - "--spectrum-accent-color-300", - "--spectrum-accent-color-900", - "--spectrum-accent-content-color-default", - "--spectrum-accent-content-color-down", - "--spectrum-accent-content-color-hover", - "--spectrum-accent-content-color-key-focus", "--spectrum-animation-duration-100", - "--spectrum-black", "--spectrum-bold-font-weight", "--spectrum-border-width-200", "--spectrum-component-height-100", @@ -199,15 +172,7 @@ "--spectrum-component-top-to-workflow-icon-200", "--spectrum-component-top-to-workflow-icon-300", "--spectrum-component-top-to-workflow-icon-75", - "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", - "--spectrum-disabled-content-color", - "--spectrum-disabled-static-black-background-color", - "--spectrum-disabled-static-black-border-color", - "--spectrum-disabled-static-black-content-color", - "--spectrum-disabled-static-white-background-color", - "--spectrum-disabled-static-white-border-color", - "--spectrum-disabled-static-white-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -224,29 +189,8 @@ "--spectrum-gray-600", "--spectrum-gray-800", "--spectrum-gray-900", - "--spectrum-icon-size", + "--spectrum-icon-block-size", "--spectrum-line-height-100", - "--spectrum-negative-background-color-default", - "--spectrum-negative-background-color-down", - "--spectrum-negative-background-color-hover", - "--spectrum-negative-background-color-key-focus", - "--spectrum-negative-color-1000", - "--spectrum-negative-color-1100", - "--spectrum-negative-color-200", - "--spectrum-negative-color-300", - "--spectrum-negative-color-900", - "--spectrum-negative-content-color-default", - "--spectrum-negative-content-color-down", - "--spectrum-negative-content-color-hover", - "--spectrum-negative-content-color-key-focus", - "--spectrum-neutral-background-color-default", - "--spectrum-neutral-background-color-down", - "--spectrum-neutral-background-color-hover", - "--spectrum-neutral-background-color-key-focus", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", "--spectrum-neutral-subdued-background-color-default", "--spectrum-neutral-subdued-background-color-down", "--spectrum-neutral-subdued-background-color-hover", @@ -254,7 +198,6 @@ "--spectrum-progress-circle-thickness-medium", "--spectrum-sans-font-family-stack", "--spectrum-static-black-focus-indicator-color", - "--spectrum-static-white-focus-indicator-color", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", @@ -272,44 +215,13 @@ "--spectrum-transparent-white-500", "--spectrum-transparent-white-600", "--spectrum-transparent-white-900", - "--spectrum-white", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", + "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], "system-theme": [ - "--system-button-accent-background-color-default", - "--system-button-accent-background-color-disabled", - "--system-button-accent-background-color-down", - "--system-button-accent-background-color-focus", - "--system-button-accent-background-color-hover", - "--system-button-accent-border-color-default", - "--system-button-accent-border-color-disabled", - "--system-button-accent-border-color-down", - "--system-button-accent-border-color-focus", - "--system-button-accent-border-color-hover", - "--system-button-accent-content-color-default", - "--system-button-accent-content-color-disabled", - "--system-button-accent-content-color-down", - "--system-button-accent-content-color-focus", - "--system-button-accent-content-color-hover", - "--system-button-accent-outline-background-color-default", - "--system-button-accent-outline-background-color-disabled", - "--system-button-accent-outline-background-color-down", - "--system-button-accent-outline-background-color-focus", - "--system-button-accent-outline-background-color-hover", - "--system-button-accent-outline-border-color-default", - "--system-button-accent-outline-border-color-disabled", - "--system-button-accent-outline-border-color-down", - "--system-button-accent-outline-border-color-focus", - "--system-button-accent-outline-border-color-hover", - "--system-button-accent-outline-content-color-default", - "--system-button-accent-outline-content-color-disabled", - "--system-button-accent-outline-content-color-down", - "--system-button-accent-outline-content-color-focus", - "--system-button-accent-outline-content-color-hover", - "--system-button-animation-duration", "--system-button-background-color-default", "--system-button-background-color-disabled", "--system-button-background-color-down", @@ -320,342 +232,80 @@ "--system-button-border-color-down", "--system-button-border-color-focus", "--system-button-border-color-hover", - "--system-button-border-radius", - "--system-button-border-width", - "--system-button-bottom-to-text", - "--system-button-content-color-default", - "--system-button-content-color-disabled", - "--system-button-content-color-down", - "--system-button-content-color-focus", - "--system-button-content-color-hover", - "--system-button-edge-to-text", - "--system-button-edge-to-visual", - "--system-button-edge-to-visual-only", - "--system-button-focus-indicator-color", - "--system-button-focus-ring-gap", - "--system-button-focus-ring-thickness", - "--system-button-font-size", - "--system-button-height", - "--system-button-intended-icon-size", - "--system-button-line-height", - "--system-button-min-width", - "--system-button-negative-background-color-default", - "--system-button-negative-background-color-disabled", - "--system-button-negative-background-color-down", - "--system-button-negative-background-color-focus", - "--system-button-negative-background-color-hover", - "--system-button-negative-border-color-default", - "--system-button-negative-border-color-disabled", - "--system-button-negative-border-color-down", - "--system-button-negative-border-color-focus", - "--system-button-negative-border-color-hover", - "--system-button-negative-content-color-default", - "--system-button-negative-content-color-disabled", - "--system-button-negative-content-color-down", - "--system-button-negative-content-color-focus", - "--system-button-negative-content-color-hover", - "--system-button-negative-outline-background-color-default", - "--system-button-negative-outline-background-color-disabled", - "--system-button-negative-outline-background-color-down", - "--system-button-negative-outline-background-color-focus", - "--system-button-negative-outline-background-color-hover", - "--system-button-negative-outline-border-color-default", - "--system-button-negative-outline-border-color-disabled", - "--system-button-negative-outline-border-color-down", - "--system-button-negative-outline-border-color-focus", - "--system-button-negative-outline-border-color-hover", - "--system-button-negative-outline-content-color-default", - "--system-button-negative-outline-content-color-disabled", - "--system-button-negative-outline-content-color-down", - "--system-button-negative-outline-content-color-focus", - "--system-button-negative-outline-content-color-hover", - "--system-button-padding-label-to-icon", - "--system-button-primary-background-color-default", - "--system-button-primary-background-color-disabled", - "--system-button-primary-background-color-down", - "--system-button-primary-background-color-focus", - "--system-button-primary-background-color-hover", - "--system-button-primary-border-color-default", - "--system-button-primary-border-color-disabled", - "--system-button-primary-border-color-down", - "--system-button-primary-border-color-focus", - "--system-button-primary-border-color-hover", "--system-button-primary-content-color-default", - "--system-button-primary-content-color-disabled", "--system-button-primary-content-color-down", "--system-button-primary-content-color-focus", "--system-button-primary-content-color-hover", - "--system-button-primary-outline-background-color-default", - "--system-button-primary-outline-background-color-disabled", "--system-button-primary-outline-background-color-down", "--system-button-primary-outline-background-color-focus", "--system-button-primary-outline-background-color-hover", "--system-button-primary-outline-border-color-default", - "--system-button-primary-outline-border-color-disabled", "--system-button-primary-outline-border-color-down", "--system-button-primary-outline-border-color-focus", "--system-button-primary-outline-border-color-hover", - "--system-button-primary-outline-content-color-default", - "--system-button-primary-outline-content-color-disabled", - "--system-button-primary-outline-content-color-down", - "--system-button-primary-outline-content-color-focus", - "--system-button-primary-outline-content-color-hover", - "--system-button-quiet-background-color-default", - "--system-button-quiet-background-color-disabled", - "--system-button-quiet-background-color-down", - "--system-button-quiet-background-color-focus", - "--system-button-quiet-background-color-hover", - "--system-button-quiet-border-color-default", - "--system-button-quiet-border-color-disabled", - "--system-button-quiet-border-color-down", - "--system-button-quiet-border-color-focus", - "--system-button-quiet-border-color-hover", "--system-button-secondary-background-color-default", - "--system-button-secondary-background-color-disabled", "--system-button-secondary-background-color-down", "--system-button-secondary-background-color-focus", "--system-button-secondary-background-color-hover", - "--system-button-secondary-border-color-default", - "--system-button-secondary-border-color-disabled", - "--system-button-secondary-border-color-down", - "--system-button-secondary-border-color-focus", - "--system-button-secondary-border-color-hover", - "--system-button-secondary-content-color-default", - "--system-button-secondary-content-color-disabled", - "--system-button-secondary-content-color-down", - "--system-button-secondary-content-color-focus", - "--system-button-secondary-content-color-hover", - "--system-button-secondary-outline-background-color-default", - "--system-button-secondary-outline-background-color-disabled", "--system-button-secondary-outline-background-color-down", "--system-button-secondary-outline-background-color-focus", "--system-button-secondary-outline-background-color-hover", "--system-button-secondary-outline-border-color-default", - "--system-button-secondary-outline-border-color-disabled", "--system-button-secondary-outline-border-color-down", "--system-button-secondary-outline-border-color-focus", "--system-button-secondary-outline-border-color-hover", - "--system-button-secondary-outline-content-color-default", - "--system-button-secondary-outline-content-color-disabled", - "--system-button-secondary-outline-content-color-down", - "--system-button-secondary-outline-content-color-focus", - "--system-button-secondary-outline-content-color-hover", "--system-button-selected-background-color-default", - "--system-button-selected-background-color-disabled", "--system-button-selected-background-color-down", "--system-button-selected-background-color-focus", "--system-button-selected-background-color-hover", - "--system-button-selected-border-color-default", - "--system-button-selected-border-color-disabled", - "--system-button-selected-border-color-down", - "--system-button-selected-border-color-focus", - "--system-button-selected-border-color-hover", - "--system-button-selected-content-color-default", - "--system-button-selected-content-color-down", - "--system-button-selected-content-color-focus", - "--system-button-selected-content-color-hover", - "--system-button-selected-emphasized-background-color-default", - "--system-button-selected-emphasized-background-color-down", - "--system-button-selected-emphasized-background-color-focus", - "--system-button-selected-emphasized-background-color-hover", - "--system-button-size-l-border-radius", - "--system-button-size-l-bottom-to-text", - "--system-button-size-l-edge-to-text", - "--system-button-size-l-edge-to-visual", - "--system-button-size-l-edge-to-visual-only", - "--system-button-size-l-font-size", - "--system-button-size-l-height", - "--system-button-size-l-intended-icon-size", - "--system-button-size-l-min-width", - "--system-button-size-l-padding-label-to-icon", - "--system-button-size-l-top-to-icon", - "--system-button-size-l-top-to-text", - "--system-button-size-m-border-radius", - "--system-button-size-m-bottom-to-text", - "--system-button-size-m-edge-to-text", - "--system-button-size-m-edge-to-visual", - "--system-button-size-m-edge-to-visual-only", - "--system-button-size-m-font-size", - "--system-button-size-m-height", - "--system-button-size-m-intended-icon-size", - "--system-button-size-m-min-width", - "--system-button-size-m-padding-label-to-icon", - "--system-button-size-m-top-to-icon", - "--system-button-size-m-top-to-text", - "--system-button-size-s-border-radius", - "--system-button-size-s-bottom-to-text", - "--system-button-size-s-edge-to-text", - "--system-button-size-s-edge-to-visual", - "--system-button-size-s-edge-to-visual-only", - "--system-button-size-s-font-size", - "--system-button-size-s-height", - "--system-button-size-s-intended-icon-size", - "--system-button-size-s-min-width", - "--system-button-size-s-padding-label-to-icon", - "--system-button-size-s-top-to-icon", - "--system-button-size-s-top-to-text", - "--system-button-size-xl-border-radius", - "--system-button-size-xl-bottom-to-text", - "--system-button-size-xl-edge-to-text", - "--system-button-size-xl-edge-to-visual", - "--system-button-size-xl-edge-to-visual-only", - "--system-button-size-xl-font-size", - "--system-button-size-xl-height", - "--system-button-size-xl-intended-icon-size", - "--system-button-size-xl-min-width", - "--system-button-size-xl-padding-label-to-icon", - "--system-button-size-xl-top-to-icon", - "--system-button-size-xl-top-to-text", "--system-button-static-black-background-color-default", - "--system-button-static-black-background-color-disabled", "--system-button-static-black-background-color-down", "--system-button-static-black-background-color-focus", "--system-button-static-black-background-color-hover", - "--system-button-static-black-border-color-default", - "--system-button-static-black-border-color-disabled", - "--system-button-static-black-border-color-down", - "--system-button-static-black-border-color-focus", - "--system-button-static-black-border-color-hover", - "--system-button-static-black-content-color-default", - "--system-button-static-black-content-color-disabled", - "--system-button-static-black-content-color-down", - "--system-button-static-black-content-color-focus", - "--system-button-static-black-content-color-hover", - "--system-button-static-black-focus-ring-color", - "--system-button-static-black-outline-background-color-default", - "--system-button-static-black-outline-background-color-disabled", "--system-button-static-black-outline-background-color-down", "--system-button-static-black-outline-background-color-focus", "--system-button-static-black-outline-background-color-hover", "--system-button-static-black-outline-border-color-default", - "--system-button-static-black-outline-border-color-disabled", "--system-button-static-black-outline-border-color-down", "--system-button-static-black-outline-border-color-focus", "--system-button-static-black-outline-border-color-hover", - "--system-button-static-black-outline-content-color-default", - "--system-button-static-black-outline-content-color-disabled", - "--system-button-static-black-outline-content-color-down", - "--system-button-static-black-outline-content-color-focus", - "--system-button-static-black-outline-content-color-hover", - "--system-button-static-black-outline-focus-indicator-color", - "--system-button-static-black-quiet-border-color-default", - "--system-button-static-black-quiet-border-color-disabled", - "--system-button-static-black-quiet-border-color-down", - "--system-button-static-black-quiet-border-color-focus", - "--system-button-static-black-quiet-border-color-hover", "--system-button-static-black-secondary-background-color-default", - "--system-button-static-black-secondary-background-color-disabled", "--system-button-static-black-secondary-background-color-down", "--system-button-static-black-secondary-background-color-focus", "--system-button-static-black-secondary-background-color-hover", - "--system-button-static-black-secondary-border-color-default", - "--system-button-static-black-secondary-border-color-disabled", - "--system-button-static-black-secondary-border-color-down", - "--system-button-static-black-secondary-border-color-focus", - "--system-button-static-black-secondary-border-color-hover", - "--system-button-static-black-secondary-content-color-default", - "--system-button-static-black-secondary-content-color-disabled", - "--system-button-static-black-secondary-content-color-down", - "--system-button-static-black-secondary-content-color-focus", - "--system-button-static-black-secondary-content-color-hover", - "--system-button-static-black-secondary-focus-indicator-color", - "--system-button-static-black-secondary-outline-background-color-default", - "--system-button-static-black-secondary-outline-background-color-disabled", "--system-button-static-black-secondary-outline-background-color-down", "--system-button-static-black-secondary-outline-background-color-focus", "--system-button-static-black-secondary-outline-background-color-hover", "--system-button-static-black-secondary-outline-border-color-default", - "--system-button-static-black-secondary-outline-border-color-disabled", "--system-button-static-black-secondary-outline-border-color-down", "--system-button-static-black-secondary-outline-border-color-focus", "--system-button-static-black-secondary-outline-border-color-hover", - "--system-button-static-black-secondary-outline-content-color-default", - "--system-button-static-black-secondary-outline-content-color-disabled", - "--system-button-static-black-secondary-outline-content-color-down", - "--system-button-static-black-secondary-outline-content-color-focus", - "--system-button-static-black-secondary-outline-content-color-hover", - "--system-button-static-black-secondary-outline-focus-indicator-color", "--system-button-static-white-background-color-default", - "--system-button-static-white-background-color-disabled", "--system-button-static-white-background-color-down", "--system-button-static-white-background-color-focus", "--system-button-static-white-background-color-hover", - "--system-button-static-white-border-color-default", - "--system-button-static-white-border-color-disabled", - "--system-button-static-white-border-color-down", - "--system-button-static-white-border-color-focus", - "--system-button-static-white-border-color-hover", - "--system-button-static-white-content-color-default", - "--system-button-static-white-content-color-disabled", - "--system-button-static-white-content-color-down", - "--system-button-static-white-content-color-focus", - "--system-button-static-white-content-color-hover", - "--system-button-static-white-focus-ring-color", - "--system-button-static-white-outline-background-color-default", - "--system-button-static-white-outline-background-color-disabled", "--system-button-static-white-outline-background-color-down", "--system-button-static-white-outline-background-color-focus", "--system-button-static-white-outline-background-color-hover", "--system-button-static-white-outline-border-color-default", - "--system-button-static-white-outline-border-color-disabled", "--system-button-static-white-outline-border-color-down", "--system-button-static-white-outline-border-color-focus", "--system-button-static-white-outline-border-color-hover", - "--system-button-static-white-outline-content-color-default", - "--system-button-static-white-outline-content-color-disabled", - "--system-button-static-white-outline-content-color-down", - "--system-button-static-white-outline-content-color-focus", - "--system-button-static-white-outline-content-color-hover", - "--system-button-static-white-outline-focus-indicator-color", - "--system-button-static-white-quiet-border-color-default", - "--system-button-static-white-quiet-border-color-disabled", - "--system-button-static-white-quiet-border-color-down", - "--system-button-static-white-quiet-border-color-focus", - "--system-button-static-white-quiet-border-color-hover", "--system-button-static-white-secondary-background-color-default", - "--system-button-static-white-secondary-background-color-disabled", "--system-button-static-white-secondary-background-color-down", "--system-button-static-white-secondary-background-color-focus", "--system-button-static-white-secondary-background-color-hover", - "--system-button-static-white-secondary-border-color-default", - "--system-button-static-white-secondary-border-color-disabled", - "--system-button-static-white-secondary-border-color-down", - "--system-button-static-white-secondary-border-color-focus", - "--system-button-static-white-secondary-border-color-hover", - "--system-button-static-white-secondary-content-color-default", - "--system-button-static-white-secondary-content-color-disabled", - "--system-button-static-white-secondary-content-color-down", - "--system-button-static-white-secondary-content-color-focus", - "--system-button-static-white-secondary-content-color-hover", - "--system-button-static-white-secondary-focus-indicator-color", - "--system-button-static-white-secondary-outline-background-color-default", - "--system-button-static-white-secondary-outline-background-color-disabled", "--system-button-static-white-secondary-outline-background-color-down", "--system-button-static-white-secondary-outline-background-color-focus", "--system-button-static-white-secondary-outline-background-color-hover", "--system-button-static-white-secondary-outline-border-color-default", - "--system-button-static-white-secondary-outline-border-color-disabled", "--system-button-static-white-secondary-outline-border-color-down", "--system-button-static-white-secondary-outline-border-color-focus", "--system-button-static-white-secondary-outline-border-color-hover", - "--system-button-static-white-secondary-outline-content-color-default", - "--system-button-static-white-secondary-outline-content-color-disabled", - "--system-button-static-white-secondary-outline-content-color-down", - "--system-button-static-white-secondary-outline-content-color-focus", - "--system-button-static-white-secondary-outline-content-color-hover", - "--system-button-static-white-secondary-outline-focus-indicator-color", "--system-button-static-white-selected-background-color-default", - "--system-button-static-white-selected-background-color-disabled", "--system-button-static-white-selected-background-color-down", "--system-button-static-white-selected-background-color-focus", - "--system-button-static-white-selected-background-color-hover", - "--system-button-static-white-selected-border-color-disabled", - "--system-button-static-white-selected-static-white-content-color-default", - "--system-button-static-white-selected-static-white-content-color-down", - "--system-button-static-white-selected-static-white-content-color-focus", - "--system-button-static-white-selected-static-white-content-color-hover", - "--system-button-top-to-icon", - "--system-button-top-to-text" + "--system-button-static-white-selected-background-color-hover" ], "passthroughs": [ "--mod-progress-circle-position", diff --git a/components/button/metadata/mods.md b/components/button/metadata/mods.md index ec71fe4868..3fe7da1b86 100644 --- a/components/button/metadata/mods.md +++ b/components/button/metadata/mods.md @@ -1,56 +1,50 @@ -| Modifiable custom properties | -| ------------------------------------------------- | -| `--mod-animation-duration-100` | -| `--mod-bold-font-weight` | -| `--mod-button-animation-duration` | -| `--mod-button-background-color-default` | -| `--mod-button-background-color-disabled` | -| `--mod-button-background-color-down` | -| `--mod-button-background-color-focus` | -| `--mod-button-background-color-hover` | -| `--mod-button-border-color-default` | -| `--mod-button-border-color-disabled` | -| `--mod-button-border-color-down` | -| `--mod-button-border-color-focus` | -| `--mod-button-border-color-hover` | -| `--mod-button-border-radius` | -| `--mod-button-border-width` | -| `--mod-button-bottom-to-text` | -| `--mod-button-content-color-default` | -| `--mod-button-content-color-disabled` | -| `--mod-button-content-color-down` | -| `--mod-button-content-color-focus` | -| `--mod-button-content-color-hover` | -| `--mod-button-edge-to-text` | -| `--mod-button-edge-to-visual` | -| `--mod-button-edge-to-visual-only` | -| `--mod-button-focus-indicator-color` | -| `--mod-button-focus-indicator-gap` | -| `--mod-button-focus-ring-border-radius` | -| `--mod-button-focus-ring-color` | -| `--mod-button-focus-ring-gap` | -| `--mod-button-focus-ring-thickness` | -| `--mod-button-font-family` | -| `--mod-button-font-size` | -| `--mod-button-height` | -| `--mod-button-icon-margin-block-start` | -| `--mod-button-line-height` | -| `--mod-button-margin-block` | -| `--mod-button-margin-left` | -| `--mod-button-margin-right` | -| `--mod-button-max-inline-size` | -| `--mod-button-min-width` | -| `--mod-button-padding-label-to-icon` | -| `--mod-button-static-content-color` | -| `--mod-button-static-white-content-color-default` | -| `--mod-button-static-white-content-color-down` | -| `--mod-button-static-white-content-color-focus` | -| `--mod-button-static-white-content-color-hover` | -| `--mod-button-text-align` | -| `--mod-button-text-align-with-icon` | -| `--mod-button-top-to-icon` | -| `--mod-button-top-to-text` | -| `--mod-focus-indicator-gap` | -| `--mod-line-height-100` | -| `--mod-sans-font-family-stack` | -| `--mod-static-black-focus-indicator-color` | +| Modifiable custom properties | +| ------------------------------------------ | +| `--mod-animation-duration-100` | +| `--mod-bold-font-weight` | +| `--mod-button-animation-duration` | +| `--mod-button-background-color-default` | +| `--mod-button-background-color-disabled` | +| `--mod-button-background-color-down` | +| `--mod-button-background-color-focus` | +| `--mod-button-background-color-hover` | +| `--mod-button-border-color-default` | +| `--mod-button-border-color-disabled` | +| `--mod-button-border-color-down` | +| `--mod-button-border-color-focus` | +| `--mod-button-border-color-hover` | +| `--mod-button-border-radius` | +| `--mod-button-border-width` | +| `--mod-button-bottom-to-text` | +| `--mod-button-content-color-default` | +| `--mod-button-content-color-disabled` | +| `--mod-button-content-color-down` | +| `--mod-button-content-color-focus` | +| `--mod-button-content-color-hover` | +| `--mod-button-edge-to-text` | +| `--mod-button-edge-to-visual` | +| `--mod-button-edge-to-visual-only` | +| `--mod-button-focus-indicator-gap` | +| `--mod-button-focus-ring-border-radius` | +| `--mod-button-focus-ring-color` | +| `--mod-button-focus-ring-gap` | +| `--mod-button-focus-ring-thickness` | +| `--mod-button-font-family` | +| `--mod-button-font-size` | +| `--mod-button-height` | +| `--mod-button-icon-margin-block-start` | +| `--mod-button-line-height` | +| `--mod-button-margin-block` | +| `--mod-button-margin-left` | +| `--mod-button-margin-right` | +| `--mod-button-max-inline-size` | +| `--mod-button-min-width` | +| `--mod-button-padding-label-to-icon` | +| `--mod-button-text-align` | +| `--mod-button-text-align-with-icon` | +| `--mod-button-top-to-icon` | +| `--mod-button-top-to-text` | +| `--mod-focus-indicator-gap` | +| `--mod-line-height-100` | +| `--mod-sans-font-family-stack` | +| `--mod-static-black-focus-indicator-color` | diff --git a/components/button/themes/spectrum-two.css b/components/button/themes/spectrum-two.css index 7abbee5d18..1dc04a333d 100644 --- a/components/button/themes/spectrum-two.css +++ b/components/button/themes/spectrum-two.css @@ -13,14 +13,6 @@ @container style(--system: spectrum) { .spectrum-Button { - --spectrum-button-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-button-border-width: var(--spectrum-border-width-200); - --spectrum-button-line-height: 1.2; /* Hack to keep buttons at 32px */ - - --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-button-background-color-default: var(--spectrum-gray-50); --spectrum-button-background-color-hover: var(--spectrum-gray-100); --spectrum-button-background-color-down: var(--spectrum-gray-200); @@ -31,194 +23,16 @@ --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--sizeM { - --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-button-height: var(--spectrum-component-height-100); - - --spectrum-button-font-size: var(--spectrum-font-size-100); - - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium); - --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); - --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); - } - - &.spectrum-Button--sizeS { - --spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-75); - --spectrum-button-height: var(--spectrum-component-height-75); - - --spectrum-button-font-size: var(--spectrum-font-size-75); - - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small); - --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small); - --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75); - } - - &.spectrum-Button--sizeL { - --spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-200); - --spectrum-button-height: var(--spectrum-component-height-200); - - --spectrum-button-font-size: var(--spectrum-font-size-200); - - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large); - --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large); - --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-200); - } - - &.spectrum-Button--sizeXL { - --spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-300); - --spectrum-button-height: var(--spectrum-component-height-300); - - --spectrum-button-font-size: var(--spectrum-font-size-300); - - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large); - --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); - --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300); - } - - &.spectrum-Button--accent { - --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-accent-color-200); - --spectrum-button-background-color-down: var(--spectrum-accent-color-300); - --spectrum-button-background-color-focus: var(--spectrum-accent-color-200); - - --spectrum-button-border-color-default: var(--spectrum-accent-color-900); - --spectrum-button-border-color-hover: var(--spectrum-accent-color-1000); - --spectrum-button-border-color-down: var(--spectrum-accent-color-1100); - --spectrum-button-border-color-focus: var(--spectrum-accent-color-1000); - - --spectrum-button-content-color-default: var(--spectrum-accent-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-accent-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } - } - - &.spectrum-Button--negative { - --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-negative-color-200); - --spectrum-button-background-color-down: var(--spectrum-negative-color-300); - --spectrum-button-background-color-focus: var(--spectrum-negative-color-200); - - --spectrum-button-border-color-default: var(--spectrum-negative-color-900); - --spectrum-button-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-button-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-button-border-color-focus: var(--spectrum-negative-color-1000); - - --spectrum-button-content-color-default: var(--spectrum-negative-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-negative-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } - } &.spectrum-Button--primary { - --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - --spectrum-button-content-color-default: var(--spectrum-gray-25); --spectrum-button-content-color-hover: var(--spectrum-gray-25); --spectrum-button-content-color-down: var(--spectrum-gray-25); --spectrum-button-content-color-focus: var(--spectrum-gray-25); - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-400); --spectrum-button-background-color-focus: var(--spectrum-gray-200); @@ -227,15 +41,6 @@ --spectrum-button-border-color-hover: var(--spectrum-gray-900); --spectrum-button-border-color-down: var(--spectrum-gray-900); --spectrum-button-border-color-focus: var(--spectrum-gray-900); - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); } } @@ -245,22 +50,7 @@ --spectrum-button-background-color-down: var(--spectrum-gray-400); --spectrum-button-background-color-focus: var(--spectrum-gray-200); - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-400); --spectrum-button-background-color-focus: var(--spectrum-gray-200); @@ -269,271 +59,95 @@ --spectrum-button-border-color-hover: var(--spectrum-gray-400); --spectrum-button-border-color-down: var(--spectrum-gray-500); --spectrum-button-border-color-focus: var(--spectrum-gray-400); - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); } } - &.spectrum-Button--quiet { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-200); - --spectrum-button-background-color-focus: var(--spectrum-gray-100); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: transparent; - } - &.is-selected { --spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default); --spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); --spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down); --spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - - &.spectrum-Button--emphasized { - --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); - } } /* static white */ &.spectrum-Button--staticWhite { - --mod-button-background-color-default: var(--spectrum-transparent-white-900); - --mod-button-background-color-hover: var(--spectrum-transparent-white-1000); - --mod-button-background-color-down: var(--spectrum-transparent-white-1000); - --mod-button-background-color-focus: var(--spectrum-transparent-white-1000); - - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; - - --mod-button-content-color-default: var(--spectrum-black); - --mod-button-content-color-hover: var(--spectrum-black); - --mod-button-content-color-down: var(--spectrum-black); - --mod-button-content-color-focus: var(--spectrum-black); - - --mod-button-focus-ring-color: var(--spectrum-static-white-focus-indicator-color); - - --mod-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --mod-button-border-color-disabled: transparent; - --mod-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --spectrum-button-background-color-default: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-1000); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-1000); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-1000); &.is-selected { - --mod-button-background-color-default: var(--spectrum-transparent-white-900); - --mod-button-background-color-hover: var(--spectrum-transparent-white-1000); - --mod-button-background-color-down: var(--spectrum-transparent-white-1000); - --mod-button-background-color-focus: var(--spectrum-transparent-white-1000); - - --mod-button-static-white-content-color-default: var(--spectrum-black); - --mod-button-static-white-content-color-hover: var(--spectrum-black); - --mod-button-static-white-content-color-down: var(--spectrum-black); - --mod-button-static-white-content-color-focus: var(--spectrum-black); - - --mod-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --mod-button-border-color-disabled: transparent; + --spectrum-button-background-color-default: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-1000); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-1000); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-1000); } &.spectrum-Button--outline { - --mod-button-background-color-default: transparent; - --mod-button-background-color-hover: var(--spectrum-transparent-white-400); - --mod-button-background-color-down: var(--spectrum-transparent-white-500); - --mod-button-background-color-focus: var(--spectrum-transparent-white-400); - - --mod-button-border-color-default: var(--spectrum-transparent-white-900); - --mod-button-border-color-hover: var(--spectrum-transparent-white-1000); - --mod-button-border-color-down: var(--spectrum-transparent-white-1000); - --mod-button-border-color-focus: var(--spectrum-transparent-white-1000); - - --mod-button-content-color-default: var(--spectrum-white); - --mod-button-content-color-hover: var(--spectrum-white); - --mod-button-content-color-down: var(--spectrum-white); - --mod-button-content-color-focus: var(--spectrum-white); - - --mod-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --mod-button-background-color-disabled: transparent; - --mod-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --mod-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-500); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400); + + --spectrum-button-border-color-default: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-1000); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-1000); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-1000); } &.spectrum-Button--secondary { - --mod-button-background-color-default: var(--spectrum-transparent-white-300); - --mod-button-background-color-hover: var(--spectrum-transparent-white-400); - --mod-button-background-color-down: var(--spectrum-transparent-white-500); - --mod-button-background-color-focus: var(--spectrum-transparent-white-400); - - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; - - --mod-button-content-color-default: var(--spectrum-white); - --mod-button-content-color-hover: var(--spectrum-white); - --mod-button-content-color-down: var(--spectrum-white); - --mod-button-content-color-focus: var(--spectrum-white); - - --mod-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --mod-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --mod-button-border-color-disabled: transparent; - --mod-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --spectrum-button-background-color-default: var(--spectrum-transparent-white-300); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-500); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400); &.spectrum-Button--outline { - --mod-button-background-color-default: transparent; - --mod-button-background-color-hover: var(--spectrum-transparent-white-400); - --mod-button-background-color-down: var(--spectrum-transparent-white-500); - --mod-button-background-color-focus: var(--spectrum-transparent-white-400); - - --mod-button-border-color-default: var(--spectrum-transparent-white-400); - --mod-button-border-color-hover: var(--spectrum-transparent-white-500); - --mod-button-border-color-down: var(--spectrum-transparent-white-600); - --mod-button-border-color-focus: var(--spectrum-transparent-white-500); - - --mod-button-content-color-default: var(--spectrum-white); - --mod-button-content-color-hover: var(--spectrum-white); - --mod-button-content-color-down: var(--spectrum-white); - --mod-button-content-color-focus: var(--spectrum-white); - - --mod-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --mod-button-background-color-disabled: transparent; - --mod-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --mod-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-400); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-500); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-400); + + --spectrum-button-border-color-default: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-500); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-600); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-500); } } } /* static black */ &.spectrum-Button--staticBlack { - --mod-button-background-color-default: var(--spectrum-transparent-black-900); - --mod-button-background-color-hover: var(--spectrum-transparent-black-1000); - --mod-button-background-color-down: var(--spectrum-transparent-black-1000); - --mod-button-background-color-focus: var(--spectrum-transparent-black-1000); - - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; - - --mod-button-content-color-default: var(--spectrum-white); - --mod-button-content-color-hover: var(--spectrum-white); - --mod-button-content-color-down: var(--spectrum-white); - --mod-button-content-color-focus: var(--spectrum-white); - - --mod-button-focus-ring-color: var(--spectrum-static-black-focus-indicator-color); - - --mod-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --mod-button-border-color-disabled: transparent; - --mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --spectrum-button-background-color-default: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-1000); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-1000); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-1000); &.spectrum-Button--outline { - --mod-button-background-color-default: transparent; - --mod-button-background-color-hover: var(--spectrum-transparent-black-400); - --mod-button-background-color-down: var(--spectrum-transparent-black-500); - --mod-button-background-color-focus: var(--spectrum-transparent-black-400); - - --mod-button-border-color-default: var(--spectrum-transparent-black-500); - --mod-button-border-color-hover: var(--spectrum-transparent-black-600); - --mod-button-border-color-down: var(--spectrum-transparent-black-700); - --mod-button-border-color-focus: var(--spectrum-transparent-black-600); - - --mod-button-content-color-default: var(--spectrum-black); - --mod-button-content-color-hover: var(--spectrum-black); - --mod-button-content-color-down: var(--spectrum-black); - --mod-button-content-color-focus: var(--spectrum-black); - - --mod-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --mod-button-background-color-disabled: transparent; - --mod-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-500); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-500); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-600); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-700); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-600); } &.spectrum-Button--secondary { - --mod-button-background-color-default: var(--spectrum-transparent-black-300); - --mod-button-background-color-hover: var(--spectrum-transparent-black-400); - --mod-button-background-color-down: var(--spectrum-transparent-black-500); - --mod-button-background-color-focus: var(--spectrum-transparent-black-400); - - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; - - --mod-button-content-color-default: var(--spectrum-black); - --mod-button-content-color-hover: var(--spectrum-black); - --mod-button-content-color-down: var(--spectrum-black); - --mod-button-content-color-focus: var(--spectrum-black); - - --mod-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --mod-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --mod-button-border-color-disabled: transparent; - --mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --spectrum-button-background-color-default: var(--spectrum-transparent-black-300); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-500); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400); &.spectrum-Button--outline { - --mod-button-background-color-default: transparent; - --mod-button-background-color-hover: var(--spectrum-transparent-black-400); - --mod-button-background-color-down: var(--spectrum-transparent-black-500); - --mod-button-background-color-focus: var(--spectrum-transparent-black-400); - - --mod-button-border-color-default: var(--spectrum-transparent-black-400); - --mod-button-border-color-hover: var(--spectrum-transparent-black-500); - --mod-button-border-color-down: var(--spectrum-transparent-black-600); - --mod-button-border-color-focus: var(--spectrum-transparent-black-500); - - --mod-button-content-color-default: var(--spectrum-black); - --mod-button-content-color-hover: var(--spectrum-black); - --mod-button-content-color-down: var(--spectrum-black); - --mod-button-content-color-focus: var(--spectrum-black); - - --mod-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --mod-button-background-color-disabled: transparent; - --mod-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-400); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-500); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-400); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-500); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-600); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-500); } } } - - &.spectrum-Button--staticBlack, - &.spectrum-Button--staticWhite { - &.spectrum-Button--quiet { - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; - - --mod-button-border-color-disabled: transparent; - } - } } } diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css index ce9441d627..f73f29a6aa 100644 --- a/components/button/themes/spectrum.css +++ b/components/button/themes/spectrum.css @@ -69,6 +69,13 @@ --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); + &.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--outline { --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); @@ -80,13 +87,6 @@ --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); } - &.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--secondary { --spectrum-button-background-color-default: var(--spectrum-transparent-white-200); --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css index ebedcd9c2a..d5643535e5 100644 --- a/components/buttongroup/index.css +++ b/components/buttongroup/index.css @@ -13,6 +13,31 @@ @import "./themes/spectrum-two.css"; +.spectrum-ButtonGroup { + --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); + --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); +} + +.spectrum-ButtonGroup--sizeS { + --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-200); + --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-200); +} + +.spectrum-ButtonGroup--sizeM { + --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); + --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); +} + +.spectrum-ButtonGroup--sizeL { + --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); + --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); +} + +.spectrum-ButtonGroup--sizeXL { + --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); + --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); +} + .spectrum-ButtonGroup { display: flex; flex-wrap: wrap; diff --git a/components/buttongroup/metadata/metadata.json b/components/buttongroup/metadata/metadata.json index 1876a09a98..e74734f850 100644 --- a/components/buttongroup/metadata/metadata.json +++ b/components/buttongroup/metadata/metadata.json @@ -3,11 +3,11 @@ "selectors": [ ".spectrum-ButtonGroup", ".spectrum-ButtonGroup .spectrum-ButtonGroup-item", - ".spectrum-ButtonGroup--vertical", - ".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeL", - ".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeM", - ".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS", - ".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeXL" + ".spectrum-ButtonGroup--sizeL", + ".spectrum-ButtonGroup--sizeM", + ".spectrum-ButtonGroup--sizeS", + ".spectrum-ButtonGroup--sizeXL", + ".spectrum-ButtonGroup--vertical" ], "modifiers": [ "--mod-buttongroup-justify-content", @@ -19,18 +19,7 @@ "--spectrum-buttongroup-spacing-vertical" ], "global": ["--spectrum-spacing-200", "--spectrum-spacing-300"], - "system-theme": [ - "--system-button-group-size-l-spacing-horizontal", - "--system-button-group-size-l-spacing-vertical", - "--system-button-group-size-m-spacing-horizontal", - "--system-button-group-size-m-spacing-vertical", - "--system-button-group-size-s-spacing-horizontal", - "--system-button-group-size-s-spacing-vertical", - "--system-button-group-size-xl-spacing-horizontal", - "--system-button-group-size-xl-spacing-vertical", - "--system-button-group-spacing-horizontal", - "--system-button-group-spacing-vertical" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/buttongroup/themes/spectrum-two.css b/components/buttongroup/themes/spectrum-two.css index 8e9afc644d..3b48a570c2 100644 --- a/components/buttongroup/themes/spectrum-two.css +++ b/components/buttongroup/themes/spectrum-two.css @@ -10,28 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-ButtonGroup { - &, - &.spectrum-ButtonGroup--sizeM { - --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--sizeL { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); - } - - &.spectrum-ButtonGroup--sizeXL { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); - } - } -} diff --git a/components/calendar/index.css b/components/calendar/index.css index bf003eb976..ed3267c705 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -14,14 +14,54 @@ @import "./themes/spectrum-two.css"; .spectrum-Calendar { - inline-size: var(--mod-calendar-width, var(--spectrum-calendar-width)); - display: inline-block; + --spectrum-calendar-day-width: var(--spectrum-component-height-100); + --spectrum-calendar-day-height: var(--spectrum-component-height-100); + --spectrum-calendar-border-radius-reset: 0; + --spectrum-calendar-border-width-reset: 0; + --spectrum-calendar-day-border-size: var(--spectrum-border-width-200); + --spectrum-calendar-margin-y: 24px; + --spectrum-calendar-margin-x: 32px; + --spectrum-calendar-day-padding: 4px; + --spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7); + + --spectrum-calendar-title-text-letter-spacing: 0.06em; + --spectrum-calendar-title-height: 32px; + --spectrum-calendar-title-text-size: var(--spectrum-font-size-300); + + --spectrum-calendar-day-title-text-font-weight: var(--spectrum-bold-font-weight); + --spectrum-calendar-day-title-text-color: var(--spectrum-gray-700); + --spectrum-calendar-day-title-text-size: var(--spectrum-font-size-50); + --spectrum-calendar-day-text-size-han: var(--spectrum-font-size-50); + + --spectrum-calendar-day-text-size: var(--spectrum-font-size-100); + --spectrum-calendar-day-text-color-selected: var(--spectrum-gray-900); + --spectrum-calendar-day-text-color-hover: var(--spectrum-gray-900); + --spectrum-calendar-day-text-color-cap-selected: var(--spectrum-gray-900); + --spectrum-calendar-day-text-font-weight-selected: var(--spectrum-bold-font-weight); + --spectrum-calendar-day-text-font-weight-cap-selected: var(--spectrum-bold-font-weight); + + --spectrum-calendar-day-today-text-color: var(--spectrum-gray-800); + --spectrum-calendar-day-today-text-font-weight: var(--spectrum-bold-font-weight); + --spectrum-calendar-day-today-border-color: var(--spectrum-gray-800); + + --spectrum-calendar-day-today-text-color-disabled: var(--spectrum-gray-500); + --spectrum-calendar-day-today-border-color-disabled: var(--spectrum-gray-400); + --spectrum-calendar-day-text-color-disabled: var(--spectrum-disabled-content-color); + + --spectrum-calendar-day-text-color-key-focus: var(--spectrum-gray-900); + + --spectrum-calendar-button-icon-color: var(--spectrum-gray-700); &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } } +.spectrum-Calendar { + inline-size: var(--mod-calendar-width, var(--spectrum-calendar-width)); + display: inline-block; +} + .spectrum-Calendar--padded { margin: var(--mod-calendar-margin-x, var(--spectrum-calendar-margin-x)) var(--mod-calendar-margin-y, var(--spectrum-calendar-margin-y)); } @@ -94,7 +134,6 @@ /* 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)); - } } @@ -374,7 +413,7 @@ @media (forced-colors: active) { .spectrum-Calendar-prevMonth, .spectrum-Calendar-nextMonth { - /* --highcontrast-calendar-button-icon-color-disabled: GrayText; */ + --highcontrast-calendar-button-icon-color-disabled: GrayText; --highcontrast-calendar-button-icon-color: ButtonText; } @@ -390,8 +429,7 @@ --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-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; @@ -400,7 +438,6 @@ --highcontrast-calendar-day-today-text-color-disabled: GrayText; --highcontrast-calendar-day-today-text-color: ButtonText; - color: CanvasText; forced-color-adjust: none; &.is-range-selection { diff --git a/components/calendar/metadata/metadata.json b/components/calendar/metadata/metadata.json index 1c8191a961..be6710fa5c 100644 --- a/components/calendar/metadata/metadata.json +++ b/components/calendar/metadata/metadata.json @@ -166,41 +166,11 @@ "--spectrum-gray-900", "--spectrum-logical-rotation" ], - "system-theme": [ - "--system-calendar-border-radius-reset", - "--system-calendar-border-width-reset", - "--system-calendar-button-icon-color", - "--system-calendar-day-border-size", - "--system-calendar-day-height", - "--system-calendar-day-padding", - "--system-calendar-day-text-color-cap-selected", - "--system-calendar-day-text-color-disabled", - "--system-calendar-day-text-color-hover", - "--system-calendar-day-text-color-key-focus", - "--system-calendar-day-text-color-selected", - "--system-calendar-day-text-font-weight-cap-selected", - "--system-calendar-day-text-font-weight-selected", - "--system-calendar-day-text-size", - "--system-calendar-day-text-size-han", - "--system-calendar-day-title-text-color", - "--system-calendar-day-title-text-font-weight", - "--system-calendar-day-title-text-size", - "--system-calendar-day-today-border-color", - "--system-calendar-day-today-border-color-disabled", - "--system-calendar-day-today-text-color", - "--system-calendar-day-today-text-color-disabled", - "--system-calendar-day-today-text-font-weight", - "--system-calendar-day-width", - "--system-calendar-margin-x", - "--system-calendar-margin-y", - "--system-calendar-title-height", - "--system-calendar-title-text-letter-spacing", - "--system-calendar-title-text-size", - "--system-calendar-width" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-calendar-button-icon-color", + "--highcontrast-calendar-button-icon-color-disabled", "--highcontrast-calendar-day-background-color-cap-selected", "--highcontrast-calendar-day-background-color-down", "--highcontrast-calendar-day-background-color-hover", @@ -213,6 +183,7 @@ "--highcontrast-calendar-day-text-color-hover", "--highcontrast-calendar-day-text-color-key-focus", "--highcontrast-calendar-day-text-color-selected", + "--highcontrast-calendar-day-text-color-selected-hover", "--highcontrast-calendar-day-title-text-color", "--highcontrast-calendar-day-today-background-color-selected-hover", "--highcontrast-calendar-day-today-border-color", diff --git a/components/calendar/themes/spectrum-two.css b/components/calendar/themes/spectrum-two.css index 11e905c488..3b48a570c2 100644 --- a/components/calendar/themes/spectrum-two.css +++ b/components/calendar/themes/spectrum-two.css @@ -10,45 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-Calendar { - --spectrum-calendar-day-width: var(--spectrum-component-height-100); - --spectrum-calendar-day-height: var(--spectrum-component-height-100); - --spectrum-calendar-border-radius-reset: 0; - --spectrum-calendar-border-width-reset: 0; - --spectrum-calendar-day-border-size: var(--spectrum-border-width-200); - --spectrum-calendar-margin-y: 24px; - --spectrum-calendar-margin-x: 32px; - --spectrum-calendar-day-padding: 4px; - --spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7); - - --spectrum-calendar-title-text-letter-spacing: 0.06em; - --spectrum-calendar-title-height: 32px; - --spectrum-calendar-title-text-size: var(--spectrum-font-size-300); - - --spectrum-calendar-day-title-text-font-weight: var(--spectrum-bold-font-weight); - --spectrum-calendar-day-title-text-color: var(--spectrum-gray-700); - --spectrum-calendar-day-title-text-size: var(--spectrum-font-size-50); - --spectrum-calendar-day-text-size-han: var(--spectrum-font-size-50); - - --spectrum-calendar-day-text-size: var(--spectrum-font-size-100); - --spectrum-calendar-day-text-color-selected: var(--spectrum-gray-900); - --spectrum-calendar-day-text-color-hover: var(--spectrum-gray-900); - --spectrum-calendar-day-text-color-cap-selected: var(--spectrum-gray-900); - --spectrum-calendar-day-text-font-weight-selected: var(--spectrum-bold-font-weight); - --spectrum-calendar-day-text-font-weight-cap-selected: var(--spectrum-bold-font-weight); - - --spectrum-calendar-day-today-text-color: var(--spectrum-gray-800); - --spectrum-calendar-day-today-text-font-weight: var(--spectrum-bold-font-weight); - --spectrum-calendar-day-today-border-color: var(--spectrum-gray-800); - - --spectrum-calendar-day-today-text-color-disabled: var(--spectrum-gray-500); - --spectrum-calendar-day-today-border-color-disabled: var(--spectrum-gray-400); - --spectrum-calendar-day-text-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-calendar-day-text-color-key-focus: var(--spectrum-gray-900); - - --spectrum-calendar-button-icon-color: var(--spectrum-gray-700); - } -} diff --git a/components/card/index.css b/components/card/index.css index a762b0d35e..1e079ccf6c 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -13,6 +13,69 @@ @import "./themes/spectrum-two.css"; +.spectrum-Card { + /* Default Layout */ + --spectrum-card-background-color: var(--spectrum-background-layer-2-color); + --spectrum-card-body-spacing: var(--spectrum-spacing-400); + --spectrum-card-title-padding-top: var(--spectrum-spacing-300); + --spectrum-card-title-padding-right: var(--spectrum-spacing-400); + --spectrum-card-content-margin-top: var(--spectrum-spacing-100); + --spectrum-card-content-margin-bottom: var(--spectrum-spacing-300); + --spectrum-card-footer-padding-top: var(--spectrum-spacing-100); + --spectrum-card-subtitle-padding-right: var(--spectrum-spacing-100); + + --spectrum-card-border-width: var(--spectrum-border-width-100); + --spectrum-card-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-card-border-color-selected: var(--spectrum-blue-700); + + /* Typography */ + --spectrum-card-title-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-card-title-font-size: var(--spectrum-heading-size-xxs); + --spectrum-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --spectrum-card-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --spectrum-card-title-line-height: var(--spectrum-heading-line-height); + --spectrum-card-title-font-color: var(--spectrum-heading-color); + + --spectrum-card-body-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-card-body-font-size: var(--spectrum-body-size-s); + --spectrum-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-card-body-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-card-body-line-height: var(--spectrum-body-line-height); + --spectrum-card-body-font-color: var(--spectrum-body-color); + + /* Quick Actions */ + --spectrum-card-actions-spacing: var(--spectrum-spacing-300); + --spectrum-card-actions-size: var(--spectrum-card-selection-background-size); + --spectrum-card-actions-border-radius: var(--spectrum-corner-radius-100); + + /* TODO update to --spectrum-card-selection-background-color token once an RGB stripped value is available */ + --spectrum-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); + --spectrum-card-actions-background-color-opacity: var(--spectrum-card-selection-background-color-opacity); + --spectrum-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); + --spectrum-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); + --spectrum-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); + --spectrum-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); + + /* Focus */ + --spectrum-card-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-card-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + + /* Selected */ + --spectrum-card-selected-background-opacity: 0.1; /* table-selected-row-background-opacity does not exist in tokens yet */ + --spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100); + + /* Horizontal */ + --spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300); + --spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200); +} + +/* 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)); +} + .spectrum-Card { position: relative; display: inline-flex; @@ -26,7 +89,9 @@ 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))); - background-color: var(--highcontrast-card-background-color, var(--mod-card-background-color, var(--spectrum-card-background-color))); + /* @deprecation --mod-spectrum-card-background-color has been renamed to + --mod-card-background-color. The fallback will be removed in a future version. */ + background-color: var(--highcontrast-card-background-color, var(--mod-card-background-color, var(--mod-spectrum-card-background-color, var(--spectrum-card-background-color)))); &::before { content: ""; @@ -86,9 +151,11 @@ } &.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-quiet)); + background-color: var(--mod-card-background-color, var(--spectrum-card-background-color)); } &.is-focused, @@ -97,6 +164,7 @@ &: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; @@ -116,18 +184,6 @@ inset-inline-start: calc(var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); inset-block-start: calc(var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); - - /* From QuickAction component that is officially deprecated */ - pointer-events: auto; - display:inline-flex; - align-items:center; - justify-content:center; - box-sizing:border-box; - - transition: - transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out, - opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out, - visibility 0ms linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)); } .spectrum-Card-actions { @@ -275,9 +331,6 @@ .spectrum-Card--quiet, .spectrum-Card--gallery { - --spectrum-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-card-content-margin-top-quiet)); - --spectrum-card-minimum-width: var(--mod-card-minimum-width-quiet, var(--spectrum-card-minimum-width-quiet)); - block-size: 100%; min-inline-size: var(--mod-card-minimum-width, var(--spectrum-card-minimum-width)); border-width: 0; @@ -365,6 +418,9 @@ .spectrum-Card-body { margin-block-start: var(--mod-card-content-margin-top, var(--spectrum-card-content-margin-top)); + } + + .spectrum-Card-body { padding: 0; } diff --git a/components/card/metadata/metadata.json b/components/card/metadata/metadata.json index 79583635bd..b9117f74db 100644 --- a/components/card/metadata/metadata.json +++ b/components/card/metadata/metadata.json @@ -135,7 +135,7 @@ "--mod-card-title-line-height", "--mod-card-title-padding-right", "--mod-card-title-padding-top", - "--mod-overlay-animation-duration" + "--mod-spectrum-card-background-color" ], "component": [ "--spectrum-card-actions-background-color-opacity", @@ -162,7 +162,6 @@ "--spectrum-card-border-width", "--spectrum-card-content-margin-bottom", "--spectrum-card-content-margin-top", - "--spectrum-card-content-margin-top-quiet", "--spectrum-card-corner-radius", "--spectrum-card-divider-color", "--spectrum-card-focus-indicator-color", @@ -171,7 +170,6 @@ "--spectrum-card-horizontal-body-padding", "--spectrum-card-horizontal-preview-padding", "--spectrum-card-minimum-width", - "--spectrum-card-minimum-width-quiet", "--spectrum-card-preview-background-color", "--spectrum-card-preview-background-color-hover", "--spectrum-card-preview-border-width-selected", @@ -223,52 +221,11 @@ "--spectrum-spacing-400" ], "system-theme": [ - "--system-card-actions-background-color-opacity", - "--system-card-actions-background-color-rgb", - "--system-card-actions-border-radius", - "--system-card-actions-drop-shadow-blur", - "--system-card-actions-drop-shadow-color", - "--system-card-actions-drop-shadow-x", - "--system-card-actions-drop-shadow-y", - "--system-card-actions-size", - "--system-card-actions-spacing", - "--system-card-background-color", - "--system-card-background-color-quiet", - "--system-card-body-font-color", - "--system-card-body-font-family", - "--system-card-body-font-size", - "--system-card-body-font-style", - "--system-card-body-font-weight", - "--system-card-body-line-height", - "--system-card-body-spacing", "--system-card-border-color", "--system-card-border-color-hover", - "--system-card-border-color-selected", - "--system-card-border-width", - "--system-card-content-margin-bottom", - "--system-card-content-margin-top", - "--system-card-content-margin-top-quiet", - "--system-card-corner-radius", "--system-card-divider-color", - "--system-card-focus-indicator-color", - "--system-card-focus-indicator-width", - "--system-card-footer-padding-top", - "--system-card-horizontal-body-padding", - "--system-card-horizontal-preview-padding", - "--system-card-minimum-width-quiet", "--system-card-preview-background-color", - "--system-card-preview-background-color-hover", - "--system-card-preview-border-width-selected", - "--system-card-selected-background-opacity", - "--system-card-subtitle-padding-right", - "--system-card-title-font-color", - "--system-card-title-font-family", - "--system-card-title-font-size", - "--system-card-title-font-style", - "--system-card-title-font-weight", - "--system-card-title-line-height", - "--system-card-title-padding-right", - "--system-card-title-padding-top" + "--system-card-preview-background-color-hover" ], "passthroughs": [], "high-contrast": [ diff --git a/components/card/metadata/mods.md b/components/card/metadata/mods.md index 438f734c02..69311af19e 100644 --- a/components/card/metadata/mods.md +++ b/components/card/metadata/mods.md @@ -61,4 +61,4 @@ | `--mod-card-title-line-height` | | `--mod-card-title-padding-right` | | `--mod-card-title-padding-top` | -| `--mod-overlay-animation-duration` | +| `--mod-spectrum-card-background-color` | diff --git a/components/card/themes/spectrum-two.css b/components/card/themes/spectrum-two.css index 2adf5abdb4..2ef275418e 100644 --- a/components/card/themes/spectrum-two.css +++ b/components/card/themes/spectrum-two.css @@ -13,69 +13,10 @@ @container style(--system: spectrum) { .spectrum-Card { - /* Default Layout */ - --spectrum-card-background-color: var(--spectrum-background-layer-2-color); - --spectrum-card-body-spacing: var(--spectrum-spacing-400); - --spectrum-card-title-padding-top: var(--spectrum-spacing-300); - --spectrum-card-title-padding-right: var(--spectrum-spacing-400); - --spectrum-card-content-margin-top: var(--spectrum-spacing-100); - --spectrum-card-content-margin-bottom: var(--spectrum-spacing-300); - --spectrum-card-footer-padding-top: var(--spectrum-spacing-100); - --spectrum-card-subtitle-padding-right: var(--spectrum-spacing-100); - - --spectrum-card-border-width: var(--spectrum-border-width-100); - --spectrum-card-corner-radius: var(--spectrum-corner-radius-100); --spectrum-card-border-color: var(--spectrum-gray-100); --spectrum-card-border-color-hover: var(--spectrum-gray-200); - --spectrum-card-border-color-selected: var(--spectrum-blue-700); - --spectrum-card-divider-color: var(--spectrum-gray-200); - - /* Typography */ - --spectrum-card-title-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-card-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-card-title-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-card-title-line-height: var(--spectrum-heading-line-height); - --spectrum-card-title-font-color: var(--spectrum-heading-color); - - --spectrum-card-body-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-card-body-font-size: var(--spectrum-body-size-s); - --spectrum-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-card-body-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-card-body-line-height: var(--spectrum-body-line-height); - --spectrum-card-body-font-color: var(--spectrum-body-color); - - /* Quick Actions */ - --spectrum-card-actions-spacing: var(--spectrum-spacing-300); - --spectrum-card-actions-size: var(--spectrum-card-selection-background-size); - --spectrum-card-actions-border-radius: var(--spectrum-corner-radius-100); - - --spectrum-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); - --spectrum-card-actions-background-color-opacity: var(--spectrum-card-selection-background-color-opacity); - --spectrum-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); - --spectrum-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); - --spectrum-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); - --spectrum-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); - - /* Focus */ - --spectrum-card-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-card-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - - /* Selected */ - --spectrum-card-selected-background-opacity: 0.1; - - --spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100); --spectrum-card-preview-background-color: var(--spectrum-gray-100); --spectrum-card-preview-background-color-hover: var(--spectrum-gray-200); - - /* Horizontal */ - --spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300); - --spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200); - - /* Quiet/Gallery */ - --spectrum-card-content-margin-top-quiet: var(--spectrum-spacing-100); - --spectrum-card-minimum-width-quiet: var(--spectrum-card-minimum-width); - --spectrum-card-background-color-quiet: var(--spectrum-background-base-color); } } diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 8a90a57e40..3476a059ba 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -18,6 +18,88 @@ * .spectrum-Checkbox-box::after is the focus indicator */ +.spectrum-Checkbox { + --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-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-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + + --spectrum-checkbox-border-width: var(--spectrum-border-width-200); + --spectrum-checkbox-selected-border-width: calc(var(--spectrum-checkbox-control-size) / 2); + + /* Spacing */ + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --spectrum-checkbox-animation-duration: var(--spectrum-animation-duration-100); +} + +.spectrum-Checkbox--sizeS { + --spectrum-checkbox-font-size: var(--spectrum-font-size-75); + + --spectrum-checkbox-height: var(--spectrum-component-height-75); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small); + + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75); +} + +.spectrum-Checkbox--sizeM { + --spectrum-checkbox-font-size: var(--spectrum-font-size-100); + + --spectrum-checkbox-height: var(--spectrum-component-height-100); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); + + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); +} + +.spectrum-Checkbox--sizeL { + --spectrum-checkbox-font-size: var(--spectrum-font-size-200); + + --spectrum-checkbox-height: var(--spectrum-component-height-200); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large); + + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200); +} + +.spectrum-Checkbox--sizeXL { + --spectrum-checkbox-font-size: var(--spectrum-font-size-300); + + --spectrum-checkbox-height: var(--spectrum-component-height-300); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large); + + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300); +} + /* Default Unchecked */ .spectrum-Checkbox { color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); @@ -69,15 +151,15 @@ } } - &.is-indeterminate .spectrum-Checkbox-input, - .spectrum-Checkbox-input { - &:focus-visible + .spectrum-Checkbox-box::before { + &.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::before, + .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))); } @@ -86,26 +168,21 @@ /* Read-only */ &.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))); + .spectrum-Checkbox-input { + cursor: 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))); - } + /* Overrides disabled styles */ + .spectrum-Checkbox-input, + .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 { - color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); + &:disabled ~ .spectrum-Checkbox-label { + color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); + } } } @@ -146,15 +223,17 @@ /* Invalid Indeterminate */ &.is-invalid.is-indeterminate { - .spectrum-Checkbox-box::before, - .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)); + .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::before, - .spectrum-Checkbox-box::before { + .spectrum-Checkbox-box::before, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before { border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); } @@ -163,21 +242,6 @@ } } } - - .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; - } } /* Emphasized */ @@ -193,10 +257,12 @@ /* Hover for Checked and Indeterminate States */ &:hover { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before, - &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before, - &.is-indeterminate .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-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))); + } } } @@ -226,6 +292,17 @@ } } + /* 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, @@ -354,29 +431,11 @@ border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus))); } } - - &, - &: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))); - } - } } .spectrum-Checkbox-box { /* Fix vertical alignment when not wrapping since we're flex-start */ --spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size))); - --spectrum-checkbox-selected-border-width: calc(var(--spectrum-checkbox-control-size) / 2); - display: flex; align-items: center; justify-content: center; @@ -385,7 +444,6 @@ 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)); - margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0; flex-grow: 0; @@ -424,24 +482,62 @@ inset-block-start: 0; margin: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)); - transition: box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out, margin var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out; + transition: + box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out, + margin var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out; /* force ff to render on the pixel grid */ transform: translate(0, 0); } } +.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; + } +} + +/* 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))); + } +} + /* 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))); - outline-width: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); + .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))); + 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))); + &::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))); + } } } diff --git a/components/checkbox/metadata/metadata.json b/components/checkbox/metadata/metadata.json index d7b7e2788f..6072c8b724 100644 --- a/components/checkbox/metadata/metadata.json +++ b/components/checkbox/metadata/metadata.json @@ -3,6 +3,10 @@ "selectors": [ ".spectrum-Checkbox", ".spectrum-Checkbox .spectrum-Checkbox-checkmark", + ".spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label", + ".spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label", ".spectrum-Checkbox .spectrum-Checkbox-partialCheckmark", ".spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", @@ -23,17 +27,17 @@ ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--sizeL", + ".spectrum-Checkbox--sizeM", + ".spectrum-Checkbox--sizeS", + ".spectrum-Checkbox--sizeXL", ".spectrum-Checkbox-box", ".spectrum-Checkbox-box:after", ".spectrum-Checkbox-box:before", ".spectrum-Checkbox-input", ".spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", ".spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label", ".spectrum-Checkbox-input:disabled", - ".spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label", ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box", ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after", ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", @@ -62,18 +66,12 @@ ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label", ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-readOnly", + ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box", + ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input", ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label", ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label", - ".spectrum-Checkbox.is-readOnly:active .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-readOnly:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.spectrum-Checkbox--sizeL", - ".spectrum-Checkbox.spectrum-Checkbox--sizeM", - ".spectrum-Checkbox.spectrum-Checkbox--sizeS", - ".spectrum-Checkbox.spectrum-Checkbox--sizeXL", ".spectrum-Checkbox:active .spectrum-Checkbox-box:before", ".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox:active .spectrum-Checkbox-label", @@ -201,72 +199,18 @@ "--spectrum-neutral-background-color-selected-down", "--spectrum-neutral-background-color-selected-hover", "--spectrum-neutral-background-color-selected-key-focus", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", "--spectrum-text-to-control-100", "--spectrum-text-to-control-200", "--spectrum-text-to-control-300", "--spectrum-text-to-control-75" ], "system-theme": [ - "--system-checkbox-animation-duration", - "--system-checkbox-border-width", "--system-checkbox-checkmark-color", - "--system-checkbox-content-color-default", - "--system-checkbox-content-color-disabled", - "--system-checkbox-content-color-down", - "--system-checkbox-content-color-focus", - "--system-checkbox-content-color-hover", "--system-checkbox-control-color-default", - "--system-checkbox-control-color-disabled", "--system-checkbox-control-color-down", "--system-checkbox-control-color-focus", "--system-checkbox-control-color-hover", - "--system-checkbox-control-corner-radius", - "--system-checkbox-control-selected-color-default", - "--system-checkbox-control-selected-color-down", - "--system-checkbox-control-selected-color-focus", - "--system-checkbox-control-selected-color-hover", - "--system-checkbox-control-size", - "--system-checkbox-emphasized-color-default", - "--system-checkbox-emphasized-color-down", - "--system-checkbox-emphasized-color-focus", - "--system-checkbox-emphasized-color-hover", - "--system-checkbox-focus-indicator-color", - "--system-checkbox-focus-indicator-gap", - "--system-checkbox-focus-indicator-thickness", - "--system-checkbox-font-size", - "--system-checkbox-height", - "--system-checkbox-invalid-color-default", - "--system-checkbox-invalid-color-down", - "--system-checkbox-invalid-color-focus", - "--system-checkbox-invalid-color-hover", - "--system-checkbox-line-height", - "--system-checkbox-line-height-cjk", - "--system-checkbox-size-l-control-size", - "--system-checkbox-size-l-font-size", - "--system-checkbox-size-l-height", - "--system-checkbox-size-l-text-to-control", - "--system-checkbox-size-l-top-to-text", - "--system-checkbox-size-m-control-size", - "--system-checkbox-size-m-font-size", - "--system-checkbox-size-m-height", - "--system-checkbox-size-m-text-to-control", - "--system-checkbox-size-m-top-to-text", - "--system-checkbox-size-s-control-size", - "--system-checkbox-size-s-font-size", - "--system-checkbox-size-s-height", - "--system-checkbox-size-s-text-to-control", - "--system-checkbox-size-s-top-to-text", - "--system-checkbox-size-xl-control-size", - "--system-checkbox-size-xl-font-size", - "--system-checkbox-size-xl-height", - "--system-checkbox-size-xl-text-to-control", - "--system-checkbox-size-xl-top-to-text", - "--system-checkbox-text-to-control", - "--system-checkbox-top-to-text" + "--system-checkbox-control-corner-radius" ], "passthroughs": [], "high-contrast": [ @@ -284,7 +228,6 @@ "--highcontrast-checkbox-highlight-color-default", "--highcontrast-checkbox-highlight-color-down", "--highcontrast-checkbox-highlight-color-focus", - "--highcontrast-checkbox-highlight-color-hover", - "--highcontrast-checkbox-selected-color-default" + "--highcontrast-checkbox-highlight-color-hover" ] } diff --git a/components/checkbox/themes/spectrum-two.css b/components/checkbox/themes/spectrum-two.css index d77e7a9d2b..8632f60bce 100644 --- a/components/checkbox/themes/spectrum-two.css +++ b/components/checkbox/themes/spectrum-two.css @@ -18,77 +18,7 @@ --spectrum-checkbox-control-color-down: var(--spectrum-gray-800); --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); - /* Color */ - --spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-checkbox-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50); - - --spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900); - --spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); - --spectrum-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - - --spectrum-checkbox-emphasized-color-default: var(--spectrum-accent-color-900); - --spectrum-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); - --spectrum-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); - --spectrum-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); - - --spectrum-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default); - --spectrum-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - /* Font */ - --spectrum-checkbox-line-height: var(--spectrum-line-height-100); - --spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-checkbox-control-corner-radius: 2px; - - --spectrum-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - - --spectrum-checkbox-border-width: var(--spectrum-border-width-200); - - --spectrum-checkbox-animation-duration: var(--spectrum-animation-duration-100); - - &, - &.spectrum-Checkbox--sizeM { - --spectrum-checkbox-font-size: var(--spectrum-font-size-100); - --spectrum-checkbox-height: var(--spectrum-component-height-100); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); - } - - &.spectrum-Checkbox--sizeS { - --spectrum-checkbox-font-size: var(--spectrum-font-size-75); - --spectrum-checkbox-height: var(--spectrum-component-height-75); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75); - } - - &.spectrum-Checkbox--sizeL { - --spectrum-checkbox-font-size: var(--spectrum-font-size-200); - --spectrum-checkbox-height: var(--spectrum-component-height-200); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200); - } - - &.spectrum-Checkbox--sizeXL { - --spectrum-checkbox-font-size: var(--spectrum-font-size-300); - --spectrum-checkbox-height: var(--spectrum-component-height-300); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300); - } } } diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index 8ffed9771a..e11998d833 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -15,6 +15,15 @@ @import "./themes/spectrum-two.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); + 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%; @@ -26,6 +35,46 @@ border: none; color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color)); + &.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: transparent; + --mod-clear-button-background-color-hover: transparent; + --mod-clear-button-background-color-down: transparent; + --mod-clear-button-background-color-key-focus: transparent; + } + + &.spectrum-ClearButton--staticWhite { + --mod-clear-button-icon-color: var(--spectrum-white); + --mod-clear-button-icon-color-hover: var(--spectrum-white); + --mod-clear-button-icon-color-down: var(--spectrum-white); + --mod-clear-button-icon-color-key-focus: var(--spectrum-white); + --mod-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); + + --mod-clear-button-background-color: transparent; + } + + &: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-disabled-content-color); + --mod-clear-button-icon-color-down: var(--spectrum-disabled-content-color); + --mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent); + } + &:not(:disabled) { cursor: pointer; } @@ -60,12 +109,12 @@ background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus)); } } +} - &:disabled, - &.is-disabled { - /* Replace the default mods with the disabled state mods */ - --mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled); - --mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled); +.spectrum-ClearButton:disabled, +.spectrum-ClearButton.is-disabled { + .spectrum-ClearButton-icon { + color: var( --highcontrast-clear-button-icon-color-disabled, var(--mod-clear-button-icon-color-disabled, var(--spectrum-clear-button-icon-color-disabled))); } } @@ -81,8 +130,12 @@ justify-content: center; } -.spectrum-ClearButton--staticWhite:focus-visible { - outline: none; +/* @deprecated .spectrum-ClearButton--overBackground */ +.spectrum-ClearButton--staticWhite, +.spectrum-ClearButton--overBackground { + &:focus-visible { + outline: none; + } } @media (forced-colors: active) { diff --git a/components/clearbutton/metadata/metadata.json b/components/clearbutton/metadata/metadata.json index 67ea554e8a..0639759874 100644 --- a/components/clearbutton/metadata/metadata.json +++ b/components/clearbutton/metadata/metadata.json @@ -5,18 +5,18 @@ ".js-focus-within .spectrum-ClearButton:not(:disabled)[focus-within] .spectrum-ClearButton-fill", ".spectrum-ClearButton", ".spectrum-ClearButton > .spectrum-Icon", + ".spectrum-ClearButton--overBackground:focus-visible", ".spectrum-ClearButton--staticWhite:focus-visible", ".spectrum-ClearButton-fill", ".spectrum-ClearButton.is-disabled", + ".spectrum-ClearButton.is-disabled .spectrum-ClearButton-icon", ".spectrum-ClearButton.spectrum-ClearButton--quiet", ".spectrum-ClearButton.spectrum-ClearButton--sizeL", - ".spectrum-ClearButton.spectrum-ClearButton--sizeM", ".spectrum-ClearButton.spectrum-ClearButton--sizeS", ".spectrum-ClearButton.spectrum-ClearButton--sizeXL", ".spectrum-ClearButton.spectrum-ClearButton--staticWhite", - ".spectrum-ClearButton.spectrum-ClearButton--staticWhite.is-disabled", - ".spectrum-ClearButton.spectrum-ClearButton--staticWhite:disabled", ".spectrum-ClearButton:disabled", + ".spectrum-ClearButton:disabled .spectrum-ClearButton-icon", ".spectrum-ClearButton:not(:disabled)", ".spectrum-ClearButton:not(:disabled):active", ".spectrum-ClearButton:not(:disabled):active .spectrum-ClearButton-fill", @@ -51,6 +51,7 @@ "--spectrum-clear-button-background-color-key-focus", "--spectrum-clear-button-height", "--spectrum-clear-button-icon-color", + "--spectrum-clear-button-icon-color-disabled", "--spectrum-clear-button-icon-color-down", "--spectrum-clear-button-icon-color-hover", "--spectrum-clear-button-icon-color-key-focus", @@ -78,39 +79,13 @@ "--system-clear-button-background-color-down", "--system-clear-button-background-color-hover", "--system-clear-button-background-color-key-focus", - "--system-clear-button-disabled-background-color", - "--system-clear-button-disabled-icon-color", - "--system-clear-button-disabled-icon-color-down", - "--system-clear-button-disabled-icon-color-hover", - "--system-clear-button-height", - "--system-clear-button-icon-color", - "--system-clear-button-icon-color-down", - "--system-clear-button-icon-color-hover", - "--system-clear-button-icon-color-key-focus", - "--system-clear-button-padding", - "--system-clear-button-quiet-background-color", - "--system-clear-button-quiet-background-color-down", - "--system-clear-button-quiet-background-color-hover", - "--system-clear-button-quiet-background-color-key-focus", - "--system-clear-button-size-l-height", - "--system-clear-button-size-l-width", - "--system-clear-button-size-m-height", - "--system-clear-button-size-m-width", - "--system-clear-button-size-s-height", - "--system-clear-button-size-s-width", - "--system-clear-button-size-xl-height", - "--system-clear-button-size-xl-width", - "--system-clear-button-static-white-background-color", "--system-clear-button-static-white-background-color-down", "--system-clear-button-static-white-background-color-hover", - "--system-clear-button-static-white-background-color-key-focus", - "--system-clear-button-static-white-disabled-icon-color", - "--system-clear-button-static-white-icon-color", - "--system-clear-button-static-white-icon-color-down", - "--system-clear-button-static-white-icon-color-hover", - "--system-clear-button-static-white-icon-color-key-focus", - "--system-clear-button-width" + "--system-clear-button-static-white-background-color-key-focus" ], "passthroughs": [], - "high-contrast": ["--highcontrast-clear-button-icon-color-hover"] + "high-contrast": [ + "--highcontrast-clear-button-icon-color-disabled", + "--highcontrast-clear-button-icon-color-hover" + ] } diff --git a/components/clearbutton/themes/spectrum-two.css b/components/clearbutton/themes/spectrum-two.css index bb2f4435c0..abba1f7855 100644 --- a/components/clearbutton/themes/spectrum-two.css +++ b/components/clearbutton/themes/spectrum-two.css @@ -18,64 +18,10 @@ --spectrum-clear-button-background-color-down: transparent; --spectrum-clear-button-background-color-key-focus: transparent; - --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--sizeM { - --spectrum-clear-button-height: var(--spectrum-component-height-100); - --spectrum-clear-button-width: var(--spectrum-component-height-100); - } - - &.spectrum-ClearButton--sizeS { - --spectrum-clear-button-height: var(--spectrum-component-height-75); - --spectrum-clear-button-width: var(--spectrum-component-height-75); - } - - &.spectrum-ClearButton--sizeL { - --spectrum-clear-button-height: var(--spectrum-component-height-200); - --spectrum-clear-button-width: var(--spectrum-component-height-200); - } - - &.spectrum-ClearButton--sizeXL { - --spectrum-clear-button-height: var(--spectrum-component-height-300); - --spectrum-clear-button-width: var(--spectrum-component-height-300); - } - - &.spectrum-ClearButton--quiet { - --spectrum-clear-button-background-color: 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--staticWhite { - --spectrum-clear-button-icon-color: var(--spectrum-white); - --spectrum-clear-button-icon-color-hover: var(--spectrum-white); - --spectrum-clear-button-icon-color-down: var(--spectrum-white); - --spectrum-clear-button-icon-color-key-focus: var(--spectrum-white); - - --spectrum-clear-button-background-color: transparent; --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400); --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500); --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400); - - &:disabled, - &.is-disabled { - --spectrum-clear-button-icon-color: var(--spectrum-disabled-static-white-content-color); - } - } - - &:disabled, - &.is-disabled { - --spectrum-clear-button-icon-color: var(--spectrum-disabled-content-color); - --spectrum-clear-button-icon-color-hover: var(--spectrum-disabled-content-color); - --spectrum-clear-button-icon-color-down: var(--spectrum-disabled-content-color); - --spectrum-clear-button-background-color: transparent; } } } diff --git a/components/closebutton/index.css b/components/closebutton/index.css index ea3eea581f..8210896ac5 100644 --- a/components/closebutton/index.css +++ b/components/closebutton/index.css @@ -11,8 +11,61 @@ * governing permissions and limitations under the License. */ -@import "@spectrum-css/commons/basebutton.css"; @import "./themes/spectrum-two.css"; +@import "@spectrum-css/commons/basebutton.css"; + +.spectrum-CloseButton { + /* Cross icon */ + --spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-closebutton-icon-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color); + + /* Focus ring */ + --spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color); + + --spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100); +} + +.spectrum-CloseButton, +.spectrum-CloseButton--sizeM { + --spectrum-closebutton-size: var(--spectrum-component-height-100); + --spectrum-closebutton-border-radius: var(--spectrum-component-height-100); +} + +.spectrum-CloseButton--sizeS { + --spectrum-closebutton-size: var(--spectrum-component-height-75); + --spectrum-closebutton-border-radius: var(--spectrum-component-height-75); +} + +.spectrum-CloseButton--sizeL { + --spectrum-closebutton-size: var(--spectrum-component-height-200); + --spectrum-closebutton-border-radius: var(--spectrum-component-height-200); +} + +.spectrum-CloseButton--sizeXL { + --spectrum-closebutton-size: var(--spectrum-component-height-300); + --spectrum-closebutton-border-radius: var(--spectrum-component-height-300); +} + +.spectrum-CloseButton--staticWhite { + --spectrum-closebutton-static-background-color-default: transparent; + + --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-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) { @@ -55,15 +108,15 @@ a.spectrum-CloseButton { .spectrum-CloseButton { @extend %spectrum-BaseButton; - block-size: var(--mod-closebutton-height, var(--mod-closebutton-size, var(--spectrum-closebutton-size))); - inline-size: var(--mod-closebutton-width, var(--mod-closebutton-size, var(--spectrum-closebutton-size))); + block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size)); + inline-size: var(--mod-closebutton-width, var(--mod-closebutton-height, var(--spectrum-closebutton-size))); position: relative; color: inherit; border-color: transparent; - border-radius: var(--mod-closebutton-border-radius, var(--spectrum-closebutton-size)); + border-radius: var(--mod-closebutton-border-radius, var(--spectrum-closebutton-border-radius)); border-width: 0; justify-content: center; diff --git a/components/closebutton/metadata/metadata.json b/components/closebutton/metadata/metadata.json index 6788f319e7..acff1c6e58 100644 --- a/components/closebutton/metadata/metadata.json +++ b/components/closebutton/metadata/metadata.json @@ -2,6 +2,10 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-CloseButton", + ".spectrum-CloseButton--sizeL", + ".spectrum-CloseButton--sizeM", + ".spectrum-CloseButton--sizeS", + ".spectrum-CloseButton--sizeXL", ".spectrum-CloseButton--staticBlack", ".spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled)", @@ -35,10 +39,6 @@ ".spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton.is-keyboardFocused:not(:disabled)", ".spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton.spectrum-CloseButton--sizeL", - ".spectrum-CloseButton.spectrum-CloseButton--sizeM", - ".spectrum-CloseButton.spectrum-CloseButton--sizeS", - ".spectrum-CloseButton.spectrum-CloseButton--sizeXL", ".spectrum-CloseButton.spectrum-CloseButton--staticBlack", ".spectrum-CloseButton.spectrum-CloseButton--staticWhite", ".spectrum-CloseButton::-moz-focus-inner", @@ -95,6 +95,7 @@ "--spectrum-closebutton-background-color-down", "--spectrum-closebutton-background-color-focus", "--spectrum-closebutton-background-color-hover", + "--spectrum-closebutton-border-radius", "--spectrum-closebutton-focus-indicator-color", "--spectrum-closebutton-focus-indicator-gap", "--spectrum-closebutton-focus-indicator-thickness", @@ -139,35 +140,13 @@ "--spectrum-white" ], "system-theme": [ - "--system-close-button-animation-duration", "--system-close-button-background-color-default", "--system-close-button-background-color-down", "--system-close-button-background-color-focus", "--system-close-button-background-color-hover", - "--system-close-button-focus-indicator-color", - "--system-close-button-focus-indicator-gap", - "--system-close-button-focus-indicator-thickness", - "--system-close-button-icon-color-default", - "--system-close-button-icon-color-disabled", - "--system-close-button-icon-color-down", - "--system-close-button-icon-color-focus", - "--system-close-button-icon-color-hover", - "--system-close-button-size", - "--system-close-button-size-l-size", - "--system-close-button-size-m-size", - "--system-close-button-size-s-size", - "--system-close-button-size-xl-size", - "--system-close-button-static-black-focus-indicator-color", - "--system-close-button-static-black-icon-color-default", - "--system-close-button-static-black-icon-color-disabled", - "--system-close-button-static-black-static-background-color-default", "--system-close-button-static-black-static-background-color-down", "--system-close-button-static-black-static-background-color-focus", "--system-close-button-static-black-static-background-color-hover", - "--system-close-button-static-white-focus-indicator-color", - "--system-close-button-static-white-icon-color-default", - "--system-close-button-static-white-icon-color-disabled", - "--system-close-button-static-white-static-background-color-default", "--system-close-button-static-white-static-background-color-down", "--system-close-button-static-white-static-background-color-focus", "--system-close-button-static-white-static-background-color-hover" diff --git a/components/closebutton/themes/spectrum-two.css b/components/closebutton/themes/spectrum-two.css index 9ae9cff104..01479c42fd 100644 --- a/components/closebutton/themes/spectrum-two.css +++ b/components/closebutton/themes/spectrum-two.css @@ -18,55 +18,16 @@ --spectrum-closebutton-background-color-down: var(--spectrum-gray-200); --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100); - /* Cross icon */ - --spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-closebutton-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color); - - /* Focus ring */ - --spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100); - - &, - &.spectrum-CloseButton--sizeM { - --spectrum-closebutton-size: var(--spectrum-component-height-100); - } - - &.spectrum-CloseButton--sizeS { - --spectrum-closebutton-size: var(--spectrum-component-height-75); - } - - &.spectrum-CloseButton--sizeL { - --spectrum-closebutton-size: var(--spectrum-component-height-200); - } - - &.spectrum-CloseButton--sizeXL { - --spectrum-closebutton-size: var(--spectrum-component-height-300); - } - &.spectrum-CloseButton--staticWhite { - --spectrum-closebutton-static-background-color-default: transparent; --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-400); --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-500); --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-400); - --spectrum-closebutton-icon-color-default: var(--spectrum-white); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); - --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); } &.spectrum-CloseButton--staticBlack { - --spectrum-closebutton-static-background-color-default: transparent; --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-400); --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-500); --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-400); - --spectrum-closebutton-icon-color-default: var(--spectrum-black); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); - --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); } } } diff --git a/components/coachindicator/index.css b/components/coachindicator/index.css index 6e9e09fc23..f675dd485c 100644 --- a/components/coachindicator/index.css +++ b/components/coachindicator/index.css @@ -11,8 +11,45 @@ * governing permissions and limitations under the License. */ +@import "./animation.css"; @import "./themes/spectrum-two.css"; +.spectrum-CoachIndicator { + --spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200); + --spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); + --spectrum-coach-indicator-inline-size: var(--spectrum-coach-indicator-min-inline-size); + --spectrum-coach-indicator-block-size: var(--spectrum-coach-indicator-min-block-size); + --spectrum-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); + --spectrum-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); + + --spectrum-coach-indicator-top: calc((var(--spectrum-coach-indicator-block-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); + --spectrum-coach-indicator-left: calc((var(--spectrum-coach-indicator-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); + + /* animation */ + --spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); + --spectrum-coach-animation-indicator-ring-inner-delay-multiple: -0.5; + --spectrum-coach-animation-indicator-ring-center-delay-multiple: -0.66; + --spectrum-coach-animation-indicator-ring-outer-delay-multiple: -1; + --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; + --spectrum-coach-indicator-animation-name: pulse; + --spectrum-coach-indicator-inner-animation-delay-multiple: var(--spectrum-coach-animation-indicator-ring-inner-delay-multiple); +} + +.spectrum-CoachIndicator--quiet { + --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); + --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); + --mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); + --mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); + --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)); + --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)); + + --mod-coach-indicator-top: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); + --mod-coach-indicator-left: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); + --mod-coach-indicator-animation-name: pulse-quiet; + --mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple)); +} + .spectrum-CoachIndicator { position: relative; margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap)); @@ -24,19 +61,6 @@ block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-block-size)); } -.spectrum-CoachIndicator--quiet { - --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); - --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); - --mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); - --mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); - --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)); - --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)); - - --mod-coach-indicator-top: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); - --mod-coach-indicator-left: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); - --mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple)); -} - .spectrum-CoachIndicator-ring { display: block; position: absolute; @@ -85,37 +109,3 @@ animation: none; } } - -@keyframes pulse { - 0% { - transform: scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale)); - opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); - } - - 50% { - transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale)); - opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); - } - - 100% { - transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale)); - opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); - } -} - -@keyframes pulse-quiet { - 0% { - transform: scale(var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale)); - opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); - } - - 50% { - transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale)); - opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); - } - - 100% { - transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale)); - opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); - } -} diff --git a/components/coachindicator/metadata/metadata.json b/components/coachindicator/metadata/metadata.json index bb255ff12e..8767f07d9f 100644 --- a/components/coachindicator/metadata/metadata.json +++ b/components/coachindicator/metadata/metadata.json @@ -54,7 +54,6 @@ "--spectrum-coach-indicator-quiet-animation-keyframe-0-scale", "--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple", "--spectrum-coach-indicator-quiet-ring-diameter", - "--spectrum-coach-indicator-quiet-ring-diameter-size", "--spectrum-coach-indicator-ring-block-size", "--spectrum-coach-indicator-ring-border-size", "--spectrum-coach-indicator-ring-dark-color", @@ -72,38 +71,9 @@ "--spectrum-coach-animation-indicator-ring-duration", "--spectrum-coach-animation-indicator-ring-inner-delay-multiple", "--spectrum-coach-animation-indicator-ring-outer-delay-multiple", - "--spectrum-gray-25", - "--spectrum-gray-900" - ], - "system-theme": [ - "--system-coach-indicator-animation-keyframe-0-opacity", - "--system-coach-indicator-animation-keyframe-0-scale", - "--system-coach-indicator-animation-keyframe-100-opacity", - "--system-coach-indicator-animation-keyframe-100-scale", - "--system-coach-indicator-animation-keyframe-50-opacity", - "--system-coach-indicator-animation-keyframe-50-scale", - "--system-coach-indicator-animation-name", - "--system-coach-indicator-block-size", - "--system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple", - "--system-coach-indicator-coach-animation-indicator-ring-duration", - "--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple", - "--system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple", - "--system-coach-indicator-inline-size", - "--system-coach-indicator-inner-animation-delay-multiple", - "--system-coach-indicator-left", - "--system-coach-indicator-min-block-size", - "--system-coach-indicator-min-inline-size", - "--system-coach-indicator-quiet-animation-keyframe-0-scale", - "--system-coach-indicator-quiet-animation-name", - "--system-coach-indicator-quiet-animation-ring-inner-delay-multiple", - "--system-coach-indicator-quiet-quiet-ring-diameter-size", - "--system-coach-indicator-ring-block-size", - "--system-coach-indicator-ring-border-size", - "--system-coach-indicator-ring-dark-color", - "--system-coach-indicator-ring-inline-size", - "--system-coach-indicator-ring-light-color", - "--system-coach-indicator-top" + "--spectrum-gray-25" ], + "system-theme": ["--system-coach-indicator-ring-light-color"], "passthroughs": [], "high-contrast": [] } diff --git a/components/coachindicator/themes/spectrum-two.css b/components/coachindicator/themes/spectrum-two.css index de4c2efd44..aa239aac3d 100644 --- a/components/coachindicator/themes/spectrum-two.css +++ b/components/coachindicator/themes/spectrum-two.css @@ -13,40 +13,6 @@ @container style(--system: spectrum) { .spectrum-CoachIndicator { - --spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); - --spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); - --spectrum-coach-indicator-inline-size: var(--spectrum-coach-indicator-min-inline-size); - --spectrum-coach-indicator-block-size: var(--spectrum-coach-indicator-min-block-size); - --spectrum-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); - --spectrum-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); - - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-25); - - --spectrum-coach-indicator-top: calc((var(--spectrum-coach-indicator-block-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); - --spectrum-coach-indicator-left: calc((var(--spectrum-coach-indicator-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); - - /* animation */ - --spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); - --spectrum-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --spectrum-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --spectrum-coach-animation-indicator-ring-outer-delay-multiple: -1; - --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --spectrum-coach-indicator-animation-name: pulse; - --spectrum-coach-indicator-inner-animation-delay-multiple: var(--spectrum-coach-animation-indicator-ring-inner-delay-multiple); - - --spectrum-coach-indicator-animation-keyframe-0-scale: 1; - --spectrum-coach-indicator-animation-keyframe-0-opacity: 0; - --spectrum-coach-indicator-animation-keyframe-50-scale: 1.5; - --spectrum-coach-indicator-animation-keyframe-50-opacity: 1; - --spectrum-coach-indicator-animation-keyframe-100-scale: 2; - --spectrum-coach-indicator-animation-keyframe-100-opacity: 0; - --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - } - - .spectrum-CoachIndicator--quiet { - --spectrum-coach-indicator-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); - --spectrum-coach-indicator-animation-name: pulse-quiet; - } +} } diff --git a/components/coachmark/index.css b/components/coachmark/index.css index f4e44a8025..7121a6fa3d 100644 --- a/components/coachmark/index.css +++ b/components/coachmark/index.css @@ -14,17 +14,52 @@ @import "./themes/spectrum-two.css"; .spectrum-CoachMark { - /* @passthrough start */ - --mod-buttongroup-justify-content: flex-end; - --mod-popover-border-width: var(--spectrum-coachmark-popover-border-width); - --mod-popover-corner-radius: var(--spectrum-coachmark-popover-corner-radius); - --mod-popover-content-area-spacing-vertical: 0; - --mod-button-edge-to-visual-only: 9px; - /* @passthrough end */ + --spectrum-coachmark-min-width: var(--spectrum-coach-mark-minimum-width); + --spectrum-coachmark-width: var(--spectrum-coach-mark-width); + --spectrum-coachmark-max-width: var(--spectrum-coach-mark-maximum-width); + + --spectrum-coachmark-media-height: var(--spectrum-coach-mark-media-height); + --spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); --spectrum-coachmark-border-size: var(--mod-popover-border-width); --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius); + /* layout */ + --spectrum-coachmark-padding: var(--spectrum-coach-mark-edge-to-content); + --spectrum-coachmark-heading-to-action-button: var(--spectrum-spacing-300); + --spectrum-coachmark-header-to-body: var(--spectrum-spacing-200); + --spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300); + + /* font */ + --spectrum-coachmark-title-color: var(--spectrum-heading-color); + --spectrum-coachmark-title-font-family: var(--spectrum-sans-serif-font); + --spectrum-coachmark-title-font-style: var(--spectrum-heading-serif-font-style); + --spectrum-coachmark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --spectrum-coachmark-title-font-size: var(--spectrum-coach-mark-title-size); + --spectrum-coachmark-title-text-line-height: var(--spectrum-heading-line-height); + + --spectrum-coachmark-content-font-color: var(--spectrum-body-color); + --spectrum-coachmark-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-coachmark-content-font-family: var(--spectrum-sans-serif-font); + --spectrum-coachmark-content-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-coachmark-content-line-height: var(--spectrum-body-line-height); + --spectrum-coachmark-content-font-size: var(--spectrum-coach-mark-body-size); + + --spectrum-coachmark-step-color: var(--spectrum-coach-mark-pagination-color); + --spectrum-coachmark-step-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-coachmark-step-font-family: var(--spectrum-sans-serif-font); + --spectrum-coachmark-step-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-coachmark-step-line-height: var(--spectrum-body-line-height); + --spectrum-coachmark-step-font-size: var(--spectrum-coach-mark-pagination-body-size); + --spectrum-coachmark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); + + /* mods */ + --mod-buttongroup-justify-content: flex-end; + --mod-popover-border-width: var(--spectrum-border-width-100); + --mod-popover-corner-radius: var(--spectrum-corner-radius-100); + --mod-popover-content-area-spacing-vertical: 0; + --mod-button-edge-to-visual-only: 9px; + 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)); @@ -36,9 +71,7 @@ } .spectrum-CoachMark-buttongroup--mobile { - /* @passthrough -- ButtonGroup */ - --mod-buttongroup-spacing-horizontal: var(--spectrum-coachmark-buttongroup-spacing-horizontal); - + --mod-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); display: var(--spectrum-coachmark-buttongroup-mobile-display); } diff --git a/components/coachmark/metadata/metadata.json b/components/coachmark/metadata/metadata.json index f917d3f4a2..c8f2d01346 100644 --- a/components/coachmark/metadata/metadata.json +++ b/components/coachmark/metadata/metadata.json @@ -64,7 +64,6 @@ "--spectrum-coachmark-border-size", "--spectrum-coachmark-buttongroup-display", "--spectrum-coachmark-buttongroup-mobile-display", - "--spectrum-coachmark-buttongroup-spacing-horizontal", "--spectrum-coachmark-content-font-color", "--spectrum-coachmark-content-font-family", "--spectrum-coachmark-content-font-size", @@ -80,8 +79,6 @@ "--spectrum-coachmark-menu-mobile-display", "--spectrum-coachmark-min-width", "--spectrum-coachmark-padding", - "--spectrum-coachmark-popover-border-width", - "--spectrum-coachmark-popover-corner-radius", "--spectrum-coachmark-step-color", "--spectrum-coachmark-step-font-family", "--spectrum-coachmark-step-font-size", @@ -113,39 +110,7 @@ "--spectrum-spacing-200", "--spectrum-spacing-300" ], - "system-theme": [ - "--system-coach-mark-body-to-footer", - "--system-coach-mark-buttongroup-spacing-horizontal", - "--system-coach-mark-content-font-color", - "--system-coach-mark-content-font-family", - "--system-coach-mark-content-font-size", - "--system-coach-mark-content-font-style", - "--system-coach-mark-content-font-weight", - "--system-coach-mark-content-line-height", - "--system-coach-mark-header-to-body", - "--system-coach-mark-heading-to-action-button", - "--system-coach-mark-max-width", - "--system-coach-mark-media-height", - "--system-coach-mark-media-min-height", - "--system-coach-mark-min-width", - "--system-coach-mark-padding", - "--system-coach-mark-popover-border-width", - "--system-coach-mark-popover-corner-radius", - "--system-coach-mark-step-color", - "--system-coach-mark-step-font-family", - "--system-coach-mark-step-font-size", - "--system-coach-mark-step-font-style", - "--system-coach-mark-step-font-weight", - "--system-coach-mark-step-line-height", - "--system-coach-mark-step-to-bottom", - "--system-coach-mark-title-color", - "--system-coach-mark-title-font-family", - "--system-coach-mark-title-font-size", - "--system-coach-mark-title-font-style", - "--system-coach-mark-title-text-font-weight", - "--system-coach-mark-title-text-line-height", - "--system-coach-mark-width" - ], + "system-theme": [], "passthroughs": [ "--mod-button-edge-to-visual-only", "--mod-buttongroup-justify-content", diff --git a/components/coachmark/themes/spectrum-two.css b/components/coachmark/themes/spectrum-two.css index 131c001d26..3b48a570c2 100644 --- a/components/coachmark/themes/spectrum-two.css +++ b/components/coachmark/themes/spectrum-two.css @@ -10,48 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-CoachMark { - --spectrum-coachmark-min-width: var(--spectrum-coach-mark-minimum-width); - --spectrum-coachmark-width: var(--spectrum-coach-mark-width); - --spectrum-coachmark-max-width: var(--spectrum-coach-mark-maximum-width); - - --spectrum-coachmark-media-height: var(--spectrum-coach-mark-media-height); - --spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); - - /* layout */ - --spectrum-coachmark-padding: var(--spectrum-coach-mark-edge-to-content); - --spectrum-coachmark-heading-to-action-button: var(--spectrum-spacing-300); - --spectrum-coachmark-header-to-body: var(--spectrum-spacing-200); - --spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300); - - /* font */ - --spectrum-coachmark-title-color: var(--spectrum-heading-color); - --spectrum-coachmark-title-font-family: var(--spectrum-sans-serif-font); - --spectrum-coachmark-title-font-style: var(--spectrum-heading-serif-font-style); - --spectrum-coachmark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-coachmark-title-font-size: var(--spectrum-coach-mark-title-size); - --spectrum-coachmark-title-text-line-height: var(--spectrum-heading-line-height); - - --spectrum-coachmark-content-font-color: var(--spectrum-body-color); - --spectrum-coachmark-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-coachmark-content-font-family: var(--spectrum-sans-serif-font); - --spectrum-coachmark-content-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-coachmark-content-line-height: var(--spectrum-body-line-height); - --spectrum-coachmark-content-font-size: var(--spectrum-coach-mark-body-size); - - --spectrum-coachmark-step-color: var(--spectrum-coach-mark-pagination-color); - --spectrum-coachmark-step-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-coachmark-step-font-family: var(--spectrum-sans-serif-font); - --spectrum-coachmark-step-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-coachmark-step-line-height: var(--spectrum-body-line-height); - --spectrum-coachmark-step-font-size: var(--spectrum-coach-mark-pagination-body-size); - --spectrum-coachmark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); - - /* passthrough abstractions */ - --spectrum-coachmark-popover-border-width: var(--spectrum-border-width-100); - --spectrum-coachmark-popover-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-coachmark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); - } -} diff --git a/components/colorarea/index.css b/components/colorarea/index.css index 26b7cbcd34..b753853070 100644 --- a/components/colorarea/index.css +++ b/components/colorarea/index.css @@ -13,6 +13,17 @@ @import "./themes/spectrum-two.css"; +.spectrum-ColorArea { + --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding); + --spectrum-colorarea-border-color: rgb(0 0 0 / 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */ + --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color); + --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width); + --spectrum-colorarea-height: var(--spectrum-color-area-height); + --spectrum-colorarea-width: var(--spectrum-color-area-width); + --spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width); + --spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height); +} + /* Windows High Contrast Mode */ @media (forced-colors: active) { .spectrum-ColorArea { @@ -21,7 +32,12 @@ --highcontrast-colorarea-fill-color-disabled: Canvas; } - .spectrum-ColorArea.is-disabled, + .spectrum-ColorArea { + &.is-disabled { + forced-color-adjust: none; + } + } + .spectrum-ColorArea-gradient, .spectrum-ColorHandle-color { forced-color-adjust: none; diff --git a/components/colorarea/metadata/metadata.json b/components/colorarea/metadata/metadata.json index 630e35f140..21a748b6a1 100644 --- a/components/colorarea/metadata/metadata.json +++ b/components/colorarea/metadata/metadata.json @@ -41,18 +41,7 @@ "--spectrum-colorarea-width" ], "global": ["--spectrum-disabled-background-color"], - "system-theme": [ - "--system-color-area-border-color", - "--system-color-area-border-color-opacity", - "--system-color-area-border-color-rgb", - "--system-color-area-border-radius", - "--system-color-area-border-width", - "--system-color-area-disabled-background-color", - "--system-color-area-height", - "--system-color-area-min-height", - "--system-color-area-min-width", - "--system-color-area-width" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-colorarea-border-color", diff --git a/components/colorarea/themes/spectrum-two.css b/components/colorarea/themes/spectrum-two.css index 4ba68fa150..3b48a570c2 100644 --- a/components/colorarea/themes/spectrum-two.css +++ b/components/colorarea/themes/spectrum-two.css @@ -10,16 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-ColorArea { - --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding); - --spectrum-colorarea-border-color: rgb(0 0 0 / 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */ - --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color); - --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width); - --spectrum-colorarea-height: var(--spectrum-color-area-height); - --spectrum-colorarea-width: var(--spectrum-color-area-width); - --spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width); - --spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height); - } -} diff --git a/components/colorhandle/index.css b/components/colorhandle/index.css index 79e9f3858a..a4637f9031 100644 --- a/components/colorhandle/index.css +++ b/components/colorhandle/index.css @@ -14,9 +14,31 @@ @import "./themes/spectrum-two.css"; .spectrum-ColorHandle { - /* @passthrough -- opacity checkerboard customization */ + --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 */ @@ -35,8 +57,6 @@ border-radius: 100%; - transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing)); - &::after { content: ""; inset-inline: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2)); @@ -48,6 +68,8 @@ border-radius: var(--mod-colorhandle-hitarea-border-radius, 100%); } + transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing)); + &.is-focused, &:focus-visible { /* Bigger handle when focused */ diff --git a/components/colorhandle/metadata/metadata.json b/components/colorhandle/metadata/metadata.json index 41c926dbf2..93493517b9 100644 --- a/components/colorhandle/metadata/metadata.json +++ b/components/colorhandle/metadata/metadata.json @@ -56,21 +56,7 @@ "--spectrum-picked-color", "--spectrum-white" ], - "system-theme": [ - "--system-color-handle-animation-duration", - "--system-color-handle-animation-easing", - "--system-color-handle-border-color", - "--system-color-handle-border-color-disabled", - "--system-color-handle-border-width", - "--system-color-handle-fill-color-disabled", - "--system-color-handle-focused-size", - "--system-color-handle-hitarea-size", - "--system-color-handle-inner-border-color", - "--system-color-handle-inner-border-width", - "--system-color-handle-outer-border-color", - "--system-color-handle-outer-border-width", - "--system-color-handle-size" - ], + "system-theme": [], "passthroughs": ["--mod-opacity-checkerboard-position"], "high-contrast": [ "--highcontrast-colorhandle-border-color", diff --git a/components/colorhandle/themes/spectrum-two.css b/components/colorhandle/themes/spectrum-two.css index f3ef852ab6..3b48a570c2 100644 --- a/components/colorhandle/themes/spectrum-two.css +++ b/components/colorhandle/themes/spectrum-two.css @@ -10,29 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-ColorHandle { - --spectrum-colorhandle-size: var(--spectrum-color-handle-size); - --spectrum-colorhandle-focused-size: var(--spectrum-color-handle-size-key-focus); - --spectrum-colorhandle-hitarea-size: var(--spectrum-color-control-track-width); - - --spectrum-colorhandle-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-colorhandle-animation-easing: ease-in-out; - - /* outer border as box shadow on the colorhandle */ - --spectrum-colorhandle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */ - --spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width); - - /* inner border as inset boxshadow on the colorhandle-inner */ - --spectrum-colorhandle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */ - --spectrum-colorhandle-inner-border-width: var(--spectrum-color-handle-inner-border-width); - - /* primary border on color handle */ - --spectrum-colorhandle-border-width: var(--spectrum-color-handle-border-width); - --spectrum-colorhandle-border-color: var(--spectrum-white); - - --spectrum-colorhandle-border-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-colorhandle-fill-color-disabled: var(--spectrum-disabled-background-color); - } -} diff --git a/components/colorloupe/index.css b/components/colorloupe/index.css index 779d85c3ce..7cf5943d33 100644 --- a/components/colorloupe/index.css +++ b/components/colorloupe/index.css @@ -13,6 +13,27 @@ @import "./themes/spectrum-two.css"; +.spectrum-ColorLoupe { + --spectrum-colorloupe-width: var(--spectrum-color-loupe-width); + --spectrum-colorloupe-height: var(--spectrum-color-loupe-height); + + --spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle); + --spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */ + + --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-x); + --spectrum-colorloupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y); + --spectrum-colorloupe-drop-shadow-blur: var(--spectrum-color-loupe-drop-shadow-blur); + --spectrum-colorloupe-drop-shadow-color: var(--spectrum-color-loupe-drop-shadow-color); + + --spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width); + --spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width); + --spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border); + --spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border); + + --spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); + --spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); +} + .spectrum-ColorLoupe { inline-size: var(--spectrum-colorloupe-width); block-size: var(--spectrum-colorloupe-height); @@ -24,7 +45,9 @@ inset-block-end: calc((var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width)) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset))); inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2)); - transition: transform 100ms ease-in-out, opacity 125ms ease-in-out; + transition: + transform 100ms ease-in-out, + opacity 125ms ease-in-out; pointer-events: none; filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-colorloupe-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-colorloupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-colorloupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-colorloupe-drop-shadow-color))); diff --git a/components/colorloupe/metadata/metadata.json b/components/colorloupe/metadata/metadata.json index e7096e23a0..4b3ff62945 100644 --- a/components/colorloupe/metadata/metadata.json +++ b/components/colorloupe/metadata/metadata.json @@ -58,22 +58,7 @@ "--spectrum-opacity-checkerboard-square-light", "--spectrum-picked-color" ], - "system-theme": [ - "--system-color-loupe-animation-distance", - "--system-color-loupe-checkerboard-dark-color", - "--system-color-loupe-checkerboard-light-color", - "--system-color-loupe-drop-shadow-blur", - "--system-color-loupe-drop-shadow-color", - "--system-color-loupe-drop-shadow-x", - "--system-color-loupe-drop-shadow-y", - "--system-color-loupe-height", - "--system-color-loupe-inner-border-color", - "--system-color-loupe-inner-border-width", - "--system-color-loupe-offset", - "--system-color-loupe-outer-border-color", - "--system-color-loupe-outer-border-width", - "--system-color-loupe-width" - ], + "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-colorloupe-outer-border-color"] } diff --git a/components/colorloupe/themes/spectrum-two.css b/components/colorloupe/themes/spectrum-two.css index d04f3765aa..3b48a570c2 100644 --- a/components/colorloupe/themes/spectrum-two.css +++ b/components/colorloupe/themes/spectrum-two.css @@ -10,26 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-ColorLoupe { - --spectrum-colorloupe-width: var(--spectrum-color-loupe-width); - --spectrum-colorloupe-height: var(--spectrum-color-loupe-height); - - --spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle); - --spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */ - - --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-x); - --spectrum-colorloupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y); - --spectrum-colorloupe-drop-shadow-blur: var(--spectrum-color-loupe-drop-shadow-blur); - --spectrum-colorloupe-drop-shadow-color: var(--spectrum-color-loupe-drop-shadow-color); - - --spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width); - --spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width); - --spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border); - --spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border); - - --spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); - --spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); - } -} diff --git a/components/colorslider/index.css b/components/colorslider/index.css index 4089af516a..1c959e88a7 100644 --- a/components/colorslider/index.css +++ b/components/colorslider/index.css @@ -13,7 +13,7 @@ @import "./themes/spectrum-two.css"; -@media (forced-colors: active) { + @media (forced-colors: active) { .spectrum-ColorSlider { --highcontrast-color-slider-border-color: CanvasText; --highcontrast-color-slider-border-color-disabled: GrayText; @@ -23,7 +23,10 @@ } .spectrum-ColorSlider { - /* @passthrough -- settings for nested color handle */ + /* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ + --spectrum-color-slider-border-color-rgba: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity)); + + /* Settings for nested Color handle */ --mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px); position: relative; diff --git a/components/colorslider/metadata/metadata.json b/components/colorslider/metadata/metadata.json index 3f1d07c135..c28f43e96d 100644 --- a/components/colorslider/metadata/metadata.json +++ b/components/colorslider/metadata/metadata.json @@ -37,29 +37,15 @@ "--spectrum-color-slider-border-opacity", "--spectrum-color-slider-border-rounding", "--spectrum-color-slider-border-width", - "--spectrum-color-slider-checkerboard-dark-color", - "--spectrum-color-slider-checkerboard-light-color", - "--spectrum-color-slider-checkerboard-size", - "--spectrum-color-slider-handle-margin-block", "--spectrum-color-slider-length", "--spectrum-color-slider-minimum-length" ], "global": [ "--spectrum-color-control-track-width", - "--spectrum-component-top-to-text-75", "--spectrum-disabled-background-color", - "--spectrum-gray-900-rgb", - "--spectrum-opacity-checkerboard-square-dark", - "--spectrum-opacity-checkerboard-square-light", - "--spectrum-opacity-checkerboard-square-size" - ], - "system-theme": [ - "--system-color-slider-border-color-rgba", - "--system-color-slider-checkerboard-dark-color", - "--system-color-slider-checkerboard-light-color", - "--system-color-slider-checkerboard-size", - "--system-color-slider-handle-margin-block" + "--spectrum-gray-900-rgb" ], + "system-theme": [], "passthroughs": ["--mod-colorhandle-hitarea-border-radius"], "high-contrast": [ "--highcontrast-color-slider-background-color-disabled", diff --git a/components/colorslider/themes/spectrum-two.css b/components/colorslider/themes/spectrum-two.css index 4f81f14b83..3b48a570c2 100644 --- a/components/colorslider/themes/spectrum-two.css +++ b/components/colorslider/themes/spectrum-two.css @@ -10,18 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-ColorSlider { - /* Size and Spacing */ - --spectrum-color-slider-handle-margin-block: var(--spectrum-component-top-to-text-75); - - /* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ - --spectrum-color-slider-border-color-rgba: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity)); - - /* Checkerboard pattern */ - --spectrum-color-slider-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); - --spectrum-color-slider-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); - --spectrum-color-slider-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); - } -} diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index 0a1326191b..3768b62efe 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -13,21 +13,34 @@ @import "./themes/spectrum-two.css"; +.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)); +} + /* Windows High Contrast Mode */ @media (forced-colors: active) { .spectrum-ColorWheel { --highcontrast-colorwheel-border-color-disabled: GrayText; --highcontrast-colorwheel-fill-color-disabled: Canvas; + } + .spectrum-ColorWheel { forced-color-adjust: none; } } .spectrum-ColorWheel { - /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- 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)); - /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */ - --_border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width)); + /* stylelint-disable spectrum-tools/no-unused-custom-properties, custom-property-pattern -- --track-width and --border-width to be used with JS in calculating the clip-path paths and colorarea-container-size */ + --track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)); + --border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width)); position: relative; display: block; diff --git a/components/colorwheel/metadata/metadata.json b/components/colorwheel/metadata/metadata.json index 6d47e3c5d5..1be9fe86c0 100644 --- a/components/colorwheel/metadata/metadata.json +++ b/components/colorwheel/metadata/metadata.json @@ -53,17 +53,7 @@ "--spectrum-disabled-background-color", "--spectrum-transparent-black-200" ], - "system-theme": [ - "--system-color-wheel-border-color", - "--system-color-wheel-border-width", - "--system-color-wheel-colorarea-margin", - "--system-color-wheel-colorhandle-position", - "--system-color-wheel-fill-color-disabled", - "--system-color-wheel-height", - "--system-color-wheel-min-width", - "--system-color-wheel-track-width", - "--system-color-wheel-width" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-colorwheel-border-color-disabled", diff --git a/components/colorwheel/themes/spectrum-two.css b/components/colorwheel/themes/spectrum-two.css index 66ddfcbb48..3b48a570c2 100644 --- a/components/colorwheel/themes/spectrum-two.css +++ b/components/colorwheel/themes/spectrum-two.css @@ -10,17 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-ColorWheel { - --spectrum-colorwheel-width: var(--spectrum-color-wheel-width); - --spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width); - --spectrum-colorwheel-height: var(--spectrum-color-wheel-width); - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200); - --spectrum-colorwheel-border-width: var(--spectrum-border-width-100); - --spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width); - --spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin); - --spectrum-colorwheel-colorhandle-position: calc((var(--spectrum-colorwheel-width) / 2) - (var(--spectrum-colorwheel-track-width) / 2)); - } -} diff --git a/components/combobox/index.css b/components/combobox/index.css index 869015d08d..fdbe1791a1 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -13,30 +13,42 @@ @import "./themes/spectrum-two.css"; -@media (forced-colors: active) { - .spectrum-Combobox { - --highcontrast-combobox-border-color-highlight: Highlight; - --highcontrast-combobox-border-color-invalid: Highlight; +.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-button.spectrum-PickerButton--quiet { - .spectrum-PickerButton-fill { - forced-color-adjust: none; - } + --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-PickerButton-icon { - /* Should match foreground color of the Textfield. */ - color: CanvasText; - } - } - } -} + --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 { - --spectrum-combobox-button-inline-offset: 0px; - --spectrum-combobox-min-inline-size: calc(var(--spectrum-combobox-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); - --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); + --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); - /* @passthrough start -- settings for nested Textfield component */ + --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); + + /* @passthroughs start -- 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)); @@ -78,7 +90,115 @@ --mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled); --mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled); /* @passthroughs end -- settings for nested Picker Button component */ +} + +.spectrum-Combobox--sizeS { + --spectrum-combobox-block-size: var(--spectrum-component-height-75); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-combobox-font-size: var(--spectrum-font-size-75); + + --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); + --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small); + --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-small); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75); +} + +.spectrum-Combobox--sizeM { + --spectrum-combobox-block-size: var(--spectrum-component-height-100); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-combobox-font-size: var(--spectrum-font-size-100); + + --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); + --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); +} + +.spectrum-Combobox--sizeL { + --spectrum-combobox-block-size: var(--spectrum-component-height-200); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-combobox-font-size: var(--spectrum-font-size-200); + + --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); + --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large); + --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-large); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); +} + +.spectrum-Combobox--sizeXL { + --spectrum-combobox-block-size: var(--spectrum-component-height-300); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-combobox-font-size: var(--spectrum-font-size-300); + + --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); + --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large); + --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); +} + +.spectrum-Combobox--quiet { + --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-quiet-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); + --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); + --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); + --spectrum-combobox-button-inline-offset: calc((var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2) - (var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / 2)); + + &.spectrum-Combobox--sizeS { + --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small); + } + &.spectrum-Combobox--sizeM { + --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); + } + + &.spectrum-Combobox--sizeL { + --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-large); + } + + &.spectrum-Combobox--sizeXL { + --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large); + } + + /* Settings for nested Picker Button component. */ + --mod-picker-button-background-color-quiet: transparent; + --mod-picker-button-border-color-quiet: transparent; +} + +@media (forced-colors: active) { + .spectrum-Combobox { + --highcontrast-combobox-border-color-highlight: Highlight; + --highcontrast-combobox-border-color-invalid: Highlight; + + .spectrum-Combobox-button.spectrum-PickerButton--quiet { + .spectrum-PickerButton-fill { + forced-color-adjust: none; + } + + .spectrum-PickerButton-icon { + /* Should match foreground color of the Textfield. */ + color: CanvasText; + } + } + } +} + +.spectrum-Combobox { position: relative; display: inline-flex; flex-flow: row nowrap; @@ -111,25 +231,22 @@ /* PICKER BUTTON */ .spectrum-Combobox-button { position: absolute; - inset-inline-end: calc(-1 * var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset))); + 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) { - /* @passthrough */ --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) & { - /* @passthrough */ --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 & { - /* @passthrough */ --mod-picker-button-border-color: var(--mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus)); } @@ -137,7 +254,6 @@ &:active, .spectrum-Combobox:hover &, .spectrum-Combobox:has(:active) & { - /* @passthrough */ --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover))); } @@ -145,28 +261,24 @@ &.is-focused:hover, .spectrum-Combobox:hover:has(:focus) &, .spectrum-Combobox.is-focused:hover & { - /* @passthrough */ --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) { - /* @passthrough */ --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) & { - /* @passthrough */ --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 & { - /* @passthrough */ --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))); } @@ -174,7 +286,6 @@ &:active, .spectrum-Combobox:hover &, .spectrum-Combobox:has(:active) & { - /* @passthrough */ --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))); } @@ -182,7 +293,6 @@ &.is-focused:hover, .spectrum-Combobox:hover:has(:focus) &, .spectrum-Combobox.is-focused:hover & { - /* @passthrough */ --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))); } } @@ -205,7 +315,6 @@ font-style: var(--mod-combobox-font-style, var(--spectrum-combobox-font-style)); &::placeholder { - /* @passthrough */ --mod-textfield-text-color-default: var(--mod-combobox-font-color-placeholder); } @@ -213,26 +322,22 @@ .spectrum-Combobox-textfield:hover &, &:hover, &:active { - /* @passthrough */ --mod-textfield-background-color: var(--mod-combobox-background-color-hover); } /* Focus */ .spectrum-Combobox-textfield.is-focused &, &:focus { - /* @passthrough */ --mod-textfield-background-color: var(--mod-combobox-background-color-focus); /* Focus + Hover */ &:hover { - /* @passthrough */ --mod-textfield-background-color: var(--mod-combobox-background-color-focus-hover); } } /* Keyboard Focus */ .spectrum-Combobox-textfield.is-keyboardFocused & { - /* @passthrough */ --mod-textfield-background-color: var(--mod-combobox-background-color-key-focus); } @@ -240,7 +345,7 @@ .spectrum-Combobox-textfield.is-invalid &, .spectrum-Combobox-textfield.is-loading & { padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset)) - + 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) ); } @@ -265,19 +370,13 @@ } /* QUIET VARIATION (no visible background) */ -.spectrum-Combobox.spectrum-Combobox--quiet { - --spectrum-combobox-min-inline-size: calc(var(--spectrum-combobox-minimum-width-multiplier) * var(--mod-combobox-block-size, var(--spectrum-combobox-block-size))); - --spectrum-combobox-button-inline-offset: calc((var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2) - (var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / 2)); - --spectrum-combobox-border-radius: 0; +.spectrum-Combobox--quiet { + border-radius: 0; - /* @passthrough start -- Settings for nested Picker Button component. */ - --mod-picker-button-background-color-quiet: transparent; - --mod-picker-button-border-color-quiet: transparent; - --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet); - /* @passthrough end */ - - .spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon { - inset-inline-end: var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)); + .spectrum-Combobox-textfield { + &.is-invalid .spectrum-Textfield-validationIcon { + inset-inline-end: var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)); + } } .spectrum-Combobox-input { @@ -287,11 +386,11 @@ padding-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); padding-inline-start: var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)); - padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset))); + 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))); + 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/metadata/metadata.json b/components/combobox/metadata/metadata.json index ecf0f303e7..9216849870 100644 --- a/components/combobox/metadata/metadata.json +++ b/components/combobox/metadata/metadata.json @@ -5,6 +5,19 @@ ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon", ".spectrum-Combobox .spectrum-Popover.is-open", + ".spectrum-Combobox--quiet", + ".spectrum-Combobox--quiet .spectrum-Combobox-input", + ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input", + ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon", + ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input", + ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL", + ".spectrum-Combobox--quiet.spectrum-Combobox--sizeM", + ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS", + ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", + ".spectrum-Combobox--sizeL", + ".spectrum-Combobox--sizeM", + ".spectrum-Combobox--sizeS", + ".spectrum-Combobox--sizeXL", ".spectrum-Combobox-button", ".spectrum-Combobox-button.is-focused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Combobox-button.is-focused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover", @@ -46,19 +59,6 @@ ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox.spectrum-Combobox--quiet", - ".spectrum-Combobox.spectrum-Combobox--quiet .spectrum-Combobox-input", - ".spectrum-Combobox.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input", - ".spectrum-Combobox.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon", - ".spectrum-Combobox.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input", - ".spectrum-Combobox.spectrum-Combobox--quiet.spectrum-Combobox--sizeL", - ".spectrum-Combobox.spectrum-Combobox--quiet.spectrum-Combobox--sizeM", - ".spectrum-Combobox.spectrum-Combobox--quiet.spectrum-Combobox--sizeS", - ".spectrum-Combobox.spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", - ".spectrum-Combobox.spectrum-Combobox--sizeL", - ".spectrum-Combobox.spectrum-Combobox--sizeM", - ".spectrum-Combobox.spectrum-Combobox--sizeS", - ".spectrum-Combobox.spectrum-Combobox--sizeXL", ".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", @@ -158,7 +158,6 @@ "--spectrum-combobox-inline-size", "--spectrum-combobox-line-height", "--spectrum-combobox-min-inline-size", - "--spectrum-combobox-minimum-width-multiplier", "--spectrum-combobox-spacing-block-end-edge-to-text", "--spectrum-combobox-spacing-block-start-edge-to-text", "--spectrum-combobox-spacing-edge-to-menu", @@ -227,89 +226,11 @@ "--spectrum-workflow-icon-size-75" ], "system-theme": [ - "--system-combobox-block-size", - "--system-combobox-block-spacing-edge-to-alert", - "--system-combobox-block-spacing-edge-to-progress-circle", "--system-combobox-border-color-default", "--system-combobox-border-color-focus", "--system-combobox-border-color-focus-hover", "--system-combobox-border-color-hover", - "--system-combobox-border-color-invalid-default", - "--system-combobox-border-color-invalid-focus", - "--system-combobox-border-color-invalid-focus-hover", - "--system-combobox-border-color-invalid-hover", - "--system-combobox-border-color-invalid-key-focus", - "--system-combobox-border-color-key-focus", - "--system-combobox-border-radius", - "--system-combobox-border-width", - "--system-combobox-focus-indicator-color", - "--system-combobox-focus-indicator-gap", - "--system-combobox-focus-indicator-thickness", - "--system-combobox-font-size", - "--system-combobox-font-style", - "--system-combobox-icon-size", - "--system-combobox-inline-size", - "--system-combobox-line-height", - "--system-combobox-minimum-width-multiplier", - "--system-combobox-quiet-minimum-width-multiplier", - "--system-combobox-quiet-size-l-spacing-label-to", - "--system-combobox-quiet-size-m-spacing-label-to", - "--system-combobox-quiet-size-s-spacing-label-to", - "--system-combobox-quiet-size-xl-spacing-label-to", - "--system-combobox-quiet-spacing-inline-icon-to-button", - "--system-combobox-quiet-spacing-inline-start-edge-to-text", - "--system-combobox-quiet-spacing-label-to", - "--system-combobox-size-l-block-size", - "--system-combobox-size-l-block-spacing-edge-to-alert", - "--system-combobox-size-l-block-spacing-edge-to-progress-circle", - "--system-combobox-size-l-font-size", - "--system-combobox-size-l-icon-size", - "--system-combobox-size-l-spacing-block-end-edge-to-text", - "--system-combobox-size-l-spacing-block-start-edge-to-text", - "--system-combobox-size-l-spacing-edge-to-menu", - "--system-combobox-size-l-spacing-inline-end-edge-to-text", - "--system-combobox-size-l-spacing-inline-icon-to-button", - "--system-combobox-size-l-spacing-inline-start-edge-to-text", - "--system-combobox-size-m-block-size", - "--system-combobox-size-m-block-spacing-edge-to-alert", - "--system-combobox-size-m-block-spacing-edge-to-progress-circle", - "--system-combobox-size-m-font-size", - "--system-combobox-size-m-icon-size", - "--system-combobox-size-m-spacing-block-end-edge-to-text", - "--system-combobox-size-m-spacing-block-start-edge-to-text", - "--system-combobox-size-m-spacing-edge-to-menu", - "--system-combobox-size-m-spacing-inline-end-edge-to-text", - "--system-combobox-size-m-spacing-inline-icon-to-button", - "--system-combobox-size-m-spacing-inline-start-edge-to-text", - "--system-combobox-size-s-block-size", - "--system-combobox-size-s-block-spacing-edge-to-alert", - "--system-combobox-size-s-block-spacing-edge-to-progress-circle", - "--system-combobox-size-s-font-size", - "--system-combobox-size-s-icon-size", - "--system-combobox-size-s-spacing-block-end-edge-to-text", - "--system-combobox-size-s-spacing-block-start-edge-to-text", - "--system-combobox-size-s-spacing-edge-to-menu", - "--system-combobox-size-s-spacing-inline-end-edge-to-text", - "--system-combobox-size-s-spacing-inline-icon-to-button", - "--system-combobox-size-s-spacing-inline-start-edge-to-text", - "--system-combobox-size-xl-block-size", - "--system-combobox-size-xl-block-spacing-edge-to-alert", - "--system-combobox-size-xl-block-spacing-edge-to-progress-circle", - "--system-combobox-size-xl-font-size", - "--system-combobox-size-xl-icon-size", - "--system-combobox-size-xl-spacing-block-end-edge-to-text", - "--system-combobox-size-xl-spacing-block-start-edge-to-text", - "--system-combobox-size-xl-spacing-edge-to-menu", - "--system-combobox-size-xl-spacing-inline-end-edge-to-text", - "--system-combobox-size-xl-spacing-inline-icon-to-button", - "--system-combobox-size-xl-spacing-inline-start-edge-to-text", - "--system-combobox-spacing-block-end-edge-to-text", - "--system-combobox-spacing-block-start-edge-to-text", - "--system-combobox-spacing-edge-to-menu", - "--system-combobox-spacing-inline-end-edge-to-text", - "--system-combobox-spacing-inline-icon-to-button", - "--system-combobox-spacing-inline-start-edge-to-text", - "--system-combobox-spacing-label-to" + "--system-combobox-border-color-key-focus" ], "passthroughs": [ "--mod-picker-button-background-color", diff --git a/components/combobox/themes/spectrum-two.css b/components/combobox/themes/spectrum-two.css index db2096fa66..c7323724a5 100644 --- a/components/combobox/themes/spectrum-two.css +++ b/components/combobox/themes/spectrum-two.css @@ -18,110 +18,5 @@ --spectrum-combobox-border-color-focus: var(--spectrum-gray-500); --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-600); --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); - - --spectrum-combobox-inline-size: var(--spectrum-field-width); - --spectrum-combobox-minimum-width-multiplier: var(--spectrum-combo-box-minimum-width-multiplier); - - --spectrum-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-combobox-border-radius: var(--spectrum-corner-radius-100); - --spectrum-combobox-border-width: var(--spectrum-border-width-100); - - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component); - - --spectrum-combobox-font-style: var(--spectrum-default-font-style); - --spectrum-combobox-line-height: var(--spectrum-line-height-100); - - --spectrum-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default); - --spectrum-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); - --spectrum-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); - --spectrum-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); - --spectrum-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); - - &, - &.spectrum-Combobox--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--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--sizeL { - --spectrum-combobox-block-size: var(--spectrum-component-height-200); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-combobox-font-size: var(--spectrum-font-size-200); - - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-large); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); - } - - &.spectrum-Combobox--sizeXL { - --spectrum-combobox-block-size: var(--spectrum-component-height-300); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-combobox-font-size: var(--spectrum-font-size-300); - - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); - } - - &.spectrum-Combobox--quiet { - --spectrum-combobox-minimum-width-multiplier: var(--spectrum-combo-box-quiet-minimum-width-multiplier); - --mod-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); - --mod-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); - - &, - &.spectrum-Combobox--sizeM { - --mod-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); - } - - &.spectrum-Combobox--sizeS { - --mod-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small); - } - - &.spectrum-Combobox--sizeL { - --mod-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-large); - } - - &.spectrum-Combobox--sizeXL { - --mod-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large); - } - } } } diff --git a/components/contextualhelp/index.css b/components/contextualhelp/index.css index 943e81dc84..5f40c8a165 100644 --- a/components/contextualhelp/index.css +++ b/components/contextualhelp/index.css @@ -14,6 +14,15 @@ @import "./themes/spectrum-two.css"; .spectrum-ContextualHelp { + /* Layout Variables */ + --spectrum-contextual-help-padding: var(--spectrum-spacing-400); + --spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300); + + /* Typography Variables */ + --spectrum-contextual-help-heading-size: var(--spectrum-contextual-help-title-size); + --spectrum-contextual-help-heading-color: var(--spectrum-heading-color); + --spectrum-contextual-help-body-color: var(--spectrum-body-color); + position: relative; min-inline-size: var(--mod-spectrum-contextual-help-minimum-width, var(--spectrum-contextual-help-minimum-width)); } diff --git a/components/contextualhelp/metadata/metadata.json b/components/contextualhelp/metadata/metadata.json index d899b6ad1e..e3952ec708 100644 --- a/components/contextualhelp/metadata/metadata.json +++ b/components/contextualhelp/metadata/metadata.json @@ -32,18 +32,10 @@ "global": [ "--spectrum-body-color", "--spectrum-heading-color", - "--spectrum-spacing-100", "--spectrum-spacing-300", "--spectrum-spacing-400" ], - "system-theme": [ - "--system-contextual-help-body-color", - "--system-contextual-help-content-spacing", - "--system-contextual-help-heading-color", - "--system-contextual-help-heading-size", - "--system-contextual-help-link-spacing", - "--system-contextual-help-padding" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-contextual-help-body-color", diff --git a/components/contextualhelp/themes/spectrum-two.css b/components/contextualhelp/themes/spectrum-two.css index c3b55fb025..3b48a570c2 100644 --- a/components/contextualhelp/themes/spectrum-two.css +++ b/components/contextualhelp/themes/spectrum-two.css @@ -10,17 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-ContextualHelp { - /* Layout Variables */ - --spectrum-contextual-help-padding: var(--spectrum-spacing-400); - --spectrum-contextual-help-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); - } -} diff --git a/components/datepicker/index.css b/components/datepicker/index.css index 4b3f5a7616..5af2054d71 100644 --- a/components/datepicker/index.css +++ b/components/datepicker/index.css @@ -14,6 +14,61 @@ @import "./themes/spectrum-two.css"; .spectrum-DatePicker { + --spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100); + --spectrum-datepicker-border-radius-quiet: 0; + --spectrum-datepicker-border-width: var(--spectrum-border-width-100); + --spectrum-datepicker-min-width: var(--spectrum-field-width); + --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100); + + /* button */ + --spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500); + --spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default); + --spectrum-datepicker-pickerbutton-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100)); + --spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset)); + --spectrum-datepicker-quiet-button-offset: var(--spectrum-text-to-visual-100); + --spectrum-datepicker-icon-to-button: var(--spectrum-text-to-visual-100); + --spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100); + + /* focus */ + --spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100); + --spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100); + --spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color); + --spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75); + + /* color */ + --spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default); + --spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500); + --spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color); + + /* dash */ + --spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100); + --spectrum-datepicker-dash-color: var(--spectrum-neutral-content-color-default); + --spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-datepicker-range-dash-marin-inline-start: calc(-0.5 * var(--spectrum-datepicker-dash-font-size)); + --spectrum-datepicker-range-dash-padding-top: 0; + + /* calculating widths */ + /* todo: if we add t-shirt sizing, this will be wrong ❤️ */ + --spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size)); + --spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height)); + --spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); + + --spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding)); + --spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)); + + --spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)); + --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); + --spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)); + --spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); + + /* padding inline end */ + --spectrum-datepicker-padding-inline-end: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2)); + --spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset)); + --spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2)); + --spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)); + position: relative; display: inline-flex; flex-direction: row; @@ -22,15 +77,14 @@ border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)); &.is-disabled { - --highcontrast-datepicker-dash-color: var(--highcontrast-datepicker-dash-color-disabled); - --mod-datepicker-dash-color: var(--mod-datepicker-dash-color-disabled, var(--spectrum-datepicker-dash-color-disabled)); + .spectrum-DatePicker-rangeDash { + color: var(--highcontrast-datepicker-dash-color-disabled, var(--mod-datepicker-dash-color-disabled, var(--spectrum-datepicker-dash-color-disabled))); + } } &.is-invalid { - /* @passthrough start */ --mod-textfield-icon-spacing-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-datepicker-invalid-icon-to-button)); --mod-textfield-icon-spacing-inline-end-quiet-invalid: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet)); - /* @passthrough end */ } &:not(.spectrum-DatePicker--quiet, .is-disabled) { @@ -38,37 +92,43 @@ --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-datepicker-pickerbutton-border-color))); &.is-invalid { - /* @passthrough start */ + /* @passthrough */ --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-datepicker-pickerbutton-border-color-invalid))); - --mod-textfield-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-datepicker-pickerbutton-border-color-invalid))); - --mod-textfield-border-color-hover: var(--mod-textfield-border-color); - /* @passthrough end */ } } } /* input padding inline end */ -/* standard and range */ +/* standard and range */ .spectrum-DatePicker-input { padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end)); - /* fill space */ - flex: 1; - inline-size: 100%; + &.spectrum-DatePicker-endField { + padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end)); + } +} - &.spectrum-DatePicker-startField { - --mod-datepicker-padding-inline: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding)); +/* 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)); +} - border-inline-end: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; +/* quiet */ +.spectrum-DatePicker--quiet { + .spectrum-DatePicker-input { + padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet)); + } + + /* quiet invalid and quiet range invalid */ + .is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField) { + padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid-quiet, var(--spectrum-datepicker-padding-inline-end-invalid-quiet)); } +} +/* quiet range */ +.spectrum-DatePicker--quiet .spectrum-DatePicker-input { &.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)); + padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet)); } } @@ -78,52 +138,44 @@ inset-inline-end: 0; } -/* quiet */ .spectrum-DatePicker--quiet { - --mod-datepicker-border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet)); - - .spectrum-DatePicker-input { - padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet)); - - /* quiet range */ - &.spectrum-DatePicker-endField { - padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-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))); - &:disabled { - --mod-picker-button-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) { - --mod-picker-button-border-color: transparent; + .spectrum-PickerButton-fill { + border-color: transparent; + } } &:not(:disabled, .is-open) { - --mod-picker-button-background-color: transparent; + .spectrum-PickerButton-fill { + background-color: transparent; + } } } - &.is-invalid { - /* invalid bottom border color */ - --mod-picker-button-border-color: var(--highcontrast-datepicker-invalid-quiet-color, var(--mod-datepicker-invalid-quiet-color, var(--spectrum-datepicker-invalid-quiet-color))); - --mod-textfield-border-color: var(--highcontrast-datepicker-invalid-quiet-color, var(--mod-datepicker-invalid-quiet-color, var(--spectrum-datepicker-invalid-quiet-color))); - --mod-textfield-border-color-hover: var(--mod-textfield-border-color); - - /* quiet invalid and quiet range invalid */ - .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField) { - padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid-quiet, var(--spectrum-datepicker-padding-inline-end-invalid-quiet)); + &:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) { + .spectrum-DatePicker-input, + .spectrum-DatePicker-button { + border-color: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-datepicker-quiet-border-color-hover)); } } - &:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid):hover { - --mod-picker-button-border-color: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-datepicker-quiet-border-color-hover)); - --mod-textfield-border-color: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-datepicker-quiet-border-color-hover)); - --mod-textfield-border-color-hover: var(--mod-textfield-border-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))); + } } } @@ -144,32 +196,30 @@ border-color var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out; } - &.is-keyboardFocused { - &:not(.spectrum-DatePicker--quiet) { - &::after { - box-shadow: 0 0 0 var(--mod-datepicker-focus-ring-width, var(--spectrum-datepicker-focus-ring-width)) var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color))); - } + &.is-keyboardFocused:not(.spectrum-DatePicker--quiet) { + &::after { + box-shadow: 0 0 0 var(--mod-datepicker-focus-ring-width, var(--spectrum-datepicker-focus-ring-width)) var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color))); + } - .spectrum-DatePicker-textfield::after { - display: none; - } + .spectrum-DatePicker-textfield::after { + display: none; } + } - &.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))); - } + &.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 { - --mod-datepicker-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-textfield { min-inline-size: 0; @@ -216,6 +266,26 @@ } } +.spectrum-DatePicker-input { + /* fill space */ + flex: 1; + inline-size: 100%; + + &.spectrum-DatePicker-startField { + border-inline-end: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; + padding-inline-end: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding)); + } + + &.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)); + } +} + /* "-" between inputs */ .spectrum-DatePicker-rangeDash { color: var(--highcontrast-datepicker-dash-color, var(--mod-datepicker-dash-color, var(--spectrum-datepicker-dash-color))); diff --git a/components/datepicker/metadata/metadata.json b/components/datepicker/metadata/metadata.json index b4938e8c48..f9a88252cb 100644 --- a/components/datepicker/metadata/metadata.json +++ b/components/datepicker/metadata/metadata.json @@ -1,17 +1,21 @@ { "sourceFile": "index.css", "selectors": [ + ".is-invalid .spectrum-DatePicker-input", ".spectrum-DatePicker", ".spectrum-DatePicker--quiet", + ".spectrum-DatePicker--quiet .is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)", ".spectrum-DatePicker--quiet .spectrum-DatePicker-button", ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled", - ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled:not(.is-open)", - ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(:disabled, .is-open)", + ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled:hover", + ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled:not(.is-open) .spectrum-PickerButton-fill", + ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(:disabled, .is-open) .spectrum-PickerButton-fill", ".spectrum-DatePicker--quiet .spectrum-DatePicker-input", ".spectrum-DatePicker--quiet .spectrum-DatePicker-input.spectrum-DatePicker-endField", - ".spectrum-DatePicker--quiet.is-invalid", - ".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)", - ".spectrum-DatePicker--quiet:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid):hover", + ".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-button", + ".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input", + ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) .spectrum-DatePicker-button", + ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) .spectrum-DatePicker-input", ".spectrum-DatePicker--range", ".spectrum-DatePicker--range .spectrum-DatePicker-textfield", ".spectrum-DatePicker--range .spectrum-DatePicker-textfield:first-of-type", @@ -32,7 +36,7 @@ ".spectrum-DatePicker-input.spectrum-DatePicker-startField", ".spectrum-DatePicker-rangeDash", ".spectrum-DatePicker-rangeDash:before", - ".spectrum-DatePicker.is-disabled", + ".spectrum-DatePicker.is-disabled .spectrum-DatePicker-rangeDash", ".spectrum-DatePicker.is-invalid", ".spectrum-DatePicker.is-invalid:not(.spectrum-DatePicker--quiet, .is-disabled)", ".spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled)" @@ -61,6 +65,7 @@ "--mod-datepicker-invalid-quiet-color", "--mod-datepicker-min-width", "--mod-datepicker-padding-inline", + "--mod-datepicker-padding-inline-end-invalid", "--mod-datepicker-padding-inline-end-invalid-quiet", "--mod-datepicker-padding-inline-end-quiet", "--mod-datepicker-pickerbutton-border-color", @@ -94,6 +99,7 @@ "--spectrum-datepicker-focus-thickness", "--spectrum-datepicker-generic-padding", "--spectrum-datepicker-icon-size", + "--spectrum-datepicker-icon-to-button", "--spectrum-datepicker-icon-to-text", "--spectrum-datepicker-initial-height", "--spectrum-datepicker-initial-width", @@ -143,52 +149,9 @@ "--spectrum-text-to-visual-100", "--spectrum-workflow-icon-size-100" ], - "system-theme": [ - "--system-date-picker-border-color-disabled", - "--system-date-picker-border-radius", - "--system-date-picker-border-radius-quiet", - "--system-date-picker-border-width", - "--system-date-picker-dash-color", - "--system-date-picker-dash-color-disabled", - "--system-date-picker-dash-font-size", - "--system-date-picker-datetime-input-width", - "--system-date-picker-datetime-input-width-first", - "--system-date-picker-datetime-quiet-input-width", - "--system-date-picker-datetime-quiet-input-width-first", - "--system-date-picker-focus-animation", - "--system-date-picker-focus-line-gap", - "--system-date-picker-focus-ring-color", - "--system-date-picker-focus-ring-gap", - "--system-date-picker-focus-ring-width", - "--system-date-picker-focus-thickness", - "--system-date-picker-icon-size", - "--system-date-picker-icon-to-text", - "--system-date-picker-initial-height", - "--system-date-picker-input-width", - "--system-date-picker-input-width-base", - "--system-date-picker-input-width-quiet", - "--system-date-picker-invalid-quiet-color", - "--system-date-picker-min-width", - "--system-date-picker-padding-inline-end", - "--system-date-picker-padding-inline-end-invalid", - "--system-date-picker-padding-inline-end-invalid-quiet", - "--system-date-picker-padding-inline-end-quiet", - "--system-date-picker-pickerbutton-border-color", - "--system-date-picker-pickerbutton-border-color-invalid", - "--system-date-picker-pickerbutton-width", - "--system-date-picker-pickerbutton-width-quiet", - "--system-date-picker-quiet-border-color-hover", - "--system-date-picker-quiet-button-offset", - "--system-date-picker-range-dash-marin-inline-start", - "--system-date-picker-range-dash-padding-top", - "--system-date-picker-range-input-width-first", - "--system-date-picker-range-input-width-quiet-first" - ], + "system-theme": ["--system-date-picker-initial-height"], "passthroughs": [ - "--mod-picker-button-background-color", "--mod-picker-button-border-color", - "--mod-textfield-border-color", - "--mod-textfield-border-color-hover", "--mod-textfield-icon-spacing-inline-end-invalid", "--mod-textfield-icon-spacing-inline-end-quiet-invalid" ], diff --git a/components/datepicker/metadata/mods.md b/components/datepicker/metadata/mods.md index 52aa64f395..e92f2d8bad 100644 --- a/components/datepicker/metadata/mods.md +++ b/components/datepicker/metadata/mods.md @@ -23,6 +23,7 @@ | `--mod-datepicker-invalid-quiet-color` | | `--mod-datepicker-min-width` | | `--mod-datepicker-padding-inline` | +| `--mod-datepicker-padding-inline-end-invalid` | | `--mod-datepicker-padding-inline-end-invalid-quiet` | | `--mod-datepicker-padding-inline-end-quiet` | | `--mod-datepicker-pickerbutton-border-color` | diff --git a/components/datepicker/themes/spectrum-two.css b/components/datepicker/themes/spectrum-two.css index 644227c50e..05b3ca88ae 100644 --- a/components/datepicker/themes/spectrum-two.css +++ b/components/datepicker/themes/spectrum-two.css @@ -14,59 +14,5 @@ @container style(--system: spectrum) { .spectrum-DatePicker { --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); - - --spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100); - --spectrum-datepicker-border-radius-quiet: 0; - --spectrum-datepicker-border-width: var(--spectrum-border-width-100); - --spectrum-datepicker-min-width: var(--spectrum-field-width); - --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100); - - /* button */ - --spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500); - --spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default); - --spectrum-datepicker-pickerbutton-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100)); - --spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset)); - --spectrum-datepicker-quiet-button-offset: var(--spectrum-text-to-visual-100); - --spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100); - - /* focus */ - --spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100); - --spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100); - --spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color); - --spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75); - - /* color */ - --spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default); - --spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500); - --spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color); - - /* dash */ - --spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100); - --spectrum-datepicker-dash-color: var(--spectrum-neutral-content-color-default); - --spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-datepicker-range-dash-marin-inline-start: calc(-0.5 * var(--spectrum-datepicker-dash-font-size)); - --spectrum-datepicker-range-dash-padding-top: 0; - - /* calculating widths */ - /* todo: if we add t-shirt sizing, this will be wrong ❤️ */ - --spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size)); - --spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height)); - --spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); - - --spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding)); - --spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)); - - --spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)); - --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); - --spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)); - --spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); - - /* padding inline end */ - --spectrum-datepicker-padding-inline-end: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2)); - --spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset)); - --spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-text-to-visual-100) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2)); - --spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)); } } diff --git a/components/dial/index.css b/components/dial/index.css index 3648d22759..109d2c1ddc 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -13,6 +13,47 @@ @import "./themes/spectrum-two.css"; +.spectrum-Dial { + --spectrum-dial-handle-marker-color: var(--spectrum-gray-700); + --spectrum-dial-border-color: var(--spectrum-gray-700); + + --spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800); + --spectrum-dial-border-color-hover: var(--spectrum-gray-800); + + --spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700); + + --spectrum-dial-min-max-tick-color: var(--spectrum-gray-600); + + --spectrum-dial-label-text-color: var(--spectrum-gray-700); + --spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700); + --spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400); + + --spectrum-dial-container-width: 48px; + + --spectrum-dial-handle-marker-width: 12px; + --spectrum-dial-handle-marker-height: 2px; + + --spectrum-dial-handle-marker-border-radius: 1px; + + --spectrum-dial-handle-size: 100%; + --spectrum-dial-min-height: 0; + --spectrum-dial-controls-min-height: 0; + + --spectrum-dial-min-max-tick-angles: 45deg; + + --spectrum-dial-width: 32px; + --spectrum-dial-height: 32px; + + --spectrum-dial-handle-border-size: var(--spectrum-border-width-200); + --spectrum-dial-label-text-size: var(--spectrum-font-size-75); + --spectrum-dial-label-line-height: var(--spectrum-line-height-200); +} + +.spectrum-Dial--small { + --spectrum-dial-width: 24px; + --spectrum-dial-height: 24px; +} + .spectrum-Dial { position: relative; @@ -25,30 +66,6 @@ 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)); - - &.is-disabled { - .spectrum-Dial-labelContainer { - color: var(--highcontrast-dial-label-text-color-disabled, var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled))); - } - - .spectrum-Dial-controls { - &::after, - &::before { - background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); - } - } - - .spectrum-Dial-handle { - cursor: default; - border-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); - background: var(--highcontrast-dial-background-color-default, var(--mod-dial-background-color-default, var(--spectrum-dial-background-color-default))); - - &::after, - &::before { - background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); - } - } - } } .spectrum-Dial-label { @@ -226,7 +243,32 @@ } } -/* stylelint-disable-next-line selector-class-pattern -- u prefixed states are a legacy implementation still supported */ +.spectrum-Dial { + &.is-disabled { + .spectrum-Dial-labelContainer { + color: var(--highcontrast-dial-label-text-color-disabled, var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled))); + } + + .spectrum-Dial-controls { + &::after, + &::before { + background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); + } + } + + .spectrum-Dial-handle { + cursor: default; + border-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); + background: var(--highcontrast-dial-background-color-default, var(--mod-dial-background-color-default, var(--spectrum-dial-background-color-default))); + + &::after, + &::before { + background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))); + } + } + } +} + .u-isGrabbing { cursor: ns-resize; /* stylelint-disable-next-line -- required for webkit cursor grab/grabbing support */ diff --git a/components/dial/metadata/metadata.json b/components/dial/metadata/metadata.json index 7f5f4459a7..121c27725c 100644 --- a/components/dial/metadata/metadata.json +++ b/components/dial/metadata/metadata.json @@ -4,6 +4,7 @@ ".js-focus-within .spectrum-Dial-handle[focus-within]", ".js-focus-within .spectrum-Dial-handle[focus-within]:after", ".spectrum-Dial", + ".spectrum-Dial--small", ".spectrum-Dial-controls", ".spectrum-Dial-controls:after", ".spectrum-Dial-controls:before", @@ -34,7 +35,6 @@ ".spectrum-Dial.is-disabled .spectrum-Dial-handle:after", ".spectrum-Dial.is-disabled .spectrum-Dial-handle:before", ".spectrum-Dial.is-disabled .spectrum-Dial-labelContainer", - ".spectrum-Dial.spectrum-Dial--small", ".u-isGrabbing", ".u-isGrabbing .spectrum-Dial .spectrum-Dial-label", ".u-isGrabbing .spectrum-Dial .spectrum-Dial-value" @@ -75,11 +75,7 @@ "component": [ "--spectrum-dial-background-color-default", "--spectrum-dial-border-color", - "--spectrum-dial-border-color-disabled", - "--spectrum-dial-border-color-down", "--spectrum-dial-border-color-hover", - "--spectrum-dial-border-color-key-focus", - "--spectrum-dial-border-color-mouse-focus", "--spectrum-dial-border-radius", "--spectrum-dial-container-width", "--spectrum-dial-controls-margin", @@ -90,8 +86,6 @@ "--spectrum-dial-handle-inline-margin", "--spectrum-dial-handle-marker-border-radius", "--spectrum-dial-handle-marker-color", - "--spectrum-dial-handle-marker-color-disabled", - "--spectrum-dial-handle-marker-color-down", "--spectrum-dial-handle-marker-color-hover", "--spectrum-dial-handle-marker-color-key-focus", "--spectrum-dial-handle-marker-color-mouse-focus", @@ -114,7 +108,6 @@ "global": [ "--spectrum-border-width-200", "--spectrum-font-size-75", - "--spectrum-gray-200", "--spectrum-gray-25", "--spectrum-gray-400", "--spectrum-gray-600", @@ -125,37 +118,7 @@ ], "system-theme": [ "--system-dial-background-color-default", - "--system-dial-border-color", - "--system-dial-border-color-disabled", - "--system-dial-border-color-down", - "--system-dial-border-color-hover", - "--system-dial-border-color-key-focus", - "--system-dial-border-color-mouse-focus", - "--system-dial-container-width", - "--system-dial-controls-min-height", - "--system-dial-handle-border-color-disabled", - "--system-dial-handle-border-size", - "--system-dial-handle-marker-border-radius", - "--system-dial-handle-marker-color", - "--system-dial-handle-marker-color-disabled", - "--system-dial-handle-marker-color-down", - "--system-dial-handle-marker-color-hover", - "--system-dial-handle-marker-color-key-focus", - "--system-dial-handle-marker-color-mouse-focus", - "--system-dial-handle-marker-height", - "--system-dial-handle-marker-width", - "--system-dial-handle-size", - "--system-dial-height", - "--system-dial-label-line-height", - "--system-dial-label-text-color", - "--system-dial-label-text-color-disabled", - "--system-dial-label-text-size", - "--system-dial-min-height", - "--system-dial-min-max-tick-angles", - "--system-dial-min-max-tick-color", - "--system-dial-small-height", - "--system-dial-small-width", - "--system-dial-width" + "--system-dial-handle-marker-color-key-focus" ], "passthroughs": [], "high-contrast": [ diff --git a/components/dial/themes/spectrum-two.css b/components/dial/themes/spectrum-two.css index b7c0e75235..410196c391 100644 --- a/components/dial/themes/spectrum-two.css +++ b/components/dial/themes/spectrum-two.css @@ -14,53 +14,6 @@ @container style(--system: spectrum) { .spectrum-Dial { --spectrum-dial-background-color-default: var(--spectrum-gray-75); - - --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-200); - --spectrum-dial-border-color-disabled: var(--spectrum-gray-200); - - --spectrum-dial-handle-marker-color: var(--spectrum-gray-700); - --spectrum-dial-border-color: var(--spectrum-gray-700); - - --spectrum-dial-handle-marker-color-down: var(--spectrum-gray-800); - --spectrum-dial-border-color-down: var(--spectrum-gray-800); - --spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800); - --spectrum-dial-border-color-hover: var(--spectrum-gray-800); - --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); - --spectrum-dial-border-color-key-focus: var(--spectrum-gray-25); - - --spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700); - --spectrum-dial-border-color-mouse-focus: var(--spectrum-gray-700); - - --spectrum-dial-min-max-tick-color: var(--spectrum-gray-600); - - --spectrum-dial-label-text-color: var(--spectrum-gray-700); - --spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700); - --spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400); - - --spectrum-dial-container-width: 48px; - - --spectrum-dial-handle-marker-width: 12px; - --spectrum-dial-handle-marker-height: 2px; - - --spectrum-dial-handle-marker-border-radius: 1px; - - --spectrum-dial-handle-size: 100%; - --spectrum-dial-min-height: 0; - --spectrum-dial-controls-min-height: 0; - - --spectrum-dial-min-max-tick-angles: 45deg; - - --spectrum-dial-width: 32px; - --spectrum-dial-height: 32px; - - --spectrum-dial-handle-border-size: var(--spectrum-border-width-200); - --spectrum-dial-label-text-size: var(--spectrum-font-size-75); - --spectrum-dial-label-line-height: var(--spectrum-line-height-200); - - &.spectrum-Dial--small { - --spectrum-dial-width: 24px; - --spectrum-dial-height: 24px; - } } } diff --git a/components/dial/themes/spectrum.css b/components/dial/themes/spectrum.css index 8c633b2a7b..24077607a8 100644 --- a/components/dial/themes/spectrum.css +++ b/components/dial/themes/spectrum.css @@ -18,9 +18,6 @@ @container style(--system: legacy) { .spectrum-Dial { --spectrum-dial-background-color-default: var(--spectrum-gray-100); - --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300); - --spectrum-dial-border-color-disabled: var(--spectrum-gray-300); --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); - --spectrum-dial-border-color-key-focus: var(--spectrum-gray-50); } } diff --git a/components/dialog/index.css b/components/dialog/index.css index 3266956664..3a3f86c090 100644 --- a/components/dialog/index.css +++ b/components/dialog/index.css @@ -13,6 +13,31 @@ @import "./themes/spectrum-two.css"; +.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); +} + /* @deprecated .spectrum-Dialog--medium */ .spectrum-Dialog, .spectrum-Dialog--medium { @@ -61,6 +86,7 @@ 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" ". . . . . ." @@ -68,7 +94,7 @@ ". divider divider divider divider ." ". content content content content ." ". footer footer buttonGroup buttonGroup ." - ". . . . . .";grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + ". . . . . ."; inline-size: 100%; } @@ -147,7 +173,6 @@ /* 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 { @@ -188,6 +213,7 @@ 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" @@ -195,7 +221,7 @@ ". divider divider divider divider divider ." ". content content content content content ." ". footer footer buttonGroup buttonGroup buttonGroup ." - ". . . . . . .";grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + ". . . . . . ."; .spectrum-Dialog-buttonGroup { display: none; @@ -300,7 +326,8 @@ ". divider divider divider divider divider ." ". content content content content content ." ". footer footer buttonGroup buttonGroup buttonGroup ." - ". . . . . . .";} + ". . . . . . ."; + } .spectrum-Dialog .spectrum-Dialog-header { justify-content: flex-start; @@ -319,7 +346,8 @@ ". divider ." ". content ." ". buttonGroup ." - ". . .";} + ". . ."; + } .spectrum-Dialog-buttonGroup { padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)); diff --git a/components/dialog/metadata/metadata.json b/components/dialog/metadata/metadata.json index 2991ec97d4..44cd1a85b8 100644 --- a/components/dialog/metadata/metadata.json +++ b/components/dialog/metadata/metadata.json @@ -109,28 +109,7 @@ "--spectrum-spacing-50", "--spectrum-spacing-600" ], - "system-theme": [ - "--system-dialog-confirm-buttongroup-padding-top", - "--system-dialog-confirm-close-button-padding", - "--system-dialog-confirm-close-button-size", - "--system-dialog-confirm-description-margin", - "--system-dialog-confirm-description-padding", - "--system-dialog-confirm-description-text-color", - "--system-dialog-confirm-description-text-line-height", - "--system-dialog-confirm-divider-block-spacing-end", - "--system-dialog-confirm-divider-block-spacing-start", - "--system-dialog-confirm-divider-height", - "--system-dialog-confirm-footer-padding-top", - "--system-dialog-confirm-gap-size", - "--system-dialog-confirm-large-width", - "--system-dialog-confirm-medium-width", - "--system-dialog-confirm-small-width", - "--system-dialog-confirm-title-text-color", - "--system-dialog-confirm-title-text-line-height", - "--system-dialog-fullscreen-header-text-size", - "--system-dialog-heading-font-weight", - "--system-dialog-min-inline-size" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/dialog/themes/spectrum-two.css b/components/dialog/themes/spectrum-two.css index 82952d5395..3b48a570c2 100644 --- a/components/dialog/themes/spectrum-two.css +++ b/components/dialog/themes/spectrum-two.css @@ -10,30 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-Dialog { - /* The font-size of the fullscreen dialog header */ - --spectrum-dialog-fullscreen-header-text-size: 28px; - --spectrum-dialog-min-inline-size: 288px; - --spectrum-dialog-confirm-small-width: 400px; - --spectrum-dialog-confirm-medium-width: 480px; - --spectrum-dialog-confirm-large-width: 640px; - --spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); - --spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); - --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --spectrum-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --spectrum-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); - --spectrum-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); - --spectrum-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - - --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --spectrum-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); - --spectrum-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); - --spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100); - --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); - --spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50); - } -} diff --git a/components/divider/index.css b/components/divider/index.css index 7455082948..cd85b84daa 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -13,10 +13,43 @@ @import "./themes/spectrum-two.css"; +.spectrum-Divider { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); + --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium); + --spectrum-divider-background-color-large: var(--spectrum-gray-800); +} + +/* small divider */ +.spectrum-Divider--sizeS { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-small); + --spectrum-divider-background-color: var(--spectrum-divider-background-color-small); +} + +/* medium divider */ +.spectrum-Divider--sizeM { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); + --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium); +} + +/* large divider */ +.spectrum-Divider--sizeL { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-large); + --spectrum-divider-background-color: var(--spectrum-divider-background-color-large); +} + /* windows high contrast mode */ @media (forced-colors: active) { - .spectrum-Divider { - background-color: CanvasText !important; + .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; } } @@ -32,38 +65,35 @@ border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); background-color: var(--mod-divider-background-color, var(--spectrum-divider-background-color)); +} +/* static white variant colors */ +.spectrum-Divider--staticWhite { + &.spectrum-Divider--sizeS { + --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-small-static-white)); + } - /* static white variant colors */ - &.spectrum-Divider--staticWhite { - &, - &.spectrum-Divider--sizeM { - --spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-medium-static-white)); - } - - &.spectrum-Divider--sizeS { - --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-small-static-white)); - } + &.spectrum-Divider--sizeM { + --spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-medium-static-white)); + } - &.spectrum-Divider--sizeL { - --spectrum-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-divider-background-color-large-static-white)); - } + &.spectrum-Divider--sizeL { + --spectrum-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-divider-background-color-large-static-white)); } +} - /* static black variant colors */ - &.spectrum-Divider--staticBlack { - &, - &.spectrum-Divider--sizeM { - --spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-medium-static-black)); - } +/* static black variant colors */ +.spectrum-Divider--staticBlack { + &.spectrum-Divider--sizeS { + --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-small-static-black)); + } - &.spectrum-Divider--sizeS { - --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-small-static-black)); - } + &.spectrum-Divider--sizeM { + --spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-medium-static-black)); + } - &.spectrum-Divider--sizeL { - --spectrum-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-divider-background-color-large-static-black)); - } + &.spectrum-Divider--sizeL { + --spectrum-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-divider-background-color-large-static-black)); } } diff --git a/components/divider/metadata/metadata.json b/components/divider/metadata/metadata.json index b0e344c161..3ddaa9607b 100644 --- a/components/divider/metadata/metadata.json +++ b/components/divider/metadata/metadata.json @@ -2,18 +2,16 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Divider", - ".spectrum-Divider--vertical", - ".spectrum-Divider.spectrum-Divider--sizeL", - ".spectrum-Divider.spectrum-Divider--sizeM", - ".spectrum-Divider.spectrum-Divider--sizeS", - ".spectrum-Divider.spectrum-Divider--staticBlack", - ".spectrum-Divider.spectrum-Divider--staticBlack.spectrum-Divider--sizeL", - ".spectrum-Divider.spectrum-Divider--staticBlack.spectrum-Divider--sizeM", - ".spectrum-Divider.spectrum-Divider--staticBlack.spectrum-Divider--sizeS", - ".spectrum-Divider.spectrum-Divider--staticWhite", - ".spectrum-Divider.spectrum-Divider--staticWhite.spectrum-Divider--sizeL", - ".spectrum-Divider.spectrum-Divider--staticWhite.spectrum-Divider--sizeM", - ".spectrum-Divider.spectrum-Divider--staticWhite.spectrum-Divider--sizeS" + ".spectrum-Divider--sizeL", + ".spectrum-Divider--sizeM", + ".spectrum-Divider--sizeS", + ".spectrum-Divider--staticBlack.spectrum-Divider--sizeL", + ".spectrum-Divider--staticBlack.spectrum-Divider--sizeM", + ".spectrum-Divider--staticBlack.spectrum-Divider--sizeS", + ".spectrum-Divider--staticWhite.spectrum-Divider--sizeL", + ".spectrum-Divider--staticWhite.spectrum-Divider--sizeM", + ".spectrum-Divider--staticWhite.spectrum-Divider--sizeS", + ".spectrum-Divider--vertical" ], "modifiers": [ "--mod-divider-background-color", @@ -53,8 +51,6 @@ "--spectrum-transparent-white-900" ], "system-theme": [ - "--system-divider-background-color", - "--system-divider-background-color-large", "--system-divider-background-color-large-static-black", "--system-divider-background-color-large-static-white", "--system-divider-background-color-medium", @@ -62,14 +58,7 @@ "--system-divider-background-color-medium-static-white", "--system-divider-background-color-small", "--system-divider-background-color-small-static-black", - "--system-divider-background-color-small-static-white", - "--system-divider-size-l-background-color", - "--system-divider-size-l-thickness", - "--system-divider-size-m-background-color", - "--system-divider-size-m-thickness", - "--system-divider-size-s-background-color", - "--system-divider-size-s-thickness", - "--system-divider-thickness" + "--system-divider-background-color-small-static-white" ], "passthroughs": [], "high-contrast": [] diff --git a/components/divider/themes/spectrum-two.css b/components/divider/themes/spectrum-two.css index 1d03070624..0cdcae026e 100644 --- a/components/divider/themes/spectrum-two.css +++ b/components/divider/themes/spectrum-two.css @@ -16,7 +16,6 @@ /* background colors */ --spectrum-divider-background-color-small: var(--spectrum-gray-200); --spectrum-divider-background-color-medium: var(--spectrum-gray-200); - --spectrum-divider-background-color-large: var(--spectrum-gray-800); /* static white background colors */ --spectrum-divider-background-color-small-static-white: var(--spectrum-transparent-white-400); @@ -27,21 +26,5 @@ --spectrum-divider-background-color-small-static-black: var(--spectrum-transparent-black-400); --spectrum-divider-background-color-medium-static-black: var(--spectrum-transparent-black-400); --spectrum-divider-background-color-large-static-black: var(--spectrum-transparent-black-900); - - &, - &.spectrum-Divider--sizeM { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium); - } - - &.spectrum-Divider--sizeS { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-small); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-small); - } - - &.spectrum-Divider--sizeL { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-large); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-large); - } } } diff --git a/components/dropindicator/index.css b/components/dropindicator/index.css index b28281cd63..16fc671005 100644 --- a/components/dropindicator/index.css +++ b/components/dropindicator/index.css @@ -19,6 +19,13 @@ } } +.spectrum-DropIndicator { + --spectrum-dropindicator-border-color: var(--spectrum-dropindicator-color); + --spectrum-dropindicator-circle-color: var(--spectrum-dropindicator-color); + --spectrum-dropindicator-border-size: var(--spectrum-border-width-200); + --spectrum-dropindicator-circle-size: 12px; +} + .spectrum-DropIndicator { position: relative; background: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-border-color, var(--spectrum-dropindicator-border-color))); diff --git a/components/dropindicator/metadata/metadata.json b/components/dropindicator/metadata/metadata.json index c335ec029b..e8c125fbcd 100644 --- a/components/dropindicator/metadata/metadata.json +++ b/components/dropindicator/metadata/metadata.json @@ -25,12 +25,7 @@ "--spectrum-dropindicator-color" ], "global": ["--spectrum-border-width-200"], - "system-theme": [ - "--system-drop-indicator-border-color", - "--system-drop-indicator-border-size", - "--system-drop-indicator-circle-color", - "--system-drop-indicator-circle-size" - ], + "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-dropindicator-color"] } diff --git a/components/dropindicator/themes/spectrum-two.css b/components/dropindicator/themes/spectrum-two.css index 206c133163..3b48a570c2 100644 --- a/components/dropindicator/themes/spectrum-two.css +++ b/components/dropindicator/themes/spectrum-two.css @@ -10,12 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-DropIndicator { - --spectrum-dropindicator-border-color: var(--spectrum-dropindicator-color); - --spectrum-dropindicator-circle-color: var(--spectrum-dropindicator-color); - --spectrum-dropindicator-border-size: var(--spectrum-border-width-200); - --spectrum-dropindicator-circle-size: 12px; - } -} diff --git a/components/dropzone/index.css b/components/dropzone/index.css index 9d778b793b..c20e3466d5 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -14,7 +14,49 @@ @import "./themes/spectrum-two.css"; .spectrum-DropZone { - /* @passthrough start -- IllustratedMessage -- settings for a nested illustrated message */ + --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-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); + + /* @passthrough start -- 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)); @@ -36,12 +78,21 @@ --mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-drop-zone-body-color)); /* @passthrough end */ - /* @passthrough start -- ActionButton settings for a nested actionbutton */ + /* @passthrough start -- 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)); /* @passthrough end */ + /* 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))); @@ -50,21 +101,16 @@ 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-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color)); background-size: cover; - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-heading-font-size-cjk); - } + background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color)); &.is-dragged { - --mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid); + /* @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))); - /* @passthrough -- Updated values for a nested illustrated message when state changes */ + /* 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)); } @@ -72,7 +118,7 @@ /* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */ --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled))); - /* @passthrough -- Updated values for a nested illustrated message when state changes */ + /* Updated values for a nested illustrated message when state changes */ --mod-illustrated-message-display: none; } diff --git a/components/dropzone/metadata/metadata.json b/components/dropzone/metadata/metadata.json index 73d5f9b030..d823a80c33 100644 --- a/components/dropzone/metadata/metadata.json +++ b/components/dropzone/metadata/metadata.json @@ -27,6 +27,7 @@ "--mod-drop-zone-border-color", "--mod-drop-zone-border-color-hover", "--mod-drop-zone-border-style", + "--mod-drop-zone-border-style--dragged", "--mod-drop-zone-border-style-dragged", "--mod-drop-zone-border-width", "--mod-drop-zone-content-background-color", @@ -90,7 +91,6 @@ "--spectrum-drop-zone-heading-color", "--spectrum-drop-zone-heading-font-family", "--spectrum-drop-zone-heading-font-size", - "--spectrum-drop-zone-heading-font-size-cjk", "--spectrum-drop-zone-heading-font-style", "--spectrum-drop-zone-heading-font-weight", "--spectrum-drop-zone-heading-line-height", @@ -129,43 +129,7 @@ "--spectrum-spacing-75", "--spectrum-white" ], - "system-theme": [ - "--system-drop-zone-background-color", - "--system-drop-zone-body-color", - "--system-drop-zone-body-font-family", - "--system-drop-zone-body-font-size", - "--system-drop-zone-body-font-style", - "--system-drop-zone-body-font-weight", - "--system-drop-zone-body-line-height", - "--system-drop-zone-border-color", - "--system-drop-zone-border-color-hover", - "--system-drop-zone-border-width", - "--system-drop-zone-content-background-color", - "--system-drop-zone-content-bottom-to-text", - "--system-drop-zone-content-color", - "--system-drop-zone-content-edge-to-text", - "--system-drop-zone-content-font-family", - "--system-drop-zone-content-font-size", - "--system-drop-zone-content-font-style", - "--system-drop-zone-content-font-weight", - "--system-drop-zone-content-height", - "--system-drop-zone-content-line-height", - "--system-drop-zone-content-max-width", - "--system-drop-zone-content-top-to-text", - "--system-drop-zone-corner-radius", - "--system-drop-zone-heading-color", - "--system-drop-zone-heading-font-family", - "--system-drop-zone-heading-font-size", - "--system-drop-zone-heading-font-size-cjk", - "--system-drop-zone-heading-font-style", - "--system-drop-zone-heading-font-weight", - "--system-drop-zone-heading-line-height", - "--system-drop-zone-heading-to-body", - "--system-drop-zone-illustration-color", - "--system-drop-zone-illustration-color-hover", - "--system-drop-zone-illustration-to-heading", - "--system-drop-zone-padding" - ], + "system-theme": ["--system-drop-zone-border-color"], "passthroughs": [ "--mod-actionbutton-edge-to-text", "--mod-actionbutton-font-size", diff --git a/components/dropzone/metadata/mods.md b/components/dropzone/metadata/mods.md index 21a6524470..da00c42f33 100644 --- a/components/dropzone/metadata/mods.md +++ b/components/dropzone/metadata/mods.md @@ -12,6 +12,7 @@ | `--mod-drop-zone-border-color` | | `--mod-drop-zone-border-color-hover` | | `--mod-drop-zone-border-style` | +| `--mod-drop-zone-border-style--dragged` | | `--mod-drop-zone-border-style-dragged` | | `--mod-drop-zone-border-width` | | `--mod-drop-zone-content-background-color` | diff --git a/components/dropzone/themes/spectrum-two.css b/components/dropzone/themes/spectrum-two.css index 5a768a931c..cf71b766c3 100644 --- a/components/dropzone/themes/spectrum-two.css +++ b/components/dropzone/themes/spectrum-two.css @@ -13,49 +13,6 @@ @container style(--system: spectrum) { .spectrum-DropZone { - --spectrum-drop-zone-padding: var(--spectrum-spacing-400); - --spectrum-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); - --spectrum-drop-zone-heading-to-body: var(--spectrum-spacing-75); - - --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); - --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100); --spectrum-drop-zone-border-color: var(--spectrum-gray-200); - - --spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); - --spectrum-drop-zone-heading-line-height: var(--spectrum-heading-line-height); - --spectrum-drop-zone-heading-color: var(--spectrum-heading-color); - - --spectrum-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); - --spectrum-drop-zone-body-line-height: var(--spectrum-body-line-height); - --spectrum-drop-zone-body-color: var(--spectrum-body-color); - - --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); - --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); - --spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color); - - /* Filled styles */ - --spectrum-drop-zone-content-height: var(--spectrum-component-height-300); - --spectrum-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width); - --spectrum-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - - --spectrum-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); - --spectrum-drop-zone-content-font-style: var(--spectrum-default-font-style); - --spectrum-drop-zone-content-font-size: var(--spectrum-font-size-300); - --spectrum-drop-zone-content-line-height: var(--spectrum-line-height-100); - - --spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-content-color: var(--spectrum-white); - - --spectrum-drop-zone-heading-font-size-cjk: var(--spectrum-drop-zone-cjk-title-size); } } diff --git a/components/fieldgroup/index.css b/components/fieldgroup/index.css index 51fa102711..4dfd91fa35 100644 --- a/components/fieldgroup/index.css +++ b/components/fieldgroup/index.css @@ -13,22 +13,14 @@ @import "./themes/spectrum-two.css"; +.spectrum-FieldGroup { + --spectrum-fieldgroup-margin: var(--spectrum-spacing-300); +} + /* field group */ .spectrum-FieldGroup { display: flex; flex-flow: column wrap; - - /* read-only checkbox group */ - .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); - } - } } /* field group label top aligned */ diff --git a/components/fieldgroup/metadata/metadata.json b/components/fieldgroup/metadata/metadata.json index 9407c4d355..20528391a1 100644 --- a/components/fieldgroup/metadata/metadata.json +++ b/components/fieldgroup/metadata/metadata.json @@ -2,8 +2,6 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-FieldGroup", - ".spectrum-FieldGroup .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-box", - ".spectrum-FieldGroup .spectrum-Checkbox.is-readOnly:not(:last-child) .spectrum-Checkbox-label:after", ".spectrum-FieldGroup--horizontal .spectrum-FieldGroupInputLayout", ".spectrum-FieldGroup--horizontal .spectrum-FieldGroupInputLayout .spectrum-FieldGroup-item:not(:last-child)", ".spectrum-FieldGroup--horizontal .spectrum-FieldGroupInputLayout .spectrum-HelpText", @@ -13,15 +11,9 @@ ".spectrum-FieldGroupInputLayout" ], "modifiers": [], - "component": [ - "--spectrum-fieldgroup-margin", - "--spectrum-fieldgroup-readonly-delimiter" - ], + "component": ["--spectrum-fieldgroup-margin"], "global": ["--spectrum-spacing-300"], - "system-theme": [ - "--system-field-group-margin", - "--system-field-group-readonly-delimiter" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/fieldgroup/themes/spectrum-two.css b/components/fieldgroup/themes/spectrum-two.css index dbecf1d4c8..3b48a570c2 100644 --- a/components/fieldgroup/themes/spectrum-two.css +++ b/components/fieldgroup/themes/spectrum-two.css @@ -10,10 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-FieldGroup { - --spectrum-fieldgroup-margin: var(--spectrum-spacing-300); - --spectrum-fieldgroup-readonly-delimiter: "\002c"; - } -} diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css index dd87a487d1..f996b2af60 100644 --- a/components/fieldlabel/index.css +++ b/components/fieldlabel/index.css @@ -13,37 +13,88 @@ @import "./themes/spectrum-two.css"; +.spectrum-FieldLabel { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); + --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default); + + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); + + --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight); + --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100); + --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100); +} + +.spectrum-FieldLabel--sizeS { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); + + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100); + + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); +} + +.spectrum-FieldLabel--sizeM { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); + + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); + + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); +} + +.spectrum-FieldLabel--sizeL { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100); + + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); + + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); +} + +.spectrum-FieldLabel--sizeXL { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200); + + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); + + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); +} + .spectrum-FieldLabel { display: block; box-sizing: border-box; - min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-field-label-min-height)); + min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height)); - padding-block: var(--mod-fieldlabel-padding-block, var(--mod-field-label-top-to-text, var(--spectrum-field-label-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text))); - padding-inline: var(--mod-fieldlabel-padding-inline, 0); - margin-block: var(--mod-fieldlabel-margin-block, var(--mod-fieldlabel-margin-block-start, 0) var(--mod-fieldlabel-margin-block-end, 0)); - margin-inline: var(--mod-fieldlabel-margin-inline, var(--mod-fieldlabel-margin-inline-start, 0) var(--mod-fieldlabel-margin-inline-end, 0)); + 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-field-label-font-size)); - font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-field-label-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-field-label-line-height)); + line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height)); -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; - color: var(--mod-fieldlabel-color, var(--spectrum-field-label-color)); + color: var(--spectrum-fieldlabel-color); /* CJK (Chinese, Japanese, and Korean) language support */ &:lang(ja), &:lang(zh), &:lang(ko) { - --mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-field-label-line-height-cjk)); - } - - /********* Disabled state *********/ - &.is-disabled, - &.is-disabled .spectrum-FieldLabel-requiredIcon { - --mod-fieldlabel-color: var(--highcontrast-field-label-disabled-content-color, var(--mod-disabled-content-color, var(--mod-field-label-content-color-disabled, var(--spectrum-field-label-disabled-content-color)))); + line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-fieldlabel-line-height-cjk)); } } @@ -57,9 +108,9 @@ .spectrum-FieldLabel--right { display: inline-block; - margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-field-label-side-margin-block-start)); + 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-field-label-side-padding-right)); + margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right)); vertical-align: top; } @@ -68,9 +119,71 @@ text-align: end; } +/********* Form *********/ +.spectrum-Form { + --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; + + /* @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 */ +.spectrum-Form-item { + display: contents; +} + +@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; +} + +/* Fix extra space after inline-flex elements such as stepper. */ +.spectrum-Form-itemField > * { + vertical-align: top; +} + +/* Rows with stacked alignment */ +.spectrum-Form--labelsAbove { + /* @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); + + .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))); + + .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-field-label-disabled-content-color: GrayText; + --highcontrast-disabled-content-color: GrayText; } } diff --git a/components/fieldlabel/metadata/metadata.json b/components/fieldlabel/metadata/metadata.json index d27d456e52..03d978ed52 100644 --- a/components/fieldlabel/metadata/metadata.json +++ b/components/fieldlabel/metadata/metadata.json @@ -4,52 +4,41 @@ ".spectrum-FieldLabel", ".spectrum-FieldLabel--left", ".spectrum-FieldLabel--right", + ".spectrum-FieldLabel--sizeL", + ".spectrum-FieldLabel--sizeM", + ".spectrum-FieldLabel--sizeS", + ".spectrum-FieldLabel--sizeXL", ".spectrum-FieldLabel-requiredIcon", ".spectrum-FieldLabel.is-disabled", ".spectrum-FieldLabel.is-disabled .spectrum-FieldLabel-requiredIcon", - ".spectrum-FieldLabel.spectrum-FieldLabel--sizeL", - ".spectrum-FieldLabel.spectrum-FieldLabel--sizeM", - ".spectrum-FieldLabel.spectrum-FieldLabel--sizeS", - ".spectrum-FieldLabel.spectrum-FieldLabel--sizeXL", ".spectrum-FieldLabel:lang(ja)", ".spectrum-FieldLabel:lang(ko)", - ".spectrum-FieldLabel:lang(zh)" + ".spectrum-FieldLabel:lang(zh)", + ".spectrum-Form", + ".spectrum-Form--labelsAbove", + ".spectrum-Form--labelsAbove .spectrum-Form-item", + ".spectrum-Form-item", + ".spectrum-Form-itemField", + ".spectrum-Form-itemField > *", + ".spectrum-Form-itemLabel", + ".spectrum-Form-itemLabel.is-disabled", + ".spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon" ], "modifiers": [ "--mod-disabled-content-color", "--mod-field-label-asterisk-vertical-align", "--mod-field-label-bottom-to-text", - "--mod-field-label-content-color-disabled", "--mod-field-label-text-to-asterisk", "--mod-field-label-top-to-text", - "--mod-fieldlabel-color", "--mod-fieldlabel-font-size", "--mod-fieldlabel-font-weight", "--mod-fieldlabel-line-height", "--mod-fieldlabel-line-height-cjk", - "--mod-fieldlabel-margin-block", - "--mod-fieldlabel-margin-block-end", - "--mod-fieldlabel-margin-block-start", - "--mod-fieldlabel-margin-inline", - "--mod-fieldlabel-margin-inline-end", - "--mod-fieldlabel-margin-inline-start", "--mod-fieldlabel-min-height", - "--mod-fieldlabel-padding-block", - "--mod-fieldlabel-padding-inline", "--mod-fieldlabel-side-margin-block-start", "--mod-fieldlabel-side-padding-right" ], "component": [ - "--spectrum-field-label-bottom-to-text", - "--spectrum-field-label-color", - "--spectrum-field-label-disabled-content-color", - "--spectrum-field-label-font-size", - "--spectrum-field-label-font-weight", - "--spectrum-field-label-line-height", - "--spectrum-field-label-line-height-cjk", - "--spectrum-field-label-min-height", - "--spectrum-field-label-side-margin-block-start", - "--spectrum-field-label-side-padding-right", "--spectrum-field-label-text-to-asterisk", "--spectrum-field-label-text-to-asterisk-extra-large", "--spectrum-field-label-text-to-asterisk-large", @@ -59,7 +48,16 @@ "--spectrum-field-label-top-margin-large", "--spectrum-field-label-top-margin-medium", "--spectrum-field-label-top-margin-small", - "--spectrum-field-label-top-to-text" + "--spectrum-fieldlabel-bottom-to-text", + "--spectrum-fieldlabel-color", + "--spectrum-fieldlabel-font-size", + "--spectrum-fieldlabel-font-weight", + "--spectrum-fieldlabel-line-height", + "--spectrum-fieldlabel-line-height-cjk", + "--spectrum-fieldlabel-min-height", + "--spectrum-fieldlabel-side-margin-block-start", + "--spectrum-fieldlabel-side-padding-right", + "--spectrum-fieldlabel-top-to-text" ], "global": [ "--spectrum-cjk-line-height-100", @@ -80,50 +78,19 @@ "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight", "--spectrum-spacing-100", - "--spectrum-spacing-200" + "--spectrum-spacing-200", + "--spectrum-spacing-300", + "--spectrum-tableform-item-block-spacing" ], - "system-theme": [ - "--system-field-label-bottom-to-text", - "--system-field-label-color", - "--system-field-label-disabled-content-color", - "--system-field-label-font-size", - "--system-field-label-font-weight", - "--system-field-label-line-height", - "--system-field-label-line-height-cjk", - "--system-field-label-min-height", - "--system-field-label-side-margin-block-start", - "--system-field-label-side-padding-right", - "--system-field-label-size-l-bottom-to-text", - "--system-field-label-size-l-font-size", - "--system-field-label-size-l-min-height", - "--system-field-label-size-l-side-margin-block-start", - "--system-field-label-size-l-side-padding-right", - "--system-field-label-size-l-text-to-asterisk", - "--system-field-label-size-l-top-to-text", - "--system-field-label-size-m-bottom-to-text", - "--system-field-label-size-m-font-size", - "--system-field-label-size-m-min-height", - "--system-field-label-size-m-side-margin-block-start", - "--system-field-label-size-m-side-padding-right", - "--system-field-label-size-m-text-to-asterisk", - "--system-field-label-size-m-top-to-text", - "--system-field-label-size-s-bottom-to-text", - "--system-field-label-size-s-font-size", - "--system-field-label-size-s-min-height", - "--system-field-label-size-s-side-margin-block-start", - "--system-field-label-size-s-side-padding-right", - "--system-field-label-size-s-text-to-asterisk", - "--system-field-label-size-s-top-to-text", - "--system-field-label-size-xl-bottom-to-text", - "--system-field-label-size-xl-font-size", - "--system-field-label-size-xl-min-height", - "--system-field-label-size-xl-side-margin-block-start", - "--system-field-label-size-xl-side-padding-right", - "--system-field-label-size-xl-text-to-asterisk", - "--system-field-label-size-xl-top-to-text", - "--system-field-label-text-to-asterisk", - "--system-field-label-top-to-text" + "system-theme": [], + "passthroughs": [ + "--mod-form-grid-template-columns", + "--mod-form-grid-template-columns-labels-above", + "--mod-form-inline-size", + "--mod-form-item-block-spacing", + "--mod-form-item-block-spacing-labels-above", + "--mod-tableform-item-block-spacing", + "--mod-tableform-item-block-spacing-labels-above" ], - "passthroughs": [], - "high-contrast": ["--highcontrast-field-label-disabled-content-color"] + "high-contrast": ["--highcontrast-disabled-content-color"] } diff --git a/components/fieldlabel/metadata/mods.md b/components/fieldlabel/metadata/mods.md index 9c29021509..3c81f67190 100644 --- a/components/fieldlabel/metadata/mods.md +++ b/components/fieldlabel/metadata/mods.md @@ -3,22 +3,12 @@ | `--mod-disabled-content-color` | | `--mod-field-label-asterisk-vertical-align` | | `--mod-field-label-bottom-to-text` | -| `--mod-field-label-content-color-disabled` | | `--mod-field-label-text-to-asterisk` | | `--mod-field-label-top-to-text` | -| `--mod-fieldlabel-color` | | `--mod-fieldlabel-font-size` | | `--mod-fieldlabel-font-weight` | | `--mod-fieldlabel-line-height` | | `--mod-fieldlabel-line-height-cjk` | -| `--mod-fieldlabel-margin-block` | -| `--mod-fieldlabel-margin-block-end` | -| `--mod-fieldlabel-margin-block-start` | -| `--mod-fieldlabel-margin-inline` | -| `--mod-fieldlabel-margin-inline-end` | -| `--mod-fieldlabel-margin-inline-start` | | `--mod-fieldlabel-min-height` | -| `--mod-fieldlabel-padding-block` | -| `--mod-fieldlabel-padding-inline` | | `--mod-fieldlabel-side-margin-block-start` | | `--mod-fieldlabel-side-padding-right` | diff --git a/components/fieldlabel/themes/spectrum-two.css b/components/fieldlabel/themes/spectrum-two.css index 14f110d874..3b48a570c2 100644 --- a/components/fieldlabel/themes/spectrum-two.css +++ b/components/fieldlabel/themes/spectrum-two.css @@ -10,63 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-FieldLabel { - --spectrum-field-label-color: var(--spectrum-neutral-subdued-content-color-default); - - --spectrum-field-label-font-weight: var(--spectrum-regular-font-weight); - --spectrum-field-label-line-height: var(--spectrum-line-height-100); - --spectrum-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-field-label-disabled-content-color: var(--spectrum-disabled-content-color); - - &, - &.spectrum-FieldLabel--sizeM { - --spectrum-field-label-min-height: var(--spectrum-component-height-75); - --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-field-label-font-size: var(--spectrum-font-size-75); - - --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); - --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200); - - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); - } - - &.spectrum-FieldLabel--sizeS { - --spectrum-field-label-min-height: var(--spectrum-component-height-75); - --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-field-label-font-size: var(--spectrum-font-size-75); - - --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-small); - --spectrum-field-label-side-padding-right: var(--spectrum-spacing-100); - - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); - } - - &.spectrum-FieldLabel--sizeL { - --spectrum-field-label-min-height: var(--spectrum-component-height-100); - --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-field-label-font-size: var(--spectrum-font-size-100); - - --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-large); - --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200); - - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); - } - - &.spectrum-FieldLabel--sizeXL { - --spectrum-field-label-min-height: var(--spectrum-component-height-200); - --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-field-label-font-size: var(--spectrum-font-size-200); - - --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); - --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200); - - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); - } - } -} diff --git a/components/floatingactionbutton/index.css b/components/floatingactionbutton/index.css index 966f6d8d77..9a2fc1dc04 100644 --- a/components/floatingactionbutton/index.css +++ b/components/floatingactionbutton/index.css @@ -13,8 +13,45 @@ @import "./themes/spectrum-two.css"; +.spectrum-FloatingActionButton { + --spectrum-floating-action-button-size: var(--spectrum-component-height-200); + --spectrum-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-floating-action-button-padding: var(--spectrum-component-pill-edge-to-visual-only-200); + --spectrum-floating-action-button-margin: var(--spectrum-spacing-200); + --spectrum-floating-action-button-drop-shadow-x: var(--spectrum-drop-shadow-x); + + --spectrum-floating-action-button-focus-ring-width: var(--spectrum-focus-indicator-thickness); + --spectrum-floating-action-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-floating-action-button-focus-ring-color: var(--spectrum-focus-indicator-color); + + --spectrum-floating-action-button-background-color: var(--spectrum-accent-background-color-default); + --spectrum-floating-action-button-background-color-hover: var(--spectrum-accent-background-color-hover); + --spectrum-floating-action-button-background-color-down: var(--spectrum-accent-background-color-down); + --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-accent-background-color-key-focus); + --spectrum-floating-action-button-icon-color: var(--spectrum-white); + --spectrum-floating-action-button-icon-color-hover: var(--spectrum-white); + --spectrum-floating-action-button-icon-color-down: var(--spectrum-white); + --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-white); +} + +.spectrum-FloatingActionButton--secondary { + --spectrum-floating-action-button-background-color: var(--spectrum-background-layer-2-color); + --spectrum-floating-action-button-background-color-hover: var(--spectrum-background-layer-2-color); + --spectrum-floating-action-button-background-color-down: var(--spectrum-background-layer-2-color); + --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-background-layer-2-color); + --spectrum-floating-action-button-icon-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-floating-action-button-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-floating-action-button-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); +} + @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; @@ -24,11 +61,6 @@ --highcontrast-floating-action-button-icon-color-hover: ButtonFace; --highcontrast-floating-action-button-icon-color-down: ButtonFace; --highcontrast-floating-action-button-icon-color-key-focus: ButtonFace; - - &::after { - /* make sure focus-ring renders */ - forced-color-adjust: none; - } } } diff --git a/components/floatingactionbutton/metadata/metadata.json b/components/floatingactionbutton/metadata/metadata.json index cd40ed1530..093c551758 100644 --- a/components/floatingactionbutton/metadata/metadata.json +++ b/components/floatingactionbutton/metadata/metadata.json @@ -2,7 +2,7 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-FloatingActionButton", - ".spectrum-FloatingActionButton.spectrum-FloatingActionButton--secondary", + ".spectrum-FloatingActionButton--secondary", ".spectrum-FloatingActionButton:active", ".spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon", ".spectrum-FloatingActionButton:after", @@ -76,32 +76,7 @@ "--spectrum-white", "--spectrum-workflow-icon-size-200" ], - "system-theme": [ - "--system-floating-action-button-background-color", - "--system-floating-action-button-background-color-down", - "--system-floating-action-button-background-color-hover", - "--system-floating-action-button-background-color-key-focus", - "--system-floating-action-button-drop-shadow-x", - "--system-floating-action-button-focus-ring-color", - "--system-floating-action-button-focus-ring-gap", - "--system-floating-action-button-focus-ring-width", - "--system-floating-action-button-icon-color", - "--system-floating-action-button-icon-color-down", - "--system-floating-action-button-icon-color-hover", - "--system-floating-action-button-icon-color-key-focus", - "--system-floating-action-button-icon-size", - "--system-floating-action-button-margin", - "--system-floating-action-button-padding", - "--system-floating-action-button-secondary-background-color", - "--system-floating-action-button-secondary-background-color-down", - "--system-floating-action-button-secondary-background-color-hover", - "--system-floating-action-button-secondary-background-color-key-focus", - "--system-floating-action-button-secondary-icon-color", - "--system-floating-action-button-secondary-icon-color-down", - "--system-floating-action-button-secondary-icon-color-hover", - "--system-floating-action-button-secondary-icon-color-key-focus", - "--system-floating-action-button-size" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-floating-action-button-background-color", diff --git a/components/floatingactionbutton/themes/spectrum-two.css b/components/floatingactionbutton/themes/spectrum-two.css index 9108c6cda6..3b48a570c2 100644 --- a/components/floatingactionbutton/themes/spectrum-two.css +++ b/components/floatingactionbutton/themes/spectrum-two.css @@ -10,37 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-FloatingActionButton { - --spectrum-floating-action-button-size: var(--spectrum-component-height-200); - --spectrum-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-floating-action-button-padding: var(--spectrum-component-pill-edge-to-visual-only-200); - --spectrum-floating-action-button-margin: var(--spectrum-spacing-200); - --spectrum-floating-action-button-drop-shadow-x: var(--spectrum-drop-shadow-x); - - --spectrum-floating-action-button-focus-ring-width: var(--spectrum-focus-indicator-thickness); - --spectrum-floating-action-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-floating-action-button-focus-ring-color: var(--spectrum-focus-indicator-color); - - --spectrum-floating-action-button-background-color: var(--spectrum-accent-background-color-default); - --spectrum-floating-action-button-background-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-floating-action-button-background-color-down: var(--spectrum-accent-background-color-down); - --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-accent-background-color-key-focus); - --spectrum-floating-action-button-icon-color: var(--spectrum-white); - --spectrum-floating-action-button-icon-color-hover: var(--spectrum-white); - --spectrum-floating-action-button-icon-color-down: var(--spectrum-white); - --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-white); - - &.spectrum-FloatingActionButton--secondary { - --spectrum-floating-action-button-background-color: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-background-color-hover: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-background-color-down: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-icon-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-floating-action-button-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-floating-action-button-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - } - } -} diff --git a/components/form/index.css b/components/form/index.css index f6ec5d3c7e..50807f073a 100644 --- a/components/form/index.css +++ b/components/form/index.css @@ -14,6 +14,14 @@ @import "./themes/spectrum-two.css"; .spectrum-Form { + --spectrum-form-item-block-spacing: var(--spectrum-spacing-300); + --spectrum-form-item-block-spacing-labels-above: var(--spectrum-spacing-200); + + --spectrum-form-grid-template-columns: auto auto; + --spectrum-form-grid-template-columns-labels-above: auto; + + --spectrum-form-item-disabled-content-color: var(--spectrum-disabled-content-color); + margin: 0; display: grid; grid-template-columns: var(--mod-form-grid-template-columns, var(--spectrum-form-grid-template-columns)); diff --git a/components/form/metadata/metadata.json b/components/form/metadata/metadata.json index 3ac5b797f6..88655f8edd 100644 --- a/components/form/metadata/metadata.json +++ b/components/form/metadata/metadata.json @@ -31,13 +31,7 @@ "--spectrum-spacing-200", "--spectrum-spacing-300" ], - "system-theme": [ - "--system-form-grid-template-columns", - "--system-form-grid-template-columns-labels-above", - "--system-form-item-block-spacing", - "--system-form-item-block-spacing-labels-above", - "--system-form-item-disabled-content-color" - ], + "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-form-item-disabled-content-color"] } diff --git a/components/form/themes/spectrum-two.css b/components/form/themes/spectrum-two.css index 47e47b84bd..3b48a570c2 100644 --- a/components/form/themes/spectrum-two.css +++ b/components/form/themes/spectrum-two.css @@ -10,15 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-Form { - --spectrum-form-item-block-spacing: var(--spectrum-spacing-300); - --spectrum-form-item-block-spacing-labels-above: var(--spectrum-spacing-200); - - --spectrum-form-grid-template-columns: auto auto; - --spectrum-form-grid-template-columns-labels-above: auto; - - --spectrum-form-item-disabled-content-color: var(--spectrum-disabled-content-color); - } -} diff --git a/components/helptext/index.css b/components/helptext/index.css index 9a76f58057..c78df7de24 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -13,11 +13,85 @@ @import "./themes/spectrum-two.css"; +.spectrum-HelpText { + --spectrum-helptext-line-height: var(--spectrum-line-height-100); + --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-helptext-disabled-content-color: var(--spectrum-disabled-content-color); + + &.spectrum-HelpText--neutral { + --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + } + + &.spectrum-HelpText--negative { + --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900); + --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900); + } + + &.is-disabled { + --spectrum-helptext-content-color-default: var(--spectrum-helptext-disabled-content-color); + --spectrum-helptext-icon-color-default: var(--spectrum-helptext-disabled-content-color); + } + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-helptext-line-height-cjk: var(--spectrum-cjk-line-height-100); + } +} + +.spectrum-HelpText--sizeS { + --spectrum-helptext-min-height: var(--spectrum-component-height-75); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-helptext-font-size: var(--spectrum-font-size-75); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small); + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); +} + +.spectrum-HelpText--sizeM { + --spectrum-helptext-min-height: var(--spectrum-component-height-75); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-helptext-font-size: var(--spectrum-font-size-75); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium); + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); +} + +.spectrum-HelpText--sizeL { + --spectrum-helptext-min-height: var(--spectrum-component-height-100); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-helptext-font-size: var(--spectrum-font-size-100); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large); + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100); +} + +.spectrum-HelpText--sizeXL { + --spectrum-helptext-min-height: var(--spectrum-component-height-200); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-helptext-font-size: var(--spectrum-font-size-200); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large); + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200); +} + @media (forced-colors: active) { .spectrum-HelpText { --highcontrast-helptext-content-color-default: CanvasText; + --highcontrast-helptext-icon-color-default: CanvasText; + + forced-color-adjust: none; - &, .spectrum-HelpText-validationIcon, .spectrum-HelpText-text { forced-color-adjust: none; @@ -26,22 +100,12 @@ } .spectrum-HelpText { - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); display: flex; font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --mod-helptext-line-height: var(--mod-helptext-line-height-cjk); - --spectrum-helptext-line-height: var(--spectrum-helptext-line-height-cjk); - } - .spectrum-HelpText-validationIcon { - color: inherit; 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)); @@ -51,9 +115,46 @@ } .spectrum-HelpText-text { - color: inherit; 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/helptext/metadata/metadata.json b/components/helptext/metadata/metadata.json index 14fc1e1c78..b660032989 100644 --- a/components/helptext/metadata/metadata.json +++ b/components/helptext/metadata/metadata.json @@ -4,23 +4,32 @@ ".spectrum-HelpText", ".spectrum-HelpText .spectrum-HelpText-text", ".spectrum-HelpText .spectrum-HelpText-validationIcon", + ".spectrum-HelpText--sizeL", + ".spectrum-HelpText--sizeM", + ".spectrum-HelpText--sizeS", + ".spectrum-HelpText--sizeXL", ".spectrum-HelpText.is-disabled", - ".spectrum-HelpText.spectrum-HelpText--negative:not(.is-disabled)", - ".spectrum-HelpText.spectrum-HelpText--neutral:not(.is-disabled)", - ".spectrum-HelpText.spectrum-HelpText--sizeL", - ".spectrum-HelpText.spectrum-HelpText--sizeM", - ".spectrum-HelpText.spectrum-HelpText--sizeS", - ".spectrum-HelpText.spectrum-HelpText--sizeXL", + ".spectrum-HelpText.is-disabled .spectrum-HelpText-text", + ".spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon", + ".spectrum-HelpText.spectrum-HelpText--negative", + ".spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-text", + ".spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-validationIcon", + ".spectrum-HelpText.spectrum-HelpText--neutral", + ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text", + ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon", ".spectrum-HelpText:lang(ja)", + ".spectrum-HelpText:lang(ja) .spectrum-HelpText-text", ".spectrum-HelpText:lang(ko)", + ".spectrum-HelpText:lang(ko) .spectrum-HelpText-text", ".spectrum-HelpText:lang(zh)", - ".spectrum-HelpText:not(.is-disabled)" + ".spectrum-HelpText:lang(zh) .spectrum-HelpText-text" ], "modifiers": [ "--mod-helptext-bottom-to-text", "--mod-helptext-bottom-to-workflow-icon", "--mod-helptext-content-color-default", "--mod-helptext-font-size", + "--mod-helptext-icon-color-default", "--mod-helptext-icon-size", "--mod-helptext-line-height", "--mod-helptext-line-height-cjk", @@ -37,7 +46,9 @@ "--spectrum-helptext-bottom-to-text", "--spectrum-helptext-bottom-to-workflow-icon", "--spectrum-helptext-content-color-default", + "--spectrum-helptext-disabled-content-color", "--spectrum-helptext-font-size", + "--spectrum-helptext-icon-color-default", "--spectrum-helptext-icon-size", "--spectrum-helptext-line-height", "--spectrum-helptext-line-height-cjk", @@ -72,51 +83,10 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-help-text-bottom-to-text", - "--system-help-text-disabled-content-color-default", - "--system-help-text-font-size", - "--system-help-text-icon-size", - "--system-help-text-lang-ja-line-height-cjk", - "--system-help-text-lang-ko-line-height-cjk", - "--system-help-text-lang-zh-line-height-cjk", - "--system-help-text-line-height", - "--system-help-text-min-height", - "--system-help-text-negative-not-disabled-content-color-default", - "--system-help-text-neutral-not-disabled-content-color-default", - "--system-help-text-not-disabled-content-color-default", - "--system-help-text-size-l-bottom-to-text", - "--system-help-text-size-l-font-size", - "--system-help-text-size-l-icon-size", - "--system-help-text-size-l-min-height", - "--system-help-text-size-l-text-to-visual", - "--system-help-text-size-l-top-to-text", - "--system-help-text-size-l-top-to-workflow-icon", - "--system-help-text-size-m-bottom-to-text", - "--system-help-text-size-m-font-size", - "--system-help-text-size-m-icon-size", - "--system-help-text-size-m-min-height", - "--system-help-text-size-m-text-to-visual", - "--system-help-text-size-m-top-to-text", - "--system-help-text-size-m-top-to-workflow-icon", - "--system-help-text-size-s-bottom-to-text", - "--system-help-text-size-s-font-size", - "--system-help-text-size-s-icon-size", - "--system-help-text-size-s-min-height", - "--system-help-text-size-s-text-to-visual", - "--system-help-text-size-s-top-to-text", - "--system-help-text-size-s-top-to-workflow-icon", - "--system-help-text-size-xl-bottom-to-text", - "--system-help-text-size-xl-font-size", - "--system-help-text-size-xl-icon-size", - "--system-help-text-size-xl-min-height", - "--system-help-text-size-xl-text-to-visual", - "--system-help-text-size-xl-top-to-text", - "--system-help-text-size-xl-top-to-workflow-icon", - "--system-help-text-text-to-visual", - "--system-help-text-top-to-text", - "--system-help-text-top-to-workflow-icon" - ], + "system-theme": [], "passthroughs": [], - "high-contrast": ["--highcontrast-helptext-content-color-default"] + "high-contrast": [ + "--highcontrast-helptext-content-color-default", + "--highcontrast-helptext-icon-color-default" + ] } diff --git a/components/helptext/metadata/mods.md b/components/helptext/metadata/mods.md index bcaca53bcf..41d2f53905 100644 --- a/components/helptext/metadata/mods.md +++ b/components/helptext/metadata/mods.md @@ -4,6 +4,7 @@ | `--mod-helptext-bottom-to-workflow-icon` | | `--mod-helptext-content-color-default` | | `--mod-helptext-font-size` | +| `--mod-helptext-icon-color-default` | | `--mod-helptext-icon-size` | | `--mod-helptext-line-height` | | `--mod-helptext-line-height-cjk` | diff --git a/components/helptext/themes/spectrum-two.css b/components/helptext/themes/spectrum-two.css index 1ca5ba86a9..3b48a570c2 100644 --- a/components/helptext/themes/spectrum-two.css +++ b/components/helptext/themes/spectrum-two.css @@ -10,69 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-HelpText { - --spectrum-helptext-line-height: var(--spectrum-line-height-100); - - &.is-disabled { - --spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color); - } - - &:not(.is-disabled), - &:not(.is-disabled).spectrum-HelpText--neutral { - --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); - } - - &:not(.is-disabled).spectrum-HelpText--negative { - --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900); - } - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-helptext-line-height-cjk: var(--spectrum-cjk-line-height-100); - } - - &, - &.spectrum-HelpText--sizeM { - --spectrum-helptext-min-height: var(--spectrum-component-height-75); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-helptext-font-size: var(--spectrum-font-size-75); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - } - - &.spectrum-HelpText--sizeS { - --spectrum-helptext-min-height: var(--spectrum-component-height-75); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-helptext-font-size: var(--spectrum-font-size-75); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - } - - &.spectrum-HelpText--sizeL { - --spectrum-helptext-min-height: var(--spectrum-component-height-100); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-helptext-font-size: var(--spectrum-font-size-100); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - } - - &.spectrum-HelpText--sizeXL { - --spectrum-helptext-min-height: var(--spectrum-component-height-200); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-helptext-font-size: var(--spectrum-font-size-200); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - } - } -} diff --git a/components/icon/icons.css b/components/icon/icons.css new file mode 100644 index 0000000000..e413ba9517 --- /dev/null +++ b/components/icon/icons.css @@ -0,0 +1,39 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum-Icon, +.spectrum-UIIcon { + --spectrum-icon-inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size))); + --spectrum-icon-block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size))); + + display: inline-block; + inline-size: var(--spectrum-icon-inline-size); + block-size: var(--spectrum-icon-block-size); + + /* Use custom pass through or inherit the text color. */ + color: var(--mod-icon-color, inherit); + + /* Fill should match the current text color. */ + fill: currentColor; + + /* Don't catch clicks or hover, otherwise they may not escape the SVG. */ + pointer-events: none; +} + +@media (forced-colors: active) { + .spectrum-Icon, + .spectrum-UIIcon { + /* Automatically adjust the SVG to pick up the text color for High Contrast mode */ + forced-color-adjust: auto; + } +} diff --git a/components/icon/index.css b/components/icon/index.css index cfbb9cf00c..8a89a0f296 100644 --- a/components/icon/index.css +++ b/components/icon/index.css @@ -11,53 +11,7 @@ * governing permissions and limitations under the License. */ - @import "./themes/spectrum-two.css"; - -.spectrum-Icon, -.spectrum-UIIcon { - /* Don't catch clicks or hover, otherwise they may not escape the SVG. */ - pointer-events: none; - - /* Only some icons have a transform applied to them */ - transform: var(--spectrum-icon-transform, none); - - display: inline-block; - inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size))); - block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size))); - - /* Use custom pass through or inherit the text color. */ - color: var(--mod-icon-color, inherit); - - /* Fill should match the current text color. */ - fill: currentColor; - - img, - svg { - inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size))); - block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size))); - } -} - -/* - * Medium/large scale - * ------------------ - * In the "combined" versiom of the UI Icon SVGs, the medium and the large icons are - * contained within the same SVG. The two separate elements are shown or hidden based - * on the current platform scale. - */ - -.spectrum-UIIcon--medium { - display: var(--mod-ui-icon-medium-display, var(--spectrum-ui-icon-medium-display, block)); -} - -.spectrum-UIIcon--large { - display: var(--mod-ui-icon-large-display, var(--spectrum-ui-icon-large-display, none)); -} - -@media (forced-colors: active) { - .spectrum-Icon, - .spectrum-UIIcon { - /* Automatically adjust the SVG to pick up the text color for High Contrast mode */ - forced-color-adjust: auto; - } -} +@import "./themes/spectrum-two.css"; +@import "./icons.css"; +@import "./workflow-icons.css"; +@import "./ui-icons.css"; diff --git a/components/icon/metadata/metadata.json b/components/icon/metadata/metadata.json index 162b89582d..7f5d27e378 100644 --- a/components/icon/metadata/metadata.json +++ b/components/icon/metadata/metadata.json @@ -4,16 +4,13 @@ ".spectrum-Icon", ".spectrum-Icon img", ".spectrum-Icon svg", - ".spectrum-Icon.spectrum-Icon--sizeL", - ".spectrum-Icon.spectrum-Icon--sizeM", - ".spectrum-Icon.spectrum-Icon--sizeS", - ".spectrum-Icon.spectrum-Icon--sizeXL", - ".spectrum-Icon.spectrum-Icon--sizeXS", - ".spectrum-Icon.spectrum-Icon--sizeXXL", - ".spectrum-Icon.spectrum-Icon--sizeXXS", + ".spectrum-Icon--sizeL", + ".spectrum-Icon--sizeS", + ".spectrum-Icon--sizeXL", + ".spectrum-Icon--sizeXS", + ".spectrum-Icon--sizeXXL", + ".spectrum-Icon--sizeXXS", ".spectrum-UIIcon", - ".spectrum-UIIcon img", - ".spectrum-UIIcon svg", ".spectrum-UIIcon--large", ".spectrum-UIIcon--medium", ".spectrum-UIIcon-ArrowDown100", @@ -102,14 +99,7 @@ ".spectrum-UIIcon-Dash50", ".spectrum-UIIcon-Dash500", ".spectrum-UIIcon-Dash600", - ".spectrum-UIIcon-Dash75", - ".spectrum-UIIcon.spectrum-Icon--sizeL", - ".spectrum-UIIcon.spectrum-Icon--sizeM", - ".spectrum-UIIcon.spectrum-Icon--sizeS", - ".spectrum-UIIcon.spectrum-Icon--sizeXL", - ".spectrum-UIIcon.spectrum-Icon--sizeXS", - ".spectrum-UIIcon.spectrum-Icon--sizeXXL", - ".spectrum-UIIcon.spectrum-Icon--sizeXXS" + ".spectrum-UIIcon-Dash75" ], "modifiers": [ "--mod-icon-block-size", @@ -119,7 +109,11 @@ "--mod-ui-icon-large-display", "--mod-ui-icon-medium-display" ], - "component": ["--spectrum-icon-size", "--spectrum-icon-transform"], + "component": [ + "--spectrum-icon-block-size", + "--spectrum-icon-inline-size", + "--spectrum-icon-size" + ], "global": [ "--spectrum-arrow-icon-size-100", "--spectrum-arrow-icon-size-200", @@ -176,155 +170,7 @@ "--spectrum-workflow-icon-size-xxl", "--spectrum-workflow-icon-size-xxs" ], - "system-theme": [ - "--system-icon-size", - "--system-icon-size-l-size", - "--system-icon-size-m-size", - "--system-icon-size-s-size", - "--system-icon-size-xl-size", - "--system-icon-size-xs-size", - "--system-icon-size-xxl-size", - "--system-icon-size-xxs-size", - "--system-icon-transform", - "--system-ui-icon-arrow-down-100-icon-size", - "--system-ui-icon-arrow-down-100-icon-transform", - "--system-ui-icon-arrow-down-200-icon-size", - "--system-ui-icon-arrow-down-200-icon-transform", - "--system-ui-icon-arrow-down-300-icon-size", - "--system-ui-icon-arrow-down-300-icon-transform", - "--system-ui-icon-arrow-down-400-icon-size", - "--system-ui-icon-arrow-down-400-icon-transform", - "--system-ui-icon-arrow-down-500-icon-size", - "--system-ui-icon-arrow-down-500-icon-transform", - "--system-ui-icon-arrow-down-600-icon-size", - "--system-ui-icon-arrow-down-600-icon-transform", - "--system-ui-icon-arrow-down-75-icon-size", - "--system-ui-icon-arrow-down-75-icon-transform", - "--system-ui-icon-arrow-left-100-icon-size", - "--system-ui-icon-arrow-left-100-icon-transform", - "--system-ui-icon-arrow-left-200-icon-size", - "--system-ui-icon-arrow-left-200-icon-transform", - "--system-ui-icon-arrow-left-300-icon-size", - "--system-ui-icon-arrow-left-300-icon-transform", - "--system-ui-icon-arrow-left-400-icon-size", - "--system-ui-icon-arrow-left-400-icon-transform", - "--system-ui-icon-arrow-left-500-icon-size", - "--system-ui-icon-arrow-left-500-icon-transform", - "--system-ui-icon-arrow-left-600-icon-size", - "--system-ui-icon-arrow-left-600-icon-transform", - "--system-ui-icon-arrow-left-75-icon-size", - "--system-ui-icon-arrow-left-75-icon-transform", - "--system-ui-icon-arrow-right-100-icon-size", - "--system-ui-icon-arrow-right-200-icon-size", - "--system-ui-icon-arrow-right-300-icon-size", - "--system-ui-icon-arrow-right-400-icon-size", - "--system-ui-icon-arrow-right-500-icon-size", - "--system-ui-icon-arrow-right-600-icon-size", - "--system-ui-icon-arrow-right-75-icon-size", - "--system-ui-icon-arrow-up-100-icon-size", - "--system-ui-icon-arrow-up-100-icon-transform", - "--system-ui-icon-arrow-up-200-icon-size", - "--system-ui-icon-arrow-up-200-icon-transform", - "--system-ui-icon-arrow-up-300-icon-size", - "--system-ui-icon-arrow-up-300-icon-transform", - "--system-ui-icon-arrow-up-400-icon-size", - "--system-ui-icon-arrow-up-400-icon-transform", - "--system-ui-icon-arrow-up-500-icon-size", - "--system-ui-icon-arrow-up-500-icon-transform", - "--system-ui-icon-arrow-up-600-icon-size", - "--system-ui-icon-arrow-up-600-icon-transform", - "--system-ui-icon-arrow-up-75-icon-size", - "--system-ui-icon-arrow-up-75-icon-transform", - "--system-ui-icon-asterisk-100-icon-size", - "--system-ui-icon-asterisk-200-icon-size", - "--system-ui-icon-asterisk-300-icon-size", - "--system-ui-icon-asterisk-75-icon-size", - "--system-ui-icon-checkmark-100-icon-size", - "--system-ui-icon-checkmark-200-icon-size", - "--system-ui-icon-checkmark-300-icon-size", - "--system-ui-icon-checkmark-400-icon-size", - "--system-ui-icon-checkmark-50-icon-size", - "--system-ui-icon-checkmark-500-icon-size", - "--system-ui-icon-checkmark-600-icon-size", - "--system-ui-icon-checkmark-75-icon-size", - "--system-ui-icon-chevron-down-100-icon-size", - "--system-ui-icon-chevron-down-100-icon-transform", - "--system-ui-icon-chevron-down-200-icon-size", - "--system-ui-icon-chevron-down-200-icon-transform", - "--system-ui-icon-chevron-down-300-icon-size", - "--system-ui-icon-chevron-down-300-icon-transform", - "--system-ui-icon-chevron-down-400-icon-size", - "--system-ui-icon-chevron-down-400-icon-transform", - "--system-ui-icon-chevron-down-50-icon-size", - "--system-ui-icon-chevron-down-50-icon-transform", - "--system-ui-icon-chevron-down-500-icon-size", - "--system-ui-icon-chevron-down-500-icon-transform", - "--system-ui-icon-chevron-down-75-icon-size", - "--system-ui-icon-chevron-down-75-icon-transform", - "--system-ui-icon-chevron-left-100-icon-size", - "--system-ui-icon-chevron-left-100-icon-transform", - "--system-ui-icon-chevron-left-200-icon-size", - "--system-ui-icon-chevron-left-200-icon-transform", - "--system-ui-icon-chevron-left-300-icon-size", - "--system-ui-icon-chevron-left-300-icon-transform", - "--system-ui-icon-chevron-left-400-icon-size", - "--system-ui-icon-chevron-left-400-icon-transform", - "--system-ui-icon-chevron-left-50-icon-size", - "--system-ui-icon-chevron-left-50-icon-transform", - "--system-ui-icon-chevron-left-500-icon-size", - "--system-ui-icon-chevron-left-500-icon-transform", - "--system-ui-icon-chevron-left-75-icon-size", - "--system-ui-icon-chevron-left-75-icon-transform", - "--system-ui-icon-chevron-right-100-icon-size", - "--system-ui-icon-chevron-right-200-icon-size", - "--system-ui-icon-chevron-right-300-icon-size", - "--system-ui-icon-chevron-right-400-icon-size", - "--system-ui-icon-chevron-right-50-icon-size", - "--system-ui-icon-chevron-right-500-icon-size", - "--system-ui-icon-chevron-right-75-icon-size", - "--system-ui-icon-chevron-up-100-icon-size", - "--system-ui-icon-chevron-up-100-icon-transform", - "--system-ui-icon-chevron-up-200-icon-size", - "--system-ui-icon-chevron-up-200-icon-transform", - "--system-ui-icon-chevron-up-300-icon-size", - "--system-ui-icon-chevron-up-300-icon-transform", - "--system-ui-icon-chevron-up-400-icon-size", - "--system-ui-icon-chevron-up-400-icon-transform", - "--system-ui-icon-chevron-up-50-icon-size", - "--system-ui-icon-chevron-up-50-icon-transform", - "--system-ui-icon-chevron-up-500-icon-size", - "--system-ui-icon-chevron-up-500-icon-transform", - "--system-ui-icon-chevron-up-75-icon-size", - "--system-ui-icon-chevron-up-75-icon-transform", - "--system-ui-icon-corner-triangle-100-icon-size", - "--system-ui-icon-corner-triangle-200-icon-size", - "--system-ui-icon-corner-triangle-300-icon-size", - "--system-ui-icon-corner-triangle-75-icon-size", - "--system-ui-icon-cross-100-icon-size", - "--system-ui-icon-cross-200-icon-size", - "--system-ui-icon-cross-300-icon-size", - "--system-ui-icon-cross-400-icon-size", - "--system-ui-icon-cross-500-icon-size", - "--system-ui-icon-cross-600-icon-size", - "--system-ui-icon-cross-75-icon-size", - "--system-ui-icon-dash-100-icon-size", - "--system-ui-icon-dash-200-icon-size", - "--system-ui-icon-dash-300-icon-size", - "--system-ui-icon-dash-400-icon-size", - "--system-ui-icon-dash-50-icon-size", - "--system-ui-icon-dash-500-icon-size", - "--system-ui-icon-dash-600-icon-size", - "--system-ui-icon-dash-75-icon-size", - "--system-ui-icon-icon-size", - "--system-ui-icon-icon-size-l-icon-size", - "--system-ui-icon-icon-size-m-icon-size", - "--system-ui-icon-icon-size-s-icon-size", - "--system-ui-icon-icon-size-xl-icon-size", - "--system-ui-icon-icon-size-xs-icon-size", - "--system-ui-icon-icon-size-xxl-icon-size", - "--system-ui-icon-icon-size-xxs-icon-size", - "--system-ui-icon-icon-transform" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/icon/themes/spectrum-two.css b/components/icon/themes/spectrum-two.css index b519e91bde..3b48a570c2 100644 --- a/components/icon/themes/spectrum-two.css +++ b/components/icon/themes/spectrum-two.css @@ -10,448 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - /* Chevron */ - .spectrum-UIIcon-ChevronRight50, - .spectrum-UIIcon-ChevronDown50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - } - - .spectrum-UIIcon-ChevronRight75, - .spectrum-UIIcon-ChevronDown75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - } - - .spectrum-UIIcon-ChevronRight100, - .spectrum-UIIcon-ChevronDown100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - } - - .spectrum-UIIcon-ChevronRight200, - .spectrum-UIIcon-ChevronDown200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - } - - .spectrum-UIIcon-ChevronRight300, - .spectrum-UIIcon-ChevronDown300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - } - - .spectrum-UIIcon-ChevronRight400, - .spectrum-UIIcon-ChevronDown400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - } - - .spectrum-UIIcon-ChevronRight500, - .spectrum-UIIcon-ChevronDown500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - } - - .spectrum-UIIcon-ChevronDown100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - } - - .spectrum-UIIcon-ChevronDown200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - } - - .spectrum-UIIcon-ChevronDown300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - } - - .spectrum-UIIcon-ChevronDown400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - } - - .spectrum-UIIcon-ChevronDown500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - } - - .spectrum-UIIcon-ChevronLeft50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - } - - .spectrum-UIIcon-ChevronLeft75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - } - - .spectrum-UIIcon-ChevronLeft100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - } - - .spectrum-UIIcon-ChevronLeft200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - } - - .spectrum-UIIcon-ChevronLeft300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - } - - .spectrum-UIIcon-ChevronLeft400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - } - - .spectrum-UIIcon-ChevronLeft500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - } - - .spectrum-UIIcon-ChevronUp50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - } - - .spectrum-UIIcon-ChevronUp75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - } - - .spectrum-UIIcon-ChevronUp100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - } - - .spectrum-UIIcon-ChevronUp200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - } - - .spectrum-UIIcon-ChevronUp300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - } - - .spectrum-UIIcon-ChevronUp400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - } - - .spectrum-UIIcon-ChevronUp500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - } - - /* Arrow */ - .spectrum-UIIcon-ArrowRight75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - } - - .spectrum-UIIcon-ArrowRight100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - } - - .spectrum-UIIcon-ArrowRight200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - } - - .spectrum-UIIcon-ArrowRight300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - } - - .spectrum-UIIcon-ArrowRight400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - } - - .spectrum-UIIcon-ArrowRight500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - } - - .spectrum-UIIcon-ArrowRight600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - } - - .spectrum-UIIcon-ArrowDown75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - } - - .spectrum-UIIcon-ArrowDown100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - } - - .spectrum-UIIcon-ArrowDown200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - } - - .spectrum-UIIcon-ArrowDown300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - } - - .spectrum-UIIcon-ArrowDown400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - } - - .spectrum-UIIcon-ArrowDown500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - } - - .spectrum-UIIcon-ArrowDown600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - } - - .spectrum-UIIcon-ArrowLeft75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - } - - .spectrum-UIIcon-ArrowLeft100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - } - - .spectrum-UIIcon-ArrowLeft200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - } - - .spectrum-UIIcon-ArrowLeft300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - } - - .spectrum-UIIcon-ArrowLeft400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - } - - .spectrum-UIIcon-ArrowLeft500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - } - - .spectrum-UIIcon-ArrowLeft600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - } - - .spectrum-UIIcon-ArrowUp75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - } - - .spectrum-UIIcon-ArrowUp100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - } - - .spectrum-UIIcon-ArrowUp200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - } - - .spectrum-UIIcon-ArrowUp300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - } - - .spectrum-UIIcon-ArrowUp400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - } - - .spectrum-UIIcon-ArrowUp500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - } - - .spectrum-UIIcon-ArrowUp600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - } - - /* Checkmark */ - .spectrum-UIIcon-Checkmark50 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-50); - } - - .spectrum-UIIcon-Checkmark75 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-75); - } - - .spectrum-UIIcon-Checkmark100 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-100); - } - - .spectrum-UIIcon-Checkmark200 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-200); - } - - .spectrum-UIIcon-Checkmark300 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-300); - } - - .spectrum-UIIcon-Checkmark400 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-400); - } - - .spectrum-UIIcon-Checkmark500 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-500); - } - - .spectrum-UIIcon-Checkmark600 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-600); - } - - /* Dash */ - .spectrum-UIIcon-Dash50 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-50); - } - - .spectrum-UIIcon-Dash75 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-75); - } - - .spectrum-UIIcon-Dash100 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-100); - } - - .spectrum-UIIcon-Dash200 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-200); - } - - .spectrum-UIIcon-Dash300 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-300); - } - - .spectrum-UIIcon-Dash400 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-400); - } - - .spectrum-UIIcon-Dash500 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-500); - } - - .spectrum-UIIcon-Dash600 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-600); - } - - /* Cross */ - .spectrum-UIIcon-Cross75 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-75); - } - - .spectrum-UIIcon-Cross100 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-100); - } - - .spectrum-UIIcon-Cross200 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-200); - } - - .spectrum-UIIcon-Cross300 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-300); - } - - .spectrum-UIIcon-Cross400 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-400); - } - - .spectrum-UIIcon-Cross500 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-500); - } - - .spectrum-UIIcon-Cross600 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-600); - } - - /* Corner Triangle */ - .spectrum-UIIcon-CornerTriangle75 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-75); - } - - .spectrum-UIIcon-CornerTriangle100 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-100); - } - - .spectrum-UIIcon-CornerTriangle200 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-200); - } - - .spectrum-UIIcon-CornerTriangle300 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-300); - } - - /* Asterisk */ - .spectrum-UIIcon-Asterisk75 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-75); - } - - .spectrum-UIIcon-Asterisk100 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-100); - } - - .spectrum-UIIcon-Asterisk200 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-200); - } - - .spectrum-UIIcon-Asterisk300 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-300); - } - - /* - * Component-specific icon transforms - */ - .spectrum-UIIcon-ChevronDown50, - .spectrum-UIIcon-ChevronDown75, - .spectrum-UIIcon-ChevronDown100, - .spectrum-UIIcon-ChevronDown200, - .spectrum-UIIcon-ChevronDown300, - .spectrum-UIIcon-ChevronDown400, - .spectrum-UIIcon-ChevronDown500, - .spectrum-UIIcon-ArrowDown75, - .spectrum-UIIcon-ArrowDown100, - .spectrum-UIIcon-ArrowDown200, - .spectrum-UIIcon-ArrowDown300, - .spectrum-UIIcon-ArrowDown400, - .spectrum-UIIcon-ArrowDown500, - .spectrum-UIIcon-ArrowDown600 { - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ChevronLeft50, - .spectrum-UIIcon-ChevronLeft75, - .spectrum-UIIcon-ChevronLeft100, - .spectrum-UIIcon-ChevronLeft200, - .spectrum-UIIcon-ChevronLeft300, - .spectrum-UIIcon-ChevronLeft400, - .spectrum-UIIcon-ChevronLeft500, - .spectrum-UIIcon-ArrowLeft75, - .spectrum-UIIcon-ArrowLeft100, - .spectrum-UIIcon-ArrowLeft200, - .spectrum-UIIcon-ArrowLeft300, - .spectrum-UIIcon-ArrowLeft400, - .spectrum-UIIcon-ArrowLeft500, - .spectrum-UIIcon-ArrowLeft600 { - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ChevronUp50, - .spectrum-UIIcon-ChevronUp75, - .spectrum-UIIcon-ChevronUp100, - .spectrum-UIIcon-ChevronUp200, - .spectrum-UIIcon-ChevronUp300, - .spectrum-UIIcon-ChevronUp400, - .spectrum-UIIcon-ChevronUp500, - .spectrum-UIIcon-ArrowUp75, - .spectrum-UIIcon-ArrowUp100, - .spectrum-UIIcon-ArrowUp200, - .spectrum-UIIcon-ArrowUp300, - .spectrum-UIIcon-ArrowUp400, - .spectrum-UIIcon-ArrowUp500, - .spectrum-UIIcon-ArrowUp600 { - --spectrum-icon-transform: rotate(270deg); - } - - .spectrum-Icon, - .spectrum-UIIcon { - --spectrum-icon-transform: none; - - &, - &.spectrum-Icon--sizeM { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-100); - } - - /* XXS icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */ - &.spectrum-Icon--sizeXXS { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxs); - } - - &.spectrum-Icon--sizeXS { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-50); - } - - &.spectrum-Icon--sizeS { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-75); - } - - &.spectrum-Icon--sizeL { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-200); - } - - &.spectrum-Icon--sizeXL { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-300); - } - - &.spectrum-Icon--sizeXXL { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxl); - } - } -} diff --git a/components/icon/ui-icons.css b/components/icon/ui-icons.css new file mode 100644 index 0000000000..ce39d50ea8 --- /dev/null +++ b/components/icon/ui-icons.css @@ -0,0 +1,432 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +/* + * Medium/large scale + * ------------------ + * In the "combined" versiom of the UI Icon SVGs, the medium and the large icons are + * contained within the same SVG. The two separate elements are shown or hidden based + * on the current platform scale. + */ + +.spectrum-UIIcon--medium { + display: var(--mod-ui-icon-medium-display, var(--spectrum-ui-icon-medium-display, block)); +} + +.spectrum-UIIcon--large { + display: var(--mod-ui-icon-large-display, var(--spectrum-ui-icon-large-display, none)); +} + +/* + * UI icons list + * ------------- + * - Unlike workflow icons, UI icons come in various sizes, defined by their own tokens. + * - Their base icon is rotated for directional variations (e.g. left and down). + */ + +/* Chevron */ +.spectrum-UIIcon-ChevronRight50 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); +} + +.spectrum-UIIcon-ChevronRight75 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); +} + +.spectrum-UIIcon-ChevronRight100 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); +} + +.spectrum-UIIcon-ChevronRight200 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); +} + +.spectrum-UIIcon-ChevronRight300 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); +} + +.spectrum-UIIcon-ChevronRight400 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); +} + +.spectrum-UIIcon-ChevronRight500 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); +} + +.spectrum-UIIcon-ChevronDown50 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown75 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown100 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown200 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown300 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown400 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown500 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronLeft50 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft75 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft100 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft200 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft300 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft400 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft500 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronUp50 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp75 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp100 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp200 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp300 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp400 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp500 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); + transform: rotate(270deg); +} + +/* Arrow */ +.spectrum-UIIcon-ArrowRight75 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); +} + +.spectrum-UIIcon-ArrowRight100 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); +} + +.spectrum-UIIcon-ArrowRight200 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); +} + +.spectrum-UIIcon-ArrowRight300 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); +} + +.spectrum-UIIcon-ArrowRight400 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); +} + +.spectrum-UIIcon-ArrowRight500 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); +} + +.spectrum-UIIcon-ArrowRight600 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); +} + +.spectrum-UIIcon-ArrowDown75 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown100 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown200 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown300 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown400 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown500 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown600 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowLeft75 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft100 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft200 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft300 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft400 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft500 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft600 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowUp75 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp100 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp200 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp300 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp400 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp500 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp600 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); + transform: rotate(270deg); +} + +/* Checkmark */ +.spectrum-UIIcon-Checkmark50 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-50); +} + +.spectrum-UIIcon-Checkmark75 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-75); +} + +.spectrum-UIIcon-Checkmark100 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-100); +} + +.spectrum-UIIcon-Checkmark200 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-200); +} + +.spectrum-UIIcon-Checkmark300 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-300); +} + +.spectrum-UIIcon-Checkmark400 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-400); +} + +.spectrum-UIIcon-Checkmark500 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-500); +} + +.spectrum-UIIcon-Checkmark600 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-600); +} + +/* Dash */ +.spectrum-UIIcon-Dash50 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-50); +} + +.spectrum-UIIcon-Dash75 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-75); +} + +.spectrum-UIIcon-Dash100 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-100); +} + +.spectrum-UIIcon-Dash200 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-200); +} + +.spectrum-UIIcon-Dash300 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-300); +} + +.spectrum-UIIcon-Dash400 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-400); +} + +.spectrum-UIIcon-Dash500 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-500); +} + +.spectrum-UIIcon-Dash600 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-600); +} + +/* Cross */ +.spectrum-UIIcon-Cross75 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-75); +} + +.spectrum-UIIcon-Cross100 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-100); +} + +.spectrum-UIIcon-Cross200 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-200); +} + +.spectrum-UIIcon-Cross300 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-300); +} + +.spectrum-UIIcon-Cross400 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-400); +} + +.spectrum-UIIcon-Cross500 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-500); +} + +.spectrum-UIIcon-Cross600 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-600); +} + +/* Corner Triangle */ +.spectrum-UIIcon-CornerTriangle75 { + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-75); +} + +.spectrum-UIIcon-CornerTriangle100 { + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-100); +} + +.spectrum-UIIcon-CornerTriangle200 { + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-200); +} + +.spectrum-UIIcon-CornerTriangle300 { + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-300); +} + +/* Asterisk */ +.spectrum-UIIcon-Asterisk75 { + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-75); +} + +.spectrum-UIIcon-Asterisk100 { + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-100); +} + +.spectrum-UIIcon-Asterisk200 { + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-200); +} + +.spectrum-UIIcon-Asterisk300 { + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-300); +} diff --git a/components/icon/workflow-icons.css b/components/icon/workflow-icons.css new file mode 100644 index 0000000000..22c35deb80 --- /dev/null +++ b/components/icon/workflow-icons.css @@ -0,0 +1,50 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum-Icon { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-100); +} + +/* XXS icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */ +.spectrum-Icon--sizeXXS { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxs); +} + +.spectrum-Icon--sizeXS { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-50); +} + +.spectrum-Icon--sizeS { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-75); +} + +.spectrum-Icon--sizeL { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-200); +} + +.spectrum-Icon--sizeXL { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-300); +} + +/* XXL icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */ +.spectrum-Icon--sizeXXL { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxl); +} + +.spectrum-Icon { + img, + svg { + inline-size: var(--spectrum-icon-inline-size); + block-size: var(--spectrum-icon-block-size); + } +} diff --git a/components/illustratedmessage/index.css b/components/illustratedmessage/index.css index ae48a68291..1073905371 100644 --- a/components/illustratedmessage/index.css +++ b/components/illustratedmessage/index.css @@ -11,7 +11,42 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; + @import "./themes/spectrum-two.css"; + +.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); + } +} @media (forced-colors: active) { .spectrum-IllustratedMessage { @@ -60,7 +95,6 @@ max-inline-size: var(--mod-illustrated-message-heading-max-inline-size, var(--spectrum-illustrated-message-heading-max-inline-size)); margin-block-start: 0; margin-block-end: var(--mod-illustrated-message-heading-to-body, 0); - } .spectrum-IllustratedMessage-description { diff --git a/components/illustratedmessage/metadata/metadata.json b/components/illustratedmessage/metadata/metadata.json index a09cce68ae..24de798ac3 100644 --- a/components/illustratedmessage/metadata/metadata.json +++ b/components/illustratedmessage/metadata/metadata.json @@ -76,29 +76,7 @@ "--spectrum-spacing-400", "--spectrum-spacing-75" ], - "system-theme": [ - "--system-illustrated-message-description-color", - "--system-illustrated-message-description-font-family", - "--system-illustrated-message-description-font-size", - "--system-illustrated-message-description-font-style", - "--system-illustrated-message-description-font-weight", - "--system-illustrated-message-description-line-height", - "--system-illustrated-message-description-max-inline-size", - "--system-illustrated-message-heading-max-inline-size", - "--system-illustrated-message-heading-to-description", - "--system-illustrated-message-illustration-accent-color", - "--system-illustrated-message-illustration-color", - "--system-illustrated-message-lang-ja-title-font-size", - "--system-illustrated-message-lang-ko-title-font-size", - "--system-illustrated-message-lang-zh-title-font-size", - "--system-illustrated-message-title-color", - "--system-illustrated-message-title-font-family", - "--system-illustrated-message-title-font-size", - "--system-illustrated-message-title-font-style", - "--system-illustrated-message-title-font-weight", - "--system-illustrated-message-title-line-height", - "--system-illustrated-message-title-to-heading" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-illustrated-message-illustration-accent-color", diff --git a/components/illustratedmessage/themes/spectrum-two.css b/components/illustratedmessage/themes/spectrum-two.css index 792f05c618..3b48a570c2 100644 --- a/components/illustratedmessage/themes/spectrum-two.css +++ b/components/illustratedmessage/themes/spectrum-two.css @@ -10,40 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-IllustratedMessage { - /* Size & Spacing */ - --spectrum-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width); - --spectrum-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width); - --spectrum-illustrated-message-title-to-heading: var(--spectrum-spacing-400); - --spectrum-illustrated-message-heading-to-description: var(--spectrum-spacing-75); - - /* Illustration */ - --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color); - --spectrum-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color); - - /* Title */ - --spectrum-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size); - --spectrum-illustrated-message-title-line-height: var(--spectrum-heading-line-height); - --spectrum-illustrated-message-title-color: var(--spectrum-heading-color); - - /* Description */ - --spectrum-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size); - --spectrum-illustrated-message-description-line-height: var(--spectrum-body-line-height); - --spectrum-illustrated-message-description-color: var(--spectrum-body-color); - - /* CJK (Chinese, Japanese, and Korean) language support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); - } - } -} diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index 5bf28e5838..67b2256a81 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -13,11 +13,98 @@ @import "./themes/spectrum-two.css"; -@media (forced-colors: active) { - .spectrum-InfieldButton { - &:hover:not(:disabled), - &:active:not(:disabled), - &:focus-visible:not(:disabled) { +.spectrum-InfieldButton { + /* Medium size is the default */ + --spectrum-infield-button-height: var(--spectrum-component-height-100); + --spectrum-infield-button-width: var(--spectrum-component-height-100); + --spectrum-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); + + --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill); + --spectrum-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill); + --spectrum-infield-button-fill-padding: 0px; + --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium); + --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); + --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium); + + --spectrum-infield-button-icon-color: var(--spectrum-neutral-content-color-default); + --spectrum-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-infield-button-fill-justify-content: center; + + &:disabled { + --mod-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color)); + --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); + --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); + --mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color)); + + --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color)); + --mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); + --mod-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); + --mod-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color)); + } + + &.spectrum-InfieldButton--sizeS { + --spectrum-infield-button-height: var(--spectrum-component-height-75); + --spectrum-infield-button-width: var(--spectrum-component-height-75); + --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small); + --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); + --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small); + } + + &.spectrum-InfieldButton--sizeL { + --spectrum-infield-button-height: var(--spectrum-component-height-200); + --spectrum-infield-button-width: var(--spectrum-component-height-200); + --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large); + --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); + --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large); + } + + &.spectrum-InfieldButton--sizeXL { + --spectrum-infield-button-height: var(--spectrum-component-height-300); + --spectrum-infield-button-width: var(--spectrum-component-height-300); + --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large); + --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); + --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large); + } + + &.spectrum-InfieldButton--top, + &.spectrum-InfieldButton--bottom { + --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium)); + + &.spectrum-InfieldButton--sizeS { + --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small)); + } + + &.spectrum-InfieldButton--sizeL { + --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large)); + } + + &.spectrum-InfieldButton--sizeXL { + --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large)); + } + } + + &.spectrum-InfieldButton--quiet { + --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent); + --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent); + --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent); + --mod-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent); + + --mod-infield-border-color: var(--mod-infield-border-color-quiet, transparent); + --mod-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0); + + &:disabled { + --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent); + --mod-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent); + } + } + + &:hover:not(:disabled), + &:active:not(:disabled), + &:focus-visible:not(:disabled) { + @media (forced-colors: active) { --highcontrast-infield-button-border-color: Highlight; } } @@ -52,53 +139,10 @@ 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)); - - /* center icon */ - display: flex; - align-items: center; - justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content)); } .spectrum-InfieldButton-icon { color: var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color)); - display: initial; - - /* don't be small, ever */ - flex-shrink: 0; - - /* remove margin used for centering */ - margin: 0 !important; - } - - &: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)); - - cursor: auto; - } - - &:hover { - --mod-infield-button-background-color: var(--mod-infield-button-background-color-hover, var(--spectrum-infield-button-background-color-hover)); - --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-hover, var(--spectrum-infield-button-icon-color-hover)); - } - - &:active { - --mod-infield-button-background-color: var(--mod-infield-button-background-color-down, var(--spectrum-infield-button-background-color-down)); - --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-down, var(--spectrum-infield-button-icon-color-down)); - } - - &:focus-visible { - --mod-infield-button-background-color: var(--mod-infield-button-background-color-key-focus, var(--spectrum-infield-button-background-color-key-focus)); - --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-key-focus, var(--spectrum-infield-button-icon-color-key-focus)); - - outline: none; } &.spectrum-InfieldButton--right { @@ -115,72 +159,98 @@ } } - &.spectrum-InfieldButton--top, - &.spectrum-InfieldButton--bottom { - --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium)); - - /* Stacked in-field buttons */ - /* Not currently in use (stepper uses Action Buttons) but adding the CSS so the option is there */ - block-size: calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2); + &:disabled { + cursor: auto; + } - &.spectrum-InfieldButton--sizeS { - --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small)); + &:hover { + .spectrum-InfieldButton-fill { + background-color: var(--mod-infield-button-background-color-hover, var(--spectrum-infield-button-background-color-hover)); } - &.spectrum-InfieldButton--sizeL { - --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large)); + .spectrum-InfieldButton-icon { + color: var(--mod-infield-button-icon-color-hover, var(--spectrum-infield-button-icon-color-hover)); } + } - &.spectrum-InfieldButton--sizeXL { - --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large)); + &:active { + .spectrum-InfieldButton-fill { + background-color: var(--mod-infield-button-background-color-down, var(--spectrum-infield-button-background-color-down)); } - .spectrum-InfieldButton-fill { - box-sizing: border-box; - padding-inline-start: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - 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-inline-end: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - 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))); + .spectrum-InfieldButton-icon { + color: var(--mod-infield-button-icon-color-down, var(--spectrum-infield-button-icon-color-down)); } } - &.spectrum-InfieldButton--top { - padding-block-end: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)); + &:focus-visible { + outline: none; .spectrum-InfieldButton-fill { - padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); - padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill))); - border-block-end: none; - border-start-start-radius: var(--mod-infield-button-stacked-top-border-radius-start-start, var(--spectrum-infield-button-stacked-top-border-radius-start-start)); - border-end-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); - border-end-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); + 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)); } } +} - &.spectrum-InfieldButton--bottom { - padding-block-start: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)); +.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)); - .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))); - } + 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); + + .spectrum-InfieldButton-fill { + box-sizing: border-box; + padding-inline-start: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - 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-inline-end: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - 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))); } +} - &.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); +.spectrum-InfieldButton--top { + padding-block-end: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)); - --mod-infield-button-border-color: var(--mod-infield-border-color-quiet, transparent); - --mod-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0); + .spectrum-InfieldButton-fill { + padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); + padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill))); + border-block-end: none; + border-start-start-radius: var(--mod-infield-button-stacked-top-border-radius-start-start, var(--spectrum-infield-button-stacked-top-border-radius-start-start)); + border-end-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); + border-end-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); + } +} - &: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); - } +.spectrum-InfieldButton--bottom { + padding-block-start: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)); + + .spectrum-InfieldButton-fill { + padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); + padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); + border-end-start-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-start, var(--spectrum-infield-button-stacked-bottom-border-radius-end-start)); + border-start-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); + border-start-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); + border-end-end-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-end, var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius))); + border-block-end-width: var(--mod-infield-button-stacked-bottom-border-block-end-width, var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); } } + +.spectrum-InfieldButton-icon { + display: initial; + + /* don't be small, ever */ + flex-shrink: 0; + + /* remove margin used for centering */ + margin: 0 !important; +} diff --git a/components/infieldbutton/metadata/metadata.json b/components/infieldbutton/metadata/metadata.json index 34c4e4372e..206aae26ed 100644 --- a/components/infieldbutton/metadata/metadata.json +++ b/components/infieldbutton/metadata/metadata.json @@ -4,8 +4,13 @@ ".spectrum-InfieldButton", ".spectrum-InfieldButton .spectrum-InfieldButton-fill", ".spectrum-InfieldButton .spectrum-InfieldButton-icon", + ".spectrum-InfieldButton--bottom", + ".spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill", + ".spectrum-InfieldButton--top", + ".spectrum-InfieldButton--top .spectrum-InfieldButton-fill", + ".spectrum-InfieldButton-fill", + ".spectrum-InfieldButton-icon", ".spectrum-InfieldButton.spectrum-InfieldButton--bottom", - ".spectrum-InfieldButton.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill", ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeL", ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeS", ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeXL", @@ -17,19 +22,23 @@ ".spectrum-InfieldButton.spectrum-InfieldButton--sizeS", ".spectrum-InfieldButton.spectrum-InfieldButton--sizeXL", ".spectrum-InfieldButton.spectrum-InfieldButton--top", - ".spectrum-InfieldButton.spectrum-InfieldButton--top .spectrum-InfieldButton-fill", ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeL", ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeS", ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeXL", - ".spectrum-InfieldButton:active", + ".spectrum-InfieldButton:active .spectrum-InfieldButton-fill", + ".spectrum-InfieldButton:active .spectrum-InfieldButton-icon", ".spectrum-InfieldButton:active:not(:disabled)", ".spectrum-InfieldButton:disabled", ".spectrum-InfieldButton:focus-visible", + ".spectrum-InfieldButton:focus-visible .spectrum-InfieldButton-fill", + ".spectrum-InfieldButton:focus-visible .spectrum-InfieldButton-icon", ".spectrum-InfieldButton:focus-visible:not(:disabled)", - ".spectrum-InfieldButton:hover", + ".spectrum-InfieldButton:hover .spectrum-InfieldButton-fill", + ".spectrum-InfieldButton:hover .spectrum-InfieldButton-icon", ".spectrum-InfieldButton:hover:not(:disabled)" ], "modifiers": [ + "--mod-infield-border-color", "--mod-infield-border-color-quiet", "--mod-infield-button-background-color", "--mod-infield-button-background-color-disabled", @@ -128,10 +137,10 @@ "--spectrum-corner-radius-100", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", + "--spectrum-global-animation-duration-100", "--spectrum-gray-100", "--spectrum-gray-200", "--spectrum-gray-50", - "--spectrum-infield-border-color", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", @@ -146,61 +155,8 @@ "--system-infield-button-border-radius", "--system-infield-button-border-radius-reset", "--system-infield-button-border-width", - "--system-infield-button-bottom-size-l-width", - "--system-infield-button-bottom-size-s-width", - "--system-infield-button-bottom-size-xl-width", - "--system-infield-button-bottom-width", - "--system-infield-button-disabled-background-color", - "--system-infield-button-disabled-background-color-down", - "--system-infield-button-disabled-background-color-hover", - "--system-infield-button-disabled-border-color", - "--system-infield-button-disabled-icon-color", - "--system-infield-button-disabled-icon-color-down", - "--system-infield-button-disabled-icon-color-hover", - "--system-infield-button-disabled-icon-color-key-focus", - "--system-infield-button-edge-to-fill", - "--system-infield-button-fill-justify-content", - "--system-infield-button-fill-padding", - "--system-infield-button-height", - "--system-infield-button-icon-color", - "--system-infield-button-icon-color-down", - "--system-infield-button-icon-color-hover", - "--system-infield-button-icon-color-key-focus", - "--system-infield-button-inner-edge-to-fill", - "--system-infield-button-quiet-background-color", - "--system-infield-button-quiet-background-color-down", - "--system-infield-button-quiet-background-color-hover", - "--system-infield-button-quiet-background-color-key-focus", - "--system-infield-button-quiet-border-width", - "--system-infield-button-quiet-disabled-background-color", - "--system-infield-button-quiet-disabled-border-color", - "--system-infield-button-quiet-infield-border-color", - "--system-infield-button-size-l-height", - "--system-infield-button-size-l-stacked-fill-padding-inline", - "--system-infield-button-size-l-stacked-fill-padding-inner", - "--system-infield-button-size-l-stacked-fill-padding-outer", - "--system-infield-button-size-l-width", - "--system-infield-button-size-s-height", - "--system-infield-button-size-s-stacked-fill-padding-inline", - "--system-infield-button-size-s-stacked-fill-padding-inner", - "--system-infield-button-size-s-stacked-fill-padding-outer", - "--system-infield-button-size-s-width", - "--system-infield-button-size-xl-height", - "--system-infield-button-size-xl-stacked-fill-padding-inline", - "--system-infield-button-size-xl-stacked-fill-padding-inner", - "--system-infield-button-size-xl-stacked-fill-padding-outer", - "--system-infield-button-size-xl-width", - "--system-infield-button-stacked-border-radius-reset", "--system-infield-button-stacked-bottom-border-radius-end-start", - "--system-infield-button-stacked-fill-padding-inline", - "--system-infield-button-stacked-fill-padding-inner", - "--system-infield-button-stacked-fill-padding-outer", - "--system-infield-button-stacked-top-border-radius-start-start", - "--system-infield-button-top-size-l-width", - "--system-infield-button-top-size-s-width", - "--system-infield-button-top-size-xl-width", - "--system-infield-button-top-width", - "--system-infield-button-width" + "--system-infield-button-stacked-top-border-radius-start-start" ], "passthroughs": [], "high-contrast": ["--highcontrast-infield-button-border-color"] diff --git a/components/infieldbutton/metadata/mods.md b/components/infieldbutton/metadata/mods.md index f81a9c2af6..b9732dd92f 100644 --- a/components/infieldbutton/metadata/mods.md +++ b/components/infieldbutton/metadata/mods.md @@ -1,5 +1,6 @@ | Modifiable custom properties | | ------------------------------------------------------------- | +| `--mod-infield-border-color` | | `--mod-infield-border-color-quiet` | | `--mod-infield-button-background-color` | | `--mod-infield-button-background-color-disabled` | diff --git a/components/infieldbutton/themes/spectrum-two.css b/components/infieldbutton/themes/spectrum-two.css index 39e4bae84b..69b060d4e0 100644 --- a/components/infieldbutton/themes/spectrum-two.css +++ b/components/infieldbutton/themes/spectrum-two.css @@ -27,92 +27,5 @@ --spectrum-infield-button-background-color-hover: var(--spectrum-gray-100); --spectrum-infield-button-background-color-down: var(--spectrum-gray-200); --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-100); - - /* Medium size is the default */ - --spectrum-infield-button-height: var(--spectrum-component-height-100); - --spectrum-infield-button-width: var(--spectrum-component-height-100); - --spectrum-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); - - --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill); - --spectrum-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill); - --spectrum-infield-button-fill-padding: 0px; - --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium); - --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); - --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium); - - --spectrum-infield-button-icon-color: var(--spectrum-neutral-content-color-default); - --spectrum-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-infield-button-fill-justify-content: center; - - &:disabled { - --spectrum-infield-button-background-color: var(--spectrum-disabled-background-color); - --spectrum-infield-button-background-color-hover: var(--spectrum-disabled-background-color); - --spectrum-infield-button-background-color-down: var(--spectrum-disabled-background-color); - --spectrum-infield-button-border-color: var(--spectrum-disabled-background-color); - - --spectrum-infield-button-icon-color: var(--spectrum-disabled-content-color); - --spectrum-infield-button-icon-color-hover: var(--spectrum-disabled-content-color); - --spectrum-infield-button-icon-color-down: var(--spectrum-disabled-content-color); - --spectrum-infield-button-icon-color-key-focus: var(--spectrum-disabled-content-color); - } - - &.spectrum-InfieldButton--sizeS { - --spectrum-infield-button-height: var(--spectrum-component-height-75); - --spectrum-infield-button-width: var(--spectrum-component-height-75); - --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small); - --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); - --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small); - } - - &.spectrum-InfieldButton--sizeL { - --spectrum-infield-button-height: var(--spectrum-component-height-200); - --spectrum-infield-button-width: var(--spectrum-component-height-200); - --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large); - --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); - --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large); - } - - &.spectrum-InfieldButton--sizeXL { - --spectrum-infield-button-height: var(--spectrum-component-height-300); - --spectrum-infield-button-width: var(--spectrum-component-height-300); - --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large); - --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); - --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large); - } - - &.spectrum-InfieldButton--top, - &.spectrum-InfieldButton--bottom { - --spectrum-infield-button-width: var(--spectrum-in-field-button-width-stacked-medium); - - &.spectrum-InfieldButton--sizeS { - --spectrum-infield-button-width: var(--spectrum-in-field-button-width-stacked-small); - } - - &.spectrum-InfieldButton--sizeL { - --spectrum-infield-button-width: var(--spectrum-in-field-button-width-stacked-large); - } - - &.spectrum-InfieldButton--sizeXL { - --spectrum-infield-button-width: var(--spectrum-in-field-button-width-stacked-extra-large); - } - } - - &.spectrum-InfieldButton--quiet { - --spectrum-infield-button-background-color: transparent; - --spectrum-infield-button-background-color-hover: transparent; - --spectrum-infield-button-background-color-down: transparent; - --spectrum-infield-button-background-color-key-focus: transparent; - - --spectrum-infield-border-color: transparent; - --spectrum-infield-button-border-width: 0; - - &:disabled { - --spectrum-infield-button-background-color: transparent; - --spectrum-infield-button-border-color: transparent; - } - } } } diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css index 08299a00eb..1e6444482d 100644 --- a/components/inlinealert/index.css +++ b/components/inlinealert/index.css @@ -11,7 +11,44 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; + @import "./themes/spectrum-two.css"; + +.spectrum-InLineAlert { + /* Font */ + --spectrum-inlinealert-heading-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-inlinealert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --spectrum-inlinealert-heading-font-style: var(--spectrum-heading-sans-serif-font-style); + --spectrum-inlinealert-heading-font-size: var(--spectrum-heading-size-xxs); + --spectrum-inlinealert-heading-line-height: var(--spectrum-heading-line-height); + + --spectrum-inlinealert-content-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-inlinealert-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-inlinealert-content-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-inlinealert-content-font-size: var(--spectrum-body-size-s); + --spectrum-inlinealert-content-line-height: var(--spectrum-body-line-height); + + /* Size */ + --spectrum-inlinealert-border-width: var(--spectrum-border-width-200); + --spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-100); + --spectrum-inlinealert-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-inlinealert-min-inline-size: var(--spectrum-in-line-alert-minimum-width); + --spectrum-inlinealert-header-min-block-size: var(--spectrum-component-height-50); + + /* Spacing */ + --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400); + --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400); + --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-spacing-300); + + /* Color */ + --spectrum-inlinealert-background-color: var(--spectrum-background-layer-2-color); + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color); + --spectrum-inlinealert-header-color: var(--spectrum-heading-color); + --spectrum-inlinealert-content-color: var(--spectrum-body-color); + --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-informative-visual-color); + --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color); + --spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color); + --spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color); +} .spectrum-InLineAlert { position: relative; @@ -83,7 +120,6 @@ line-height: var(--mod-inlinealert-content-line-height, var(--spectrum-inlinealert-content-line-height)); color: var(--highcontrast-inlinealert-content-color, var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color))); - } .spectrum-InLineAlert-footer { diff --git a/components/inlinealert/metadata/metadata.json b/components/inlinealert/metadata/metadata.json index 74e946e624..935c89f08a 100644 --- a/components/inlinealert/metadata/metadata.json +++ b/components/inlinealert/metadata/metadata.json @@ -98,34 +98,7 @@ "--spectrum-spacing-400", "--spectrum-workflow-icon-size-100" ], - "system-theme": [ - "--system-in-line-alert-background-color", - "--system-in-line-alert-border-and-icon-color", - "--system-in-line-alert-border-and-icon-color-info", - "--system-in-line-alert-border-and-icon-color-negative", - "--system-in-line-alert-border-and-icon-color-notice", - "--system-in-line-alert-border-and-icon-color-positive", - "--system-in-line-alert-border-radius", - "--system-in-line-alert-border-width", - "--system-in-line-alert-content-color", - "--system-in-line-alert-content-font-family", - "--system-in-line-alert-content-font-size", - "--system-in-line-alert-content-font-style", - "--system-in-line-alert-content-font-weight", - "--system-in-line-alert-content-line-height", - "--system-in-line-alert-header-color", - "--system-in-line-alert-header-min-block-size", - "--system-in-line-alert-heading-font-family", - "--system-in-line-alert-heading-font-size", - "--system-in-line-alert-heading-font-style", - "--system-in-line-alert-heading-font-weight", - "--system-in-line-alert-heading-line-height", - "--system-in-line-alert-icon-size", - "--system-in-line-alert-min-inline-size", - "--system-in-line-alert-spacing-edge-to-text", - "--system-in-line-alert-spacing-header-content-button", - "--system-in-line-alert-spacing-header-to-icon" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-inlinealert-background-color", diff --git a/components/inlinealert/themes/spectrum-two.css b/components/inlinealert/themes/spectrum-two.css index cb25df5252..3b48a570c2 100644 --- a/components/inlinealert/themes/spectrum-two.css +++ b/components/inlinealert/themes/spectrum-two.css @@ -10,42 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-InLineAlert { - /* Font */ - --spectrum-inlinealert-heading-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-inlinealert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-inlinealert-heading-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-inlinealert-heading-font-size: var(--spectrum-heading-size-xxs); - --spectrum-inlinealert-heading-line-height: var(--spectrum-heading-line-height); - - --spectrum-inlinealert-content-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-inlinealert-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-inlinealert-content-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-inlinealert-content-font-size: var(--spectrum-body-size-s); - --spectrum-inlinealert-content-line-height: var(--spectrum-body-line-height); - - /* Size */ - --spectrum-inlinealert-border-width: var(--spectrum-border-width-200); - --spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-100); - --spectrum-inlinealert-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-inlinealert-min-inline-size: var(--spectrum-in-line-alert-minimum-width); - --spectrum-inlinealert-header-min-block-size: var(--spectrum-component-height-50); - - /* Spacing */ - --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400); - --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400); - --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-spacing-300); - - /* Color */ - --spectrum-inlinealert-background-color: var(--spectrum-background-layer-2-color); - --spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color); - --spectrum-inlinealert-header-color: var(--spectrum-heading-color); - --spectrum-inlinealert-content-color: var(--spectrum-body-color); - --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-informative-visual-color); - --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color); - --spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color); - --spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color); - } -} diff --git a/components/link/index.css b/components/link/index.css index 508d040afe..12141615e1 100644 --- a/components/link/index.css +++ b/components/link/index.css @@ -11,7 +11,27 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; + @import "./themes/spectrum-two.css"; + +.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); +} /* Windows high contrast mode */ @media (forced-colors: active) { diff --git a/components/link/metadata/metadata.json b/components/link/metadata/metadata.json index 628d6d7f5f..a5b1874d5e 100644 --- a/components/link/metadata/metadata.json +++ b/components/link/metadata/metadata.json @@ -59,19 +59,7 @@ "--spectrum-neutral-content-color-key-focus", "--spectrum-white" ], - "system-theme": [ - "--system-link-animation-duration", - "--system-link-text-color-black", - "--system-link-text-color-primary-active", - "--system-link-text-color-primary-default", - "--system-link-text-color-primary-focus", - "--system-link-text-color-primary-hover", - "--system-link-text-color-secondary-active", - "--system-link-text-color-secondary-default", - "--system-link-text-color-secondary-focus", - "--system-link-text-color-secondary-hover", - "--system-link-text-color-white" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-link-focus-color", diff --git a/components/link/themes/spectrum-two.css b/components/link/themes/spectrum-two.css index e5e6a28245..3b48a570c2 100644 --- a/components/link/themes/spectrum-two.css +++ b/components/link/themes/spectrum-two.css @@ -10,25 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-Link { - --spectrum-link-animation-duration: var(--spectrum-animation-duration-100); - - /* Colors */ - /* Primary */ - --spectrum-link-text-color-primary-default: var(--spectrum-accent-content-color-default); - --spectrum-link-text-color-primary-hover: var(--spectrum-accent-content-color-hover); - --spectrum-link-text-color-primary-active: var(--spectrum-accent-content-color-down); - --spectrum-link-text-color-primary-focus: var(--spectrum-accent-content-color-key-focus); - - /* Secondary */ - --spectrum-link-text-color-secondary-default: var(--spectrum-neutral-content-color-default); - --spectrum-link-text-color-secondary-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-link-text-color-secondary-active: var(--spectrum-neutral-content-color-down); - --spectrum-link-text-color-secondary-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-link-text-color-white: var(--spectrum-white); - --spectrum-link-text-color-black: var(--spectrum-black); - } -} diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index 48277db36b..b3032e7f39 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -18,6 +18,24 @@ @extend %spectrum-BaseButton; @extend %spectrum-ButtonWithFocusRing; + --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); + block-size: var(--mod-logic-button-height, var(--spectrum-logic-button-height)); padding: var(--mod-logic-button-padding, var(--spectrum-logic-button-padding)); @@ -33,6 +51,23 @@ 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))); } + &:disabled, + &.is-disabled { + --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled); + --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled); + --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); + --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled); + + --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled); + --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled); + --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); + --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled); + } +} + +.spectrum-LogicButton { &:focus-visible { outline: none; @@ -40,25 +75,10 @@ box-shadow: 0 0 0 var(--mod-logic-button-focus-indicator-width, var(--spectrum-logic-button-focus-indicator-width)) var(--highcontrast-logic-button-focus-indicator-color, var(--mod-logic-button-focus-indicator-color, var(--spectrum-logic-button-focus-indicator-color))); } } - - &:disabled, - &.is-disabled { - --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-logic-button-and-background-color-default-disabled)); - --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-logic-button-and-border-color-disabled)); - --mod-logic-button-and-text-color: var(--mod-logic-button-and-text-color-disabled, var(--spectrum-logic-button-and-text-color-disabled)); - --mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-logic-button-and-background-color-hover-disabled)); - --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-logic-button-and-border-color-hover-disabled)); - - --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-logic-button-or-background-color-disabled)); - --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-logic-button-or-border-color-disabled)); - --mod-logic-button-or-text-color: var(--mod-logic-button-or-text-color-disabled, var(--spectrum-logic-button-or-text-color-disabled)); - --mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-logic-button-or-background-color-hover-disabled)); - --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-logic-button-or-border-color-hover-disabled)); - } } .spectrum-LogicButton--and { - background-color: var(--highcontrast-logic-button-and-background-color, var(--mod-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color-default))); + 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))); @@ -80,7 +100,13 @@ } @media (forced-colors: active) { + .spectrum-LogicButton::after { + --highcontrast-logic-button-focus-indicator-color: Highlight; + forced-color-adjust: none; + } + .spectrum-LogicButton { + --highcontrast-logic-button-and-background-color: ButtonFace; --highcontrast-logic-button-and-background-color-hover: ButtonFace; --highcontrast-logic-button-and-border-color: ButtonText; @@ -91,15 +117,7 @@ --highcontrast-logic-button-or-border-color: ButtonText; --highcontrast-logic-button-or-border-color-hover: Highlight; --highcontrast-logic-button-or-text-color: ButtonText; - - &, - &::after { - forced-color-adjust: none; - } - - &::after { - --highcontrast-logic-button-focus-indicator-color: Highlight; - } + forced-color-adjust: none; &:disabled, &.is-disabled { diff --git a/components/logicbutton/metadata/metadata.json b/components/logicbutton/metadata/metadata.json index 50e822d929..50f2f28e7a 100644 --- a/components/logicbutton/metadata/metadata.json +++ b/components/logicbutton/metadata/metadata.json @@ -51,7 +51,6 @@ ], "component": [ "--spectrum-logic-button-and-background-color", - "--spectrum-logic-button-and-background-color-default", "--spectrum-logic-button-and-background-color-default-disabled", "--spectrum-logic-button-and-background-color-hover", "--spectrum-logic-button-and-background-color-hover-disabled", @@ -60,7 +59,6 @@ "--spectrum-logic-button-and-border-color-hover", "--spectrum-logic-button-and-border-color-hover-disabled", "--spectrum-logic-button-and-text-color", - "--spectrum-logic-button-and-text-color-disabled", "--spectrum-logic-button-border-radius", "--spectrum-logic-button-border-width", "--spectrum-logic-button-focus-indicator-color", @@ -78,7 +76,6 @@ "--spectrum-logic-button-or-border-color-hover", "--spectrum-logic-button-or-border-color-hover-disabled", "--spectrum-logic-button-or-text-color", - "--spectrum-logic-button-or-text-color-disabled", "--spectrum-logic-button-padding" ], "global": [ @@ -99,30 +96,14 @@ "--spectrum-white" ], "system-theme": [ - "--system-logic-button-and-background-color-default", "--system-logic-button-and-background-color-default-disabled", - "--system-logic-button-and-background-color-hover", "--system-logic-button-and-background-color-hover-disabled", "--system-logic-button-and-border-color-disabled", - "--system-logic-button-and-border-color-hover", "--system-logic-button-and-border-color-hover-disabled", - "--system-logic-button-and-text-color", - "--system-logic-button-and-text-color-disabled", - "--system-logic-button-border-radius", - "--system-logic-button-border-width", - "--system-logic-button-focus-indicator-color", - "--system-logic-button-focus-indicator-gap", - "--system-logic-button-focus-indicator-width", - "--system-logic-button-font-size", - "--system-logic-button-font-weight", - "--system-logic-button-height", "--system-logic-button-or-background-color-disabled", "--system-logic-button-or-background-color-hover-disabled", "--system-logic-button-or-border-color-disabled", - "--system-logic-button-or-border-color-hover-disabled", - "--system-logic-button-or-text-color", - "--system-logic-button-or-text-color-disabled", - "--system-logic-button-padding" + "--system-logic-button-or-border-color-hover-disabled" ], "passthroughs": [ "--mod-button-animation-duration", diff --git a/components/logicbutton/themes/spectrum-two.css b/components/logicbutton/themes/spectrum-two.css index 89d8597a5a..64d35f5578 100644 --- a/components/logicbutton/themes/spectrum-two.css +++ b/components/logicbutton/themes/spectrum-two.css @@ -13,34 +13,13 @@ @container style(--system: spectrum) { .spectrum-LogicButton { - --spectrum-logic-button-height: 24px; - --spectrum-logic-button-padding: var(--spectrum-component-edge-to-text-50); - --spectrum-logic-button-font-size: var(--spectrum-font-size-100); - --spectrum-logic-button-font-weight: var(--spectrum-bold-font-weight); - - --spectrum-logic-button-border-width: var(--spectrum-border-width-200); - --spectrum-logic-button-border-radius: var(--spectrum-corner-radius-100); - - --spectrum-logic-button-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --spectrum-logic-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-logic-button-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-logic-button-and-text-color: var(--spectrum-white); - --spectrum-logic-button-and-background-color-default: var(--spectrum-logic-button-and-background-color); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - - --spectrum-logic-button-or-text-color: var(--spectrum-white); - --spectrum-logic-button-and-background-color-default-disabled: var(--spectrum-gray-100); --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-and-text-color-disabled: var(--spectrum-gray-500); --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-100); --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-100); --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-100); --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-or-text-color-disabled: var(--spectrum-gray-500); --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-100); --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-100); } diff --git a/components/menu/index.css b/components/menu/index.css index e77b9a5dc3..99dd6509e8 100644 --- a/components/menu/index.css +++ b/components/menu/index.css @@ -11,7 +11,177 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; + @import "./themes/spectrum-two.css"; + +.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-item-background-color-default: transparent; + + --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); + + /* "no" icon: just the chevron (we're not counting it because it HAS to be there for a collapsible) */ + --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))); +} + +.spectrum-Menu--sizeS { + --spectrum-menu-item-min-height: var(--spectrum-component-height-75); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75); + + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75); + + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75); + + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50); + + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75); + + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small); + + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); + + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); +} + +.spectrum-Menu--sizeL { + --spectrum-menu-item-min-height: var(--spectrum-component-height-200); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200); + + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200); + + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200); + + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100); + + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200); + + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large); + + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large); + + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large); +} + +.spectrum-Menu--sizeXL { + --spectrum-menu-item-min-height: var(--spectrum-component-height-300); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300); + + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300); + + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300); + + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200); + + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300); + + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large); + + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large); + + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); +} @media (forced-colors: active) { .spectrum-Menu { @@ -97,23 +267,6 @@ --spectrum-menu-section-header-line-height: var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk)); } - /* Menus with "selectable" menu items. */ - &.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)); - } - } - } - .spectrum-Menu-divider { --spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium); @@ -126,8 +279,25 @@ 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)); - /* Icons */ + /* 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)); + } + } +} + +/* Icons */ +.spectrum-Menu { .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))); @@ -163,17 +333,6 @@ grid-area: chevronArea; align-self: center; - - &:dir(rtl) { - transform: rotate(-180deg); - } - } - - .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, var(--spectrum-menu-section-header-color))); - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color))); } .spectrum-Menu-itemIcon--workflowIcon { @@ -185,15 +344,19 @@ 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)); } +} - /* Presentational list items for sections and dividers. */ - li:not(.spectrum-Menu-item, .spectrum-Menu-divider) { - display: block; - position: relative; - box-sizing: border-box; - margin: 0; - padding: 0; - } +.spectrum-Menu-chevron:dir(rtl) { + transform: rotate(-180deg); +} + +/* 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; } .spectrum-Menu-item { @@ -208,7 +371,6 @@ 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)); @@ -216,25 +378,14 @@ margin: 0; text-decoration: none; - display: grid; - - 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; - .spectrum-Menu-itemCheckbox { --mod-checkbox-top-to-text: 0; --mod-checkbox-text-to-control: 0; - min-block-size: 0; .spectrum-Checkbox-box { margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control)); + margin-block-start: var(--mod-menu-item-top-to-checkbox, var(--spectrum-menu-item-top-to-checkbox)); margin-block-end: 0; } @@ -248,188 +399,161 @@ margin-block-end: 0; } } +} - .spectrum-Menu-item { - display: grid; - grid-template-areas: "submenuItemLabelArea submenuItemValueArea"; - grid-template-columns: auto auto; - grid-template-rows: 1fr auto; - - .spectrum-Menu-itemLabel { - grid-area: submenuItemLabelArea; - } - - .spectrum-Menu-itemValue { - grid-area: submenuItemValueArea; - } - } - - &:focus, - &.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; +.spectrum-Menu-item { + display: grid; + grid-template-areas: + ". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . . " + "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn" + ". . . . descriptionArea . . . " + ". . . . submenuArea . . . "; - > .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))); - } + grid-template-columns: auto auto auto auto 1fr auto auto auto; + grid-template-rows: 1fr auto; +} - > .spectrum-Menu-sectionHeading { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); - } +.spectrum-Menu-item .spectrum-Menu-item { + display: grid; + grid-template-areas: "submenuItemLabelArea submenuItemValueArea"; + grid-template-columns: auto auto; + grid-template-rows: 1fr auto; +} - > .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-item .spectrum-Menu-item .spectrum-Menu-itemLabel { + grid-area: submenuItemLabelArea; +} - > .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-item .spectrum-Menu-item .spectrum-Menu-itemValue { + grid-area: submenuItemValueArea; +} - > .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-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; - > .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-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-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-sectionHeading { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); } - &:dir(rtl) { - --spectrum-menu-item-focus-indicator-direction-scalar: -1; + > .spectrum-Menu-itemDescription { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-focus, var(--spectrum-menu-item-description-color-focus))); } - &: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-itemValue { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus))); + } - > .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-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-sectionHeading { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-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-itemDescription { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-hover, var(--spectrum-menu-item-description-color-hover))); - } + > .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-itemValue { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover))); - } +.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))); +} - > .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-item:dir(rtl) { + --spectrum-menu-item-focus-indicator-direction-scalar: -1; +} - > .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-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))); - > .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-itemLabel { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-hover, var(--spectrum-menu-item-label-content-color-hover))); } - &:active { - 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-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-hover, var(--spectrum-menu-item-description-color-hover))); + } - > .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-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-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-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-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-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))); } +} - /* Disabled menu items */ - &.is-disabled, - &[aria-disabled="true"] { - background-color: transparent; +.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))); - .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 { + 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-itemDescription { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled))); - } + > .spectrum-Menu-sectionHeading { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + } - .spectrum-Menu-itemIcon { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); - fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); - } + > .spectrum-Menu-itemDescription { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-down, var(--spectrum-menu-item-description-color-down))); + } - &:hover { - cursor: default; - background-color: transparent; + > .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-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-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-itemDescription { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled))); - } + > .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-itemIcon { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); - fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); - } - } + > .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-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))); +.spectrum-Menu-item--collapsible .spectrum-Menu-itemIcon { + grid-area: headingIconArea; } -.is-selectableMultiple { - .spectrum-Menu-item { - align-items: start; - } +.is-selectableMultiple .spectrum-Menu-item { + align-items: start; +} - .spectrum-Menu-itemCheckbox { - grid-area: checkmarkArea; - } +.is-selectableMultiple .spectrum-Menu-itemCheckbox { + grid-area: checkmarkArea; } .spectrum-Menu-itemSelection { @@ -437,26 +561,13 @@ } .spectrum-Menu-itemLabel { - /* @passthrough start -- Switch spacing overrides */ - --mod-switch-control-label-spacing: 0; - --mod-switch-spacing-top-to-label: 0; - /* @passthrough end */ - 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))); - - hyphens: auto; - overflow-wrap: break-word; } .spectrum-Menu-itemValue { grid-area: valueArea; - 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-itemActions { @@ -465,22 +576,39 @@ 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-item--collapsible .spectrum-Menu-chevron { + grid-area: chevronAreaCollapsible; +} + .spectrum-Menu-sectionHeading { grid-area: sectionHeadingArea; grid-column: 1 / -1; - 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)); +} + +.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; } .spectrum-Menu-itemDescription { grid-area: descriptionArea; +} + +.spectrum-Menu-item--collapsible .spectrum-Menu, +.spectrum-Menu-item .spectrum-Menu { + grid-area: submenuArea; + grid-column: 1 / -1; +} + +.spectrum-Menu-item--drillIn .spectrum-Menu-chevron { + grid-area: chevronAreaDrillIn; +} + +.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; @@ -489,25 +617,39 @@ 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; +} + +.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)); +} + .spectrum-Menu-itemLabel--truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } -.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; - - padding-inline: 0; - } +.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)); +} - /* collapsible sub-menus */ +/* collapsible sub-menus */ +.spectrum-Menu-item--collapsible { &.is-open { padding-block-end: 0; @@ -523,52 +665,43 @@ 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-itemIcon { - grid-area: headingIconArea; + .spectrum-Menu { + display: none; } - > .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.is-open { + display: block; } - .spectrum-Menu-chevron { - grid-area: chevronAreaCollapsible; + .spectrum-Menu-sectionHeading { + padding-inline: 0; } - /* - assume that if an item is collapsible, it will - have a chevron and we need to adjust position of submenu items to account for that - */ - .spectrum-Menu { - display: none; - - /* 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); - - &.is-open { - display: block; - } - - .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)); - } + > .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-item--collapsible .spectrum-Menu, -.spectrum-Menu-item .spectrum-Menu { - grid-area: submenuArea; - grid-column: 1 / -1; +/* + assume that if an item is collapsible, it will + 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); + + .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)); + } } .spectrum-Menu-item--drillIn { .spectrum-Menu-chevron { - grid-area: chevronAreaDrillIn; 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)); @@ -617,6 +750,47 @@ } } +/* 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-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))); + } + } +} + /* Tray submenu */ .spectrum-Menu-back { display: flex; @@ -651,3 +825,10 @@ 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 .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)); +} diff --git a/components/menu/metadata/metadata.json b/components/menu/metadata/metadata.json index a732dc74d2..3df3c41da7 100644 --- a/components/menu/metadata/metadata.json +++ b/components/menu/metadata/metadata.json @@ -8,7 +8,6 @@ ".spectrum-Menu .spectrum-Menu-backIcon", ".spectrum-Menu .spectrum-Menu-checkmark", ".spectrum-Menu .spectrum-Menu-chevron", - ".spectrum-Menu .spectrum-Menu-chevron:dir(rtl)", ".spectrum-Menu .spectrum-Menu-divider", ".spectrum-Menu .spectrum-Menu-divider.spectrum-Divider--sizeS", ".spectrum-Menu .spectrum-Menu-item", @@ -26,12 +25,16 @@ ".spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon", ".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", ".spectrum-Menu li:not(.spectrum-Menu-item, .spectrum-Menu-divider)", + ".spectrum-Menu--sizeL", + ".spectrum-Menu--sizeS", + ".spectrum-Menu--sizeXL", ".spectrum-Menu-back", ".spectrum-Menu-back .spectrum-Menu-sectionHeading", ".spectrum-Menu-back:focus-visible", ".spectrum-Menu-backButton", ".spectrum-Menu-backButton:focus-visible", ".spectrum-Menu-backHeading", + ".spectrum-Menu-chevron:dir(rtl)", ".spectrum-Menu-item", ".spectrum-Menu-item .spectrum-Menu", ".spectrum-Menu-item .spectrum-Menu-item", @@ -131,14 +134,10 @@ ".spectrum-Menu.is-selectable .spectrum-Menu-item", ".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected", ".spectrum-Menu.js-focus-within .spectrum-Menu-item--collapsible.is-open[focus-within]", - ".spectrum-Menu.spectrum-Menu--sizeL", - ".spectrum-Menu.spectrum-Menu--sizeM", - ".spectrum-Menu.spectrum-Menu--sizeS", - ".spectrum-Menu.spectrum-Menu--sizeXL", ".spectrum-Menu:lang(ja)", ".spectrum-Menu:lang(ko)", ".spectrum-Menu:lang(zh)", - "[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron", + "[dir=\"rtl\"] .spectrum-Menu-chevron", "[dir=\"rtl\"] .spectrum-Menu-item" ], "modifiers": [ @@ -374,147 +373,13 @@ "--spectrum-workflow-icon-size-75" ], "system-theme": [ - "--system-menu-back-icon-margin", - "--system-menu-checkmark-display", - "--system-menu-checkmark-display-hidden", - "--system-menu-checkmark-display-shown", - "--system-menu-checkmark-icon-color-default", - "--system-menu-checkmark-icon-color-down", - "--system-menu-checkmark-icon-color-focus", - "--system-menu-checkmark-icon-color-hover", - "--system-menu-collapsible-icon-color", - "--system-menu-drillin-icon-color-default", - "--system-menu-drillin-icon-color-down", - "--system-menu-drillin-icon-color-focus", - "--system-menu-drillin-icon-color-hover", - "--system-menu-item-background-color-default", "--system-menu-item-background-color-down", "--system-menu-item-background-color-hover", - "--system-menu-item-background-color-key-focus", - "--system-menu-item-bottom-edge-to-text", - "--system-menu-item-checkmark-height", - "--system-menu-item-checkmark-width", - "--system-menu-item-collapsible-no-icon-sub-item-padding-x-start", - "--system-menu-item-description-color-default", - "--system-menu-item-description-color-disabled", - "--system-menu-item-description-color-down", - "--system-menu-item-description-color-focus", - "--system-menu-item-description-color-hover", - "--system-menu-item-description-font-size", - "--system-menu-item-description-line-height", - "--system-menu-item-description-line-height-cjk", - "--system-menu-item-focus-indicator-color", - "--system-menu-item-focus-indicator-width", - "--system-menu-item-icon-height", - "--system-menu-item-icon-width", - "--system-menu-item-label-content-color-default", - "--system-menu-item-label-content-color-disabled", - "--system-menu-item-label-content-color-down", - "--system-menu-item-label-content-color-focus", - "--system-menu-item-label-content-color-hover", - "--system-menu-item-label-font-size", - "--system-menu-item-label-icon-color-default", - "--system-menu-item-label-icon-color-disabled", - "--system-menu-item-label-icon-color-down", - "--system-menu-item-label-icon-color-focus", - "--system-menu-item-label-icon-color-hover", - "--system-menu-item-label-inline-edge-to-content", - "--system-menu-item-label-line-height", - "--system-menu-item-label-line-height-cjk", - "--system-menu-item-label-text-to-visual", - "--system-menu-item-label-to-description-spacing", - "--system-menu-item-label-to-value-area-min-spacing", - "--system-menu-item-min-height", - "--system-menu-item-selectable-edge-to-text-not-selected", - "--system-menu-item-text-to-control", - "--system-menu-item-top-edge-to-text", - "--system-menu-item-top-to-action", - "--system-menu-item-top-to-checkbox", - "--system-menu-item-top-to-checkmark", - "--system-menu-item-value-color-default", - "--system-menu-item-value-color-down", - "--system-menu-item-value-color-focus", - "--system-menu-item-value-color-hover", - "--system-menu-section-header-color", - "--system-menu-section-header-font-size", - "--system-menu-section-header-font-weight", - "--system-menu-section-header-line-height", - "--system-menu-section-header-line-height-cjk", - "--system-menu-section-header-min-width", - "--system-menu-size-l-back-icon-margin", - "--system-menu-size-l-item-bottom-edge-to-text", - "--system-menu-size-l-item-checkmark-height", - "--system-menu-size-l-item-checkmark-width", - "--system-menu-size-l-item-description-font-size", - "--system-menu-size-l-item-icon-height", - "--system-menu-size-l-item-icon-width", - "--system-menu-size-l-item-label-font-size", - "--system-menu-size-l-item-label-inline-edge-to-content", - "--system-menu-size-l-item-label-text-to-visual", - "--system-menu-size-l-item-min-height", - "--system-menu-size-l-item-selectable-edge-to-text-not-selected", - "--system-menu-size-l-item-text-to-control", - "--system-menu-size-l-item-top-edge-to-text", - "--system-menu-size-l-item-top-to-checkmark", - "--system-menu-size-l-section-header-font-size", - "--system-menu-size-l-section-header-min-width", - "--system-menu-size-m-back-icon-margin", - "--system-menu-size-m-item-bottom-edge-to-text", - "--system-menu-size-m-item-checkmark-height", - "--system-menu-size-m-item-checkmark-width", - "--system-menu-size-m-item-description-font-size", - "--system-menu-size-m-item-icon-height", - "--system-menu-size-m-item-icon-width", - "--system-menu-size-m-item-label-font-size", - "--system-menu-size-m-item-label-inline-edge-to-content", - "--system-menu-size-m-item-label-text-to-visual", - "--system-menu-size-m-item-min-height", - "--system-menu-size-m-item-selectable-edge-to-text-not-selected", - "--system-menu-size-m-item-text-to-control", - "--system-menu-size-m-item-top-edge-to-text", - "--system-menu-size-m-item-top-to-checkmark", - "--system-menu-size-m-section-header-font-size", - "--system-menu-size-m-section-header-min-width", - "--system-menu-size-s-back-icon-margin", - "--system-menu-size-s-item-bottom-edge-to-text", - "--system-menu-size-s-item-checkmark-height", - "--system-menu-size-s-item-checkmark-width", - "--system-menu-size-s-item-description-font-size", - "--system-menu-size-s-item-icon-height", - "--system-menu-size-s-item-icon-width", - "--system-menu-size-s-item-label-font-size", - "--system-menu-size-s-item-label-inline-edge-to-content", - "--system-menu-size-s-item-label-text-to-visual", - "--system-menu-size-s-item-min-height", - "--system-menu-size-s-item-selectable-edge-to-text-not-selected", - "--system-menu-size-s-item-text-to-control", - "--system-menu-size-s-item-top-edge-to-text", - "--system-menu-size-s-item-top-to-checkmark", - "--system-menu-size-s-section-header-font-size", - "--system-menu-size-s-section-header-min-width", - "--system-menu-size-xl-back-icon-margin", - "--system-menu-size-xl-item-bottom-edge-to-text", - "--system-menu-size-xl-item-checkmark-height", - "--system-menu-size-xl-item-checkmark-width", - "--system-menu-size-xl-item-description-font-size", - "--system-menu-size-xl-item-icon-height", - "--system-menu-size-xl-item-icon-width", - "--system-menu-size-xl-item-label-font-size", - "--system-menu-size-xl-item-label-inline-edge-to-content", - "--system-menu-size-xl-item-label-text-to-visual", - "--system-menu-size-xl-item-min-height", - "--system-menu-size-xl-item-selectable-edge-to-text-not-selected", - "--system-menu-size-xl-item-text-to-control", - "--system-menu-size-xl-item-top-edge-to-text", - "--system-menu-size-xl-item-top-to-checkmark", - "--system-menu-size-xl-section-header-font-size", - "--system-menu-size-xl-section-header-min-width" + "--system-menu-item-background-color-key-focus" ], "passthroughs": [ "--mod-checkbox-text-to-control", - "--mod-checkbox-top-to-text", - "--mod-switch-control-label-spacing", - "--mod-switch-spacing-top-to-label" + "--mod-checkbox-top-to-text" ], "high-contrast": [ "--highcontrast-checkbox-highlight-color-default", diff --git a/components/menu/themes/spectrum-two.css b/components/menu/themes/spectrum-two.css index e0d92d923a..821e0fde0b 100644 --- a/components/menu/themes/spectrum-two.css +++ b/components/menu/themes/spectrum-two.css @@ -13,178 +13,8 @@ @container style(--system: spectrum) { .spectrum-Menu { - --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50); - --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50); - - --spectrum-menu-item-label-line-height: var(--spectrum-line-height-100); - --spectrum-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description); - --spectrum-menu-item-focus-indicator-width: var(--spectrum-border-width-200); - --spectrum-menu-item-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100); - - --spectrum-menu-item-label-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-menu-item-label-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-menu-item-label-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-menu-item-label-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-menu-item-label-icon-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-menu-item-label-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-menu-item-label-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-menu-item-label-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-menu-item-label-content-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-menu-item-label-icon-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-menu-item-description-line-height: var(--spectrum-line-height-100); - --spectrum-menu-item-description-line-height-cjk: var(--spectrum-cjk-line-height-100); - - --spectrum-menu-item-description-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-menu-item-description-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-menu-item-description-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-menu-item-description-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-menu-item-description-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-menu-section-header-line-height: var(--spectrum-line-height-100); - --spectrum-menu-section-header-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-menu-section-header-font-weight: var(--spectrum-bold-font-weight); - --spectrum-menu-section-header-color: var(--spectrum-gray-900); - --spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900); - - --spectrum-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900); - --spectrum-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); - --spectrum-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); - --spectrum-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); - - --spectrum-menu-drillin-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-menu-drillin-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-menu-drillin-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-menu-drillin-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - - --spectrum-menu-item-value-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-menu-item-value-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-menu-item-value-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-menu-item-value-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - - --spectrum-menu-checkmark-display-hidden: none; - --spectrum-menu-checkmark-display-shown: block; - --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown); - - /* "no" icon: just the chevron (we're not counting it because it HAS to be there for a collapsible) */ - --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))); - - --spectrum-menu-item-background-color-default: transparent; --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); - - &, - &.spectrum-Menu--sizeM { - --spectrum-menu-item-min-height: var(--spectrum-component-height-100); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); - - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100); - - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75); - - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100); - - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); - - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); - - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); - } - - &.spectrum-Menu--sizeS { - --spectrum-menu-item-min-height: var(--spectrum-component-height-75); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75); - - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75); - - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75); - - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50); - - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75); - - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small); - - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); - - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); - } - - &.spectrum-Menu--sizeL { - --spectrum-menu-item-min-height: var(--spectrum-component-height-200); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200); - - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200); - - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200); - - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100); - - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200); - - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large); - - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large); - - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large); - } - - &.spectrum-Menu--sizeXL { - --spectrum-menu-item-min-height: var(--spectrum-component-height-300); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300); - - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300); - - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300); - - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200); - - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300); - - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large); - - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large); - - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); - } } } diff --git a/components/meter/metadata/metadata.json b/components/meter/metadata/metadata.json index a29a88233e..c3fa26eeb7 100644 --- a/components/meter/metadata/metadata.json +++ b/components/meter/metadata/metadata.json @@ -4,9 +4,7 @@ ".spectrum-Meter", ".spectrum-Meter.is-negative", ".spectrum-Meter.is-notice", - ".spectrum-Meter.is-positive", - ".spectrum-Meter.spectrum-Meter--sizeL", - ".spectrum-Meter.spectrum-Meter--sizeS" + ".spectrum-Meter.is-positive" ], "modifiers": [ "--mod-meter-fill-color-negative", @@ -23,44 +21,12 @@ "--spectrum-meter-font-size", "--spectrum-meter-inline-size", "--spectrum-meter-max-width", - "--spectrum-meter-maximum-width", "--spectrum-meter-min-width", - "--spectrum-meter-minimum-width", "--spectrum-meter-thickness", - "--spectrum-meter-thickness-large", - "--spectrum-meter-thickness-small", "--spectrum-meter-top-to-text" ], - "global": [ - "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-75", - "--spectrum-font-size-100", - "--spectrum-font-size-75", - "--spectrum-negative-visual-color", - "--spectrum-notice-visual-color", - "--spectrum-positive-visual-color", - "--spectrum-progressbar-size-2400", - "--spectrum-progressbar-size-2500" - ], - "system-theme": [ - "--system-meter-fill-color-negative", - "--system-meter-fill-color-notice", - "--system-meter-fill-color-positive", - "--system-meter-font-size", - "--system-meter-inline-size", - "--system-meter-max-width", - "--system-meter-min-width", - "--system-meter-size-l-font-size", - "--system-meter-size-l-inline-size", - "--system-meter-size-l-thickness", - "--system-meter-size-l-top-to-text", - "--system-meter-size-s-font-size", - "--system-meter-size-s-inline-size", - "--system-meter-size-s-thickness", - "--system-meter-size-s-top-to-text", - "--system-meter-thickness", - "--system-meter-top-to-text" - ], + "global": [], + "system-theme": [], "passthroughs": [ "--mod-progressbar-fill-color", "--mod-progressbar-font-size", diff --git a/components/meter/themes/spectrum-two.css b/components/meter/themes/spectrum-two.css index 75c27c9176..3b48a570c2 100644 --- a/components/meter/themes/spectrum-two.css +++ b/components/meter/themes/spectrum-two.css @@ -10,30 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-Meter { - --spectrum-meter-min-width: var(--spectrum-meter-minimum-width); - --spectrum-meter-max-width: var(--spectrum-meter-maximum-width); - - --spectrum-meter-fill-color-positive: var(--spectrum-positive-visual-color); - --spectrum-meter-fill-color-notice: var(--spectrum-notice-visual-color); - --spectrum-meter-fill-color-negative: var(--spectrum-negative-visual-color); - - /* Meter only supports size S and L (default) */ - &, - &.spectrum-Meter--sizeL { - --spectrum-meter-thickness: var(--spectrum-meter-thickness-large); - --spectrum-meter-inline-size: var(--spectrum-progressbar-size-2500); - --spectrum-meter-font-size: var(--spectrum-font-size-100); - --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text-200); - } - - &.spectrum-Meter--sizeS { - --spectrum-meter-thickness: var(--spectrum-meter-thickness-small); - --spectrum-meter-inline-size: var(--spectrum-progressbar-size-2400); - --spectrum-meter-font-size: var(--spectrum-font-size-75); - --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text-75); - } - } -} diff --git a/components/miller/index.css b/components/miller/index.css index b66c77823e..15d14e25a8 100644 --- a/components/miller/index.css +++ b/components/miller/index.css @@ -11,7 +11,14 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; + @import "./themes/spectrum-two.css"; + +.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 { overflow-x: auto; diff --git a/components/miller/metadata/metadata.json b/components/miller/metadata/metadata.json index e07f6ef9b2..4d2e62f974 100644 --- a/components/miller/metadata/metadata.json +++ b/components/miller/metadata/metadata.json @@ -18,12 +18,7 @@ "--spectrum-millercolumns-padding" ], "global": ["--spectrum-spacing-100"], - "system-theme": [ - "--system-miller-columns-inline-size", - "--system-miller-columns-margin-inline-end", - "--system-miller-columns-margin-inline-start", - "--system-miller-columns-padding" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/miller/themes/spectrum-two.css b/components/miller/themes/spectrum-two.css index 818d763859..3b48a570c2 100644 --- a/components/miller/themes/spectrum-two.css +++ b/components/miller/themes/spectrum-two.css @@ -10,12 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-MillerColumns { - --spectrum-millercolumns-inline-size: 272px; - --spectrum-millercolumns-padding: var(--spectrum-spacing-100); - --spectrum-millercolumns-margin-inline-start: var(--spectrum-spacing-100); - --spectrum-millercolumns-margin-inline-end: var(--spectrum-spacing-100); - } -} diff --git a/components/modal/index.css b/components/modal/index.css index 3125b8ad06..2ac85fd2bc 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -14,6 +14,22 @@ @import "@spectrum-css/commons/overlay.css"; @import "./themes/spectrum-two.css"; +.spectrum-Modal { + /* Bug: this must be 0ms, not 0 */ + --spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0); + + /* Distance between top and bottom of modal and edge of window for fullscreen modal */ + --spectrum-modal-fullscreen-margin: 32px; + --spectrum-modal-max-height: 90vh; + --spectrum-modal-max-width: 90%; + + --spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100); + --spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500); + --spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200); + --spectrum-modal-transition-animation-duration: var(--spectrum-animation-duration-100); +} + /* Used to position the modal */ .spectrum-Modal-wrapper { position: fixed; diff --git a/components/modal/metadata/metadata.json b/components/modal/metadata/metadata.json index dab6de14f2..b33dac361e 100644 --- a/components/modal/metadata/metadata.json +++ b/components/modal/metadata/metadata.json @@ -47,22 +47,9 @@ "--spectrum-animation-ease-in", "--spectrum-animation-ease-out", "--spectrum-background-layer-2-color", - "--spectrum-corner-radius-100", - "--spectrum-dialog-confirm-entry-animation-distance" - ], - "system-theme": [ - "--system-modal-background-color", - "--system-modal-confirm-border-radius", - "--system-modal-confirm-entry-animation-delay", - "--system-modal-confirm-entry-animation-distance", - "--system-modal-confirm-entry-animation-duration", - "--system-modal-confirm-exit-animation-delay", - "--system-modal-confirm-exit-animation-duration", - "--system-modal-fullscreen-margin", - "--system-modal-max-height", - "--system-modal-max-width", - "--system-modal-transition-animation-duration" + "--spectrum-corner-radius-100" ], + "system-theme": ["--system-modal-background-color"], "passthroughs": [], "high-contrast": [] } diff --git a/components/modal/themes/spectrum-two.css b/components/modal/themes/spectrum-two.css index f1739fc332..c31756dcda 100644 --- a/components/modal/themes/spectrum-two.css +++ b/components/modal/themes/spectrum-two.css @@ -13,20 +13,6 @@ @container style(--system: spectrum) { .spectrum-Modal { - /* Bug: this must be 0ms, not 0 */ - --spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0); - --spectrum-modal-confirm-entry-animation-distance: var(--spectrum-dialog-confirm-entry-animation-distance); - - /* Distance between top and bottom of modal and edge of window for fullscreen modal */ - --spectrum-modal-fullscreen-margin: 32px; - --spectrum-modal-max-height: 90vh; - --spectrum-modal-max-width: 90%; - --spectrum-modal-background-color: var(--spectrum-background-layer-2-color); - --spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100); - --spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500); - --spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200); - --spectrum-modal-transition-animation-duration: var(--spectrum-animation-duration-100); } } diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css index 32f824cf90..f571255699 100644 --- a/components/opacitycheckerboard/index.css +++ b/components/opacitycheckerboard/index.css @@ -11,7 +11,14 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; + @import "./themes/spectrum-two.css"; + +.spectrum-OpacityCheckerboard { + --spectrum-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark); + --spectrum-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light); + --spectrum-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); + --spectrum-opacity-checkerboard-position: left top; +} .spectrum-OpacityCheckerboard { background: repeating-conic-gradient(var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-light)) 0% 25%, var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-dark)) 0% 50%) var(--mod-opacity-checkerboard-position, var(--spectrum-opacity-checkerboard-position)) / calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2) calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2); diff --git a/components/opacitycheckerboard/metadata/metadata.json b/components/opacitycheckerboard/metadata/metadata.json index f1e74c1150..a47a1f04bb 100644 --- a/components/opacitycheckerboard/metadata/metadata.json +++ b/components/opacitycheckerboard/metadata/metadata.json @@ -17,12 +17,7 @@ "--spectrum-opacity-checkerboard-square-size" ], "global": [], - "system-theme": [ - "--system-opacity-checkerboard-dark", - "--system-opacity-checkerboard-light", - "--system-opacity-checkerboard-position", - "--system-opacity-checkerboard-size" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/opacitycheckerboard/themes/spectrum-two.css b/components/opacitycheckerboard/themes/spectrum-two.css index 23b4e5c4ee..3b48a570c2 100644 --- a/components/opacitycheckerboard/themes/spectrum-two.css +++ b/components/opacitycheckerboard/themes/spectrum-two.css @@ -10,12 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-OpacityCheckerboard { - --spectrum-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark); - --spectrum-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light); - --spectrum-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); - --spectrum-opacity-checkerboard-position: left top; - } -} diff --git a/components/pagination/index.css b/components/pagination/index.css index 7766050d0c..41253806e4 100644 --- a/components/pagination/index.css +++ b/components/pagination/index.css @@ -14,6 +14,12 @@ @import "./themes/spectrum-two.css"; .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); + &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } diff --git a/components/pagination/metadata/metadata.json b/components/pagination/metadata/metadata.json index 9391f8c40b..e69042686e 100644 --- a/components/pagination/metadata/metadata.json +++ b/components/pagination/metadata/metadata.json @@ -36,13 +36,7 @@ "--spectrum-logical-rotation", "--spectrum-neutral-subdued-content-color-default" ], - "system-theme": [ - "--system-pagination-counter-color", - "--system-pagination-counter-font-size", - "--system-pagination-counter-line-height", - "--system-pagination-counter-margin-inline-start", - "--system-pagination-page-button-inline-spacing" - ], + "system-theme": [], "passthroughs": ["--mod-textfield-min-width", "--mod-textfield-width"], "high-contrast": [] } diff --git a/components/pagination/themes/spectrum-two.css b/components/pagination/themes/spectrum-two.css index 01cdd4e974..3b48a570c2 100644 --- a/components/pagination/themes/spectrum-two.css +++ b/components/pagination/themes/spectrum-two.css @@ -10,13 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-Pagination { - --spectrum-pagination-counter-margin-inline-start: var(--spectrum-pagination-item-inline-spacing); - --spectrum-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing); - --spectrum-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-pagination-counter-font-size: var(--spectrum-font-size-100); - --spectrum-pagination-counter-line-height: var(--spectrum-line-height-100); - } -} diff --git a/components/picker/index.css b/components/picker/index.css index 9f796279b4..dbe348e008 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -11,8 +11,140 @@ * governing permissions and limitations under the License. */ -@import "@spectrum-css/commons/basebutton.css"; @import "./themes/spectrum-two.css"; +@import "@spectrum-css/commons/basebutton.css"; + +.spectrum-Picker { + /* font */ + --spectrum-picker-font-size: var(--spectrum-font-size-100); + --spectrum-picker-font-weight: var(--spectrum-regular-font-weight); + --spectrum-picker-placeholder-font-style: var(--spectrum-default-font-style); + --spectrum-picker-line-height: var(--spectrum-line-height-100); + + /* height */ + --spectrum-picker-block-size: var(--spectrum-component-height-100); + --spectrum-picker-inline-size: var(--spectrum-field-width); + + /* border */ + --spectrum-picker-border-radius: var(--spectrum-corner-radius-100); + + /* spacing */ + --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet); + --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component); + + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium); + --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); + --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet); + + /* 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-Popover--bottom.is-open { + --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium); + } +} + +.spectrum-Picker--sizeS { + --spectrum-picker-font-size: var(--spectrum-font-size-75); + --spectrum-picker-block-size: var(--spectrum-component-height-75); + --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); + --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); + + & + .spectrum-Popover--bottom.is-open { + --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small); + } +} + +.spectrum-Picker--sizeL { + --spectrum-picker-font-size: var(--spectrum-font-size-200); + --spectrum-picker-block-size: var(--spectrum-component-height-200); + --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); + --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); + + & + .spectrum-Popover--bottom.is-open { + --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large); + } +} + +.spectrum-Picker--sizeXL { + --spectrum-picker-font-size: var(--spectrum-font-size-300); + --spectrum-picker-block-size: var(--spectrum-component-height-300); + --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); + --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); + + & + .spectrum-Popover--bottom.is-open { + --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large); + } +} /* Windows high contrast mode */ @media (forced-colors: active) { @@ -52,7 +184,6 @@ 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))); @@ -68,7 +199,10 @@ border-style: solid; border-radius: var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)); - transition: background-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), box-shadow var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), border-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; + transition: + background-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), + box-shadow var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), + border-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default))); diff --git a/components/picker/metadata/metadata.json b/components/picker/metadata/metadata.json index dfbe28dddd..cba044ebf5 100644 --- a/components/picker/metadata/metadata.json +++ b/components/picker/metadata/metadata.json @@ -20,6 +20,12 @@ ".spectrum-Picker--quiet:focus-visible:after", ".spectrum-Picker--quiet:hover", ".spectrum-Picker--sideLabel", + ".spectrum-Picker--sizeL", + ".spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open", + ".spectrum-Picker--sizeS", + ".spectrum-Picker--sizeS + .spectrum-Popover--bottom.is-open", + ".spectrum-Picker--sizeXL", + ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom.is-open", ".spectrum-Picker-label", ".spectrum-Picker-label ~ .spectrum-Picker-menuIcon", ".spectrum-Picker-label.is-placeholder", @@ -54,12 +60,6 @@ ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .spectrum-Picker-menuIcon", ".spectrum-Picker.is-placeholder:active .spectrum-Picker-label", ".spectrum-Picker.is-placeholder:focus-visible", - ".spectrum-Picker.spectrum-Picker--sizeL", - ".spectrum-Picker.spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open", - ".spectrum-Picker.spectrum-Picker--sizeS", - ".spectrum-Picker.spectrum-Picker--sizeS + .spectrum-Popover--bottom.is-open", - ".spectrum-Picker.spectrum-Picker--sizeXL", - ".spectrum-Picker.spectrum-Picker--sizeXL + .spectrum-Popover--bottom.is-open", ".spectrum-Picker::-moz-focus-inner", ".spectrum-Picker:active", ".spectrum-Picker:active:after", @@ -302,109 +302,19 @@ "--spectrum-text-to-visual-75" ], "system-theme": [ - "--system-picker-animation-duration", "--system-picker-background-color-active", "--system-picker-background-color-default", "--system-picker-background-color-default-open", - "--system-picker-background-color-disabled", "--system-picker-background-color-hover", "--system-picker-background-color-hover-open", "--system-picker-background-color-key-focus", - "--system-picker-block-size", "--system-picker-border-color-active", "--system-picker-border-color-default", "--system-picker-border-color-default-open", - "--system-picker-border-color-error-active", - "--system-picker-border-color-error-default", - "--system-picker-border-color-error-default-open", - "--system-picker-border-color-error-hover", - "--system-picker-border-color-error-hover-open", - "--system-picker-border-color-error-key-focus", "--system-picker-border-color-hover", "--system-picker-border-color-hover-open", "--system-picker-border-color-key-focus", - "--system-picker-border-radius", - "--system-picker-border-width", - "--system-picker-focus-indicator-color", - "--system-picker-focus-indicator-gap", - "--system-picker-focus-indicator-thickness", - "--system-picker-font-color-active", - "--system-picker-font-color-default", - "--system-picker-font-color-default-open", - "--system-picker-font-color-disabled", - "--system-picker-font-color-hover", - "--system-picker-font-color-hover-open", - "--system-picker-font-color-key-focus", - "--system-picker-font-size", - "--system-picker-font-weight", - "--system-picker-icon-color-active", - "--system-picker-icon-color-default", - "--system-picker-icon-color-default-open", - "--system-picker-icon-color-disabled", - "--system-picker-icon-color-error", - "--system-picker-icon-color-hover", - "--system-picker-icon-color-hover-open", - "--system-picker-icon-color-key-focus", - "--system-picker-inline-size", - "--system-picker-line-height", - "--system-picker-next-to-popover-bottom-open-spacing-to-popover", - "--system-picker-placeholder-font-style", - "--system-picker-size-l-block-size", - "--system-picker-size-l-font-size", - "--system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover", - "--system-picker-size-l-spacing-bottom-to-text", - "--system-picker-size-l-spacing-edge-to-disclosure-icon", - "--system-picker-size-l-spacing-edge-to-text", - "--system-picker-size-l-spacing-icon-to-disclosure-icon", - "--system-picker-size-l-spacing-label-to-quiet", - "--system-picker-size-l-spacing-text-to-icon", - "--system-picker-size-l-spacing-text-to-icon-inline-end", - "--system-picker-size-l-spacing-top-to-alert-icon", - "--system-picker-size-l-spacing-top-to-disclosure-icon", - "--system-picker-size-l-spacing-top-to-progress-circle", - "--system-picker-size-l-spacing-top-to-text", - "--system-picker-size-s-block-size", - "--system-picker-size-s-font-size", - "--system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover", - "--system-picker-size-s-spacing-bottom-to-text", - "--system-picker-size-s-spacing-edge-to-disclosure-icon", - "--system-picker-size-s-spacing-edge-to-text", - "--system-picker-size-s-spacing-icon-to-disclosure-icon", - "--system-picker-size-s-spacing-label-to-quiet", - "--system-picker-size-s-spacing-text-to-icon", - "--system-picker-size-s-spacing-text-to-icon-inline-end", - "--system-picker-size-s-spacing-top-to-alert-icon", - "--system-picker-size-s-spacing-top-to-disclosure-icon", - "--system-picker-size-s-spacing-top-to-progress-circle", - "--system-picker-size-s-spacing-top-to-text", - "--system-picker-size-xl-block-size", - "--system-picker-size-xl-font-size", - "--system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover", - "--system-picker-size-xl-spacing-bottom-to-text", - "--system-picker-size-xl-spacing-edge-to-disclosure-icon", - "--system-picker-size-xl-spacing-edge-to-text", - "--system-picker-size-xl-spacing-icon-to-disclosure-icon", - "--system-picker-size-xl-spacing-label-to-quiet", - "--system-picker-size-xl-spacing-text-to-icon", - "--system-picker-size-xl-spacing-text-to-icon-inline-end", - "--system-picker-size-xl-spacing-top-to-alert-icon", - "--system-picker-size-xl-spacing-top-to-disclosure-icon", - "--system-picker-size-xl-spacing-top-to-progress-circle", - "--system-picker-size-xl-spacing-top-to-text", - "--system-picker-spacing-bottom-to-text", - "--system-picker-spacing-edge-to-disclosure-icon", - "--system-picker-spacing-edge-to-disclosure-icon-quiet", - "--system-picker-spacing-edge-to-text", - "--system-picker-spacing-edge-to-text-quiet", - "--system-picker-spacing-icon-to-disclosure-icon", - "--system-picker-spacing-label-to", - "--system-picker-spacing-label-to-quiet", - "--system-picker-spacing-text-to-icon", - "--system-picker-spacing-text-to-icon-inline-end", - "--system-picker-spacing-top-to-alert-icon", - "--system-picker-spacing-top-to-disclosure-icon", - "--system-picker-spacing-top-to-progress-circle", - "--system-picker-spacing-top-to-text" + "--system-picker-border-width" ], "passthroughs": [ "--mod-button-animation-duration", diff --git a/components/picker/themes/spectrum-two.css b/components/picker/themes/spectrum-two.css index 70f51f301d..413f909b36 100644 --- a/components/picker/themes/spectrum-two.css +++ b/components/picker/themes/spectrum-two.css @@ -15,9 +15,9 @@ .spectrum-Picker { --spectrum-picker-background-color-default: var(--spectrum-gray-50); --spectrum-picker-background-color-default-open: var(--spectrum-gray-100); - --spectrum-picker-background-color-active: var(--spectrum-gray-200); --spectrum-picker-background-color-hover: var(--spectrum-gray-100); --spectrum-picker-background-color-hover-open: var(--spectrum-gray-100); + --spectrum-picker-background-color-active: var(--spectrum-gray-200); --spectrum-picker-background-color-key-focus: var(--spectrum-gray-100); --spectrum-picker-border-color-default: var(--spectrum-gray-500); @@ -28,135 +28,5 @@ --spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); --spectrum-picker-border-width: var(--spectrum-border-width-100); - - /* font */ - --spectrum-picker-font-size: var(--spectrum-font-size-100); - --spectrum-picker-font-weight: var(--spectrum-regular-font-weight); - --spectrum-picker-placeholder-font-style: var(--spectrum-default-font-style); - --spectrum-picker-line-height: var(--spectrum-line-height-100); - - /* height */ - --spectrum-picker-block-size: var(--spectrum-component-height-100); - --spectrum-picker-inline-size: var(--spectrum-field-width); - - /* border */ - --spectrum-picker-border-radius: var(--spectrum-corner-radius-100); - - /* spacing */ - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet); - --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component); - - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); - --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet); - - /* 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-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium); - } - - &.spectrum-Picker--sizeS { - --spectrum-picker-font-size: var(--spectrum-font-size-75); - --spectrum-picker-block-size: var(--spectrum-component-height-75); - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small); - } - } - - &.spectrum-Picker--sizeL { - --spectrum-picker-font-size: var(--spectrum-font-size-200); - --spectrum-picker-block-size: var(--spectrum-component-height-200); - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large); - } - } - - &.spectrum-Picker--sizeXL { - --spectrum-picker-font-size: var(--spectrum-font-size-300); - --spectrum-picker-block-size: var(--spectrum-component-height-300); - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large); - } - } } } diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css index 467a3d9702..b24208778d 100644 --- a/components/pickerbutton/index.css +++ b/components/pickerbutton/index.css @@ -14,6 +14,31 @@ @import "./themes/spectrum-two.css"; .spectrum-PickerButton { + --spectrum-picker-button-height: var(--spectrum-component-height-100); + --spectrum-picker-button-width: var(--spectrum-component-height-100); + --spectrum-picker-button-gap: var(--spectrum-text-to-visual-50); + + --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); + + --spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default); + --spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-picker-button-font-color: var(--spectrum-neutral-content-color-default); + --spectrum-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-picker-button-font-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-picker-button-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-picker-button-font-style: var(--spectrum-default-font-style); + --spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-picker-button-font-size: var(--spectrum-font-size-100); + + --spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100); + border-style: none; background-color: transparent; block-size: var(--mod-picker-button-width, var(--spectrum-picker-button-width)); @@ -69,20 +94,19 @@ } } - &:disabled, - &.is-disabled { - --mod-picker-button-background-color: var(--mod-picker-button-background-color-disabled, var(--spectrum-picker-button-background-color-disabled)); - --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-picker-button-background-color-hover-disabled)); - --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-picker-button-background-color-down-disabled)); - --mod-picker-button-border-color: var(--mod-picker-button-border-color-disabled, var(--spectrum-picker-button-border-color-disabled)); + &: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-picker-button-font-color-disabled)); - --mod-picker-button-font-color-hover: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-picker-button-font-color-hover-disabled)); - --mod-picker-button-font-color-down: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-picker-button-font-color-down-disabled)); + --mod-picker-button-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-picker-button-icon-color-disabled)); - --mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-picker-button-icon-color-hover-disabled)); - --mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-picker-button-icon-color-down-disabled)); + --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 { @@ -90,12 +114,32 @@ --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent); --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent); --mod-picker-button-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent); + --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet, transparent); + } - &:disabled, - &.is-disabled { - --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent); - } + &.spectrum-PickerButton--sizeS { + --spectrum-picker-button-height: var(--spectrum-component-height-75); + --spectrum-picker-button-width: var(--spectrum-component-height-75); + --spectrum-picker-button-label-padding: var(--spectrum-spacing-75); + --spectrum-picker-button-font-size: var(--spectrum-font-size-75); + --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75); + } + + &.spectrum-PickerButton--sizeL { + --spectrum-picker-button-height: var(--spectrum-component-height-200); + --spectrum-picker-button-width: var(--spectrum-component-height-200); + --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200); + --spectrum-picker-button-font-size: var(--spectrum-font-size-200); + --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200); + } + + &.spectrum-PickerButton--sizeXL { + --spectrum-picker-button-height: var(--spectrum-component-height-300); + --spectrum-picker-button-width: var(--spectrum-component-height-300); + --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300); + --spectrum-picker-button-font-size: var(--spectrum-font-size-300); + --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300); } } diff --git a/components/pickerbutton/metadata/metadata.json b/components/pickerbutton/metadata/metadata.json index c56412da6d..23322f00c5 100644 --- a/components/pickerbutton/metadata/metadata.json +++ b/components/pickerbutton/metadata/metadata.json @@ -14,7 +14,6 @@ ".spectrum-PickerButton-fill", ".spectrum-PickerButton-icon", ".spectrum-PickerButton-label", - ".spectrum-PickerButton.is-disabled", ".spectrum-PickerButton.is-focused .spectrum-PickerButton-fill", ".spectrum-PickerButton.is-focused .spectrum-PickerButton-icon", ".spectrum-PickerButton.is-focused .spectrum-PickerButton-label", @@ -25,8 +24,6 @@ ".spectrum-PickerButton.is-open .spectrum-PickerButton-icon", ".spectrum-PickerButton.is-open .spectrum-PickerButton-label", ".spectrum-PickerButton.spectrum-PickerButton--quiet", - ".spectrum-PickerButton.spectrum-PickerButton--quiet.is-disabled", - ".spectrum-PickerButton.spectrum-PickerButton--quiet:disabled", ".spectrum-PickerButton.spectrum-PickerButton--sizeL", ".spectrum-PickerButton.spectrum-PickerButton--sizeS", ".spectrum-PickerButton.spectrum-PickerButton--sizeXL", @@ -93,14 +90,10 @@ "component": [ "--spectrum-picker-button-background-animation-duration", "--spectrum-picker-button-background-color", - "--spectrum-picker-button-background-color-disabled", "--spectrum-picker-button-background-color-down", - "--spectrum-picker-button-background-color-down-disabled", "--spectrum-picker-button-background-color-hover", - "--spectrum-picker-button-background-color-hover-disabled", "--spectrum-picker-button-background-color-key-focus", "--spectrum-picker-button-border-color", - "--spectrum-picker-button-border-color-disabled", "--spectrum-picker-button-border-radius", "--spectrum-picker-button-border-radius-rounded", "--spectrum-picker-button-border-radius-rounded-sided", @@ -108,11 +101,8 @@ "--spectrum-picker-button-border-width", "--spectrum-picker-button-fill-padding", "--spectrum-picker-button-font-color", - "--spectrum-picker-button-font-color-disabled", "--spectrum-picker-button-font-color-down", - "--spectrum-picker-button-font-color-down-disabled", "--spectrum-picker-button-font-color-hover", - "--spectrum-picker-button-font-color-hover-disabled", "--spectrum-picker-button-font-color-key-focus", "--spectrum-picker-button-font-family", "--spectrum-picker-button-font-size", @@ -121,11 +111,8 @@ "--spectrum-picker-button-gap", "--spectrum-picker-button-height", "--spectrum-picker-button-icon-color", - "--spectrum-picker-button-icon-color-disabled", "--spectrum-picker-button-icon-color-down", - "--spectrum-picker-button-icon-color-down-disabled", "--spectrum-picker-button-icon-color-hover", - "--spectrum-picker-button-icon-color-hover-disabled", "--spectrum-picker-button-icon-color-key-focus", "--spectrum-picker-button-label-padding", "--spectrum-picker-button-padding", @@ -140,7 +127,6 @@ "--spectrum-component-height-300", "--spectrum-component-height-75", "--spectrum-corner-radius-100", - "--spectrum-corner-radius-500", "--spectrum-default-font-style", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", @@ -167,60 +153,15 @@ "--spectrum-text-to-visual-50" ], "system-theme": [ - "--system-picker-button-background-animation-duration", "--system-picker-button-background-color", - "--system-picker-button-background-color-disabled", "--system-picker-button-background-color-down", - "--system-picker-button-background-color-down-disabled", "--system-picker-button-background-color-hover", - "--system-picker-button-background-color-hover-disabled", "--system-picker-button-background-color-key-focus", "--system-picker-button-border-color", - "--system-picker-button-border-color-disabled", "--system-picker-button-border-radius", - "--system-picker-button-border-radius-rounded", "--system-picker-button-border-radius-rounded-sided", "--system-picker-button-border-radius-sided", - "--system-picker-button-border-width", - "--system-picker-button-fill-padding", - "--system-picker-button-font-color", - "--system-picker-button-font-color-disabled", - "--system-picker-button-font-color-down", - "--system-picker-button-font-color-down-disabled", - "--system-picker-button-font-color-hover", - "--system-picker-button-font-color-hover-disabled", - "--system-picker-button-font-color-key-focus", - "--system-picker-button-font-family", - "--system-picker-button-font-size", - "--system-picker-button-font-style", - "--system-picker-button-font-weight", - "--system-picker-button-gap", - "--system-picker-button-height", - "--system-picker-button-icon-color", - "--system-picker-button-icon-color-disabled", - "--system-picker-button-icon-color-down", - "--system-picker-button-icon-color-down-disabled", - "--system-picker-button-icon-color-hover", - "--system-picker-button-icon-color-hover-disabled", - "--system-picker-button-icon-color-key-focus", - "--system-picker-button-label-padding", - "--system-picker-button-padding", - "--system-picker-button-size-l-fill-padding", - "--system-picker-button-size-l-font-size", - "--system-picker-button-size-l-height", - "--system-picker-button-size-l-label-padding", - "--system-picker-button-size-l-width", - "--system-picker-button-size-s-fill-padding", - "--system-picker-button-size-s-font-size", - "--system-picker-button-size-s-height", - "--system-picker-button-size-s-label-padding", - "--system-picker-button-size-s-width", - "--system-picker-button-size-xl-fill-padding", - "--system-picker-button-size-xl-font-size", - "--system-picker-button-size-xl-height", - "--system-picker-button-size-xl-label-padding", - "--system-picker-button-size-xl-width", - "--system-picker-button-width" + "--system-picker-button-border-width" ], "passthroughs": [], "high-contrast": [] diff --git a/components/pickerbutton/themes/spectrum-two.css b/components/pickerbutton/themes/spectrum-two.css index 1df519607d..6cba1ef3df 100644 --- a/components/pickerbutton/themes/spectrum-two.css +++ b/components/pickerbutton/themes/spectrum-two.css @@ -23,69 +23,5 @@ --spectrum-picker-button-border-radius-rounded-sided: 0; --spectrum-picker-button-border-radius-sided: 0; --spectrum-picker-button-border-width: var(--spectrum-border-width-100); - - --spectrum-picker-button-height: var(--spectrum-component-height-100); - --spectrum-picker-button-width: var(--spectrum-component-height-100); - --spectrum-picker-button-gap: var(--spectrum-text-to-visual-50); - - --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50); - --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); - - --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-500); - - --spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default); - --spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-picker-button-font-color: var(--spectrum-neutral-content-color-default); - --spectrum-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-picker-button-font-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-picker-button-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-picker-button-font-style: var(--spectrum-default-font-style); - --spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-picker-button-font-size: var(--spectrum-font-size-100); - - --spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100); - - --spectrum-picker-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-picker-button-background-color-hover-disabled: var(--spectrum-disabled-background-color); - --spectrum-picker-button-background-color-down-disabled: var(--spectrum-disabled-background-color); - --spectrum-picker-button-border-color-disabled: var(--spectrum-disabled-background-color); - - --spectrum-picker-button-font-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-picker-button-font-color-hover-disabled: var(--spectrum-disabled-content-color); - --spectrum-picker-button-font-color-down-disabled: var(--spectrum-disabled-content-color); - - --spectrum-picker-button-icon-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-picker-button-icon-color-hover-disabled: var(--spectrum-disabled-content-color); - --spectrum-picker-button-icon-color-down-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-PickerButton--sizeS { - --spectrum-picker-button-height: var(--spectrum-component-height-75); - --spectrum-picker-button-width: var(--spectrum-component-height-75); - --spectrum-picker-button-label-padding: var(--spectrum-spacing-75); - --spectrum-picker-button-font-size: var(--spectrum-font-size-75); - --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75); - } - - &.spectrum-PickerButton--sizeL { - --spectrum-picker-button-height: var(--spectrum-component-height-200); - --spectrum-picker-button-width: var(--spectrum-component-height-200); - --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200); - --spectrum-picker-button-font-size: var(--spectrum-font-size-200); - --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200); - } - - &.spectrum-PickerButton--sizeXL { - --spectrum-picker-button-height: var(--spectrum-component-height-300); - --spectrum-picker-button-width: var(--spectrum-component-height-300); - --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300); - --spectrum-picker-button-font-size: var(--spectrum-font-size-300); - --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300); - } } } diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css index 9825d91d86..c62cef119d 100644 --- a/components/pickerbutton/themes/spectrum.css +++ b/components/pickerbutton/themes/spectrum.css @@ -21,6 +21,7 @@ --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-radius-rounded: var(--spectrum-corner-radius-200); } } diff --git a/components/popover/index.css b/components/popover/index.css index 4978d4e7cf..9176923959 100644 --- a/components/popover/index.css +++ b/components/popover/index.css @@ -11,8 +11,38 @@ * governing permissions and limitations under the License. */ -@import "@spectrum-css/commons/overlay.css"; @import "./themes/spectrum-two.css"; +@import "@spectrum-css/commons/overlay.css"; + +.spectrum-Popover { + /* animation distance is equal to and responsible for popover offset */ + --spectrum-popover-animation-distance: var(--spectrum-spacing-100); + + --spectrum-popover-background-color: var(--spectrum-background-layer-2-color); + --spectrum-popover-border-color: var(--spectrum-gray-400); + + /* popover inner padding */ + --spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area); + + /* popover drop shadow */ + --spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color); + + /* popover corner radius */ + --spectrum-popover-corner-radius: var(--spectrum-corner-radius-100); + + /* pointer tip dimensions */ + --spectrum-popover-pointer-width: var(--spectrum-popover-tip-width); + --spectrum-popover-pointer-height: var(--spectrum-popover-tip-height); + + /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ + --spectrum-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + (var(--spectrum-popover-tip-width) / 2)); + + /* pointer tip - spacing to edge will center pointer to source - apply in markup by setting '--spectrum-popover-pointer-edge-offset' value == half of source */ + --spectrum-popover-pointer-edge-spacing: calc(var(--spectrum-popover-pointer-edge-offset) - (var(--spectrum-popover-tip-width) / 2)); +} /* windows high contrast mode */ @media (forced-colors: active) { @@ -22,9 +52,8 @@ } .spectrum-Popover { - @extend %spectrum-overlay; - --spectrum-popover-filter: drop-shadow(var(--mod-popover-shadow-horizontal, var(--spectrum-popover-shadow-horizontal)) var(--mod-popover-shadow-vertical, var(--spectrum-popover-shadow-vertical)) var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur)) var(--mod-popover-shadow-color, var(--spectrum-popover-shadow-color))); + @extend %spectrum-overlay; box-sizing: border-box; position: absolute; diff --git a/components/popover/metadata/metadata.json b/components/popover/metadata/metadata.json index 57ebdaeda9..a2590a8af6 100644 --- a/components/popover/metadata/metadata.json +++ b/components/popover/metadata/metadata.json @@ -148,22 +148,7 @@ "--spectrum-gray-400", "--spectrum-spacing-100" ], - "system-theme": [ - "--system-popover-animation-distance", - "--system-popover-background-color", - "--system-popover-border-color", - "--system-popover-border-width", - "--system-popover-content-area-spacing-vertical", - "--system-popover-corner-radius", - "--system-popover-pointer-edge-offset", - "--system-popover-pointer-edge-spacing", - "--system-popover-pointer-height", - "--system-popover-pointer-width", - "--system-popover-shadow-blur", - "--system-popover-shadow-color", - "--system-popover-shadow-horizontal", - "--system-popover-shadow-vertical" - ], + "system-theme": ["--system-popover-border-width"], "passthroughs": [], "high-contrast": [ "--highcontrast-popover-background-color", diff --git a/components/popover/themes/spectrum-two.css b/components/popover/themes/spectrum-two.css index 5a227df273..80c0cdc94c 100644 --- a/components/popover/themes/spectrum-two.css +++ b/components/popover/themes/spectrum-two.css @@ -14,33 +14,5 @@ @container style(--system: spectrum) { .spectrum-Popover { --spectrum-popover-border-width: var(--spectrum-border-width-100); - - /* animation distance is equal to and responsible for popover offset */ - --spectrum-popover-animation-distance: var(--spectrum-spacing-100); - - --spectrum-popover-background-color: var(--spectrum-background-layer-2-color); - --spectrum-popover-border-color: var(--spectrum-gray-400); - - /* popover inner padding */ - --spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area); - - /* popover drop shadow */ - --spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color); - - /* popover corner radius */ - --spectrum-popover-corner-radius: var(--spectrum-corner-radius-100); - - /* pointer tip dimensions */ - --spectrum-popover-pointer-width: var(--spectrum-popover-tip-width); - --spectrum-popover-pointer-height: var(--spectrum-popover-tip-height); - - /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ - --spectrum-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + (var(--spectrum-popover-tip-width) / 2)); - - /* pointer tip - spacing to edge will center pointer to source - apply in markup by setting '--spectrum-popover-pointer-edge-offset' value == half of source */ - --spectrum-popover-pointer-edge-spacing: calc(var(--spectrum-popover-pointer-edge-offset) - (var(--spectrum-popover-tip-width) / 2)); } } diff --git a/components/progressbar/index.css b/components/progressbar/index.css index e474042495..4f82018943 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -14,14 +14,127 @@ @import "./themes/spectrum-two.css"; .spectrum-ProgressBar { - /* @passthrough */ - --mod-fieldlabel-font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size)); + /* Static tokens */ + --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); + --spectrum-progressbar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); + --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-progressbar-fill-size-indeterminate: 70%; + + /* --spectrum-global-dimension-static-size-2400 */ + --spectrum-progressbar-size-2400: 192px; + + /* --spectrum-global-dimension-static-size-2500 */ + --spectrum-progressbar-size-2500: 200px; + + /* --spectrum-global-dimension-static-size-2800 */ + --spectrum-progressbar-size-2800: 224px; + + /* Size */ + --spectrum-progressbar-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100); + + --spectrum-progressbar-min-size: var(--spectrum-progress-bar-minimum-width); + --spectrum-progressbar-max-size: var(--spectrum-progress-bar-maximum-width); + + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-medium); + --spectrum-progressbar-line-height: var(--spectrum-line-height-100); + + /* Spacing */ + --spectrum-progressbar-spacing-label-to-progressbar: var(--spectrum-spacing-75); + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-progressbar-spacing-label-to-text: var(--spectrum-spacing-200); + + /* Color */ + --spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default); + --spectrum-progressbar-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-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-ProgressBar--sizeS, +.spectrum-Meter--sizeS { + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); + + --spectrum-progressbar-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small); + + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); +} + +.spectrum-ProgressBar--sizeM { + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); + + --spectrum-progressbar-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); + + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); +} + +.spectrum-ProgressBar--sizeL, +.spectrum-Meter--sizeL { + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500); + + --spectrum-progressbar-font-size: var(--spectrum-font-size-100); + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); + + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); +} + +.spectrum-ProgressBar--sizeXL { + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800); + + --spectrum-progressbar-font-size: var(--spectrum-font-size-200); + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large); + + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300); +} + +.spectrum-Meter { + --spectrum-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-inline-size)); + --spectrum-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-max-width)); + --spectrum-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-min-width)); + + /* Meter only supports size S and L */ + &.spectrum-Meter--sizeS { + --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-s); + } + + &.spectrum-Meter--sizeL { + --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-l); + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + } + + &.is-positive .spectrum-ProgressBar-fill { + background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive))); + } + + &.is-notice .spectrum-ProgressBar-fill { + background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice))); + } + + &.is-negative .spectrum-ProgressBar-fill { + background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative))); + } +} + +.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)); @@ -37,13 +150,13 @@ line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height)); - color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color)); - &:lang(ja), &:lang(zh), &:lang(ko) { line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk)); } + + color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color)); } /* Label */ @@ -81,14 +194,6 @@ position: relative; animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate)); will-change: transform; - - animation-name: indeterminate-loop-ltr; - animation-duration: var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)); - animation-iteration-count: infinite; -} - -.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl) { - animation-name: indeterminate-loop-rtl; } /* Variants */ @@ -133,6 +238,15 @@ } } +/* Animations */ +.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill { + 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; +} + @keyframes indeterminate-loop-ltr { from { transform: translate(calc(-1 * var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)))); @@ -157,7 +271,6 @@ .spectrum-ProgressBar-track { --highcontrast-progressbar-fill-color: ButtonText; --highcontrast-progressbar-track-color: ButtonFace; - forced-color-adjust: none; border: 1px solid ButtonText; } diff --git a/components/progressbar/metadata/metadata.json b/components/progressbar/metadata/metadata.json index a47fd7aa39..42578f8805 100644 --- a/components/progressbar/metadata/metadata.json +++ b/components/progressbar/metadata/metadata.json @@ -1,6 +1,14 @@ { "sourceFile": "index.css", "selectors": [ + ".spectrum-Meter", + ".spectrum-Meter--sizeL", + ".spectrum-Meter--sizeS", + ".spectrum-Meter.is-negative .spectrum-ProgressBar-fill", + ".spectrum-Meter.is-notice .spectrum-ProgressBar-fill", + ".spectrum-Meter.is-positive .spectrum-ProgressBar-fill", + ".spectrum-Meter.spectrum-Meter--sizeL", + ".spectrum-Meter.spectrum-Meter--sizeS", ".spectrum-ProgressBar", ".spectrum-ProgressBar .spectrum-ProgressBar-fill", ".spectrum-ProgressBar .spectrum-ProgressBar-label", @@ -18,11 +26,11 @@ ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label", ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage", ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track", + ".spectrum-ProgressBar--sizeL", + ".spectrum-ProgressBar--sizeM", + ".spectrum-ProgressBar--sizeS", + ".spectrum-ProgressBar--sizeXL", ".spectrum-ProgressBar-track", - ".spectrum-ProgressBar.spectrum-ProgressBar--sizeL", - ".spectrum-ProgressBar.spectrum-ProgressBar--sizeM", - ".spectrum-ProgressBar.spectrum-ProgressBar--sizeS", - ".spectrum-ProgressBar.spectrum-ProgressBar--sizeXL", ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill", ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label", ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage", @@ -35,6 +43,9 @@ "--mod-progressbar-animation-duration-indeterminate", "--mod-progressbar-animation-ease-in-out-indeterminate", "--mod-progressbar-fill-color", + "--mod-progressbar-fill-color-negative", + "--mod-progressbar-fill-color-notice", + "--mod-progressbar-fill-color-positive", "--mod-progressbar-fill-color-white", "--mod-progressbar-fill-size-indeterminate", "--mod-progressbar-font-size", @@ -57,11 +68,15 @@ "--spectrum-progress-bar-minimum-width", "--spectrum-progress-bar-thickness-extra-large", "--spectrum-progress-bar-thickness-large", + "--spectrum-progress-bar-thickness-medium", "--spectrum-progress-bar-thickness-small", "--spectrum-progressbar-animation-duration-indeterminate", "--spectrum-progressbar-animation-ease-in-out-indeterminate", "--spectrum-progressbar-corner-radius", "--spectrum-progressbar-fill-color", + "--spectrum-progressbar-fill-color-negative", + "--spectrum-progressbar-fill-color-notice", + "--spectrum-progressbar-fill-color-positive", "--spectrum-progressbar-fill-color-white", "--spectrum-progressbar-fill-size-indeterminate", "--spectrum-progressbar-font-size", @@ -87,6 +102,7 @@ "--spectrum-animation-duration-2000", "--spectrum-animation-ease-in-out", "--spectrum-cjk-line-height-100", + "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", @@ -96,54 +112,34 @@ "--spectrum-font-size-75", "--spectrum-gray-200", "--spectrum-line-height-100", + "--spectrum-meter-default-width", + "--spectrum-meter-inline-size", + "--spectrum-meter-max-width", + "--spectrum-meter-maximum-width", + "--spectrum-meter-min-width", + "--spectrum-meter-minimum-width", + "--spectrum-meter-thickness-l", + "--spectrum-meter-thickness-large", + "--spectrum-meter-thickness-s", + "--spectrum-meter-thickness-small", + "--spectrum-negative-visual-color", "--spectrum-neutral-content-color-default", + "--spectrum-notice-visual-color", + "--spectrum-positive-visual-color", "--spectrum-spacing-200", "--spectrum-spacing-75", "--spectrum-transparent-white-400", "--spectrum-white" ], "system-theme": [ - "--system-progress-bar-animation-duration-indeterminate", - "--system-progress-bar-animation-ease-in-out-indeterminate", - "--system-progress-bar-corner-radius", - "--system-progress-bar-fill-color", - "--system-progress-bar-fill-color-white", - "--system-progress-bar-fill-size-indeterminate", - "--system-progress-bar-font-size", - "--system-progress-bar-label-and-value-white", - "--system-progress-bar-line-height", - "--system-progress-bar-line-height-cjk", - "--system-progress-bar-max-size", - "--system-progress-bar-min-size", - "--system-progress-bar-size-2400", - "--system-progress-bar-size-2500", - "--system-progress-bar-size-2800", - "--system-progress-bar-size-default", - "--system-progress-bar-size-l-font-size", - "--system-progress-bar-size-l-size-default", - "--system-progress-bar-size-l-spacing-top-to-text", - "--system-progress-bar-size-l-thickness", - "--system-progress-bar-size-m-font-size", - "--system-progress-bar-size-m-size-default", - "--system-progress-bar-size-m-spacing-top-to-text", - "--system-progress-bar-size-m-thickness", - "--system-progress-bar-size-s-font-size", - "--system-progress-bar-size-s-size-default", - "--system-progress-bar-size-s-spacing-top-to-text", - "--system-progress-bar-size-s-thickness", - "--system-progress-bar-size-xl-font-size", - "--system-progress-bar-size-xl-size-default", - "--system-progress-bar-size-xl-spacing-top-to-text", - "--system-progress-bar-size-xl-thickness", - "--system-progress-bar-spacing-label-to", - "--system-progress-bar-spacing-label-to-text", - "--system-progress-bar-spacing-top-to-text", - "--system-progress-bar-text-color", - "--system-progress-bar-thickness", "--system-progress-bar-track-color", "--system-progress-bar-track-color-white" ], - "passthroughs": ["--mod-fieldlabel-font-size"], + "passthroughs": [ + "--mod-meter-inline-size", + "--mod-meter-max-width", + "--mod-meter-min-width" + ], "high-contrast": [ "--highcontrast-progressbar-fill-color", "--highcontrast-progressbar-track-color" diff --git a/components/progressbar/metadata/mods.md b/components/progressbar/metadata/mods.md index c7cef01ad7..835277bcda 100644 --- a/components/progressbar/metadata/mods.md +++ b/components/progressbar/metadata/mods.md @@ -3,6 +3,9 @@ | `--mod-progressbar-animation-duration-indeterminate` | | `--mod-progressbar-animation-ease-in-out-indeterminate` | | `--mod-progressbar-fill-color` | +| `--mod-progressbar-fill-color-negative` | +| `--mod-progressbar-fill-color-notice` | +| `--mod-progressbar-fill-color-positive` | | `--mod-progressbar-fill-color-white` | | `--mod-progressbar-fill-size-indeterminate` | | `--mod-progressbar-font-size` | diff --git a/components/progressbar/themes/spectrum-two.css b/components/progressbar/themes/spectrum-two.css index 2b7326425c..3b705ef64c 100644 --- a/components/progressbar/themes/spectrum-two.css +++ b/components/progressbar/themes/spectrum-two.css @@ -13,77 +13,7 @@ @container style(--system: spectrum) { .spectrum-ProgressBar { - /* Static tokens */ - --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); - --spectrum-progressbar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); - --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100); - - --spectrum-progressbar-fill-size-indeterminate: 70%; - - /* --spectrum-global-dimension-static-size-2400 */ - --spectrum-progressbar-size-2400: 192px; - - /* --spectrum-global-dimension-static-size-2500 */ - --spectrum-progressbar-size-2500: 200px; - - /* --spectrum-global-dimension-static-size-2800 */ - --spectrum-progressbar-size-2800: 224px; - - /* Size */ - --spectrum-progressbar-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-line-height: var(--spectrum-line-height-100); - - /* Spacing */ - --spectrum-progressbar-spacing-label-to-progressbar: var(--spectrum-spacing-75); - --spectrum-progressbar-spacing-label-to-text: var(--spectrum-spacing-200); - - /* Color */ - --spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default); --spectrum-progressbar-track-color: var(--spectrum-gray-200); - --spectrum-progressbar-fill-color: var(--spectrum-accent-color-900); - --spectrum-progressbar-label-and-value-white: var(--spectrum-white); --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400); - --spectrum-progressbar-fill-color-white: var(--spectrum-white); - - &, - &.spectrum-ProgressBar--sizeM { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); - - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); - - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - } - - &.spectrum-ProgressBar--sizeS { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); - - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small); - - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - } - - &.spectrum-ProgressBar--sizeL { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500); - - --spectrum-progressbar-font-size: var(--spectrum-font-size-100); - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); - - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - } - - &.spectrum-ProgressBar--sizeXL { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800); - - --spectrum-progressbar-font-size: var(--spectrum-font-size-200); - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large); - - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300); - } } } diff --git a/components/progresscircle/animation.css b/components/progresscircle/animation.css new file mode 100644 index 0000000000..176d4da4c1 --- /dev/null +++ b/components/progresscircle/animation.css @@ -0,0 +1,510 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum-ProgressCircle--indeterminate-fill-submask-2 { + animation: 1s infinite linear spectrum-fill-mask-2; +} + +@keyframes spectrum-fill-mask-1 { + 0% { + transform: rotate(90deg); + } + + 1.69% { + transform: rotate(72.3deg); + } + + 3.39% { + transform: rotate(55.5deg); + } + + 5.08% { + transform: rotate(40.3deg); + } + + 6.78% { + transform: rotate(25deg); + } + + 8.47% { + transform: rotate(10.6deg); + } + + 10.17% { + transform: rotate(0deg); + } + + 11.86% { + transform: rotate(0deg); + } + + 13.56% { + transform: rotate(0deg); + } + + 15.25% { + transform: rotate(0deg); + } + + 16.95% { + transform: rotate(0deg); + } + + 18.64% { + transform: rotate(0deg); + } + + 20.34% { + transform: rotate(0deg); + } + + 22.03% { + transform: rotate(0deg); + } + + 23.73% { + transform: rotate(0deg); + } + + 25.42% { + transform: rotate(0deg); + } + + 27.12% { + transform: rotate(0deg); + } + + 28.81% { + transform: rotate(0deg); + } + + 30.51% { + transform: rotate(0deg); + } + + 32.2% { + transform: rotate(0deg); + } + + 33.9% { + transform: rotate(0deg); + } + + 35.59% { + transform: rotate(0deg); + } + + 37.29% { + transform: rotate(0deg); + } + + 38.98% { + transform: rotate(0deg); + } + + 40.68% { + transform: rotate(0deg); + } + + 42.37% { + transform: rotate(5.3deg); + } + + 44.07% { + transform: rotate(13.4deg); + } + + 45.76% { + transform: rotate(20.6deg); + } + + 47.46% { + transform: rotate(29deg); + } + + 49.15% { + transform: rotate(36.5deg); + } + + 50.85% { + transform: rotate(42.6deg); + } + + 52.54% { + transform: rotate(48.8deg); + } + + 54.24% { + transform: rotate(54.2deg); + } + + 55.93% { + transform: rotate(59.4deg); + } + + 57.63% { + transform: rotate(63.2deg); + } + + 59.32% { + transform: rotate(67.2deg); + } + + 61.02% { + transform: rotate(70.8deg); + } + + 62.71% { + transform: rotate(73.8deg); + } + + 64.41% { + transform: rotate(76.2deg); + } + + 66.1% { + transform: rotate(78.7deg); + } + + 67.8% { + transform: rotate(80.6deg); + } + + 69.49% { + transform: rotate(82.6deg); + } + + 71.19% { + transform: rotate(83.7deg); + } + + 72.88% { + transform: rotate(85deg); + } + + 74.58% { + transform: rotate(86.3deg); + } + + 76.27% { + transform: rotate(87deg); + } + + 77.97% { + transform: rotate(87.7deg); + } + + 79.66% { + transform: rotate(88.3deg); + } + + 81.36% { + transform: rotate(88.6deg); + } + + 83.05% { + transform: rotate(89.2deg); + } + + 84.75% { + transform: rotate(89.2deg); + } + + 86.44% { + transform: rotate(89.5deg); + } + + 88.14% { + transform: rotate(89.9deg); + } + + 89.83% { + transform: rotate(89.7deg); + } + + 91.53% { + transform: rotate(90.1deg); + } + + 93.22% { + transform: rotate(90.2deg); + } + + 94.92% { + transform: rotate(90.1deg); + } + + 96.61% { + transform: rotate(90deg); + } + + 98.31% { + transform: rotate(89.8deg); + } + + 100% { + transform: rotate(90deg); + } +} + +@keyframes spectrum-fill-mask-2 { + 0% { + transform: rotate(180deg); + } + + 1.69% { + transform: rotate(180deg); + } + + 3.39% { + transform: rotate(180deg); + } + + 5.08% { + transform: rotate(180deg); + } + + 6.78% { + transform: rotate(180deg); + } + + 8.47% { + transform: rotate(180deg); + } + + 10.17% { + transform: rotate(179.2deg); + } + + 11.86% { + transform: rotate(164deg); + } + + 13.56% { + transform: rotate(151.8deg); + } + + 15.25% { + transform: rotate(140.8deg); + } + + 16.95% { + transform: rotate(130.3deg); + } + + 18.64% { + transform: rotate(120.4deg); + } + + 20.34% { + transform: rotate(110.8deg); + } + + 22.03% { + transform: rotate(101.6deg); + } + + 23.73% { + transform: rotate(93.5deg); + } + + 25.42% { + transform: rotate(85.4deg); + } + + 27.12% { + transform: rotate(78.1deg); + } + + 28.81% { + transform: rotate(71.2deg); + } + + 30.51% { + transform: rotate(89.1deg); + } + + 32.2% { + transform: rotate(105.5deg); + } + + 33.9% { + transform: rotate(121.3deg); + } + + 35.59% { + transform: rotate(135.5deg); + } + + 37.29% { + transform: rotate(148.4deg); + } + + 38.98% { + transform: rotate(161deg); + } + + 40.68% { + transform: rotate(173.5deg); + } + + 42.37% { + transform: rotate(180deg); + } + + 44.07% { + transform: rotate(180deg); + } + + 45.76% { + transform: rotate(180deg); + } + + 47.46% { + transform: rotate(180deg); + } + + 49.15% { + transform: rotate(180deg); + } + + 50.85% { + transform: rotate(180deg); + } + + 52.54% { + transform: rotate(180deg); + } + + 54.24% { + transform: rotate(180deg); + } + + 55.93% { + transform: rotate(180deg); + } + + 57.63% { + transform: rotate(180deg); + } + + 59.32% { + transform: rotate(180deg); + } + + 61.02% { + transform: rotate(180deg); + } + + 62.71% { + transform: rotate(180deg); + } + + 64.41% { + transform: rotate(180deg); + } + + 66.1% { + transform: rotate(180deg); + } + + 67.8% { + transform: rotate(180deg); + } + + 69.49% { + transform: rotate(180deg); + } + + 71.19% { + transform: rotate(180deg); + } + + 72.88% { + transform: rotate(180deg); + } + + 74.58% { + transform: rotate(180deg); + } + + 76.27% { + transform: rotate(180deg); + } + + 77.97% { + transform: rotate(180deg); + } + + 79.66% { + transform: rotate(180deg); + } + + 81.36% { + transform: rotate(180deg); + } + + 83.05% { + transform: rotate(180deg); + } + + 84.75% { + transform: rotate(180deg); + } + + 86.44% { + transform: rotate(180deg); + } + + 88.14% { + transform: rotate(180deg); + } + + 89.83% { + transform: rotate(180deg); + } + + 91.53% { + transform: rotate(180deg); + } + + 93.22% { + transform: rotate(180deg); + } + + 94.92% { + transform: rotate(180deg); + } + + 96.61% { + transform: rotate(180deg); + } + + 98.31% { + transform: rotate(180deg); + } + + 100% { + transform: rotate(180deg); + } +} + +@keyframes spectrum-fills-rotate { + 0% { + transform: rotate(-90deg); + } + + 100% { + transform: rotate(270deg); + } +} diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css index 1cf2900903..7cb86c13ad 100644 --- a/components/progresscircle/index.css +++ b/components/progresscircle/index.css @@ -11,8 +11,36 @@ * governing permissions and limitations under the License. */ +@import "./animation.css"; @import "./themes/spectrum-two.css"; +.spectrum-ProgressCircle { + /* circle progress fill border color */ + --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); + + /* default size and thickness */ + --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); + + /* track border style */ + --spectrum-progress-circle-track-border-style: solid; +} + +.spectrum-ProgressCircle--small { + --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small); + --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small); +} + +.spectrum-ProgressCircle--medium { + --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); +} + +.spectrum-ProgressCircle--large { + --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large); + --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large); +} + /* windows high contrast mode */ @media (forced-colors: active) { .spectrum-ProgressCircle { @@ -39,17 +67,6 @@ /* Fix for Safari rendering bug */ /* more info: https://github.com/adobe/spectrum-web-components/issues/1392 */ transform: translate3d(0, 0, 0); - - /* circle colors over background */ - &.spectrum-ProgressCircle--staticWhite { - .spectrum-ProgressCircle-track { - border-color: var(--mod-progress-circle-track-border-color-over-background, var(--spectrum-progress-circle-track-border-color-over-background)); - } - - .spectrum-ProgressCircle-fill { - border-color: var(--highcontrast-progress-circle-fill-border-color-over-background, var(--mod-progress-circle-fill-border-color-over-background, var(--spectrum-progress-circle-fill-border-color-over-background))); - } - } } .spectrum-ProgressCircle-track { @@ -84,6 +101,17 @@ border-color: var(--highcontrast-progress-circle-fill-border-color, var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color))); } +/* circle colors over background */ +.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite { + .spectrum-ProgressCircle-track { + border-color: var(--mod-progress-circle-track-border-color-over-background, var(--spectrum-progress-circle-track-border-color-over-background)); + } + + .spectrum-ProgressCircle-fill { + border-color: var(--highcontrast-progress-circle-fill-border-color-over-background, var(--mod-progress-circle-fill-border-color-over-background, var(--spectrum-progress-circle-fill-border-color-over-background))); + } +} + /* animation masks - circle fill progress */ .spectrum-ProgressCircle-fillMask1, .spectrum-ProgressCircle-fillMask2 { @@ -129,501 +157,3 @@ animation: 1s infinite linear spectrum-fill-mask-2; } } - -.spectrum-ProgressCircle--indeterminate-fill-submask-2 { - animation: 1s infinite linear spectrum-fill-mask-2; -} - -@keyframes spectrum-fill-mask-1 { - 0% { - transform: rotate(90deg); - } - - 1.69% { - transform: rotate(72.3deg); - } - - 3.39% { - transform: rotate(55.5deg); - } - - 5.08% { - transform: rotate(40.3deg); - } - - 6.78% { - transform: rotate(25deg); - } - - 8.47% { - transform: rotate(10.6deg); - } - - 10.17% { - transform: rotate(0deg); - } - - 11.86% { - transform: rotate(0deg); - } - - 13.56% { - transform: rotate(0deg); - } - - 15.25% { - transform: rotate(0deg); - } - - 16.95% { - transform: rotate(0deg); - } - - 18.64% { - transform: rotate(0deg); - } - - 20.34% { - transform: rotate(0deg); - } - - 22.03% { - transform: rotate(0deg); - } - - 23.73% { - transform: rotate(0deg); - } - - 25.42% { - transform: rotate(0deg); - } - - 27.12% { - transform: rotate(0deg); - } - - 28.81% { - transform: rotate(0deg); - } - - 30.51% { - transform: rotate(0deg); - } - - 32.2% { - transform: rotate(0deg); - } - - 33.9% { - transform: rotate(0deg); - } - - 35.59% { - transform: rotate(0deg); - } - - 37.29% { - transform: rotate(0deg); - } - - 38.98% { - transform: rotate(0deg); - } - - 40.68% { - transform: rotate(0deg); - } - - 42.37% { - transform: rotate(5.3deg); - } - - 44.07% { - transform: rotate(13.4deg); - } - - 45.76% { - transform: rotate(20.6deg); - } - - 47.46% { - transform: rotate(29deg); - } - - 49.15% { - transform: rotate(36.5deg); - } - - 50.85% { - transform: rotate(42.6deg); - } - - 52.54% { - transform: rotate(48.8deg); - } - - 54.24% { - transform: rotate(54.2deg); - } - - 55.93% { - transform: rotate(59.4deg); - } - - 57.63% { - transform: rotate(63.2deg); - } - - 59.32% { - transform: rotate(67.2deg); - } - - 61.02% { - transform: rotate(70.8deg); - } - - 62.71% { - transform: rotate(73.8deg); - } - - 64.41% { - transform: rotate(76.2deg); - } - - 66.1% { - transform: rotate(78.7deg); - } - - 67.8% { - transform: rotate(80.6deg); - } - - 69.49% { - transform: rotate(82.6deg); - } - - 71.19% { - transform: rotate(83.7deg); - } - - 72.88% { - transform: rotate(85deg); - } - - 74.58% { - transform: rotate(86.3deg); - } - - 76.27% { - transform: rotate(87deg); - } - - 77.97% { - transform: rotate(87.7deg); - } - - 79.66% { - transform: rotate(88.3deg); - } - - 81.36% { - transform: rotate(88.6deg); - } - - 83.05% { - transform: rotate(89.2deg); - } - - 84.75% { - transform: rotate(89.2deg); - } - - 86.44% { - transform: rotate(89.5deg); - } - - 88.14% { - transform: rotate(89.9deg); - } - - 89.83% { - transform: rotate(89.7deg); - } - - 91.53% { - transform: rotate(90.1deg); - } - - 93.22% { - transform: rotate(90.2deg); - } - - 94.92% { - transform: rotate(90.1deg); - } - - 96.61% { - transform: rotate(90deg); - } - - 98.31% { - transform: rotate(89.8deg); - } - - 100% { - transform: rotate(90deg); - } -} - -@keyframes spectrum-fill-mask-2 { - 0% { - transform: rotate(180deg); - } - - 1.69% { - transform: rotate(180deg); - } - - 3.39% { - transform: rotate(180deg); - } - - 5.08% { - transform: rotate(180deg); - } - - 6.78% { - transform: rotate(180deg); - } - - 8.47% { - transform: rotate(180deg); - } - - 10.17% { - transform: rotate(179.2deg); - } - - 11.86% { - transform: rotate(164deg); - } - - 13.56% { - transform: rotate(151.8deg); - } - - 15.25% { - transform: rotate(140.8deg); - } - - 16.95% { - transform: rotate(130.3deg); - } - - 18.64% { - transform: rotate(120.4deg); - } - - 20.34% { - transform: rotate(110.8deg); - } - - 22.03% { - transform: rotate(101.6deg); - } - - 23.73% { - transform: rotate(93.5deg); - } - - 25.42% { - transform: rotate(85.4deg); - } - - 27.12% { - transform: rotate(78.1deg); - } - - 28.81% { - transform: rotate(71.2deg); - } - - 30.51% { - transform: rotate(89.1deg); - } - - 32.2% { - transform: rotate(105.5deg); - } - - 33.9% { - transform: rotate(121.3deg); - } - - 35.59% { - transform: rotate(135.5deg); - } - - 37.29% { - transform: rotate(148.4deg); - } - - 38.98% { - transform: rotate(161deg); - } - - 40.68% { - transform: rotate(173.5deg); - } - - 42.37% { - transform: rotate(180deg); - } - - 44.07% { - transform: rotate(180deg); - } - - 45.76% { - transform: rotate(180deg); - } - - 47.46% { - transform: rotate(180deg); - } - - 49.15% { - transform: rotate(180deg); - } - - 50.85% { - transform: rotate(180deg); - } - - 52.54% { - transform: rotate(180deg); - } - - 54.24% { - transform: rotate(180deg); - } - - 55.93% { - transform: rotate(180deg); - } - - 57.63% { - transform: rotate(180deg); - } - - 59.32% { - transform: rotate(180deg); - } - - 61.02% { - transform: rotate(180deg); - } - - 62.71% { - transform: rotate(180deg); - } - - 64.41% { - transform: rotate(180deg); - } - - 66.1% { - transform: rotate(180deg); - } - - 67.8% { - transform: rotate(180deg); - } - - 69.49% { - transform: rotate(180deg); - } - - 71.19% { - transform: rotate(180deg); - } - - 72.88% { - transform: rotate(180deg); - } - - 74.58% { - transform: rotate(180deg); - } - - 76.27% { - transform: rotate(180deg); - } - - 77.97% { - transform: rotate(180deg); - } - - 79.66% { - transform: rotate(180deg); - } - - 81.36% { - transform: rotate(180deg); - } - - 83.05% { - transform: rotate(180deg); - } - - 84.75% { - transform: rotate(180deg); - } - - 86.44% { - transform: rotate(180deg); - } - - 88.14% { - transform: rotate(180deg); - } - - 89.83% { - transform: rotate(180deg); - } - - 91.53% { - transform: rotate(180deg); - } - - 93.22% { - transform: rotate(180deg); - } - - 94.92% { - transform: rotate(180deg); - } - - 96.61% { - transform: rotate(180deg); - } - - 98.31% { - transform: rotate(180deg); - } - - 100% { - transform: rotate(180deg); - } -} - -@keyframes spectrum-fills-rotate { - 0% { - transform: rotate(-90deg); - } - - 100% { - transform: rotate(270deg); - } -} diff --git a/components/progresscircle/metadata/metadata.json b/components/progresscircle/metadata/metadata.json index 2f14b1676c..29890acade 100644 --- a/components/progresscircle/metadata/metadata.json +++ b/components/progresscircle/metadata/metadata.json @@ -6,6 +6,9 @@ ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask2", ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fills", ".spectrum-ProgressCircle--indeterminate-fill-submask-2", + ".spectrum-ProgressCircle--large", + ".spectrum-ProgressCircle--medium", + ".spectrum-ProgressCircle--small", ".spectrum-ProgressCircle-fill", ".spectrum-ProgressCircle-fillMask1", ".spectrum-ProgressCircle-fillMask2", @@ -13,9 +16,6 @@ ".spectrum-ProgressCircle-fillSubMask2", ".spectrum-ProgressCircle-fills", ".spectrum-ProgressCircle-track", - ".spectrum-ProgressCircle.spectrum-ProgressCircle--large", - ".spectrum-ProgressCircle.spectrum-ProgressCircle--medium", - ".spectrum-ProgressCircle.spectrum-ProgressCircle--small", ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill", ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track", "0%", @@ -111,19 +111,9 @@ "--spectrum-transparent-white-400" ], "system-theme": [ - "--system-progress-circle-fill-border-color", "--system-progress-circle-fill-border-color-over-background", - "--system-progress-circle-large-size", - "--system-progress-circle-large-thickness", - "--system-progress-circle-medium-size", - "--system-progress-circle-medium-thickness", - "--system-progress-circle-size", - "--system-progress-circle-small-size", - "--system-progress-circle-small-thickness", - "--system-progress-circle-thickness", "--system-progress-circle-track-border-color", - "--system-progress-circle-track-border-color-over-background", - "--system-progress-circle-track-border-style" + "--system-progress-circle-track-border-color-over-background" ], "passthroughs": [], "high-contrast": [ diff --git a/components/progresscircle/themes/spectrum-two.css b/components/progresscircle/themes/spectrum-two.css index 687a555847..02fff62e64 100644 --- a/components/progresscircle/themes/spectrum-two.css +++ b/components/progresscircle/themes/spectrum-two.css @@ -16,32 +16,10 @@ /* circle unfilled border color */ --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200); - /* circle progress fill border color */ - --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); - /* over background unfilled border color */ --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400); /* over background progress fill border color */ --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000); - - /* track border style */ - --spectrum-progress-circle-track-border-style: solid; - - &, - &.spectrum-ProgressCircle--medium { - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium); - --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); - } - - &.spectrum-ProgressCircle--small { - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small); - --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small); - } - - &.spectrum-ProgressCircle--large { - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large); - --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large); - } } } diff --git a/components/radio/index.css b/components/radio/index.css index 34b10d5994..6bf4a699cd 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -19,6 +19,114 @@ * ::after is to style the focus ring */ +.spectrum-Radio { + /* state colors for all themes */ + --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); + --spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + /* focus ring all themes */ + --spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + + /* disabled all themes */ + --spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color); + --spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color); + + /* emphasized state colors selection indicator all themes */ + --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); + --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); + --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); + + /* selection indicator all themes */ + --spectrum-radio-border-width: var(--spectrum-border-width-200); + --spectrum-radio-button-background-color: var(--spectrum-gray-75); + + /* checked selection indicator */ + --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); + --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); + --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); + + /* spacing all themes */ + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); + --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + + /* text styles all themes */ + --spectrum-radio-font-size: var(--spectrum-font-size-100); + --spectrum-radio-line-height: var(--spectrum-line-height-100); + + /* animation all themes */ + --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100); + + + /* 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); + + /* CJK language support all themes */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100); + } +} + +.spectrum-Radio--sizeS { + --spectrum-radio-height: var(--spectrum-component-height-75); + --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small); + + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-75); + --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); + + --spectrum-radio-font-size: var(--spectrum-font-size-75); +} + +.spectrum-Radio--sizeM { + --spectrum-radio-height: var(--spectrum-component-height-100); + --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); + + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); + --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); + + --spectrum-radio-font-size: var(--spectrum-font-size-100); +} + +.spectrum-Radio--sizeL { + --spectrum-radio-height: var(--spectrum-component-height-200); + --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large); + + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-200); + --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); + + --spectrum-radio-font-size: var(--spectrum-font-size-200); +} + +.spectrum-Radio--sizeXL { + --spectrum-radio-height: var(--spectrum-component-height-300); + --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-extra-large); + + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-300); + --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); + + --spectrum-radio-font-size: var(--spectrum-font-size-300); +} + /* windows high contrast mode */ @media (forced-colors: active) { .spectrum-Radio { @@ -56,8 +164,10 @@ --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-button { + &::after { + forced-color-adjust: none; + } } } } @@ -143,6 +253,41 @@ } } +.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))); + } +} + +/* Disabled state */ +.spectrum-Radio .spectrum-Radio-input:disabled, +.spectrum-Radio .spectrum-Radio-input:checked:disabled { + /* selection indicator */ + & + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-disabled-border-color, var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color))); + } + + & ~ .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; @@ -175,33 +320,24 @@ } /* 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))); + &: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)); - } -} - -/* Disabled state */ -.spectrum-Radio .spectrum-Radio-input:disabled, -.spectrum-Radio .spectrum-Radio-input:checked:disabled { - /* selection indicator */ - & + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-disabled-border-color, var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color))); - } + &: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; - & ~ .spectrum-Radio-label { - color: var(--highcontrast-radio-disabled-content-color, var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color))); + 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)); + } } } @@ -231,7 +367,6 @@ .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)); @@ -283,25 +418,3 @@ } } } - -.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))); - } -} diff --git a/components/radio/metadata/metadata.json b/components/radio/metadata/metadata.json index 02b81b1042..cd734161ca 100644 --- a/components/radio/metadata/metadata.json +++ b/components/radio/metadata/metadata.json @@ -11,6 +11,10 @@ ".spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before", + ".spectrum-Radio--sizeL", + ".spectrum-Radio--sizeM", + ".spectrum-Radio--sizeS", + ".spectrum-Radio--sizeXL", ".spectrum-Radio-button", ".spectrum-Radio-button:after", ".spectrum-Radio-button:before", @@ -26,11 +30,6 @@ ".spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label", ".spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label", ".spectrum-Radio.is-readOnly .spectrum-Radio-label", - ".spectrum-Radio.spectrum-Radio--emphasized", - ".spectrum-Radio.spectrum-Radio--sizeL", - ".spectrum-Radio.spectrum-Radio--sizeM", - ".spectrum-Radio.spectrum-Radio--sizeS", - ".spectrum-Radio.spectrum-Radio--sizeXL", ".spectrum-Radio:active .spectrum-Radio-button:before", ".spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio:active .spectrum-Radio-label", @@ -150,9 +149,9 @@ "--spectrum-font-size-200", "--spectrum-font-size-300", "--spectrum-font-size-75", - "--spectrum-gray-50", "--spectrum-gray-600", "--spectrum-gray-700", + "--spectrum-gray-75", "--spectrum-gray-800", "--spectrum-line-height-100", "--spectrum-neutral-background-color-selected-default", @@ -169,73 +168,10 @@ "--spectrum-text-to-control-75" ], "system-theme": [ - "--system-radio-animation-duration", - "--system-radio-border-width", - "--system-radio-button-background-color", "--system-radio-button-border-color-default", "--system-radio-button-border-color-down", "--system-radio-button-border-color-focus", - "--system-radio-button-border-color-hover", - "--system-radio-button-checked-border-color-default", - "--system-radio-button-checked-border-color-down", - "--system-radio-button-checked-border-color-focus", - "--system-radio-button-checked-border-color-hover", - "--system-radio-button-control-size", - "--system-radio-button-top-to-control", - "--system-radio-disabled-border-color", - "--system-radio-disabled-content-color", - "--system-radio-emphasized-accent-color", - "--system-radio-emphasized-accent-color-down", - "--system-radio-emphasized-accent-color-focus", - "--system-radio-emphasized-accent-color-hover", - "--system-radio-emphasized-button-checked-border-color-default", - "--system-radio-emphasized-button-checked-border-color-down", - "--system-radio-emphasized-button-checked-border-color-focus", - "--system-radio-emphasized-button-checked-border-color-hover", - "--system-radio-focus-indicator-color", - "--system-radio-focus-indicator-gap", - "--system-radio-focus-indicator-thickness", - "--system-radio-font-size", - "--system-radio-height", - "--system-radio-label-bottom-to-text", - "--system-radio-label-top-to-text", - "--system-radio-lang-ja-line-height-cjk", - "--system-radio-lang-ko-line-height-cjk", - "--system-radio-lang-zh-line-height-cjk", - "--system-radio-line-height", - "--system-radio-neutral-content-color", - "--system-radio-neutral-content-color-down", - "--system-radio-neutral-content-color-focus", - "--system-radio-neutral-content-color-hover", - "--system-radio-size-l-button-control-size", - "--system-radio-size-l-button-top-to-control", - "--system-radio-size-l-font-size", - "--system-radio-size-l-height", - "--system-radio-size-l-label-bottom-to-text", - "--system-radio-size-l-label-top-to-text", - "--system-radio-size-l-text-to-control", - "--system-radio-size-m-button-control-size", - "--system-radio-size-m-button-top-to-control", - "--system-radio-size-m-font-size", - "--system-radio-size-m-height", - "--system-radio-size-m-label-bottom-to-text", - "--system-radio-size-m-label-top-to-text", - "--system-radio-size-m-text-to-control", - "--system-radio-size-s-button-control-size", - "--system-radio-size-s-button-top-to-control", - "--system-radio-size-s-font-size", - "--system-radio-size-s-height", - "--system-radio-size-s-label-bottom-to-text", - "--system-radio-size-s-label-top-to-text", - "--system-radio-size-s-text-to-control", - "--system-radio-size-xl-button-control-size", - "--system-radio-size-xl-button-top-to-control", - "--system-radio-size-xl-font-size", - "--system-radio-size-xl-height", - "--system-radio-size-xl-label-bottom-to-text", - "--system-radio-size-xl-label-top-to-text", - "--system-radio-size-xl-text-to-control", - "--system-radio-text-to-control" + "--system-radio-button-border-color-hover" ], "passthroughs": [], "high-contrast": [ diff --git a/components/radio/themes/spectrum-two.css b/components/radio/themes/spectrum-two.css index bec5aab44b..e014b02f2c 100644 --- a/components/radio/themes/spectrum-two.css +++ b/components/radio/themes/spectrum-two.css @@ -18,105 +18,5 @@ --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); --spectrum-radio-button-border-color-down: var(--spectrum-gray-800); --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); - - /* state colors for all themes */ - --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); - --spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - /* focus ring all themes */ - --spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - - /* disabled all themes */ - --spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color); - --spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color); - - /* emphasized state colors selection indicator all themes */ - --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); - --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); - --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); - - /* selection indicator all themes */ - --spectrum-radio-border-width: var(--spectrum-border-width-200); - --spectrum-radio-button-background-color: var(--spectrum-gray-50); - - /* checked selection indicator */ - --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); - --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); - - /* text styles all themes */ - --spectrum-radio-line-height: var(--spectrum-line-height-100); - - /* animation all themes */ - --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100); - - /* CJK language support all themes */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100); - } - - &, - &.spectrum-Radio--sizeM { - --spectrum-radio-height: var(--spectrum-component-height-100); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); - - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - - --spectrum-radio-font-size: var(--spectrum-font-size-100); - } - - &.spectrum-Radio--sizeS { - --spectrum-radio-height: var(--spectrum-component-height-75); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small); - - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-75); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); - - --spectrum-radio-font-size: var(--spectrum-font-size-75); - } - - &.spectrum-Radio--sizeL { - --spectrum-radio-height: var(--spectrum-component-height-200); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large); - - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-200); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); - - --spectrum-radio-font-size: var(--spectrum-font-size-200); - } - - &.spectrum-Radio--sizeXL { - --spectrum-radio-height: var(--spectrum-component-height-300); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-extra-large); - - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-300); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); - - --spectrum-radio-font-size: var(--spectrum-font-size-300); - } - - &.spectrum-Radio--emphasized { - --spectrum-radio-button-checked-border-color-default: var(--spectrum-accent-color-900); - --spectrum-radio-button-checked-border-color-hover: var(--spectrum-accent-color-1000); - --spectrum-radio-button-checked-border-color-down: var(--spectrum-accent-color-1100); - --spectrum-radio-button-checked-border-color-focus: var(--spectrum-accent-color-1000); - } } } diff --git a/components/rating/index.css b/components/rating/index.css index 1af38084bc..a9ab3cdfd5 100644 --- a/components/rating/index.css +++ b/components/rating/index.css @@ -14,6 +14,33 @@ @import "./themes/spectrum-two.css"; .spectrum-Rating { + /* Icon */ + --spectrum-rating-icon-height: var(--spectrum-workflow-icon-size-100); + --spectrum-rating-icon-width: var(--spectrum-workflow-icon-size-100); + + /* Focus ring */ + --spectrum-rating-border-radius: var(--spectrum-corner-radius-100); + --spectrum-rating-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-rating-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-rating-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + + /* Spacing (top/bottom edge to icon) */ + --spectrum-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); + + /* 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); + position: relative; display: inline-flex; flex: 0 0 auto; @@ -95,8 +122,6 @@ 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))); - color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); - .spectrum-Rating-starActive { display: none; } @@ -106,8 +131,6 @@ } &.is-selected { - color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); - .spectrum-Rating-starActive { display: block; } @@ -130,9 +153,6 @@ /* All stars following the hovered star */ &:hover ~ .spectrum-Rating-icon { - /* All stars following the hovered star */ - color: var(--highcontrast-rating-icon-color-default, var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default))); - .spectrum-Rating-starActive { display: none; } @@ -148,6 +168,21 @@ 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))); + } + } +} + .spectrum-Rating--emphasized { &.is-focused { .spectrum-Rating-icon.is-selected { diff --git a/components/rating/metadata/metadata.json b/components/rating/metadata/metadata.json index 5647e93056..58ff4acf40 100644 --- a/components/rating/metadata/metadata.json +++ b/components/rating/metadata/metadata.json @@ -102,25 +102,11 @@ "--spectrum-workflow-icon-size-100" ], "system-theme": [ - "--system-rating-border-radius", - "--system-rating-emphasized-icon-color-default", - "--system-rating-emphasized-icon-color-down", - "--system-rating-emphasized-icon-color-hover", - "--system-rating-emphasized-icon-color-key-focus", - "--system-rating-focus-indicator-color", - "--system-rating-focus-indicator-gap", - "--system-rating-focus-indicator-thickness", "--system-rating-icon-color-default", - "--system-rating-icon-color-disabled", "--system-rating-icon-color-down", "--system-rating-icon-color-hover", "--system-rating-icon-color-key-focus", - "--system-rating-icon-count", - "--system-rating-icon-height", - "--system-rating-icon-spacing-vertical-top", - "--system-rating-icon-width", - "--system-rating-indicator-border-radius", - "--system-rating-indicator-height" + "--system-rating-indicator-border-radius" ], "passthroughs": [], "high-contrast": [ diff --git a/components/rating/themes/spectrum-two.css b/components/rating/themes/spectrum-two.css index 1a73603ab5..0c2a8df926 100644 --- a/components/rating/themes/spectrum-two.css +++ b/components/rating/themes/spectrum-two.css @@ -18,32 +18,6 @@ --spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - /* Icon */ - --spectrum-rating-icon-height: var(--spectrum-workflow-icon-size-100); - --spectrum-rating-icon-width: var(--spectrum-workflow-icon-size-100); - - /* Focus ring */ - --spectrum-rating-border-radius: var(--spectrum-corner-radius-100); - --spectrum-rating-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-rating-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-rating-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - - /* Spacing (top/bottom edge to icon) */ - --spectrum-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-rating-indicator-border-radius: 2px; - - /* Indicator height */ - --spectrum-rating-indicator-height: var(--spectrum-border-width-200); - - /* Colors */ - /* selected + emphasized */ - --spectrum-rating-emphasized-icon-color-default: var(--spectrum-accent-content-color-default); - --spectrum-rating-emphasized-icon-color-hover: var(--spectrum-accent-content-color-hover); - --spectrum-rating-emphasized-icon-color-down: var(--spectrum-accent-content-color-down); - --spectrum-rating-emphasized-icon-color-key-focus: var(--spectrum-accent-content-color-key-focus); - - /* Disabled */ - --spectrum-rating-icon-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-rating-icon-count: var(--spectrum-rating-icon-count); } } diff --git a/components/search/index.css b/components/search/index.css index efe67caaec..c1a5ff8958 100644 --- a/components/search/index.css +++ b/components/search/index.css @@ -13,29 +13,43 @@ @import "./themes/spectrum-two.css"; -@media (forced-colors: active) { - .spectrum-Search .spectrum-Search-textfield, - .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input { - --highcontrast-search-color-default: CanvasText; - --highcontrast-search-color-hover: CanvasText; - --highcontrast-search-color-focus: CanvasText; - --highcontrast-search-color-disabled: GrayText; - } - - .spectrum-Search .spectrum-Search-clearButton { - .spectrum-ClearButton-fill { - /* Avoid button background color overlapping on border. */ - forced-color-adjust: none; - background-color: transparent; - } - } -} - -/* Standard / Default */ .spectrum-Search { - /* Using a component-level token for this internal variable */ + /* Size / Spacing */ + --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-min-inline-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); + + /* Focus Indicator */ + --spectrum-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-search-focus-indicator-color: var(--spectrum-focus-indicator-color); + + /* Font / Color */ + --spectrum-search-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-search-font-weight: var(--spectrum-regular-font-weight); + --spectrum-search-font-style: var(--spectrum-default-font-style); + --spectrum-search-line-height: var(--spectrum-line-height-100); + + --spectrum-search-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-search-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-search-color-focus: var(--spectrum-neutral-content-color-focus); + --spectrum-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); + --spectrum-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + + /* Background and Border */ + --spectrum-search-border-width: var(--spectrum-border-width-100); + + /* 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); /* @passthrough start -- settings for nested Textfield component */ --mod-textfield-font-family: var(--mod-search-font-family, var(--spectrum-search-font-family)); @@ -76,6 +90,42 @@ } } +.spectrum-Search--sizeS { + --spectrum-search-block-size: var(--spectrum-component-height-75); + --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75); +} + +.spectrum-Search--sizeL { + --spectrum-search-block-size: var(--spectrum-component-height-200); + --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200); +} + +.spectrum-Search--sizeXL { + --spectrum-search-block-size: var(--spectrum-component-height-300); + --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300); +} + +@media (forced-colors: active) { + .spectrum-Search .spectrum-Search-textfield, + .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input { + --highcontrast-search-color-default: CanvasText; + --highcontrast-search-color-hover: CanvasText; + --highcontrast-search-color-focus: CanvasText; + --highcontrast-search-color-disabled: GrayText; + } + + .spectrum-Search .spectrum-Search-clearButton { + .spectrum-ClearButton-fill { + /* Avoid button background color overlapping on border. */ + forced-color-adjust: none; + background-color: transparent; + } + } +} + .spectrum-Search-clearButton { position: absolute; inset-inline-end: 0; @@ -102,7 +152,6 @@ position: absolute; inset-block: 0; margin-block: auto; - color: var(--spectrum-search-color); .spectrum-Search-textfield:hover & { @@ -160,7 +209,17 @@ /* Quiet Variant */ .spectrum-Search--quiet { - .spectrum-Search-input { + --spectrum-search-background-color: transparent; + --spectrum-search-background-color-disabled: transparent; + --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color); + + /* Added specificity, otherwise they are overridden by system specific themes. */ + &.spectrum-Search { + --spectrum-search-border-radius: 0; + --spectrum-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); + } + + &.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: var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size)); diff --git a/components/search/metadata/metadata.json b/components/search/metadata/metadata.json index 69ec52d100..727e719384 100644 --- a/components/search/metadata/metadata.json +++ b/components/search/metadata/metadata.json @@ -6,7 +6,12 @@ ".spectrum-Search .spectrum-Search-clearButton .spectrum-ClearButton-fill", ".spectrum-Search .spectrum-Search-textfield", ".spectrum-Search .spectrum-Search-textfield .spectrum-Search-input", - ".spectrum-Search--quiet .spectrum-Search-input", + ".spectrum-Search--quiet", + ".spectrum-Search--quiet.spectrum-Search", + ".spectrum-Search--quiet.spectrum-Search .spectrum-Search-input", + ".spectrum-Search--sizeL", + ".spectrum-Search--sizeS", + ".spectrum-Search--sizeXL", ".spectrum-Search-clearButton", ".spectrum-Search-clearButton .spectrum-ClearButton-fill", ".spectrum-Search-icon", @@ -25,7 +30,6 @@ ".spectrum-Search.spectrum-Search--sizeM", ".spectrum-Search.spectrum-Search--sizeS", ".spectrum-Search.spectrum-Search--sizeXL", - ".spectrum-Search.spectrum-Search.spectrum-Search--quiet", ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon", ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input" ], @@ -96,7 +100,6 @@ "--spectrum-search-icon-size", "--spectrum-search-inline-size", "--spectrum-search-line-height", - "--spectrum-search-min-inline-multiplier", "--spectrum-search-min-inline-size", "--spectrum-search-text-to-icon", "--spectrum-search-to-help-text", @@ -149,62 +152,21 @@ ], "system-theme": [ "--system-search-background-color", - "--system-search-background-color-disabled", - "--system-search-block-size", "--system-search-border-color-default", - "--system-search-border-color-disabled", "--system-search-border-color-focus", "--system-search-border-color-focus-hover", "--system-search-border-color-hover", "--system-search-border-color-key-focus", "--system-search-border-radius", - "--system-search-border-width", - "--system-search-bottom-to-text", - "--system-search-color-default", - "--system-search-color-disabled", - "--system-search-color-focus", - "--system-search-color-focus-hover", - "--system-search-color-hover", - "--system-search-color-key-focus", "--system-search-edge-to-visual", - "--system-search-focus-indicator-color", - "--system-search-focus-indicator-gap", - "--system-search-focus-indicator-thickness", - "--system-search-font-family", - "--system-search-font-style", - "--system-search-font-weight", - "--system-search-icon-size", - "--system-search-inline-size", - "--system-search-line-height", - "--system-search-min-inline-multiplier", - "--system-search-quiet-background-color", - "--system-search-quiet-background-color-disabled", - "--system-search-quiet-border-color-disabled", - "--system-search-quiet-border-radius", - "--system-search-quiet-edge-to-visual", - "--system-search-size-l-block-size", "--system-search-size-l-border-radius", "--system-search-size-l-edge-to-visual", - "--system-search-size-l-icon-size", - "--system-search-size-l-text-to-icon", - "--system-search-size-m-block-size", "--system-search-size-m-border-radius", "--system-search-size-m-edge-to-visual", - "--system-search-size-m-icon-size", - "--system-search-size-m-text-to-icon", - "--system-search-size-s-block-size", "--system-search-size-s-border-radius", "--system-search-size-s-edge-to-visual", - "--system-search-size-s-icon-size", - "--system-search-size-s-text-to-icon", - "--system-search-size-xl-block-size", "--system-search-size-xl-border-radius", - "--system-search-size-xl-edge-to-visual", - "--system-search-size-xl-icon-size", - "--system-search-size-xl-text-to-icon", - "--system-search-text-to-icon", - "--system-search-to-help-text", - "--system-search-top-to-text" + "--system-search-size-xl-edge-to-visual" ], "passthroughs": [ "--mod-textfield-background-color", diff --git a/components/search/themes/spectrum-two.css b/components/search/themes/spectrum-two.css index 1ea2bfac5b..85a34114a0 100644 --- a/components/search/themes/spectrum-two.css +++ b/components/search/themes/spectrum-two.css @@ -19,81 +19,27 @@ --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); --spectrum-search-border-color-key-focus: var(--spectrum-gray-900); - /* Size / Spacing */ - --spectrum-search-inline-size: var(--spectrum-field-width); - --spectrum-search-min-inline-multiplier: var(--spectrum-search-field-minimum-width-multiplier); - - --spectrum-search-to-help-text: var(--spectrum-help-text-to-component); - --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - - /* Focus Indicator */ - --spectrum-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-search-focus-indicator-color: var(--spectrum-focus-indicator-color); - - /* Font / Color */ - --spectrum-search-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-search-font-weight: var(--spectrum-regular-font-weight); - --spectrum-search-font-style: var(--spectrum-default-font-style); - --spectrum-search-line-height: var(--spectrum-line-height-100); - - --spectrum-search-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-search-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-search-color-focus: var(--spectrum-neutral-content-color-focus); - --spectrum-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); - --spectrum-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - /* Background and Border */ - --spectrum-search-border-width: var(--spectrum-border-width-100); --spectrum-search-background-color: var(--spectrum-gray-25); - /* Disabled */ - --spectrum-search-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color); - &, &.spectrum-Search--sizeM { --spectrum-search-border-radius: var(--spectrum-corner-radius-100); --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); - --spectrum-search-block-size: var(--spectrum-component-height-100); - --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-100); } &.spectrum-Search--sizeS { --spectrum-search-border-radius: var(--spectrum-corner-radius-100); --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75); - --spectrum-search-block-size: var(--spectrum-component-height-75); - --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75); } &.spectrum-Search--sizeL { --spectrum-search-border-radius: var(--spectrum-corner-radius-100); --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200); - --spectrum-search-block-size: var(--spectrum-component-height-200); - --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200); } &.spectrum-Search--sizeXL { --spectrum-search-border-radius: var(--spectrum-corner-radius-100); --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300); - --spectrum-search-block-size: var(--spectrum-component-height-300); - --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300); - } - - /* Forced duplicate selector to */ - &.spectrum-Search.spectrum-Search--quiet { - --spectrum-search-background-color: transparent; - --spectrum-search-background-color-disabled: transparent; - --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color); - - --spectrum-search-border-radius: 0; - --spectrum-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); } } } diff --git a/components/sidenav/index.css b/components/sidenav/index.css index 3fe0f6b084..a553b89103 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -11,48 +11,89 @@ * governing permissions and limitations under the License. */ - @import "./themes/spectrum-two.css"; - - @media (forced-colors: active) { - /* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */ - .spectrum-SideNav { - .spectrum-Icon { - forced-color-adjust: preserve-parent-color; - } - } - - .spectrum-SideNav-item { - --highcontrast-sidenav-content-disabled-color: GrayText; - - --highcontrast-sidenav-focus-ring-color: Highlight; - - --highcontrast-sidenav-content-color-default-selected: SelectedItemText; - --highcontrast-sidenav-item-background-default-selected: SelectedItem; - - --highcontrast-sidenav-background-key-focus-selected: Highlight; - --highcontrast-sidenav-background-hover-selected: Highlight; - --highcontrast-sidenav-item-background-down-selected: Highlight; - - --highcontrast-sidenav-item-background-down: Highlight; - --highcontrast-sidenav-background-hover: Highlight; - --highcontrast-sidenav-content-color-hover: HighlightText; - --highcontrast-sidenav-background-key-focus: Highlight; - - --highcontrast-sidenav-top-level-font-color: ButtonText; - --highcontrast-sidenav-content-color-default: ButtonText; - --highcontrast-sidenav-content-color-down: HighlightText; - - forced-color-adjust: none; - } -} +@import "./themes/spectrum-two.css"; .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; + + /* color font */ + --spectrum-sidenav-header-color: var(--spectrum-gray-600); + + --spectrum-sidenav-content-disabled-color: var(--spectrum-disabled-content-color); + + --spectrum-sidenav-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-sidenav-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-sidenav-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-sidenav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-sidenav-content-color-default-selected: var(--spectrum-neutral-content-color-default); + --spectrum-sidenav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover); + --spectrum-sidenav-content-color-down-selected: var(--spectrum-neutral-content-color-down); + --spectrum-sidenav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus); + + /* typography */ + --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight); + --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100); + --spectrum-sidenav-text-line-height: var(--spectrum-line-height-100); + + --spectrum-sidenav-top-level-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight); + --spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100); + --spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100); + + --spectrum-sidenav-header-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight); + --spectrum-sidenav-header-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-header-font-size: var(--spectrum-font-size-75); + --spectrum-sidenav-header-line-height: var(--spectrum-line-height-100); + display: flex; flex-direction: column; list-style-type: none; margin: 0; padding: 0; + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-sidenav-top-level-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100); + } } .spectrum-SideNav-item { @@ -202,3 +243,35 @@ } } } + +@media (forced-colors: active) { + .spectrum-SideNav { + .spectrum-Icon { + forced-color-adjust: preserve-parent-color; + } + } + + .spectrum-SideNav-item { + --highcontrast-sidenav-content-disabled-color: GrayText; + + --highcontrast-sidenav-focus-ring-color: Highlight; + + --highcontrast-sidenav-content-color-default-selected: SelectedItemText; + --highcontrast-sidenav-item-background-default-selected: SelectedItem; + + --highcontrast-sidenav-background-key-focus-selected: Highlight; + --highcontrast-sidenav-background-hover-selected: Highlight; + --highcontrast-sidenav-item-background-down-selected: Highlight; + + --highcontrast-sidenav-item-background-down: Highlight; + --highcontrast-sidenav-background-hover: Highlight; + --highcontrast-sidenav-content-color-hover: HighlightText; + --highcontrast-sidenav-background-key-focus: Highlight; + + --highcontrast-sidenav-top-level-font-color: ButtonText; + --highcontrast-sidenav-content-color-default: ButtonText; + --highcontrast-sidenav-content-color-down: HighlightText; + + forced-color-adjust: none; + } +} diff --git a/components/sidenav/metadata/metadata.json b/components/sidenav/metadata/metadata.json index fb805603ec..0373b90aa5 100644 --- a/components/sidenav/metadata/metadata.json +++ b/components/sidenav/metadata/metadata.json @@ -181,70 +181,13 @@ "--spectrum-workflow-icon-size-100" ], "system-theme": [ - "--system-side-nav-background-default", - "--system-side-nav-background-disabled", "--system-side-nav-background-hover", "--system-side-nav-background-hover-selected", "--system-side-nav-background-key-focus", "--system-side-nav-background-key-focus-selected", - "--system-side-nav-border-radius", - "--system-side-nav-bottom-to-label", - "--system-side-nav-content-color-default", - "--system-side-nav-content-color-default-selected", - "--system-side-nav-content-color-down", - "--system-side-nav-content-color-down-selected", - "--system-side-nav-content-color-hover", - "--system-side-nav-content-color-hover-selected", - "--system-side-nav-content-color-key-focus", - "--system-side-nav-content-color-key-focus-selected", - "--system-side-nav-content-disabled-color", - "--system-side-nav-focus-ring-color", - "--system-side-nav-focus-ring-gap", - "--system-side-nav-focus-ring-size", - "--system-side-nav-gap", - "--system-side-nav-header-color", - "--system-side-nav-header-font-family", - "--system-side-nav-header-font-size", - "--system-side-nav-header-font-style", - "--system-side-nav-header-font-weight", - "--system-side-nav-header-line-height", - "--system-side-nav-heading-bottom-margin", - "--system-side-nav-heading-top-margin", - "--system-side-nav-icon-size", - "--system-side-nav-icon-spacing", - "--system-side-nav-inline-padding", "--system-side-nav-item-background-default-selected", "--system-side-nav-item-background-down", - "--system-side-nav-item-background-down-selected", - "--system-side-nav-lang-ja-header-line-height", - "--system-side-nav-lang-ja-text-line-height", - "--system-side-nav-lang-ja-top-level-line-height", - "--system-side-nav-lang-ko-header-line-height", - "--system-side-nav-lang-ko-text-line-height", - "--system-side-nav-lang-ko-top-level-line-height", - "--system-side-nav-lang-zh-header-line-height", - "--system-side-nav-lang-zh-text-line-height", - "--system-side-nav-lang-zh-top-level-line-height", - "--system-side-nav-max-width", - "--system-side-nav-min-height", - "--system-side-nav-min-width", - "--system-side-nav-start-to-content-second-level", - "--system-side-nav-start-to-content-third-level", - "--system-side-nav-start-to-content-with-icon-second-level", - "--system-side-nav-start-to-content-with-icon-third-level", - "--system-side-nav-text-font-family", - "--system-side-nav-text-font-size", - "--system-side-nav-text-font-style", - "--system-side-nav-text-font-weight", - "--system-side-nav-text-line-height", - "--system-side-nav-top-level-font-family", - "--system-side-nav-top-level-font-size", - "--system-side-nav-top-level-font-style", - "--system-side-nav-top-level-font-weight", - "--system-side-nav-top-level-line-height", - "--system-side-nav-top-to-icon", - "--system-side-nav-top-to-label", - "--system-side-nav-width" + "--system-side-nav-item-background-down-selected" ], "passthroughs": [], "high-contrast": [ diff --git a/components/sidenav/themes/spectrum-two.css b/components/sidenav/themes/spectrum-two.css index 4e4594ab11..85869d92db 100644 --- a/components/sidenav/themes/spectrum-two.css +++ b/components/sidenav/themes/spectrum-two.css @@ -13,37 +13,6 @@ @container style(--system: spectrum) { .spectrum-SideNav { - /* focus indicator */ - --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness); - --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color); - - /* layout */ - --spectrum-sidenav-min-height: var(--spectrum-component-height-100); - --spectrum-sidenav-width: 100%; - --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width); - --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width); - --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100); - --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100); - --spectrum-sidenav-inline-padding: var(--spectrum-component-edge-to-text-100); - --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item); - --spectrum-sidenav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100); - --spectrum-sidenav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text); - - --spectrum-sidenav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text); - --spectrum-sidenav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text); - - --spectrum-sidenav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text); - --spectrum-sidenav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text); - - --spectrum-sidenav-heading-top-margin: var(--spectrum-side-navigation-item-to-header); - --spectrum-sidenav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item); - - /* color - background */ - --spectrum-sidenav-background-disabled: transparent; - --spectrum-sidenav-background-default: transparent; --spectrum-sidenav-background-hover: var(--spectrum-gray-100); --spectrum-sidenav-item-background-down: var(--spectrum-gray-200); --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100); @@ -52,47 +21,5 @@ --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200); --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200); --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100); - - /* color font */ - --spectrum-sidenav-header-color: var(--spectrum-gray-600); - - --spectrum-sidenav-content-disabled-color: var(--spectrum-disabled-content-color); - - --spectrum-sidenav-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-sidenav-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-sidenav-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-sidenav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-sidenav-content-color-default-selected: var(--spectrum-neutral-content-color-default); - --spectrum-sidenav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover); - --spectrum-sidenav-content-color-down-selected: var(--spectrum-neutral-content-color-down); - --spectrum-sidenav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus); - - /* typography */ - --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight); - --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100); - --spectrum-sidenav-text-line-height: var(--spectrum-line-height-100); - - --spectrum-sidenav-top-level-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight); - --spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100); - --spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100); - - --spectrum-sidenav-header-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight); - --spectrum-sidenav-header-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-header-font-size: var(--spectrum-font-size-75); - --spectrum-sidenav-header-line-height: var(--spectrum-line-height-100); - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-sidenav-top-level-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100); - } } } diff --git a/components/slider/index.css b/components/slider/index.css index 203a4fcd65..ed4bc4f76f 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -11,17 +11,52 @@ * governing permissions and limitations under the License. */ - @import "./themes/spectrum-two.css"; +@import "./themes/spectrum-two.css"; .spectrum-Slider { - --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2); - --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); + /* 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-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; + + --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-slider-min-size: var(--spectrum-spacing-900); + + --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-track-handleoffset) + calc(var(--spectrum-slider-handle-size) / 2)); + --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2)); --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4); + --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); + --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200); + --spectrum-slider-tick-mark-border-radius: 2px; + --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100); + + /* colors */ + --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default); + --spectrum-slider-tick-label-color: var(--spectrum-neutral-content-color-default); + --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100); + + /* values */ + --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); + --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + + --spectrum-slider-range-track-reset: 0; position: relative; @@ -32,15 +67,52 @@ user-select: none; + &:dir(rtl), &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } &:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp) { - margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-block-size)) / 2); + margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2); } } +.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-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-width-down: var(--spectrum-slider-handle-border-width-down-large); + --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); + --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + + /* TODO: placeholder value for sideLabel variant value width */ + --spectrum-slider-value-inline-size: 18px; +} + +.spectrum-Slider--sizeXL { + --spectrum-slider-font-size: var(--spectrum-font-size-200); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large); + --spectrum-slider-control-height: var(--spectrum-component-height-300); + --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); + --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); + --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + + /* TODO: placeholder value for sideLabel variant value width */ + --spectrum-slider-value-inline-size: 22px; +} + .spectrum-Slider--sideLabel { display: flex; align-items: center; @@ -97,19 +169,6 @@ using control-height here instead. */ .spectrum-Slider--tick { margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); - - /* setting tick marks in relation to label */ - .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-track, @@ -156,21 +215,16 @@ border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); } } +} - /* Applies to the filled-offset variant to keep track the same color for highcontrast mode */ - &::before { - background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); - } - - & ~ & { - 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)); - } +.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)); } /* over-write for Range, without the LTR RTL post-css hack */ @@ -180,7 +234,22 @@ 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; +} +.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))); +} + +.spectrum-Slider--range { .spectrum-Slider-value { user-select: text; } @@ -211,32 +280,11 @@ 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)); } - - &: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-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; - - &::before { - background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); } } -.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))); -} - .spectrum-Slider-ramp { - block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-block-size)); + 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)); @@ -247,11 +295,7 @@ block-size: 100%; /* Flip the ramp automatically for RTL */ - transform: var(--spectrum-logical-rotation,); - } - - path { - fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color))); + transform: var(--spectrum-logical-rotation); } } @@ -277,13 +321,9 @@ outline: none; - 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))); - &:active, &.is-dragged { border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down)); - border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); } &:active, @@ -296,21 +336,21 @@ /* Focus indicator. */ &::before { content: ""; + display: block; position: absolute; - inset-block-start: 50%; inset-inline-start: 50%; + inset-block-start: 50%; - transform: translate(-50%, -50%); - display: block; + 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%; - transition: - box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, - inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, - block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out; + transform: translate(-50%, -50%); .spectrum-Slider:dir(rtl) & { transform: translate(50%, -50%); @@ -319,25 +359,11 @@ /* Keyboard focused */ &.is-focused { - /* Keyboard focused with focus indicator. */ - 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 { 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); - - 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))); } } - - &:hover { - border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover))); - } - - &.is-dragged { - background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))); - border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); - } } /** @@ -345,25 +371,23 @@ * It is still sized and positioned where it would naturally be present so that touch users can find it with haptics. */ .spectrum-Slider-input { - pointer-events: none; - cursor: default; + /* 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; inset-block-start: var(--mod-slider-input-top-size, var(--spectrum-slider-input-top-size)); inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left)); overflow: hidden; - inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); - block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); - - /* Remove the margin for input in Firefox and Safari. */ - margin: 0; - padding: 0; - appearance: none; opacity: 0; + cursor: default; + appearance: none; border: 0; - - background: transparent; + pointer-events: none; &:focus { outline: none; @@ -371,17 +395,15 @@ } .spectrum-Slider-labelContainer { - position: relative; display: flex; align-items: center; + position: relative; inline-size: auto; - margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text)); - font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); - color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color))); + margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text)); /* international support */ &:lang(ja), @@ -393,25 +415,43 @@ } .spectrum-Slider-label { - flex-grow: 1; padding-inline-start: 0; + flex-grow: 1; font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); } .spectrum-Slider-value { - cursor: default; flex-grow: 0; padding-inline-end: 0; + cursor: default; font-feature-settings: "tnum"; text-align: end; +} + +.spectrum-Slider-value { 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)); + } +} + /* TODO: missing core-tokens for tick variant */ .spectrum-Slider-ticks { - z-index: 0; display: flex; justify-content: space-between; + z-index: 0; margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); /* TODO: missing core-token for handle fill-color */ @@ -424,22 +464,20 @@ .spectrum-Slider-tick { position: relative; + inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)); /* tick marks are centered half based on slider control height and tick height */ inset-block-start: calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2); - inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)); &::after { - content: ""; + 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)); - display: block; + 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)); - - background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))); } .spectrum-Slider-tickLabel { @@ -454,8 +492,8 @@ &:first-of-type, &:last-of-type { .spectrum-Slider-tickLabel { - position: absolute; display: block; + position: absolute; margin-inline: 0; } } @@ -482,16 +520,24 @@ /* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */ .spectrum-Slider-handleContainer, .spectrum-Slider-trackContainer { + inline-size: calc(100% + var(--spectrum-slider-handle-size)); position: absolute; inset-block-start: 0; - inline-size: calc(100% + var(--spectrum-slider-handle-size)); margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1); } .spectrum-Slider-trackContainer { + block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); + /* stop edges from peeking out */ overflow: hidden; - block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); +} + +/* Applies to the filled-offset variant to keep track the same color for highcontrast mode */ +.spectrum-Slider-track { + &::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 */ @@ -501,6 +547,10 @@ } } +.spectrum-Slider-labelContainer { + 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 { @@ -509,10 +559,70 @@ } } +.spectrum-Slider-fill { + &::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))); + } +} + +.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))); + + &: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))); + + &::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))); + } +} + .spectrum-Slider--ramp { .spectrum-Slider-handle { - background: var(--mod-slider-ramp-handle-background-color, var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color))); box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active))); + 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; +} + +.spectrum-Slider-tick { + &::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))); + } +} + +.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))); + } } } @@ -532,15 +642,15 @@ } .spectrum-Slider-handle { - pointer-events: none; - cursor: default; - background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color))); border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled))); + 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 { - background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))); border-color: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color))); + background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))); } } @@ -636,8 +746,8 @@ /* Slider handle turns transparent in high contrast mode for ramp */ &.is-disabled { .spectrum-Slider-ramp + .spectrum-Slider-handle { - background-color: ButtonFace; fill: ButtonFace; + background-color: ButtonFace; } } } diff --git a/components/slider/metadata/metadata.json b/components/slider/metadata/metadata.json index cd23a53b9f..2f2a2dd866 100644 --- a/components/slider/metadata/metadata.json +++ b/components/slider/metadata/metadata.json @@ -19,6 +19,9 @@ ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer + .spectrum-Slider-controls", ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label", ".spectrum-Slider--sideLabel .spectrum-Slider-value", + ".spectrum-Slider--sizeL", + ".spectrum-Slider--sizeS", + ".spectrum-Slider--sizeXL", ".spectrum-Slider--tick", ".spectrum-Slider--tick .spectrum-Slider-controls", ".spectrum-Slider--tick .spectrum-Slider-handle", @@ -195,7 +198,6 @@ "--spectrum-slider-min-size", "--spectrum-slider-ramp-handle-background-color", "--spectrum-slider-ramp-handle-border-color-active", - "--spectrum-slider-ramp-track-block-size", "--spectrum-slider-ramp-track-color", "--spectrum-slider-ramp-track-color-disabled", "--spectrum-slider-ramp-track-height", @@ -258,84 +260,27 @@ "--spectrum-text-to-visual-75" ], "system-theme": [ - "--system-slider-cjk-line-height", - "--system-slider-control-height", - "--system-slider-control-to-field-label", - "--system-slider-font-size", "--system-slider-handle-background-color", "--system-slider-handle-background-color-disabled", "--system-slider-handle-border-color", - "--system-slider-handle-border-color-disabled", "--system-slider-handle-border-color-down", "--system-slider-handle-border-color-hover", "--system-slider-handle-border-color-key-focus", "--system-slider-handle-border-radius", - "--system-slider-handle-border-width", - "--system-slider-handle-border-width-down", "--system-slider-handle-disabled-background-color", "--system-slider-handle-focus-ring-color-key-focus", - "--system-slider-handle-size", - "--system-slider-label-margin-start", - "--system-slider-label-text-color", - "--system-slider-label-text-color-disabled", - "--system-slider-label-top-to-text", - "--system-slider-min-size", "--system-slider-ramp-handle-background-color", - "--system-slider-ramp-handle-border-color-active", - "--system-slider-ramp-track-block-size", "--system-slider-ramp-track-color", "--system-slider-ramp-track-color-disabled", - "--system-slider-range-track-reset", - "--system-slider-size-l-control-height", - "--system-slider-size-l-control-to-field-label", - "--system-slider-size-l-font-size", "--system-slider-size-l-handle-border-radius", - "--system-slider-size-l-handle-border-width-down", - "--system-slider-size-l-handle-size", - "--system-slider-size-l-label-top-to-text", - "--system-slider-size-l-value-inline-size", - "--system-slider-size-l-value-side-padding-inline", - "--system-slider-size-m-control-height", - "--system-slider-size-m-control-to-field-label", - "--system-slider-size-m-font-size", "--system-slider-size-m-handle-border-radius", - "--system-slider-size-m-handle-border-width-down", - "--system-slider-size-m-handle-size", - "--system-slider-size-m-label-top-to-text", - "--system-slider-size-m-value-side-padding-inline", - "--system-slider-size-s-control-height", - "--system-slider-size-s-control-to-field-label", - "--system-slider-size-s-font-size", "--system-slider-size-s-handle-border-radius", - "--system-slider-size-s-handle-border-width-down", - "--system-slider-size-s-handle-size", - "--system-slider-size-s-label-top-to-text", - "--system-slider-size-s-value-side-padding-inline", - "--system-slider-size-xl-control-height", - "--system-slider-size-xl-control-to-field-label", - "--system-slider-size-xl-font-size", "--system-slider-size-xl-handle-border-radius", - "--system-slider-size-xl-handle-border-width-down", - "--system-slider-size-xl-handle-size", - "--system-slider-size-xl-label-top-to-text", - "--system-slider-size-xl-value-inline-size", - "--system-slider-size-xl-value-side-padding-inline", - "--system-slider-tick-handle-background-color", - "--system-slider-tick-label-color", - "--system-slider-tick-mark-border-radius", "--system-slider-tick-mark-color", - "--system-slider-tick-mark-color-disabled", - "--system-slider-tick-mark-width", "--system-slider-ticks-handle-background-color", "--system-slider-track-color", - "--system-slider-track-color-disabled", "--system-slider-track-corner-radius", - "--system-slider-track-fill-color", - "--system-slider-track-fill-color-disabled", - "--system-slider-track-fill-thickness", - "--system-slider-track-handleoffset", - "--system-slider-value-inline-size", - "--system-slider-value-side-padding-inline" + "--system-slider-track-fill-color" ], "passthroughs": [], "high-contrast": [ diff --git a/components/slider/themes/spectrum-two.css b/components/slider/themes/spectrum-two.css index 4a6f109af5..b118d77cff 100644 --- a/components/slider/themes/spectrum-two.css +++ b/components/slider/themes/spectrum-two.css @@ -17,90 +17,38 @@ --spectrum-slider-track-fill-color: var(--spectrum-gray-700); --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); + --spectrum-slider-handle-background-color: transparent; --spectrum-slider-handle-background-color-disabled: transparent; --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); --spectrum-slider-handle-border-color: var(--spectrum-gray-700); --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); + --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); - /* TODO: placeholder value for sideLabel variant value width */ - --spectrum-slider-value-inline-size: 18px; - --spectrum-slider-ramp-track-block-size: var(--spectrum-slider-ramp-track-height); - --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-slider-min-size: var(--spectrum-spacing-900); --spectrum-slider-track-corner-radius: 2px; - --spectrum-slider-label-margin-start: var(--spectrum-spacing-300); - --spectrum-slider-handle-border-width: var(--spectrum-border-width-200); - --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); - --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200); - --spectrum-slider-tick-mark-border-radius: 2px; - --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-75); - --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default); - --spectrum-slider-tick-label-color: var(--spectrum-neutral-content-color-default); - --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); - --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - --spectrum-slider-range-track-reset: 0; &, &.spectrum-Slider--sizeM { - --spectrum-slider-font-size: var(--spectrum-font-size-75); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --spectrum-slider-control-height: var(--spectrum-component-height-100); --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); } &.spectrum-Slider--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-500); - --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-500) * 4); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - - /* TODO: placeholder value for sideLabel variant value width */ - --spectrum-slider-value-inline-size: 18px; } &.spectrum-Slider--sizeXL { - --spectrum-slider-font-size: var(--spectrum-font-size-200); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large); - --spectrum-slider-control-height: var(--spectrum-component-height-300); --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - - /* TODO: placeholder value for sideLabel variant value width */ - --spectrum-slider-value-inline-size: 22px; } } } diff --git a/components/splitview/index.css b/components/splitview/index.css index 713d9b98a7..a07ca0b3a8 100644 --- a/components/splitview/index.css +++ b/components/splitview/index.css @@ -11,9 +11,26 @@ * governing permissions and limitations under the License. */ - @import "./themes/spectrum-two.css"; +@import "./themes/spectrum-two.css"; .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-content-color: var(--spectrum-body-color); + + --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-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); + display: flex; overflow: hidden; } diff --git a/components/splitview/metadata/metadata.json b/components/splitview/metadata/metadata.json index e5adadcb37..4902e8e236 100644 --- a/components/splitview/metadata/metadata.json +++ b/components/splitview/metadata/metadata.json @@ -83,21 +83,8 @@ ], "system-theme": [ "--system-split-view-background-color", - "--system-split-view-content-color", "--system-split-view-gripper-border-radius", - "--system-split-view-gripper-border-width-horizontal", - "--system-split-view-gripper-border-width-vertical", - "--system-split-view-gripper-height", - "--system-split-view-gripper-width", - "--system-split-view-handle-background-color", - "--system-split-view-handle-background-color-down", - "--system-split-view-handle-background-color-focus", - "--system-split-view-handle-background-color-hover", - "--system-split-view-handle-width", - "--system-split-view-vertical-gripper-outer-width", - "--system-split-view-vertical-gripper-reset", - "--system-split-view-vertical-gripper-width", - "--system-split-view-vertical-width" + "--system-split-view-handle-background-color" ], "passthroughs": [], "high-contrast": [ diff --git a/components/splitview/themes/spectrum-two.css b/components/splitview/themes/spectrum-two.css index 4a7a96ab8e..14ef6131e5 100644 --- a/components/splitview/themes/spectrum-two.css +++ b/components/splitview/themes/spectrum-two.css @@ -13,24 +13,8 @@ @container style(--system: spectrum) { .spectrum-SplitView { - --spectrum-splitview-vertical-width: 100%; - --spectrum-splitview-vertical-gripper-width: 50%; - --spectrum-splitview-vertical-gripper-outer-width: 100%; - --spectrum-splitview-vertical-gripper-reset: 0; - --spectrum-splitview-background-color: var(--spectrum-gray-75); - --spectrum-splitview-content-color: var(--spectrum-body-color); - --spectrum-splitview-handle-background-color: var(--spectrum-gray-200); - --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400); - --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800); - --spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color); - --spectrum-splitview-handle-width: var(--spectrum-border-width-200); - --spectrum-splitview-gripper-border-radius: 2px; - --spectrum-splitview-gripper-width: var(--spectrum-border-width-400); - --spectrum-splitview-gripper-height: 16px; /* No good token to use for this */ - --spectrum-splitview-gripper-border-width-horizontal: 3px; /* No good token to use for this */ - --spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400); } } diff --git a/components/statuslight/index.css b/components/statuslight/index.css index 39f5a92aec..5c1ae16842 100644 --- a/components/statuslight/index.css +++ b/components/statuslight/index.css @@ -13,6 +13,99 @@ @import "./themes/spectrum-two.css"; +.spectrum-StatusLight { + /* Static tokens */ + --spectrum-statuslight-corner-radius: 50%; + --spectrum-statuslight-font-weight: 400; + --spectrum-statuslight-border-width: var(--spectrum-border-width-100); + + /* Size */ + --spectrum-statuslight-height: var(--spectrum-component-height-100); + --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium); + --spectrum-statuslight-line-height: var(--spectrum-line-height-100); + --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100); + + --spectrum-statuslight-font-size: var(--spectrum-font-size-100); + + /* Space */ + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100); + --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); + --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); + + /* Color */ + --spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color); + --spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-visual-color); + --spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color); + --spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color); + --spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color); + --spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color); + --spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color); + --spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color); + --spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color); + --spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color); + --spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color); + --spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-visual-color); + --spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-visual-color); + --spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color); + --spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color); + --spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-visual-color); + --spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color); + --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color); + --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color); + --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color); +} + +.spectrum-StatusLight--sizeS { + --spectrum-statuslight-height: var(--spectrum-component-height-75); + --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-small); + + --spectrum-statuslight-font-size: var(--spectrum-font-size-75); + + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75); + --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small); + --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75); + --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75); +} + +.spectrum-StatusLight--sizeM { + --spectrum-statuslight-height: var(--spectrum-component-height-100); + --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium); + + --spectrum-statuslight-font-size: var(--spectrum-font-size-100); + + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100); + --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); + --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); +} + +.spectrum-StatusLight--sizeL { + --spectrum-statuslight-height: var(--spectrum-component-height-200); + --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-large); + + --spectrum-statuslight-font-size: var(--spectrum-font-size-200); + + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200); + --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large); + --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200); + --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200); +} + +.spectrum-StatusLight--sizeXL { + --spectrum-statuslight-height: var(--spectrum-component-height-300); + --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-extra-large); + + --spectrum-statuslight-font-size: var(--spectrum-font-size-300); + + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300); + --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large); + --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300); + --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300); +} + .spectrum-StatusLight { display: flex; flex-direction: row; @@ -55,11 +148,13 @@ } } -/* Semantic Colors */ - .spectrum-StatusLight--neutral { 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))); &::before { diff --git a/components/statuslight/metadata/metadata.json b/components/statuslight/metadata/metadata.json index 8d3c1b0199..7c7c6a7587 100644 --- a/components/statuslight/metadata/metadata.json +++ b/components/statuslight/metadata/metadata.json @@ -22,11 +22,11 @@ ".spectrum-StatusLight--purple:before", ".spectrum-StatusLight--red:before", ".spectrum-StatusLight--seafoam:before", + ".spectrum-StatusLight--sizeL", + ".spectrum-StatusLight--sizeM", + ".spectrum-StatusLight--sizeS", + ".spectrum-StatusLight--sizeXL", ".spectrum-StatusLight--yellow:before", - ".spectrum-StatusLight.spectrum-StatusLight--sizeL", - ".spectrum-StatusLight.spectrum-StatusLight--sizeM", - ".spectrum-StatusLight.spectrum-StatusLight--sizeS", - ".spectrum-StatusLight.spectrum-StatusLight--sizeXL", ".spectrum-StatusLight:before", ".spectrum-StatusLight:lang(ja)", ".spectrum-StatusLight:lang(ko)", @@ -160,70 +160,7 @@ "--spectrum-text-to-visual-75", "--spectrum-yellow-visual-color" ], - "system-theme": [ - "--system-status-light-border-width", - "--system-status-light-content-color-default", - "--system-status-light-corner-radius", - "--system-status-light-dot-size", - "--system-status-light-font-size", - "--system-status-light-font-weight", - "--system-status-light-height", - "--system-status-light-line-height", - "--system-status-light-line-height-cjk", - "--system-status-light-nonsemantic-blue-color", - "--system-status-light-nonsemantic-celery-color", - "--system-status-light-nonsemantic-chartreuse-color", - "--system-status-light-nonsemantic-cyan-color", - "--system-status-light-nonsemantic-fuchsia-color", - "--system-status-light-nonsemantic-gray-color", - "--system-status-light-nonsemantic-green-color", - "--system-status-light-nonsemantic-indigo-color", - "--system-status-light-nonsemantic-magenta-color", - "--system-status-light-nonsemantic-orange-color", - "--system-status-light-nonsemantic-purple-color", - "--system-status-light-nonsemantic-red-color", - "--system-status-light-nonsemantic-seafoam-color", - "--system-status-light-nonsemantic-yellow-color", - "--system-status-light-semantic-accent-color", - "--system-status-light-semantic-info-color", - "--system-status-light-semantic-negative-color", - "--system-status-light-semantic-neutral-color", - "--system-status-light-semantic-notice-color", - "--system-status-light-semantic-positive-color", - "--system-status-light-size-l-dot-size", - "--system-status-light-size-l-font-size", - "--system-status-light-size-l-height", - "--system-status-light-size-l-spacing-bottom-to-label", - "--system-status-light-size-l-spacing-dot-to-label", - "--system-status-light-size-l-spacing-top-to-dot", - "--system-status-light-size-l-spacing-top-to-label", - "--system-status-light-size-m-dot-size", - "--system-status-light-size-m-font-size", - "--system-status-light-size-m-height", - "--system-status-light-size-m-spacing-bottom-to-label", - "--system-status-light-size-m-spacing-dot-to-label", - "--system-status-light-size-m-spacing-top-to-dot", - "--system-status-light-size-m-spacing-top-to-label", - "--system-status-light-size-s-dot-size", - "--system-status-light-size-s-font-size", - "--system-status-light-size-s-height", - "--system-status-light-size-s-spacing-bottom-to-label", - "--system-status-light-size-s-spacing-dot-to-label", - "--system-status-light-size-s-spacing-top-to-dot", - "--system-status-light-size-s-spacing-top-to-label", - "--system-status-light-size-xl-dot-size", - "--system-status-light-size-xl-font-size", - "--system-status-light-size-xl-height", - "--system-status-light-size-xl-spacing-bottom-to-label", - "--system-status-light-size-xl-spacing-dot-to-label", - "--system-status-light-size-xl-spacing-top-to-dot", - "--system-status-light-size-xl-spacing-top-to-label", - "--system-status-light-spacing-bottom-to-label", - "--system-status-light-spacing-dot-to-label", - "--system-status-light-spacing-top-to-dot", - "--system-status-light-spacing-top-to-label", - "--system-status-light-subdued-content-color-default" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-statuslight-content-color-default", diff --git a/components/statuslight/themes/spectrum-two.css b/components/statuslight/themes/spectrum-two.css index ff1b828741..3b48a570c2 100644 --- a/components/statuslight/themes/spectrum-two.css +++ b/components/statuslight/themes/spectrum-two.css @@ -10,89 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-StatusLight { - /* Static tokens */ - --spectrum-statuslight-corner-radius: 50%; - --spectrum-statuslight-font-weight: 400; - --spectrum-statuslight-border-width: var(--spectrum-border-width-100); - - /* Size */ - --spectrum-statuslight-line-height: var(--spectrum-line-height-100); - --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-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--sizeM { - --spectrum-statuslight-height: var(--spectrum-component-height-100); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium); - - --spectrum-statuslight-font-size: var(--spectrum-font-size-100); - - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); - } - - &.spectrum-StatusLight--sizeS { - --spectrum-statuslight-height: var(--spectrum-component-height-75); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-small); - - --spectrum-statuslight-font-size: var(--spectrum-font-size-75); - - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75); - } - - &.spectrum-StatusLight--sizeL { - --spectrum-statuslight-height: var(--spectrum-component-height-200); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-large); - - --spectrum-statuslight-font-size: var(--spectrum-font-size-200); - - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200); - } - - &.spectrum-StatusLight--sizeXL { - --spectrum-statuslight-height: var(--spectrum-component-height-300); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-extra-large); - - --spectrum-statuslight-font-size: var(--spectrum-font-size-300); - - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300); - } - } -} diff --git a/components/steplist/index.css b/components/steplist/index.css index 79096aaff8..4d223eb37a 100644 --- a/components/steplist/index.css +++ b/components/steplist/index.css @@ -14,6 +14,38 @@ @import "./themes/spectrum-two.css"; .spectrum-Steplist { + /* The width of a step */ + --spectrum-steplist-step-width: 80px; + + /* The diameter of the marker */ + --spectrum-steplist-marker-diameter: 8px; + + /* The width of the hit area */ + --spectrum-steplist-marker-hitArea: 20px; + + /* The height of the line */ + --spectrum-steplist-segment-height: 2px; + + /* This gives enough space for one line of text */ + --spectrum-steplist-topPadding: 22px; + --spectrum-steplist-small-topPadding: 11px; + + /* This gives enough space for the longest possible label */ + --spectrum-steplist-sidePadding: 60px; + + /* Offset from the BOTTOM of the steplist */ + --spectrum-steplist-label-labelOffset: 10px; + + /* Font size of the label */ + --spectrum-steplist-label-text-size: 12px; + + --spectrum-steplist-current-label-text-color: var(--spectrum-gray-800); + --spectrum-steplist-current-marker-color: var(--spectrum-gray-800); + --spectrum-steplist-incomplete-label-color: var(--spectrum-gray-600); + --spectrum-steplist-complete-label-text-color: var(--spectrum-gray-700); + --spectrum-steplist-complete-marker-background-color: var(--spectrum-gray-600); + --spectrum-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600); + /* Contain child elements with positive z-index */ z-index: 0; position: relative; @@ -28,7 +60,6 @@ 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 { @@ -148,7 +179,6 @@ inset-inline-start: 50%; inset-block-end: var(--mod-steplist-label-labelOffset, var(--spectrum-steplist-label-labelOffset)); - display: block; inline-size: calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) * 1.5); diff --git a/components/steplist/metadata/metadata.json b/components/steplist/metadata/metadata.json index 1accae2239..3e4e5dc0be 100644 --- a/components/steplist/metadata/metadata.json +++ b/components/steplist/metadata/metadata.json @@ -92,23 +92,8 @@ "--spectrum-gray-800" ], "system-theme": [ - "--system-steplist-complete-label-text-color", - "--system-steplist-complete-marker-background-color", - "--system-steplist-complete-segment-border-block-end-color", - "--system-steplist-current-label-text-color", - "--system-steplist-current-marker-color", - "--system-steplist-incomplete-label-color", "--system-steplist-incomplete-marker-border-color", - "--system-steplist-incomplete-segment-border-block-end-color", - "--system-steplist-label-label-offset", - "--system-steplist-label-text-size", - "--system-steplist-marker-diameter", - "--system-steplist-marker-hit-area", - "--system-steplist-segment-height", - "--system-steplist-side-padding", - "--system-steplist-small-top-padding", - "--system-steplist-step-width", - "--system-steplist-top-padding" + "--system-steplist-incomplete-segment-border-block-end-color" ], "passthroughs": [], "high-contrast": [ diff --git a/components/steplist/themes/spectrum-two.css b/components/steplist/themes/spectrum-two.css index 6b93b324a2..649e9fb4d3 100644 --- a/components/steplist/themes/spectrum-two.css +++ b/components/steplist/themes/spectrum-two.css @@ -13,38 +13,7 @@ @container style(--system: spectrum) { .spectrum-Steplist { - /* The width of a step */ - --spectrum-steplist-step-width: 80px; - - /* The diameter of the marker */ - --spectrum-steplist-marker-diameter: 8px; - - /* The width of the hit area */ - --spectrum-steplist-marker-hitArea: 20px; - - /* The height of the line */ - --spectrum-steplist-segment-height: 2px; - - /* This gives enough space for one line of text */ - --spectrum-steplist-topPadding: 22px; - --spectrum-steplist-small-topPadding: 11px; - - /* This gives enough space for the longest possible label */ - --spectrum-steplist-sidePadding: 60px; - - /* Offset from the BOTTOM of the steplist */ - --spectrum-steplist-label-labelOffset: 10px; - - /* Font size of the label */ - --spectrum-steplist-label-text-size: 12px; - - --spectrum-steplist-current-label-text-color: var(--spectrum-gray-800); - --spectrum-steplist-current-marker-color: var(--spectrum-gray-800); - --spectrum-steplist-complete-label-text-color: var(--spectrum-gray-700); - --spectrum-steplist-incomplete-label-color: var(--spectrum-gray-600); - --spectrum-steplist-complete-marker-background-color: var(--spectrum-gray-600); --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200); --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200); - --spectrum-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600); } } diff --git a/components/stepper/index.css b/components/stepper/index.css index 52c08648a8..af689ceca8 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -14,137 +14,90 @@ @import "./themes/spectrum-two.css"; .spectrum-Stepper { - /* @passthrough start */ + /* 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-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); + + --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-infield-button-border-radius-reset: var(--spectrum-stepper-button-border-radius-reset); - --mod-infield-button-padding: var(--spectrum-stepper-button-padding); --mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - /* @passthrough end */ - - position: relative; - display: inline-flex; - flex-flow: row nowrap; - inline-size: var(--mod-stepper-width, calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-stepper-min-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + (var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2))); - 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))); - - &::before { - content: ""; + &.spectrum-Stepper--sizeS { + --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-small); + --spectrum-stepper-height: var(--spectrum-component-height-75); } - &::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--sizeL { + --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-large); + --spectrum-stepper-height: var(--spectrum-component-height-200); } - /*** Hover ***/ - &:hover:not(.is-disabled) { - --mod-stepper-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); - - /* @passthrough */ - --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))); + &.spectrum-Stepper--sizeXL { + --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-extra-large); + --spectrum-stepper-height: var(--spectrum-component-height-300); } - /*** Focused ***/ - &.is-focused:not(.is-disabled), - &:focus:not(.is-disabled) { - --mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus))); - - /* @passthrough start */ + /*** 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; - --mod-textfield-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus))); - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus))); - /* @passthrough end */ - - &:hover { - --mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))); - - /* @passthrough */ - --mod-textfield-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, 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))); - } } - /*** Keyboard Focused ***/ - &.is-keyboardFocused:not(.is-disabled), - &:focus-visible:not(.is-disabled) { - --mod-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus))); - - /* @passthrough */ - --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))); - } + &.is-disabled { + --mod-infield-button-border-color-quiet-disabled: var(--spectrum-disabled-border-color); } /*** Invalid ***/ - &.is-invalid:not(.is-disabled) { - --mod-stepper-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid)); - --mod-stepper-border-color-hover: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-stepper-border-color-hover-invalid)); - --mod-stepper-border-color-focus: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid)); - --mod-stepper-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid)); - --mod-stepper-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid)); - - /* @passthrough start */ + &.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; - /* @passthrough end */ &:hover { - /* @passthrough */ - --mod-infield-button-border-color: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-stepper-border-color-hover-invalid)); + --mod-infield-button-border-color: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)); } &.is-focused, &:focus { - /* @passthrough */ --mod-infield-button-border-color: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid)); &:hover { - /* @passthrough */ --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 { - /* @passthrough */ --mod-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid)); } } +} - &.is-disabled { - --spectrum-stepper-border-color: var(--spectrum-stepper-button-border-color-disabled); - --spectrum-stepper-border-color-hover: var(--spectrum-stepper-button-border-color-disabled); - --spectrum-stepper-border-color-focus: var(--spectrum-stepper-button-border-color-disabled); - --spectrum-stepper-border-color-focus-hover: var(--spectrum-stepper-button-border-color-disabled); - --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-stepper-button-border-color-disabled); - --spectrum-stepper-buttons-background-color: var(--spectrum-stepper-buttons-background-color-disabled); - - /* @passthrough start */ - --mod-infield-button-border-width: var(--spectrum-stepper-button-border-width-disabled); - --mod-infield-button-border-color: var(--spectrum-stepper-button-border-color-disabled); - --mod-textfield-border-color-disabled: var(--spectrum-stepper-button-border-color-disabled); - /* @passthrough end */ - } +.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))); @@ -153,85 +106,134 @@ border-inline-end-width: 0; } - /* stylelint-disable selector-class-pattern -- hide-stepper is a legacy class name */ - .spectrum-Stepper-textfield:not(:has(+ .spectrum-Stepper-buttons)) .spectrum-Stepper-input, - &.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)); + /*** Hover ***/ + &:hover:not(.is-invalid) { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover))); } - /* stylelint-enable selector-class-pattern */ - /* container for stepUp and stepDown buttons */ - .spectrum-Stepper-buttons { - display: flex; - flex-direction: column; - justify-content: center; - box-sizing: border-box; + &: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))); - block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); - inline-size: var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)); + &:not(.is-disabled) { + .spectrum-Stepper-input { + outline: none; + } - 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; + .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))); + } + } - /* 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)); + &:hover { + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- allows for --spectrum-stepper-buttons-border-color-focus-hover to be defined outside of current context */ + --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))); - 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; + .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))); + } + } } - /*** Quiet ***/ - &.spectrum-Stepper--quiet { - --mod-stepper-buttons-border-width: 0; - --mod-stepper-buttons-background-color: transparent; + /*** 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))); - /* quiet corners are not rounded */ - --mod-stepper-border-radius: 0; + &:not(.is-disabled) { + /* 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)); - /* @passthrough start */ - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); - --mod-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width)); - --mod-infield-button-fill-justify-content: flex-end; - --mod-infield-button-edge-to-fill: 0; - --mod-textfield-focus-indicator-color: transparent; - --mod-textfield-background-color: transparent; - /* @passthrough end */ - - /* stylelint-disable selector-class-pattern -- @deprecated hide-stepper */ - .spectrum-Stepper-textfield:not(:has(+ .spectrum-Stepper-buttons)) .spectrum-Stepper-input, - &.hide-stepper .spectrum-Stepper-input { - border-inline-end-width: 0; - border-end-end-radius: 0; + .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))); + } } - /* stylelint-enable selector-class-pattern */ + } +} + +/*** 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 */ + &:not(.is-disabled):hover { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); .spectrum-Stepper-buttons { - border-width: 0; - border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - border-block-end-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); - border-block-end-style: solid; - border-end-end-radius: 0; + background-color: transparent; } + } - /* quiet focus */ - &.is-focused, - &:focus { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-border-color-focus))); + /* quiet focus */ + &.is-focused, + &:focus { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus))); - &:hover { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))); - } + &:hover { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))); } + } - /* quiet keyboard focused */ - &.is-keyboardFocused:not(.is-disabled) { - --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus))); + /* 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))); + &:not(.is-disabled) { outline: none; /* quiet focus indicator only on bottom border */ @@ -246,6 +248,40 @@ } } +.spectrum-Stepper::before { + content: ""; +} + +/* container for stepUp and stepDown buttons */ +.spectrum-Stepper-buttons { + display: flex; + flex-direction: column; + justify-content: center; + box-sizing: border-box; + + block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); + inline-size: var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)); + + border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); + border-style: var(--mod-stepper-buttons-border-style, var(--spectrum-stepper-buttons-border-style)); + border-width: var(--highcontrast-stepper-buttons-border-width, var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width))); + border-inline-start-width: 0; + + /* Have to add border radius here to avoid overlapping textfield border */ + border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); + border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); + + background-color: var(--highcontrast-stepper-buttons-background-color, var(--mod-stepper-buttons-background-color, var(--spectrum-stepper-buttons-background-color))); + transition: border-color var(--mod-stepper-animation-duration, var(--spectrum-stepper-animation-duration)) ease-in-out; +} + +/* hide-stepper */ +.spectrum-Stepper.hide-stepper .spectrum-Stepper-input { + border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); + border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); + border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); +} + @media (forced-colors: active) { .spectrum-Stepper { --highcontrast-stepper-border-color: CanvasText; @@ -253,14 +289,10 @@ --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-invalid { @@ -269,15 +301,13 @@ --highcontrast-stepper-border-color-focus: Highlight; --highcontrast-stepper-border-color-focus-hover: Highlight; --highcontrast-stepper-border-color-keyboard-focus: Highlight; - /* @passthrough */ --highcontrast-infield-button-border-color: Highlight; } &.is-disabled { --highcontrast-stepper-border-color: GrayText; - --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - /* @passthrough */ --highcontrast-infield-button-border-color: GrayText; + --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); } } } diff --git a/components/stepper/metadata/metadata.json b/components/stepper/metadata/metadata.json index ed3b1ff5cb..35cf679eda 100644 --- a/components/stepper/metadata/metadata.json +++ b/components/stepper/metadata/metadata.json @@ -2,48 +2,61 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Stepper", - ".spectrum-Stepper .spectrum-Stepper-buttons", ".spectrum-Stepper .spectrum-Stepper-input", - ".spectrum-Stepper .spectrum-Stepper-textfield:not(:has(+ .spectrum-Stepper-buttons)) .spectrum-Stepper-input", + ".spectrum-Stepper-buttons", ".spectrum-Stepper.hide-stepper .spectrum-Stepper-input", ".spectrum-Stepper.is-disabled", - ".spectrum-Stepper.is-focused:not(.is-disabled)", - ".spectrum-Stepper.is-focused:not(.is-disabled):hover", + ".spectrum-Stepper.is-focused", + ".spectrum-Stepper.is-focused:hover", + ".spectrum-Stepper.is-focused:hover .spectrum-Stepper-buttons", + ".spectrum-Stepper.is-focused:hover .spectrum-Stepper-input", + ".spectrum-Stepper.is-focused:not(.is-disabled) .spectrum-Stepper-buttons", + ".spectrum-Stepper.is-focused:not(.is-disabled) .spectrum-Stepper-input", ".spectrum-Stepper.is-invalid", - ".spectrum-Stepper.is-invalid.is-focused:not(.is-disabled)", - ".spectrum-Stepper.is-invalid.is-focused:not(.is-disabled):hover", - ".spectrum-Stepper.is-invalid.is-keyboardFocused:not(.is-disabled)", - ".spectrum-Stepper.is-invalid:not(.is-disabled)", - ".spectrum-Stepper.is-invalid:not(.is-disabled):focus", - ".spectrum-Stepper.is-invalid:not(.is-disabled):focus-visible", - ".spectrum-Stepper.is-invalid:not(.is-disabled):focus:hover", - ".spectrum-Stepper.is-invalid:not(.is-disabled):hover", + ".spectrum-Stepper.is-invalid.is-focused", + ".spectrum-Stepper.is-invalid.is-focused:hover", + ".spectrum-Stepper.is-invalid.is-keyboardFocused", + ".spectrum-Stepper.is-invalid:focus", + ".spectrum-Stepper.is-invalid:focus-visible", + ".spectrum-Stepper.is-invalid:focus:hover", + ".spectrum-Stepper.is-invalid:hover", + ".spectrum-Stepper.is-keyboardFocused", ".spectrum-Stepper.is-keyboardFocused:not(.is-disabled)", ".spectrum-Stepper.is-keyboardFocused:not(.is-disabled) .spectrum-Stepper-buttons", ".spectrum-Stepper.is-keyboardFocused:not(.is-disabled) .spectrum-Stepper-input", ".spectrum-Stepper.spectrum-Stepper--quiet", + ".spectrum-Stepper.spectrum-Stepper--quiet .spectrum-Stepper-button", ".spectrum-Stepper.spectrum-Stepper--quiet .spectrum-Stepper-buttons", - ".spectrum-Stepper.spectrum-Stepper--quiet .spectrum-Stepper-textfield:not(:has(+ .spectrum-Stepper-buttons)) .spectrum-Stepper-input", + ".spectrum-Stepper.spectrum-Stepper--quiet .spectrum-Stepper-input", ".spectrum-Stepper.spectrum-Stepper--quiet.hide-stepper .spectrum-Stepper-input", ".spectrum-Stepper.spectrum-Stepper--quiet.is-focused", ".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:hover", + ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused", ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)", ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled):after", ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled):hover", + ".spectrum-Stepper.spectrum-Stepper--quiet:after", ".spectrum-Stepper.spectrum-Stepper--quiet:focus", ".spectrum-Stepper.spectrum-Stepper--quiet:focus:hover", + ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover", + ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover .spectrum-Stepper-buttons", ".spectrum-Stepper.spectrum-Stepper--sizeL", - ".spectrum-Stepper.spectrum-Stepper--sizeM", ".spectrum-Stepper.spectrum-Stepper--sizeS", ".spectrum-Stepper.spectrum-Stepper--sizeXL", - ".spectrum-Stepper:after", ".spectrum-Stepper:before", + ".spectrum-Stepper:focus", + ".spectrum-Stepper:focus-visible", ".spectrum-Stepper:focus-visible:not(.is-disabled)", ".spectrum-Stepper:focus-visible:not(.is-disabled) .spectrum-Stepper-buttons", ".spectrum-Stepper:focus-visible:not(.is-disabled) .spectrum-Stepper-input", - ".spectrum-Stepper:focus:not(.is-disabled)", - ".spectrum-Stepper:focus:not(.is-disabled):hover", - ".spectrum-Stepper:hover:not(.is-disabled)" + ".spectrum-Stepper:focus:hover", + ".spectrum-Stepper:focus:hover .spectrum-Stepper-buttons", + ".spectrum-Stepper:focus:hover .spectrum-Stepper-input", + ".spectrum-Stepper:focus:not(.is-disabled) .spectrum-Stepper-buttons", + ".spectrum-Stepper:focus:not(.is-disabled) .spectrum-Stepper-input", + ".spectrum-Stepper:hover:not(.is-disabled) .spectrum-Stepper-buttons", + ".spectrum-Stepper:hover:not(.is-disabled) .spectrum-Stepper-input", + ".spectrum-Stepper:hover:not(.is-invalid)" ], "modifiers": [ "--mod-stepper-animation-duration", @@ -92,15 +105,14 @@ "--spectrum-stepper-border-radius", "--spectrum-stepper-border-width", "--spectrum-stepper-button-border-color-disabled", - "--spectrum-stepper-button-border-radius-reset", "--spectrum-stepper-button-border-width", "--spectrum-stepper-button-border-width-disabled", - "--spectrum-stepper-button-padding", "--spectrum-stepper-button-width", "--spectrum-stepper-buttons-background-color", "--spectrum-stepper-buttons-background-color-disabled", "--spectrum-stepper-buttons-border-color", "--spectrum-stepper-buttons-border-color-focus", + "--spectrum-stepper-buttons-border-color-focus-hover", "--spectrum-stepper-buttons-border-color-hover", "--spectrum-stepper-buttons-border-color-keyboard-focus", "--spectrum-stepper-buttons-border-style", @@ -109,7 +121,7 @@ "--spectrum-stepper-focus-indicator-gap", "--spectrum-stepper-focus-indicator-width", "--spectrum-stepper-height", - "--spectrum-stepper-min-width-multiplier" + "--spectrum-stepper-width" ], "global": [ "--spectrum-animation-duration-100", @@ -129,7 +141,6 @@ "--spectrum-gray-600", "--spectrum-gray-800", "--spectrum-gray-900", - "--spectrum-in-field-button-edge-to-fill", "--spectrum-in-field-button-width-stacked-extra-large", "--spectrum-in-field-button-width-stacked-large", "--spectrum-in-field-button-width-stacked-medium", @@ -142,7 +153,6 @@ "--spectrum-text-field-minimum-width-multiplier" ], "system-theme": [ - "--system-stepper-animation-duration", "--system-stepper-border-color", "--system-stepper-border-color-focus", "--system-stepper-border-color-focus-hover", @@ -153,14 +163,10 @@ "--system-stepper-border-color-invalid", "--system-stepper-border-color-keyboard-focus", "--system-stepper-border-color-keyboard-focus-invalid", - "--system-stepper-border-radius", "--system-stepper-border-width", "--system-stepper-button-border-color-disabled", - "--system-stepper-button-border-radius-reset", "--system-stepper-button-border-width", "--system-stepper-button-border-width-disabled", - "--system-stepper-button-padding", - "--system-stepper-button-width", "--system-stepper-buttons-background-color", "--system-stepper-buttons-background-color-disabled", "--system-stepper-buttons-border-color", @@ -168,32 +174,18 @@ "--system-stepper-buttons-border-color-hover", "--system-stepper-buttons-border-color-keyboard-focus", "--system-stepper-buttons-border-style", - "--system-stepper-buttons-border-width", - "--system-stepper-focus-indicator-color", - "--system-stepper-focus-indicator-gap", - "--system-stepper-focus-indicator-width", - "--system-stepper-height", - "--system-stepper-min-width-multiplier", - "--system-stepper-size-l-button-width", - "--system-stepper-size-l-height", - "--system-stepper-size-m-button-width", - "--system-stepper-size-m-height", - "--system-stepper-size-s-button-width", - "--system-stepper-size-s-height", - "--system-stepper-size-xl-button-width", - "--system-stepper-size-xl-height" + "--system-stepper-buttons-border-width" ], "passthroughs": [ + "--mod-infield-button-border-block-end-width", "--mod-infield-button-border-color", - "--mod-infield-button-border-radius-reset", + "--mod-infield-button-border-color-quiet-disabled", "--mod-infield-button-border-width", - "--mod-infield-button-edge-to-fill", "--mod-infield-button-fill-justify-content", - "--mod-infield-button-padding", + "--mod-infield-button-stacked-bottom-border-block-end-width", + "--mod-infield-button-stacked-bottom-border-radius-end-end", + "--mod-infield-button-stacked-bottom-border-radius-end-start", "--mod-infield-button-width-stacked", - "--mod-textfield-background-color", - "--mod-textfield-border-color", - "--mod-textfield-border-color-disabled", "--mod-textfield-border-width", "--mod-textfield-focus-indicator-color", "--mod-textfield-icon-spacing-inline-start-invalid" @@ -205,6 +197,10 @@ "--highcontrast-stepper-border-color-focus-hover", "--highcontrast-stepper-border-color-hover", "--highcontrast-stepper-border-color-keyboard-focus", + "--highcontrast-stepper-button-background-color-default", + "--highcontrast-stepper-button-background-color-focus", + "--highcontrast-stepper-button-background-color-hover", + "--highcontrast-stepper-button-background-color-keyboard-focus", "--highcontrast-stepper-buttons-background-color", "--highcontrast-stepper-buttons-border-width", "--highcontrast-stepper-focus-indicator-color" diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css index bcfcabe98f..a2ba3ff27d 100644 --- a/components/stepper/themes/express.css +++ b/components/stepper/themes/express.css @@ -32,7 +32,6 @@ --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; /** Invalid **/ diff --git a/components/stepper/themes/spectrum-two.css b/components/stepper/themes/spectrum-two.css index ac2191e09a..016a57d9d2 100644 --- a/components/stepper/themes/spectrum-two.css +++ b/components/stepper/themes/spectrum-two.css @@ -19,20 +19,15 @@ --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800); --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --spectrum-stepper-border-radius: var(--spectrum-corner-radius-100); - --spectrum-stepper-min-width-multiplier: var(--spectrum-text-field-minimum-width-multiplier); - --spectrum-stepper-animation-duration: var(--spectrum-animation-duration-100); --spectrum-stepper-buttons-border-style: none; --spectrum-stepper-buttons-border-width: 0; - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-25); --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); + --spectrum-stepper-buttons-background-color: var(--spectrum-gray-25); --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600); --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800); --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); - --spectrum-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --spectrum-stepper-button-border-radius-reset: 0px; --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); /** Invalid **/ @@ -42,35 +37,9 @@ --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); - /*** Focus Indicator ***/ - --spectrum-stepper-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --spectrum-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); - /** Disabled **/ --spectrum-stepper-button-border-color-disabled: var(--spectrum-disabled-border-color); --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-100); --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); - - &, - &.spectrum-Stepper--sizeM { - --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium); - --spectrum-stepper-height: var(--spectrum-component-height-100); - } - - &.spectrum-Stepper--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); - } } } diff --git a/components/swatch/index.css b/components/swatch/index.css index 8c7954e94b..fb446bb0c1 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -13,6 +13,54 @@ @import "./themes/spectrum-two.css"; +/* Swatch tokens */ +.spectrum-Swatch { + /* Placeholder tokens */ + --spectrum-swatch-focus-indicator-border-radius: 8px; + --spectrum-swatch-icon-border-color: rgb(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-disabled-icon-border-color: var(--spectrum-swatch-disabled-icon-border-color); + --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); + --spectrum-swatch-slash-icon-color: var(--spectrum-red-900); + --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); +} + +.spectrum-Swatch--sizeXS { + --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); +} + +.spectrum-Swatch--sizeS { + --spectrum-swatch-size: var(--spectrum-swatch-size-small); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); +} + +.spectrum-Swatch--sizeM { + --spectrum-swatch-size: var(--spectrum-swatch-size-medium); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); +} + +.spectrum-Swatch--sizeL { + --spectrum-swatch-size: var(--spectrum-swatch-size-large); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large); +} + /* Windows high contrast mode */ @media (forced-colors: active) { .spectrum-Swatch { @@ -193,6 +241,7 @@ position: absolute; inset: 0; z-index: 0; + background-color: var(--spectrum-picked-color, transparent); /* Swatch border */ @@ -206,6 +255,7 @@ .spectrum-Swatch-fill { &::before { box-shadow: none; + background-color: var(--spectrum-picked-color, transparent); } } @@ -222,6 +272,7 @@ .spectrum-Swatch-mixedValueIcon { display: none; pointer-events: none; + color: var(--spectrum-picked-color, transparent); } diff --git a/components/swatch/metadata/metadata.json b/components/swatch/metadata/metadata.json index aa6fda63cc..f6256c3d30 100644 --- a/components/swatch/metadata/metadata.json +++ b/components/swatch/metadata/metadata.json @@ -21,6 +21,10 @@ ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before", ".spectrum-Swatch--roundingNone:after", ".spectrum-Swatch--roundingNone:before", + ".spectrum-Swatch--sizeL", + ".spectrum-Swatch--sizeM", + ".spectrum-Swatch--sizeS", + ".spectrum-Swatch--sizeXS", ".spectrum-Swatch-disabledIcon", ".spectrum-Swatch-disabledIcon path:first-child", ".spectrum-Swatch-disabledIcon path:last-child", @@ -40,10 +44,6 @@ ".spectrum-Swatch.is-selected .spectrum-Swatch-fill", ".spectrum-Swatch.is-selected .spectrum-Swatch-fill:before", ".spectrum-Swatch.is-selected:before", - ".spectrum-Swatch.spectrum-Swatch--sizeL", - ".spectrum-Swatch.spectrum-Swatch--sizeM", - ".spectrum-Swatch.spectrum-Swatch--sizeS", - ".spectrum-Swatch.spectrum-Swatch--sizeXS", ".spectrum-Swatch:after", ".spectrum-Swatch:before", ".spectrum-Swatch:focus-visible:after", @@ -73,13 +73,13 @@ "component": [ "--spectrum-swatch-border-color", "--spectrum-swatch-border-color-light", - "--spectrum-swatch-border-color-light-opacity", "--spectrum-swatch-border-color-opacity", "--spectrum-swatch-border-color-selected", "--spectrum-swatch-border-radius", "--spectrum-swatch-border-thickness", "--spectrum-swatch-border-thickness-selected", "--spectrum-swatch-dash-icon-color", + "--spectrum-swatch-disabled-icon-border-color", "--spectrum-swatch-disabled-icon-color", "--spectrum-swatch-disabled-icon-size", "--spectrum-swatch-focus-indicator-border-radius", @@ -87,6 +87,8 @@ "--spectrum-swatch-focus-indicator-gap", "--spectrum-swatch-focus-indicator-thickness", "--spectrum-swatch-icon-border-color", + "--spectrum-swatch-icon-border-color-opacity", + "--spectrum-swatch-icon-border-color-rgb", "--spectrum-swatch-inner-border-color-selected", "--spectrum-swatch-size", "--spectrum-swatch-size-extra-small", @@ -102,11 +104,9 @@ ], "global": [ "--spectrum-animation-duration-100", - "--spectrum-black-rgb", "--spectrum-border-width-100", "--spectrum-border-width-200", "--spectrum-corner-radius-100", - "--spectrum-corner-radius-200", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -123,37 +123,8 @@ ], "system-theme": [ "--system-swatch-border-color", - "--system-swatch-border-color-light", - "--system-swatch-border-color-light-opacity", - "--system-swatch-border-color-opacity", - "--system-swatch-border-color-selected", - "--system-swatch-border-radius", - "--system-swatch-border-thickness", - "--system-swatch-border-thickness-selected", - "--system-swatch-dash-icon-color", "--system-swatch-disabled-icon-color", - "--system-swatch-disabled-icon-size", - "--system-swatch-focus-indicator-border-radius", - "--system-swatch-focus-indicator-color", - "--system-swatch-focus-indicator-gap", - "--system-swatch-focus-indicator-thickness", - "--system-swatch-icon-border-color", - "--system-swatch-inner-border-color-selected", - "--system-swatch-size", - "--system-swatch-size-l-disabled-icon-size", - "--system-swatch-size-l-size", - "--system-swatch-size-l-slash-thickness", - "--system-swatch-size-m-disabled-icon-size", - "--system-swatch-size-m-size", - "--system-swatch-size-m-slash-thickness", - "--system-swatch-size-s-disabled-icon-size", - "--system-swatch-size-s-size", - "--system-swatch-size-s-slash-thickness", - "--system-swatch-size-xs-disabled-icon-size", - "--system-swatch-size-xs-size", - "--system-swatch-size-xs-slash-thickness", - "--system-swatch-slash-icon-color", - "--system-swatch-slash-thickness" + "--system-swatch-inner-border-color-selected" ], "passthroughs": [], "high-contrast": [ diff --git a/components/swatch/themes/spectrum-two.css b/components/swatch/themes/spectrum-two.css index 2aeabbfaad..e753d50ca0 100644 --- a/components/swatch/themes/spectrum-two.css +++ b/components/swatch/themes/spectrum-two.css @@ -14,51 +14,8 @@ @container style(--system: spectrum) { /* Swatch tokens */ .spectrum-Swatch { - /* Size */ - --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100); - --spectrum-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200); - --spectrum-swatch-border-thickness: var(--spectrum-border-width-100); - --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - - --spectrum-swatch-border-color-opacity: 0.51; - --spectrum-swatch-border-color-light-opacity: 0.2; - - /* Color */ --spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity)); - --spectrum-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-border-color-opacity)); - --spectrum-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-border-color-light-opacity)); - --spectrum-swatch-border-color-selected: var(--spectrum-gray-900); --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); --spectrum-swatch-disabled-icon-color: var(--spectrum-gray-25); - --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); - --spectrum-swatch-slash-icon-color: var(--spectrum-red-900); - --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); - - &, - &.spectrum-Swatch--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--sizeXS { - --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); - } - - &.spectrum-Swatch--sizeS { - --spectrum-swatch-size: var(--spectrum-swatch-size-small); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); - } - - &.spectrum-Swatch--sizeL { - --spectrum-swatch-size: var(--spectrum-swatch-size-large); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large); - } } } diff --git a/components/swatchgroup/index.css b/components/swatchgroup/index.css index 97250f65a2..66ec3d5aac 100644 --- a/components/swatchgroup/index.css +++ b/components/swatchgroup/index.css @@ -13,13 +13,21 @@ @import "./themes/spectrum-two.css"; +.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 { display: inline-flex; flex-flow: row wrap; align-items: flex-start; justify-content: flex-start; +} - /* Regular (Default) */ +/* Regular (Default) */ +.spectrum-SwatchGroup { gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing-regular)); } diff --git a/components/swatchgroup/metadata/metadata.json b/components/swatchgroup/metadata/metadata.json index e8a29121d2..b03c96ca87 100644 --- a/components/swatchgroup/metadata/metadata.json +++ b/components/swatchgroup/metadata/metadata.json @@ -20,11 +20,7 @@ "--spectrum-spacing-50", "--spectrum-spacing-75" ], - "system-theme": [ - "--system-swatch-group-spacing-compact", - "--system-swatch-group-spacing-regular", - "--system-swatch-group-spacing-spacious" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/swatchgroup/themes/spectrum-two.css b/components/swatchgroup/themes/spectrum-two.css index 9bc11c31ac..3b48a570c2 100644 --- a/components/swatchgroup/themes/spectrum-two.css +++ b/components/swatchgroup/themes/spectrum-two.css @@ -10,11 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-SwatchGroup { - --spectrum-swatchgroup-spacing-compact: var(--spectrum-spacing-50); - --spectrum-swatchgroup-spacing-regular: var(--spectrum-spacing-75); - --spectrum-swatchgroup-spacing-spacious: var(--spectrum-spacing-100); - } -} diff --git a/components/switch/index.css b/components/switch/index.css index be7bbab0ca..fbac254772 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -14,127 +14,96 @@ @import "./themes/spectrum-two.css"; .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; - - .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))); - } - } - - &: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))); - } - - &:checked:enabled + .spectrum-Switch-switch::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))); - } - - /* stylelint-disable max-nesting-depth -- nesting needed for targeting event & nested objects */ - &: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))); + --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-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-background-color-selected-disabled: var(--spectrum-disabled-content-color); + + --spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); + --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); +} - &::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--disabled { + --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color); +} - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); - } - } - } - /* stylelint-enable max-nesting-depth */ - } - } +.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); +} - &: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--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-label { - color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))); - } + --spectrum-switch-font-size: var(--spectrum-font-size-75); +} - /* selected, not emphasized */ - &:checked:enabled + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-down, var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))); - } +.spectrum-Switch--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); - &:checked:enabled + .spectrum-Switch-switch::before { - border-color: var(--highcontrast-switch-handle-border-color-selected-down, var(--mod-switch-handle-border-color-selected-down, var(--spectrum-switch-handle-border-color-selected-down))); - } - } - } + --spectrum-switch-font-size: var(--spectrum-font-size-100); +} - /* key focus */ - /* :after is the focus ring */ - /* :before is used for the handle of the switch */ - & .spectrum-Switch-input:focus-visible, - &:hover .spectrum-Switch-input:focus-visible { - & + .spectrum-Switch-switch { - &::after { - box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--mod-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness))) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))); - } +.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); - &::before { - border-color: var(--highcontrast-switch-handle-border-color-focus, var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus))); - } - } + --spectrum-switch-font-size: var(--spectrum-font-size-200); +} - /* selected, not emphasized key focus */ - &:checked { - & + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))); - } +.spectrum-Switch--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-switch::before { - border-color: var(--highcontrast-switch-handle-border-color-selected-focus, var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus))); - } - } + --spectrum-switch-font-size: var(--spectrum-font-size-300); +} - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))); - } - } +.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; } .spectrum-Switch-input { @@ -158,13 +127,7 @@ cursor: pointer; &:checked + .spectrum-Switch-switch { - /* selected, not emphasized */ - 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))); - - /* when checked, after transition or set manually */ transform: translateX(calc(var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%)); } @@ -176,27 +139,6 @@ &:disabled, &[disabled] { cursor: default; - - & + .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))); - } - } - - /* 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))); - } } &:focus-visible + .spectrum-Switch-switch { @@ -250,8 +192,10 @@ position: absolute; content: ""; box-sizing: border-box; + } - /* :before is used for the handle of the switch */ + /* :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, @@ -271,15 +215,15 @@ /* :after is used for the focus halo */ &::after { + border-radius: calc(calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2); content: ""; + display: block; position: absolute; - inset-block-start: 0; - inset-block-end: 0; inset-inline-start: 0; inset-inline-end: 0; - display: block; + inset-block-end: 0; + inset-block-start: 0; margin: 0; - border-radius: calc(calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2); transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, @@ -287,6 +231,166 @@ } } +.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: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))); + } + + & + .spectrum-Switch-switch::before { + border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); + } + + & ~ .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))); + } + + &:checked + .spectrum-Switch-switch::before { + border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); + } + + &:checked ~ .spectrum-Switch-label { + color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); + } + } + } +} + +.spectrum-Switch:active { + .spectrum-Switch-input { + & + .spectrum-Switch-switch { + &::before { + border-color: var(--highcontrast-switch-handle-border-color-down, var(--mod-switch-handle-border-color-down, var(--spectrum-switch-handle-border-color-down))); + } + } + + & ~ .spectrum-Switch-label { + color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))); + } + + /* selected, not emphasized */ + &:checked:enabled + .spectrum-Switch-switch { + background-color: var(--highcontrast-switch-background-color-selected-down, var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))); + + &::before { + border-color: var(--highcontrast-switch-handle-border-color-selected-down, var(--mod-switch-handle-border-color-selected-down, var(--spectrum-switch-handle-border-color-selected-down))); + } + } + } +} + +/* key focus */ +/* :after is the focus ring */ +/* :before is used for the handle of the switch */ +.spectrum-Switch, +.spectrum-Switch:hover { + .spectrum-Switch-input:focus-visible { + & + .spectrum-Switch-switch { + &::after { + box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))); + } + + &::before { + border-color: var(--highcontrast-switch-handle-border-color-focus, var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus))); + } + } + + /* selected, not emphasized key focus */ + &:checked { + & + .spectrum-Switch-switch { + background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))); + } + + & + .spectrum-Switch-switch::before { + border-color: var(--highcontrast-switch-handle-border-color-selected-focus, var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus))); + } + } + + & ~ .spectrum-Switch-label { + color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))); + } + } +} + +/* 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))); + } + } +} + +/* 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))); + } +} + /* high contrast mode */ @media (forced-colors: active) { .spectrum-Switch { @@ -324,50 +428,53 @@ &:not(:checked) + .spectrum-Switch-switch { box-shadow: inset 0 0 0 1px ButtonText; } + } + + &:hover .spectrum-Switch-input { + &:not(:checked) + .spectrum-Switch-switch { + box-shadow: inset 0 0 0 1px Highlight; + } &:disabled, &[disabled] { - &:not(:checked) + .spectrum-Switch-switch { - background-color: ButtonFace; - box-shadow: inset 0 0 0 1px GrayText; - } - - &:not(:checked) + .spectrum-Switch-switch::before { - background-color: ButtonFace; - border-color: GrayText; - } - &:checked + .spectrum-Switch-switch { - background-color: GrayText; box-shadow: inset 0 0 0 1px GrayText; + background-color: GrayText; } &:checked + .spectrum-Switch-switch::before { - background-color: ButtonFace; border-color: GrayText; - } - - & ~ .spectrum-Switch-label { - color: GrayText; + background-color: ButtonFace; } } } - &:hover .spectrum-Switch-input { - &:not(:checked) + .spectrum-Switch-switch { - box-shadow: inset 0 0 0 1px Highlight; - } - + /* over-writes for disabled button */ + .spectrum-Switch-input { &:disabled, &[disabled] { - &:checked + .spectrum-Switch-switch { - background-color: GrayText; + &:not(:checked) + .spectrum-Switch-switch { box-shadow: inset 0 0 0 1px GrayText; + background-color: ButtonFace; } - &:checked + .spectrum-Switch-switch::before { + &:not(:checked) + .spectrum-Switch-switch::before { + border-color: GrayText; background-color: ButtonFace; + } + + &:checked + .spectrum-Switch-switch { + box-shadow: inset 0 0 0 1px GrayText; + background-color: GrayText; + } + + &:checked + .spectrum-Switch-switch::before { border-color: GrayText; + background-color: ButtonFace; + } + + & ~ .spectrum-Switch-label { + color: GrayText; } } } diff --git a/components/switch/metadata/metadata.json b/components/switch/metadata/metadata.json index 1236ab00f9..fe753e700d 100644 --- a/components/switch/metadata/metadata.json +++ b/components/switch/metadata/metadata.json @@ -21,6 +21,10 @@ ".spectrum-Switch .spectrum-Switch-switch", ".spectrum-Switch .spectrum-Switch-switch:before", ".spectrum-Switch--disabled", + ".spectrum-Switch--sizeL", + ".spectrum-Switch--sizeM", + ".spectrum-Switch--sizeS", + ".spectrum-Switch--sizeXL", ".spectrum-Switch-input", ".spectrum-Switch-input:checked + .spectrum-Switch-switch", ".spectrum-Switch-input:checked + .spectrum-Switch-switch:before", @@ -43,10 +47,6 @@ ".spectrum-Switch-switch:after", ".spectrum-Switch-switch:before", ".spectrum-Switch.spectrum-Switch--emphasized", - ".spectrum-Switch.spectrum-Switch--sizeL", - ".spectrum-Switch.spectrum-Switch--sizeM", - ".spectrum-Switch.spectrum-Switch--sizeS", - ".spectrum-Switch.spectrum-Switch--sizeXL", ".spectrum-Switch:active .spectrum-Switch-input + .spectrum-Switch-switch:before", ".spectrum-Switch:active .spectrum-Switch-input ~ .spectrum-Switch-label", ".spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch", @@ -205,72 +205,15 @@ "system-theme": [ "--system-switch-background-color", "--system-switch-background-color-disabled", - "--system-switch-background-color-selected-default", - "--system-switch-background-color-selected-disabled", - "--system-switch-background-color-selected-down", - "--system-switch-background-color-selected-focus", - "--system-switch-background-color-selected-hover", - "--system-switch-control-height", - "--system-switch-control-label-spacing", - "--system-switch-control-width", - "--system-switch-disabled-label-color-default", - "--system-switch-emphasized-background-color-selected-default", - "--system-switch-emphasized-background-color-selected-down", - "--system-switch-emphasized-background-color-selected-focus", - "--system-switch-emphasized-background-color-selected-hover", - "--system-switch-emphasized-handle-border-color-selected-default", - "--system-switch-emphasized-handle-border-color-selected-down", - "--system-switch-emphasized-handle-border-color-selected-focus", - "--system-switch-emphasized-handle-border-color-selected-hover", - "--system-switch-focus-indicator-color", - "--system-switch-focus-indicator-thickness", - "--system-switch-font-size", "--system-switch-handle-background-color", "--system-switch-handle-border-color-default", - "--system-switch-handle-border-color-disabled", "--system-switch-handle-border-color-down", "--system-switch-handle-border-color-focus", "--system-switch-handle-border-color-hover", "--system-switch-handle-border-color-selected-default", "--system-switch-handle-border-color-selected-down", "--system-switch-handle-border-color-selected-focus", - "--system-switch-handle-border-color-selected-hover", - "--system-switch-label-color-default", - "--system-switch-label-color-disabled", - "--system-switch-label-color-down", - "--system-switch-label-color-focus", - "--system-switch-label-color-hover", - "--system-switch-min-height", - "--system-switch-size-l-control-height", - "--system-switch-size-l-control-label-spacing", - "--system-switch-size-l-control-width", - "--system-switch-size-l-font-size", - "--system-switch-size-l-min-height", - "--system-switch-size-l-spacing-top-to-control", - "--system-switch-size-l-spacing-top-to-label", - "--system-switch-size-m-control-height", - "--system-switch-size-m-control-label-spacing", - "--system-switch-size-m-control-width", - "--system-switch-size-m-font-size", - "--system-switch-size-m-min-height", - "--system-switch-size-m-spacing-top-to-control", - "--system-switch-size-m-spacing-top-to-label", - "--system-switch-size-s-control-height", - "--system-switch-size-s-control-label-spacing", - "--system-switch-size-s-control-width", - "--system-switch-size-s-font-size", - "--system-switch-size-s-min-height", - "--system-switch-size-s-spacing-top-to-control", - "--system-switch-size-s-spacing-top-to-label", - "--system-switch-size-xl-control-height", - "--system-switch-size-xl-control-label-spacing", - "--system-switch-size-xl-control-width", - "--system-switch-size-xl-font-size", - "--system-switch-size-xl-min-height", - "--system-switch-size-xl-spacing-top-to-control", - "--system-switch-size-xl-spacing-top-to-label", - "--system-switch-spacing-top-to-control", - "--system-switch-spacing-top-to-label" + "--system-switch-handle-border-color-selected-hover" ], "passthroughs": [], "high-contrast": [ diff --git a/components/switch/themes/spectrum-two.css b/components/switch/themes/spectrum-two.css index eb1177c4e2..c2ed1a192a 100644 --- a/components/switch/themes/spectrum-two.css +++ b/components/switch/themes/spectrum-two.css @@ -23,86 +23,8 @@ --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); - --spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-switch-label-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-switch-label-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-switch-background-color: var(--spectrum-gray-200); --spectrum-switch-background-color-disabled: var(--spectrum-gray-200); - --spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color); - - --spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default); - --spectrum-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - --spectrum-switch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-switch-handle-background-color: var(--spectrum-gray-50); - --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Switch--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--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--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--sizeL { - --spectrum-switch-min-height: var(--spectrum-component-height-200); - --spectrum-switch-control-width: var(--spectrum-switch-control-width-large); - --spectrum-switch-control-height: var(--spectrum-switch-control-height-large); - --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-200); - --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-large); - --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-200); - - --spectrum-switch-font-size: var(--spectrum-font-size-200); - } - - &.spectrum-Switch--sizeXL { - --spectrum-switch-min-height: var(--spectrum-component-height-300); - --spectrum-switch-control-width: var(--spectrum-switch-control-width-extra-large); - --spectrum-switch-control-height: var(--spectrum-switch-control-height-extra-large); - --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-300); - --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large); - --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-300); - - --spectrum-switch-font-size: var(--spectrum-font-size-300); - } - } - - .spectrum-Switch--disabled { - --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color); } } diff --git a/components/switch/themes/spectrum.css b/components/switch/themes/spectrum.css index e563a5d9a5..8b32e03d8f 100644 --- a/components/switch/themes/spectrum.css +++ b/components/switch/themes/spectrum.css @@ -19,7 +19,6 @@ .spectrum-Switch { --spectrum-switch-background-color: var(--spectrum-gray-300); --spectrum-switch-background-color-disabled: var(--spectrum-gray-300); - --spectrum-switch-handle-background-color: var(--spectrum-gray-75); } } diff --git a/components/table/index.css b/components/table/index.css index ad90a3f114..6cc8ee91c8 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -13,6 +13,323 @@ @import "./themes/spectrum-two.css"; +.spectrum-Table { + /* Size and Spacing */ + --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium); + --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium); + + --spectrum-table-min-header-height: var(--spectrum-component-height-100); + --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-regular); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-regular); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-regular); + + --spectrum-table-cell-inline-space: var(--spectrum-table-edge-to-content); + + --spectrum-table-border-radius: var(--spectrum-corner-radius-100); + --spectrum-table-border-width: var(--spectrum-table-border-divider-width); + --spectrum-table-outer-border-inline-width: var(--spectrum-table-border-divider-width); + + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); + + --spectrum-table-default-vertical-align: top; + --spectrum-table-header-vertical-align: middle; + + /* Typography */ + --spectrum-table-header-font-weight: var(--spectrum-bold-font-weight); + + --spectrum-table-row-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-table-row-font-weight: var(--spectrum-regular-font-weight); + --spectrum-table-row-font-style: var(--spectrum-default-font-style); + --spectrum-table-row-font-size: var(--spectrum-font-size-100); + --spectrum-table-row-line-height: var(--spectrum-line-height-100); + + --spectrum-table-header-text-color: var(--spectrum-body-color); + --spectrum-table-row-text-color: var(--spectrum-neutral-content-color-default); + + /* ----- * + @todo Refactor or remove these properties once the RGB stripped value is available. */ + --spectrum-table-selected-row-background-color: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity)); + --spectrum-table-selected-row-background-color-non-emphasized: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized)); + --spectrum-table-row-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity)); + + --spectrum-table-row-active-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity)); + --spectrum-table-selected-row-background-color-focus: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity-hover)); + --spectrum-table-selected-row-background-color-non-emphasized-focus: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover)); + + /* ----- */ + + --spectrum-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + + /* Row Selection */ + --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular); + + --spectrum-table-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-table-focus-indicator-color: var(--spectrum-focus-indicator-color); + + --spectrum-table-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); + --spectrum-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + + --spectrum-table-transition-duration: var(--spectrum-animation-duration-100); + + /* Summary Row and Section Header Row */ + --spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight); + + --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium); + --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100); + --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100); + + --spectrum-table-section-header-font-weight: var(--spectrum-bold-font-weight); + + /* Collapsible and Thumbnails */ + --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300); + --spectrum-table-collapsible-disclosure-inline-spacing: 0px; + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100); + --spectrum-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100); + + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + + /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341 + and for modifying emphasized/non-emphasized background colors from the root element. */ + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color))); + --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized))); + --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-non-emphasized-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus))); + + /* Passthrough for nested component(s) */ + --mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)); + + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } +} + +/********* T-SHIRT SIZES (Regular Density) *********/ +.spectrum-Table--sizeS { + /* Size and Spacing */ + --spectrum-table-min-header-height: var(--spectrum-component-height-100); + --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-small); + --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-small); + + --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-regular); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-regular); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-regular); + + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); + + /* Typography */ + --spectrum-table-row-font-size: var(--spectrum-font-size-75); + + /* Row Selection */ + --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-small); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-regular); + + /* Summary Row and Section Header Row */ + --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-small); + --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-75); + --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-75); + + /* Collapsible and Thumbnails */ + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-75); + + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-regular); + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200); +} + +.spectrum-Table--sizeL { + /* Size and Spacing */ + --spectrum-table-min-header-height: var(--spectrum-component-height-200); + --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-large); + --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-large); + + --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-regular); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-regular); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-regular); + + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-200); + + /* Typography */ + --spectrum-table-row-font-size: var(--spectrum-font-size-200); + + /* Row Selection */ + --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-large); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-regular); + + /* Summary Row and Section Header Row */ + --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-large); + --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-200); + --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-200); + + /* Collapsible and Thumbnails */ + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-200); + + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-regular); + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-200); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500); +} + +.spectrum-Table--sizeXL { + /* Size and Spacing */ + --spectrum-table-min-header-height: var(--spectrum-component-height-300); + --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-extra-large); + --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-extra-large); + + --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-regular); + --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-regular); + --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-regular); + + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-300); + + /* Typography */ + --spectrum-table-row-font-size: var(--spectrum-font-size-300); + + /* Row Selection */ + --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-extra-large); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-regular); + + /* Summary Row and Section Header Row */ + --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-extra-large); + --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-300); + --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-300); + + /* Collapsible and Thumbnails */ + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-300); + + --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-regular); + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-300); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700); +} + +/********* VARIANTS *********/ +.spectrum-Table--compact { + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-medium-compact)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-medium-compact)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-medium-compact)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-medium-compact)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-medium-compact)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-200)); + + &.spectrum-Table--sizeS { + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-small-compact)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-small-compact)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-small-compact)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-small-compact)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-small-compact)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-50)); + } + + &.spectrum-Table--sizeL { + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-large-compact)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-large-compact)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-large-compact)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-large-compact)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-large-compact)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-300)); + } + + &.spectrum-Table--sizeXL { + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-extra-large-compact)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-extra-large-compact)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-extra-large-compact)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-extra-large-compact)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-500)); + } +} + +.spectrum-Table--spacious { + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-medium-spacious)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-medium-spacious)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-medium-spacious)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-500)); + + &.spectrum-Table--sizeS { + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-small-spacious)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-small-spacious)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-small-spacious)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-small-spacious)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-small-spacious)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-300)); + } + + &.spectrum-Table--sizeL { + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-large-spacious)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-large-spacious)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-large-spacious)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-large-spacious)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-large-spacious)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-700)); + } + + &.spectrum-Table--sizeXL { + /* Size and Spacing */ + --mod-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-extra-large-spacious)); + --mod-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-extra-large-spacious)); + --mod-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-extra-large-spacious)); + + /* Row Selection */ + --mod-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-extra-large-spacious)); + + /* Collapsible and Thumbnails */ + --mod-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious)); + --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-800)); + } +} + +.spectrum-Table--emphasized { + --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color))); + --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-focus))); +} + +.spectrum-Table--quiet { + --mod-table-border-radius: var(--mod-table-border-radius--quiet, 0px); + --mod-table-outer-border-inline-width: var(--mod-table-outer-border-inline-width--quiet, 0px); + --mod-table-header-background-color: var(--mod-table-header-background-color--quiet); + --mod-table-row-background-color: var(--mod-table-row-background-color--quiet); +} + /********* HIGH CONTRAST *********/ @media (forced-colors: active) { .spectrum-Table { @@ -25,14 +342,12 @@ --highcontrast-table-selected-row-background-color: Highlight; --highcontrast-table-selected-row-text-color: HighlightText; - - /* --highcontrast-table-selected-row-text-color-default: 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-text-color-default: SelectedItemText; } --highcontrast-table-selected-row-background-color-focus: Highlight; @@ -75,25 +390,11 @@ } } -.spectrum-Table { - /* @passthrough for nested component(s) */ - --mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)); - - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color))); - --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized))); - --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-non-emphasized-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus))); - - &:dir(rtl) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); - } -} - /********* REGULAR / DEFAULT *********/ .spectrum-Table:not(.spectrum-Table-scroller), .spectrum-Table-main { border-collapse: separate; border-spacing: 0; - display: table; } .spectrum-Table-sortedIcon { @@ -196,7 +497,6 @@ position: relative; border: none; border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - display: table-row-group; &.is-drop-target { /* Make sure negative offset outline is not covered by borders. */ @@ -215,22 +515,6 @@ /* 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))); - - /* Cells within table body */ - 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))); } /* Outside border */ @@ -254,12 +538,6 @@ /* Rounded corners */ .spectrum-Table-row { - /* Rows within table body */ - 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 .spectrum-Table-cell:first-child { border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); } @@ -275,6 +553,51 @@ &: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))); +} + +/* 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)); + } +} + +/* 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))); +} + +/* 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. */ @@ -308,14 +631,14 @@ &.is-selected { --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color); --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color); - --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--spectrum-table-selected-cell-background-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(--highcontrast-table-selected-row-background-color-focus, var(--spectrum-table-selected-cell-background-color-focus)); + --spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color-focus); } } @@ -341,26 +664,6 @@ } } -/* Focus Indicator (Ring) */ -.spectrum-Table-cell, -.spectrum-Table-headCell { - position: relative; - display: table-cell; - - &: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))); -} - .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))); @@ -409,7 +712,7 @@ inline-size: var(--spectrum-checkbox-control-size-small); /* The calc subtraction is because the --spectrum-table-checkbox-to-text spacing value - includes the inline start padding in the adjacent cell. */ + includes the inline start padding in the adjacent cell. */ padding-inline-end: calc(var(--mod-table-checkbox-to-text, var(--spectrum-table-checkbox-to-text)) - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content))); /* Block spacing must be moved to calculated margin on the checkbox element. */ @@ -417,7 +720,6 @@ .spectrum-Table-checkbox { --mod-checkbox-spacing: 0px; - min-block-size: initial; } @@ -434,19 +736,33 @@ /********* 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; +} + .spectrum-Table-head { display: table-header-group; } +.spectrum-Table-body { + display: table-row-group; +} + .spectrum-Table-row, .spectrum-Table-head [role="row"] { display: table-row; } +.spectrum-Table-cell, +.spectrum-Table-headCell { + 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-75))); + --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; @@ -457,14 +773,15 @@ border-block: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); - /* Make sure shift-tab reverse keyboard navigation keeps the whole cell in focus. - --mod-table-current-header-height should be dynamically updated with JS to match the table header height. */ - scroll-padding-top: var(--mod-table-current-header-height, calc((var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) + var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width)))); - &.spectrum-Table--quiet { + --mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100))); border-block-start: none; } + /* Make sure shift-tab reverse keyboard navigation keeps the whole cell in focus. + --mod-table-current-header-height should be dynamically updated with JS to match the table header height. */ + scroll-padding-top: var(--mod-table-current-header-height, calc((var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) + var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width)))); + .spectrum-Table-head { position: sticky; inset-block-start: 0; @@ -661,44 +978,3 @@ padding-block: var(--spectrum-table-thumbnail-inner-content-block-spacing); } } - -/********* VARIANTS *********/ -.spectrum-Table--compact { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-min-row-height)); - --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text)); - --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text)); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-block-spacing)); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-block-spacing)); - --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-table-thumbnail-size)); -} - -.spectrum-Table--spacious { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-min-row-height)); - --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text)); - --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text)); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-block-spacing)); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-block-spacing)); - --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-table-thumbnail-size)); -} - -.spectrum-Table--emphasized { - --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color))); - --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-focus))); -} - -.spectrum-Table--quiet { - --spectrum-table-border-radius: var(--mod-table-border-radius--quiet, var(--spectrum-table-border-radius)); - --spectrum-table-outer-border-inline-width: var(--mod-table-outer-border-inline-width--quiet, var(--spectrum-table-outer-border-inline-width)); - --spectrum-table-header-background-color: var(--mod-table-header-background-color--quiet, var(--spectrum-table-header-background-color)); - --spectrum-table-row-background-color: var(--mod-table-row-background-color--quiet, var(--spectrum-table-row-background-color)); -} diff --git a/components/table/metadata/metadata.json b/components/table/metadata/metadata.json index 078c1ce2f3..af3664eef3 100644 --- a/components/table/metadata/metadata.json +++ b/components/table/metadata/metadata.json @@ -3,9 +3,18 @@ "selectors": [ ".spectrum-Table", ".spectrum-Table--compact", + ".spectrum-Table--compact.spectrum-Table--sizeL", + ".spectrum-Table--compact.spectrum-Table--sizeS", + ".spectrum-Table--compact.spectrum-Table--sizeXL", ".spectrum-Table--emphasized", ".spectrum-Table--quiet", + ".spectrum-Table--sizeL", + ".spectrum-Table--sizeS", + ".spectrum-Table--sizeXL", ".spectrum-Table--spacious", + ".spectrum-Table--spacious.spectrum-Table--sizeL", + ".spectrum-Table--spacious.spectrum-Table--sizeS", + ".spectrum-Table--spacious.spectrum-Table--sizeXL", ".spectrum-Table-body", ".spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child", ".spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child", @@ -111,19 +120,7 @@ ".spectrum-Table-thumbnailInner", ".spectrum-Table-thumbnailInner .spectrum-Table-thumbnailContent", ".spectrum-Table-thumbnailInner .spectrum-Thumbnail", - ".spectrum-Table.spectrum-Table--compact", - ".spectrum-Table.spectrum-Table--compact.spectrum-Table--sizeL", - ".spectrum-Table.spectrum-Table--compact.spectrum-Table--sizeS", - ".spectrum-Table.spectrum-Table--compact.spectrum-Table--sizeXL", - ".spectrum-Table.spectrum-Table--emphasized", ".spectrum-Table.spectrum-Table--quiet", - ".spectrum-Table.spectrum-Table--sizeL", - ".spectrum-Table.spectrum-Table--sizeS", - ".spectrum-Table.spectrum-Table--sizeXL", - ".spectrum-Table.spectrum-Table--spacious", - ".spectrum-Table.spectrum-Table--spacious.spectrum-Table--sizeL", - ".spectrum-Table.spectrum-Table--spacious.spectrum-Table--sizeS", - ".spectrum-Table.spectrum-Table--spacious.spectrum-Table--sizeXL", ".spectrum-Table:dir(rtl)", ".spectrum-Table:not(.spectrum-Table-scroller)", "[dir=\"rtl\"] .spectrum-Table" @@ -412,7 +409,6 @@ "--spectrum-gray-200", "--spectrum-gray-25", "--spectrum-gray-700-rgb", - "--spectrum-gray-75", "--spectrum-gray-900-rgb", "--spectrum-line-height-100", "--spectrum-logical-rotation", @@ -437,171 +433,15 @@ ], "system-theme": [ "--system-table-border-color", - "--system-table-border-radius", - "--system-table-border-width", - "--system-table-cell-background-color", - "--system-table-cell-inline-space", - "--system-table-collapsible-disclosure-inline-spacing", - "--system-table-collapsible-icon-animation-duration", - "--system-table-collapsible-tier-indent", - "--system-table-compact-min-row-height", - "--system-table-compact-row-bottom-to-text", - "--system-table-compact-row-checkbox-block-spacing", - "--system-table-compact-row-top-to-text", - "--system-table-compact-size-l-min-row-height", - "--system-table-compact-size-l-row-bottom-to-text", - "--system-table-compact-size-l-row-checkbox-block-spacing", - "--system-table-compact-size-l-row-top-to-text", - "--system-table-compact-size-l-thumbnail-block-spacing", - "--system-table-compact-size-l-thumbnail-size", - "--system-table-compact-size-s-min-row-height", - "--system-table-compact-size-s-row-bottom-to-text", - "--system-table-compact-size-s-row-checkbox-block-spacing", - "--system-table-compact-size-s-row-top-to-text", - "--system-table-compact-size-s-thumbnail-block-spacing", - "--system-table-compact-size-s-thumbnail-size", - "--system-table-compact-size-xl-min-row-height", - "--system-table-compact-size-xl-row-bottom-to-text", - "--system-table-compact-size-xl-row-checkbox-block-spacing", - "--system-table-compact-size-xl-row-top-to-text", - "--system-table-compact-size-xl-thumbnail-block-spacing", - "--system-table-compact-size-xl-thumbnail-size", - "--system-table-compact-thumbnail-block-spacing", - "--system-table-compact-thumbnail-size", - "--system-table-default-vertical-align", - "--system-table-disclosure-icon-size", "--system-table-divider-color", - "--system-table-drop-zone-background-color", - "--system-table-drop-zone-outline-color", - "--system-table-emphasized-selected-cell-background-color", - "--system-table-emphasized-selected-cell-background-color-focus", - "--system-table-focus-indicator-color", - "--system-table-focus-indicator-thickness", "--system-table-header-background-color", - "--system-table-header-bottom-to-text", - "--system-table-header-checkbox-block-spacing", - "--system-table-header-font-weight", - "--system-table-header-text-color", - "--system-table-header-top-to-text", - "--system-table-header-vertical-align", - "--system-table-icon-color-active", - "--system-table-icon-color-default", "--system-table-icon-color-focus", "--system-table-icon-color-focus-hover", - "--system-table-icon-color-hover", - "--system-table-icon-color-key-focus", - "--system-table-icon-to-text", - "--system-table-min-header-height", - "--system-table-min-row-height", - "--system-table-outer-border-inline-width", - "--system-table-quiet-border-radius", "--system-table-quiet-header-background-color", - "--system-table-quiet-outer-border-inline-width", "--system-table-quiet-row-background-color", - "--system-table-row-active-color", "--system-table-row-background-color", - "--system-table-row-background-color-hover", - "--system-table-row-bottom-to-text", - "--system-table-row-checkbox-block-spacing", - "--system-table-row-font-family", - "--system-table-row-font-size", - "--system-table-row-font-style", - "--system-table-row-font-weight", - "--system-table-row-line-height", - "--system-table-row-text-color", - "--system-table-row-top-to-text", "--system-table-section-header-background-color", - "--system-table-section-header-block-end-spacing", - "--system-table-section-header-block-start-spacing", - "--system-table-section-header-font-weight", - "--system-table-section-header-min-height", - "--system-table-selected-cell-background-color", - "--system-table-selected-cell-background-color-focus", - "--system-table-selected-row-background-color", - "--system-table-selected-row-background-color-focus", - "--system-table-selected-row-background-color-non-emphasized", - "--system-table-selected-row-background-color-non-emphasized-focus", - "--system-table-size-l-disclosure-icon-size", - "--system-table-size-l-header-bottom-to-text", - "--system-table-size-l-header-checkbox-block-spacing", - "--system-table-size-l-header-top-to-text", - "--system-table-size-l-icon-to-text", - "--system-table-size-l-min-header-height", - "--system-table-size-l-min-row-height", - "--system-table-size-l-row-bottom-to-text", - "--system-table-size-l-row-checkbox-block-spacing", - "--system-table-size-l-row-font-size", - "--system-table-size-l-row-top-to-text", - "--system-table-size-l-section-header-block-end-spacing", - "--system-table-size-l-section-header-block-start-spacing", - "--system-table-size-l-section-header-min-height", - "--system-table-size-l-thumbnail-block-spacing", - "--system-table-size-l-thumbnail-size", - "--system-table-size-l-thumbnail-to-text", - "--system-table-size-s-disclosure-icon-size", - "--system-table-size-s-header-bottom-to-text", - "--system-table-size-s-header-checkbox-block-spacing", - "--system-table-size-s-header-top-to-text", - "--system-table-size-s-icon-to-text", - "--system-table-size-s-min-header-height", - "--system-table-size-s-min-row-height", - "--system-table-size-s-row-bottom-to-text", - "--system-table-size-s-row-checkbox-block-spacing", - "--system-table-size-s-row-font-size", - "--system-table-size-s-row-top-to-text", - "--system-table-size-s-section-header-block-end-spacing", - "--system-table-size-s-section-header-block-start-spacing", - "--system-table-size-s-section-header-min-height", - "--system-table-size-s-thumbnail-block-spacing", - "--system-table-size-s-thumbnail-size", - "--system-table-size-s-thumbnail-to-text", - "--system-table-size-xl-disclosure-icon-size", - "--system-table-size-xl-header-bottom-to-text", - "--system-table-size-xl-header-checkbox-block-spacing", - "--system-table-size-xl-header-top-to-text", - "--system-table-size-xl-icon-to-text", - "--system-table-size-xl-min-header-height", - "--system-table-size-xl-min-row-height", - "--system-table-size-xl-row-bottom-to-text", - "--system-table-size-xl-row-checkbox-block-spacing", - "--system-table-size-xl-row-font-size", - "--system-table-size-xl-row-top-to-text", - "--system-table-size-xl-section-header-block-end-spacing", - "--system-table-size-xl-section-header-block-start-spacing", - "--system-table-size-xl-section-header-min-height", - "--system-table-size-xl-thumbnail-block-spacing", - "--system-table-size-xl-thumbnail-size", - "--system-table-size-xl-thumbnail-to-text", - "--system-table-spacious-min-row-height", - "--system-table-spacious-row-bottom-to-text", - "--system-table-spacious-row-checkbox-block-spacing", - "--system-table-spacious-row-top-to-text", - "--system-table-spacious-size-l-min-row-height", - "--system-table-spacious-size-l-row-bottom-to-text", - "--system-table-spacious-size-l-row-checkbox-block-spacing", - "--system-table-spacious-size-l-row-top-to-text", - "--system-table-spacious-size-l-thumbnail-block-spacing", - "--system-table-spacious-size-l-thumbnail-size", - "--system-table-spacious-size-s-min-row-height", - "--system-table-spacious-size-s-row-bottom-to-text", - "--system-table-spacious-size-s-row-checkbox-block-spacing", - "--system-table-spacious-size-s-row-top-to-text", - "--system-table-spacious-size-s-thumbnail-block-spacing", - "--system-table-spacious-size-s-thumbnail-size", - "--system-table-spacious-size-xl-min-row-height", - "--system-table-spacious-size-xl-row-bottom-to-text", - "--system-table-spacious-size-xl-row-checkbox-block-spacing", - "--system-table-spacious-size-xl-row-top-to-text", - "--system-table-spacious-size-xl-thumbnail-block-spacing", - "--system-table-spacious-size-xl-thumbnail-size", - "--system-table-spacious-thumbnail-block-spacing", - "--system-table-spacious-thumbnail-size", - "--system-table-summary-row-background-color", - "--system-table-summary-row-font-weight", - "--system-table-thumbnail-block-spacing", - "--system-table-thumbnail-size", - "--system-table-thumbnail-to-text", - "--system-table-transition-duration" + "--system-table-summary-row-background-color" ], "passthroughs": ["--mod-checkbox-spacing", "--mod-thumbnail-size"], "high-contrast": [ @@ -621,6 +461,7 @@ "--highcontrast-table-selected-row-background-color", "--highcontrast-table-selected-row-background-color-focus", "--highcontrast-table-selected-row-text-color", + "--highcontrast-table-selected-row-text-color-default", "--highcontrast-table-selected-row-text-color-focus", "--highcontrast-table-transition-duration" ] diff --git a/components/table/themes/spectrum-two.css b/components/table/themes/spectrum-two.css index b2ccc8efc8..2da816e2c1 100644 --- a/components/table/themes/spectrum-two.css +++ b/components/table/themes/spectrum-two.css @@ -13,318 +13,16 @@ @container style(--system: spectrum) { .spectrum-Table { - /* Size and Spacing */ - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium); - - --spectrum-table-min-header-height: var(--spectrum-component-height-100); - --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-regular); - - --spectrum-table-cell-inline-space: var(--spectrum-table-edge-to-content); - - --spectrum-table-border-radius: var(--spectrum-corner-radius-100); - --spectrum-table-border-width: var(--spectrum-table-border-divider-width); - --spectrum-table-outer-border-inline-width: var(--spectrum-table-border-divider-width); - - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); - - --spectrum-table-default-vertical-align: top; - --spectrum-table-header-vertical-align: middle; - - /* Typography */ - --spectrum-table-header-font-weight: var(--spectrum-bold-font-weight); - - --spectrum-table-row-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-table-row-font-weight: var(--spectrum-regular-font-weight); - --spectrum-table-row-font-style: var(--spectrum-default-font-style); - --spectrum-table-row-font-size: var(--spectrum-font-size-100); - --spectrum-table-row-line-height: var(--spectrum-line-height-100); - - /* General Colors */ + --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); --spectrum-table-border-color: var(--spectrum-gray-200); --spectrum-table-divider-color: var(--spectrum-gray-200); - - --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); - --spectrum-table-header-text-color: var(--spectrum-body-color); - --spectrum-table-row-background-color: var(--spectrum-gray-25); - --spectrum-table-row-text-color: var(--spectrum-neutral-content-color-default); - - /* @todo Refactor or remove these properties once the RGB stripped value is available. */ - --spectrum-table-selected-row-background-color: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity)); - --spectrum-table-selected-row-background-color-non-emphasized: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized)); - --spectrum-table-row-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity)); - - --spectrum-table-row-active-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity)); - --spectrum-table-selected-row-background-color-focus: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity-hover)); - --spectrum-table-selected-row-background-color-non-emphasized-focus: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover)); - - --spectrum-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular); - - --spectrum-table-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-table-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-table-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); - --spectrum-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); - - --spectrum-table-transition-duration: var(--spectrum-animation-duration-100); - - /* Summary Row and Section Header Row */ - --spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight); --spectrum-table-summary-row-background-color: var(--spectrum-gray-100); - - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100); - - --spectrum-table-section-header-font-weight: var(--spectrum-bold-font-weight); --spectrum-table-section-header-background-color: var(--spectrum-gray-100); - - /* Collapsible and Thumbnails */ - --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300); - --spectrum-table-collapsible-disclosure-inline-spacing: 0px; - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100); - --spectrum-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100); - - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - - /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341 - and for modifying emphasized/non-emphasized background colors from the root element. */ - --spectrum-table-cell-background-color: var(--spectrum-table-row-background-color); - --spectrum-table-selected-cell-background-color: var(--spectrum-table-selected-row-background-color-non-emphasized); - --spectrum-table-selected-cell-background-color-focus: var(--spectrum-table-selected-row-background-color-non-emphasized-focus); - - /********* T-SHIRT SIZES (Regular Density) *********/ - &.spectrum-Table--sizeS { - /* Size and Spacing */ - --spectrum-table-min-header-height: var(--spectrum-component-height-100); - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-small); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-small); - - --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-regular); - - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); - - /* Typography */ - --spectrum-table-row-font-size: var(--spectrum-font-size-75); - - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-small); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-regular); - - /* Summary Row and Section Header Row */ - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-small); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-75); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-75); - - /* Collapsible and Thumbnails */ - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-75); - - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-regular); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200); - } - - &.spectrum-Table--sizeL { - /* Size and Spacing */ - --spectrum-table-min-header-height: var(--spectrum-component-height-200); - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-large); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-large); - - --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-regular); - - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-200); - - /* Typography */ - --spectrum-table-row-font-size: var(--spectrum-font-size-200); - - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-large); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-regular); - - /* Summary Row and Section Header Row */ - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-large); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-200); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-200); - - /* Collapsible and Thumbnails */ - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-200); - - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-regular); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-200); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500); - } - - &.spectrum-Table--sizeXL { - /* Size and Spacing */ - --spectrum-table-min-header-height: var(--spectrum-component-height-300); - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-extra-large); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-extra-large); - - --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-regular); - - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-300); - - /* Typography */ - --spectrum-table-row-font-size: var(--spectrum-font-size-300); - - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-extra-large); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-regular); - - /* Summary Row and Section Header Row */ - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-extra-large); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-300); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-300); - - /* Collapsible and Thumbnails */ - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-300); - - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-regular); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-300); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700); - } - - /********* VARIANTS *********/ - &.spectrum-Table--compact { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-compact); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-compact); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-compact); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-compact); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-compact); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200); - - &.spectrum-Table--sizeS { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-compact); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-compact); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-compact); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-compact); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-compact); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-50); - } - - &.spectrum-Table--sizeL { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-compact); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-compact); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-compact); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-compact); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-compact); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - } - - &.spectrum-Table--sizeXL { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-compact); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-compact); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-compact); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-compact); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500); - } - } - - &.spectrum-Table--spacious { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-spacious); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-spacious); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-spacious); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-spacious); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500); - - &.spectrum-Table--sizeS { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-spacious); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-spacious); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-spacious); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-spacious); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-spacious); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - } - - &.spectrum-Table--sizeL { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-spacious); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-spacious); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-spacious); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-spacious); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-spacious); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700); - } - - &.spectrum-Table--sizeXL { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-spacious); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-spacious); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-spacious); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-spacious); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-800); - } - } - - &.spectrum-Table--emphasized { - --spectrum-table-selected-cell-background-color: var(--spectrum-table-selected-row-background-color); - --spectrum-table-selected-cell-background-color-focus: var(--spectrum-table-selected-row-background-color-focus); - } + --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover); &.spectrum-Table--quiet { - --spectrum-table-border-radius: 0px; - --spectrum-table-outer-border-inline-width: 0px; --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); --spectrum-table-row-background-color: var(--spectrum-transparent-white-25); } diff --git a/components/tabs/index.css b/components/tabs/index.css index 4a00e6912c..6727243f38 100644 --- a/components/tabs/index.css +++ b/components/tabs/index.css @@ -13,6 +13,145 @@ @import "./themes/spectrum-two.css"; +.spectrum-Tabs { + /* Default is Medium sizing */ + --spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium); + --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); + --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium); + --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium); + + --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium); + + --spectrum-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-tabs-color-disabled: var(--spectrum-gray-500); + + --spectrum-tabs-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-tabs-font-style: var(--spectrum-default-font-style); + --spectrum-tabs-font-size: var(--spectrum-font-size-100); + --spectrum-tabs-line-height: var(--spectrum-line-height-100); + + /* Focus Indicator */ + --spectrum-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --spectrum-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100); + --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium); + --spectrum-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down); + + --spectrum-tabs-list-background-direction: top; + --spectrum-tabs-divider-size: var(--spectrum-border-width-200); + --spectrum-tabs-divider-border-radius: 1px; + + --spectrum-tabs-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-tabs-animation-ease: var(--spectrum-animation-ease-in-out); + + &.spectrum-Tabs--sizeS { + --spectrum-tabs-item-height: var(--spectrum-tab-item-height-small); + --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small); + --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small); + --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-small); + --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-small); + --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small); + + --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-50); + --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-75); + --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small); + + --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small); + --spectrum-tabs-font-size: var(--spectrum-font-size-75); + } + + &.spectrum-Tabs--sizeL { + --spectrum-tabs-item-height: var(--spectrum-tab-item-height-large); + --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large); + --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large); + --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-large); + --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-large); + --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large); + + --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-200); + --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large); + + --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large); + --spectrum-tabs-font-size: var(--spectrum-font-size-200); + } + + &.spectrum-Tabs--sizeXL { + --spectrum-tabs-item-height: var(--spectrum-tab-item-height-extra-large); + --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large); + --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large); + --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large); + --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large); + --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large); + + --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-300); + --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large); + + --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large); + --spectrum-tabs-font-size: var(--spectrum-font-size-300); + } + + &.spectrum-Tabs--emphasized { + --mod-tabs-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-accent-content-color-default)); + --mod-tabs-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-accent-content-color-hover)); + --mod-tabs-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-accent-content-color-key-focus)); + + --mod-tabs-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-accent-content-color-default)); + } +} + +.spectrum-Tabs--vertical { + --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right); +} + +.spectrum-Tabs--vertical-right { + --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left); +} + +.spectrum-Tabs--vertical:dir(rtl) { + --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left); +} + +.spectrum-Tabs--vertical-right:dir(rtl) { + --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right); +} + +.spectrum-Tabs.spectrum-Tabs--compact { + --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium)); + --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); + --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); + --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)); + + &.spectrum-Tabs--sizeS { + --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-small)); + --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small)); + --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small)); + --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-small)); + } + + &.spectrum-Tabs--sizeL { + --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large)); + --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large)); + --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large)); + --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-large)); + } + + &.spectrum-Tabs--sizeXL { + --mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-extra-large)); + --mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); + --mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); + --mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large)); + } +} + .spectrum-Tabs { display: flex; @@ -27,14 +166,6 @@ vertical-align: top; background: linear-gradient(to var(--mod-tabs-list-background-direction, var(--spectrum-tabs-list-background-direction)), var(--highcontrast-tabs-divider-background-color, var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))) 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size))); - - &.spectrum-Tabs--emphasized { - --mod-tabs-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-tabs-color-selected)); - --mod-tabs-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-tabs-color-hover)); - --mod-tabs-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-tabs-color-key-focus)); - - --mod-tabs-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-tabs-selection-indicator-color)); - } } .spectrum-Tabs-item { @@ -184,10 +315,6 @@ } } -.spectrum-Tabs--vertical { - --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right); -} - .spectrum-Tabs--vertical, .spectrum-Tabs--vertical-right { display: inline-flex; @@ -225,49 +352,11 @@ } .spectrum-Tabs--vertical-right { - --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left); - .spectrum-Tabs-selectionIndicator { inset-inline: auto 0; } } -.spectrum-Tabs--vertical:dir(rtl) { - --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left); -} - -.spectrum-Tabs--vertical-right:dir(rtl) { - --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right); -} - -.spectrum-Tabs.spectrum-Tabs--compact { - --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium)); - --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); - --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); - --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)); - - &.spectrum-Tabs--sizeS { - --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-small)); - --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small)); - --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small)); - --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-small)); - } - - &.spectrum-Tabs--sizeL { - --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large)); - --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large)); - --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large)); - --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-large)); - } - - &.spectrum-Tabs--sizeXL { - --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-extra-large)); - --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); - --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); - --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large)); - } -} - @media (forced-colors: active) { .spectrum-Tabs { --highcontrast-tabs-divider-background-color: var(--spectrum-gray-500); diff --git a/components/tabs/metadata/metadata.json b/components/tabs/metadata/metadata.json index 9e92a026c8..544295ef04 100644 --- a/components/tabs/metadata/metadata.json +++ b/components/tabs/metadata/metadata.json @@ -207,73 +207,8 @@ "--spectrum-workflow-icon-size-75" ], "system-theme": [ - "--system-tabs-animation-duration", - "--system-tabs-animation-ease", - "--system-tabs-bottom-to-text", - "--system-tabs-color", - "--system-tabs-color-disabled", - "--system-tabs-color-hover", - "--system-tabs-color-key-focus", - "--system-tabs-color-selected", "--system-tabs-divider-background-color", - "--system-tabs-divider-border-radius", - "--system-tabs-divider-size", - "--system-tabs-emphasized-color-hover", - "--system-tabs-emphasized-color-key-focus", - "--system-tabs-emphasized-color-selected", - "--system-tabs-emphasized-selection-indicator-color", - "--system-tabs-focus-indicator-border-radius", - "--system-tabs-focus-indicator-color", - "--system-tabs-focus-indicator-gap", - "--system-tabs-focus-indicator-width", - "--system-tabs-font-family", - "--system-tabs-font-size", - "--system-tabs-font-style", - "--system-tabs-font-weight", - "--system-tabs-icon-size", - "--system-tabs-icon-to-text", - "--system-tabs-item-height", - "--system-tabs-item-horizontal-spacing", - "--system-tabs-item-vertical-spacing", - "--system-tabs-line-height", - "--system-tabs-list-background-direction", - "--system-tabs-selection-indicator-color", - "--system-tabs-size-l-bottom-to-text", - "--system-tabs-size-l-focus-indicator-gap", - "--system-tabs-size-l-font-size", - "--system-tabs-size-l-icon-size", - "--system-tabs-size-l-icon-to-text", - "--system-tabs-size-l-item-height", - "--system-tabs-size-l-item-horizontal-spacing", - "--system-tabs-size-l-item-vertical-spacing", - "--system-tabs-size-l-start-to-edge", - "--system-tabs-size-l-top-to-icon", - "--system-tabs-size-l-top-to-text", - "--system-tabs-size-s-bottom-to-text", - "--system-tabs-size-s-focus-indicator-gap", - "--system-tabs-size-s-font-size", - "--system-tabs-size-s-icon-size", - "--system-tabs-size-s-icon-to-text", - "--system-tabs-size-s-item-height", - "--system-tabs-size-s-item-horizontal-spacing", - "--system-tabs-size-s-item-vertical-spacing", - "--system-tabs-size-s-start-to-edge", - "--system-tabs-size-s-top-to-icon", - "--system-tabs-size-s-top-to-text", - "--system-tabs-size-xl-bottom-to-text", - "--system-tabs-size-xl-focus-indicator-gap", - "--system-tabs-size-xl-font-size", - "--system-tabs-size-xl-icon-size", - "--system-tabs-size-xl-icon-to-text", - "--system-tabs-size-xl-item-height", - "--system-tabs-size-xl-item-horizontal-spacing", - "--system-tabs-size-xl-item-vertical-spacing", - "--system-tabs-size-xl-start-to-edge", - "--system-tabs-size-xl-top-to-icon", - "--system-tabs-size-xl-top-to-text", - "--system-tabs-start-to-edge", - "--system-tabs-top-to-icon", - "--system-tabs-top-to-text" + "--system-tabs-font-weight" ], "passthroughs": [], "high-contrast": [ diff --git a/components/tabs/themes/spectrum-two.css b/components/tabs/themes/spectrum-two.css index 76764be00f..71d71c3c71 100644 --- a/components/tabs/themes/spectrum-two.css +++ b/components/tabs/themes/spectrum-two.css @@ -14,99 +14,6 @@ @container style(--system: spectrum) { .spectrum-Tabs { --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight); - - /* Default is Medium sizing */ - --spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium); - --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); - --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium); - --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); - --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); - --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium); - - --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-100); - --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium); - - --spectrum-tabs-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-tabs-color-disabled: var(--spectrum-gray-500); - - --spectrum-tabs-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-tabs-font-style: var(--spectrum-default-font-style); - --spectrum-tabs-font-size: var(--spectrum-font-size-100); - --spectrum-tabs-line-height: var(--spectrum-line-height-100); - - /* Focus Indicator */ - --spectrum-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --spectrum-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100); - --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium); - --spectrum-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down); - - --spectrum-tabs-list-background-direction: top; --spectrum-tabs-divider-background-color: var(--spectrum-gray-200); - --spectrum-tabs-divider-size: var(--spectrum-border-width-200); - --spectrum-tabs-divider-border-radius: 1px; - - --spectrum-tabs-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-tabs-animation-ease: var(--spectrum-animation-ease-in-out); - - &.spectrum-Tabs--sizeS { - --spectrum-tabs-item-height: var(--spectrum-tab-item-height-small); - --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small); - --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small); - --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-small); - --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-small); - --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small); - - --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-75); - --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small); - - --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small); - --spectrum-tabs-font-size: var(--spectrum-font-size-75); - } - - &.spectrum-Tabs--sizeL { - --spectrum-tabs-item-height: var(--spectrum-tab-item-height-large); - --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large); - --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large); - --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-large); - --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-large); - --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large); - - --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-200); - --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large); - - --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large); - --spectrum-tabs-font-size: var(--spectrum-font-size-200); - } - - &.spectrum-Tabs--sizeXL { - --spectrum-tabs-item-height: var(--spectrum-tab-item-height-extra-large); - --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large); - --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large); - --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large); - --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large); - --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large); - - --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-300); - --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large); - - --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large); - --spectrum-tabs-font-size: var(--spectrum-font-size-300); - } - - &.spectrum-Tabs--emphasized { - --spectrum-tabs-color-selected: var(--spectrum-accent-content-color-default); - --spectrum-tabs-color-hover: var(--spectrum-accent-content-color-hover); - --spectrum-tabs-color-key-focus: var(--spectrum-accent-content-color-key-focus); - - --spectrum-tabs-selection-indicator-color: var(--spectrum-accent-content-color-default); - } } } diff --git a/components/tag/index.css b/components/tag/index.css index caf813df5c..3b30135deb 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -13,6 +13,172 @@ @import "./themes/spectrum-two.css"; +.spectrum-Tag { + /* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */ + --spectrum-avatar-opacity-disabled: 0.3; + + --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); + + --spectrum-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); + --spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); + --spectrum-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + + /* invalid variant */ + --spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900); + --spectrum-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); + --spectrum-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); + --spectrum-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); + + /* invalid variant content */ + --spectrum-tag-content-color-invalid: var(--spectrum-negative-content-color-default); + --spectrum-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover); + --spectrum-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down); + --spectrum-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus); + + /* invalid selected variant */ + --spectrum-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default); + --spectrum-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); + --spectrum-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down); + --spectrum-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus); + --spectrum-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default); + --spectrum-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); + --spectrum-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down); + --spectrum-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus); + + /* invalid selected variant content */ + --spectrum-tag-content-color-invalid-selected: var(--spectrum-white); + + /* emphasized variant */ + --spectrum-tag-border-color-emphasized: var(--spectrum-accent-background-color-default); + --spectrum-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover); + --spectrum-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down); + --spectrum-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); + --spectrum-tag-background-color-emphasized: var(--spectrum-accent-background-color-default); + --spectrum-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover); + --spectrum-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down); + --spectrum-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); + + /* emphasized variant content */ + --spectrum-tag-content-color-emphasized: var(--spectrum-white); + + /* disabled variant content */ + --spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color); + + /* ↧↧↧ Fallback defaults in case of no t-shirt size - set to Medium styles ↧↧↧ */ + /* icon spacing fallback if no t-shirt size */ + --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + + /* avatar spacing fallback if no t-shirt size */ + --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + + /* label spacing fallback if no t-shirt size */ + --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + + /* clear button inline spacing fallback if no t-shirt size */ + --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + + /* tag defaults if no t-shirt size */ + --spectrum-tag-height: var(--spectrum-component-height-100); + + /* text defaults if no t-shirt size */ + --spectrum-tag-font-size: var(--spectrum-font-size-100); + + /* clear button spacing if no t-shirt size */ + --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); +} + +/* t-shirt sizes */ +.spectrum-Tag--sizeS { + --spectrum-tag-height: var(--spectrum-component-height-75); + --spectrum-tag-font-size: var(--spectrum-font-size-75); + --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75); + + --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75); + --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small); + + --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + + --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small); + --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small); + --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75); + + --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75); + + /* tokens based on theme and t-shirt size */ + --spectrum-tag-corner-radius: var(--spectrum-tag-size-small-corner-radius); + --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-small-spacing-inline-start); + --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-small-label-spacing-inline-end); + --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-small-clear-button-spacing-inline-end); +} + +.spectrum-Tag--sizeM { + --spectrum-tag-height: var(--spectrum-component-height-100); + --spectrum-tag-font-size: var(--spectrum-font-size-100); + --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); + + --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + + --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + + --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); /* 6px 9px */ + --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + + --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + + /* tokens based on theme and t-shirt size */ + --spectrum-tag-corner-radius: var(--spectrum-tag-size-medium-corner-radius); + --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-medium-spacing-inline-start); + --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-medium-label-spacing-inline-end); + --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-medium-clear-button-spacing-inline-end); +} + +.spectrum-Tag--sizeL { + --spectrum-tag-height: var(--spectrum-component-height-200); + --spectrum-tag-font-size: var(--spectrum-font-size-200); + --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-200); + + --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200); + --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large); + + --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-200); + + --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large); + --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large); + --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200); + + --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-200); + + /* tokens based on theme and t-shirt size */ + --spectrum-tag-corner-radius: var(--spectrum-tag-size-large-corner-radius); + --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-large-spacing-inline-start); + --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-large-label-spacing-inline-end); + --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-large-clear-button-spacing-inline-end); +} + .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))); @@ -32,7 +198,6 @@ box-sizing: border-box; vertical-align: bottom; max-inline-size: 100%; - outline: none; user-select: none; @@ -81,6 +246,7 @@ .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)); } diff --git a/components/tag/metadata/metadata.json b/components/tag/metadata/metadata.json index a0bb0f5526..10a87e4aa2 100644 --- a/components/tag/metadata/metadata.json +++ b/components/tag/metadata/metadata.json @@ -7,6 +7,9 @@ ".spectrum-Tag .spectrum-Tag-clearButton .spectrum-ClearButton-fill", ".spectrum-Tag .spectrum-Tag-itemIcon", ".spectrum-Tag .spectrum-Tag-itemLabel", + ".spectrum-Tag--sizeL", + ".spectrum-Tag--sizeM", + ".spectrum-Tag--sizeS", ".spectrum-Tag.is-disabled", ".spectrum-Tag.is-disabled .spectrum-Avatar", ".spectrum-Tag.is-emphasized", @@ -31,9 +34,6 @@ ".spectrum-Tag.is-selected:active", ".spectrum-Tag.is-selected:focus-visible", ".spectrum-Tag.is-selected:hover", - ".spectrum-Tag.spectrum-Tag--sizeL", - ".spectrum-Tag.spectrum-Tag--sizeM", - ".spectrum-Tag.spectrum-Tag--sizeS", ".spectrum-Tag:active", ".spectrum-Tag:focus-visible", ".spectrum-Tag:focus-visible:after", @@ -281,140 +281,37 @@ "--spectrum-workflow-icon-size-75" ], "system-theme": [ - "--system-tag-animation-duration", - "--system-tag-avatar-opacity-disabled", - "--system-tag-avatar-spacing-block-end", - "--system-tag-avatar-spacing-block-start", - "--system-tag-avatar-spacing-inline-end", "--system-tag-background-color", "--system-tag-background-color-active", "--system-tag-background-color-disabled", - "--system-tag-background-color-emphasized", - "--system-tag-background-color-emphasized-active", - "--system-tag-background-color-emphasized-focus", - "--system-tag-background-color-emphasized-hover", "--system-tag-background-color-focus", "--system-tag-background-color-hover", - "--system-tag-background-color-invalid-selected", - "--system-tag-background-color-invalid-selected-active", - "--system-tag-background-color-invalid-selected-focus", - "--system-tag-background-color-invalid-selected-hover", - "--system-tag-background-color-selected", - "--system-tag-background-color-selected-active", - "--system-tag-background-color-selected-focus", - "--system-tag-background-color-selected-hover", "--system-tag-border-color", "--system-tag-border-color-active", "--system-tag-border-color-disabled", - "--system-tag-border-color-emphasized", - "--system-tag-border-color-emphasized-active", - "--system-tag-border-color-emphasized-focus", - "--system-tag-border-color-emphasized-hover", "--system-tag-border-color-focus", "--system-tag-border-color-hover", - "--system-tag-border-color-invalid", - "--system-tag-border-color-invalid-active", - "--system-tag-border-color-invalid-focus", - "--system-tag-border-color-invalid-hover", - "--system-tag-border-color-invalid-selected", - "--system-tag-border-color-invalid-selected-active", - "--system-tag-border-color-invalid-selected-focus", - "--system-tag-border-color-invalid-selected-hover", "--system-tag-border-color-selected", "--system-tag-border-color-selected-active", "--system-tag-border-color-selected-focus", "--system-tag-border-color-selected-hover", - "--system-tag-border-width", - "--system-tag-clear-button-spacing-block", - "--system-tag-clear-button-spacing-inline-end", - "--system-tag-clear-button-spacing-inline-start", "--system-tag-content-color", "--system-tag-content-color-active", - "--system-tag-content-color-disabled", - "--system-tag-content-color-emphasized", "--system-tag-content-color-focus", "--system-tag-content-color-hover", - "--system-tag-content-color-invalid", - "--system-tag-content-color-invalid-active", - "--system-tag-content-color-invalid-focus", - "--system-tag-content-color-invalid-hover", - "--system-tag-content-color-invalid-selected", "--system-tag-content-color-selected", - "--system-tag-corner-radius", - "--system-tag-focus-ring-color", - "--system-tag-focus-ring-gap", - "--system-tag-focus-ring-thickness", - "--system-tag-font-size", - "--system-tag-height", - "--system-tag-icon-size", - "--system-tag-icon-spacing-block-end", - "--system-tag-icon-spacing-block-start", - "--system-tag-icon-spacing-inline-end", - "--system-tag-label-font-weight", - "--system-tag-label-line-height", - "--system-tag-label-spacing-block", - "--system-tag-label-spacing-inline-end", - "--system-tag-size-l-avatar-spacing-block-end", - "--system-tag-size-l-avatar-spacing-block-start", - "--system-tag-size-l-avatar-spacing-inline-end", - "--system-tag-size-l-clear-button-spacing-block", - "--system-tag-size-l-clear-button-spacing-inline-end", - "--system-tag-size-l-clear-button-spacing-inline-start", - "--system-tag-size-l-corner-radius", - "--system-tag-size-l-font-size", - "--system-tag-size-l-height", - "--system-tag-size-l-icon-size", - "--system-tag-size-l-icon-spacing-block-end", - "--system-tag-size-l-icon-spacing-block-start", - "--system-tag-size-l-icon-spacing-inline-end", - "--system-tag-size-l-label-spacing-block", - "--system-tag-size-l-label-spacing-inline-end", - "--system-tag-size-l-spacing-inline-start", "--system-tag-size-large-clear-button-spacing-inline-end", "--system-tag-size-large-corner-radius", "--system-tag-size-large-label-spacing-inline-end", "--system-tag-size-large-spacing-inline-start", - "--system-tag-size-m-avatar-spacing-block-end", - "--system-tag-size-m-avatar-spacing-block-start", - "--system-tag-size-m-avatar-spacing-inline-end", - "--system-tag-size-m-clear-button-spacing-block", - "--system-tag-size-m-clear-button-spacing-inline-end", - "--system-tag-size-m-clear-button-spacing-inline-start", - "--system-tag-size-m-corner-radius", - "--system-tag-size-m-font-size", - "--system-tag-size-m-height", - "--system-tag-size-m-icon-size", - "--system-tag-size-m-icon-spacing-block-end", - "--system-tag-size-m-icon-spacing-block-start", - "--system-tag-size-m-icon-spacing-inline-end", - "--system-tag-size-m-label-spacing-block", - "--system-tag-size-m-label-spacing-inline-end", - "--system-tag-size-m-spacing-inline-start", "--system-tag-size-medium-clear-button-spacing-inline-end", "--system-tag-size-medium-corner-radius", "--system-tag-size-medium-label-spacing-inline-end", "--system-tag-size-medium-spacing-inline-start", - "--system-tag-size-s-avatar-spacing-block-end", - "--system-tag-size-s-avatar-spacing-block-start", - "--system-tag-size-s-avatar-spacing-inline-end", - "--system-tag-size-s-clear-button-spacing-block", - "--system-tag-size-s-clear-button-spacing-inline-end", - "--system-tag-size-s-clear-button-spacing-inline-start", - "--system-tag-size-s-corner-radius", - "--system-tag-size-s-font-size", - "--system-tag-size-s-height", - "--system-tag-size-s-icon-size", - "--system-tag-size-s-icon-spacing-block-end", - "--system-tag-size-s-icon-spacing-block-start", - "--system-tag-size-s-icon-spacing-inline-end", - "--system-tag-size-s-label-spacing-block", - "--system-tag-size-s-label-spacing-inline-end", - "--system-tag-size-s-spacing-inline-start", "--system-tag-size-small-clear-button-spacing-inline-end", "--system-tag-size-small-corner-radius", "--system-tag-size-small-label-spacing-inline-end", - "--system-tag-size-small-spacing-inline-start", - "--system-tag-spacing-inline-start" + "--system-tag-size-small-spacing-inline-start" ], "passthroughs": [ "--mod-avatar-opacity-disabled", diff --git a/components/tag/themes/spectrum-two.css b/components/tag/themes/spectrum-two.css index aaff2c9afc..f9c51730f4 100644 --- a/components/tag/themes/spectrum-two.css +++ b/components/tag/themes/spectrum-two.css @@ -13,30 +13,26 @@ @container style(--system: spectrum) { .spectrum-Tag { - /* border */ - --spectrum-tag-border-color: var(--spectrum-gray-700); - --spectrum-tag-border-color-hover: var(--spectrum-gray-800); - --spectrum-tag-border-color-active: var(--spectrum-gray-900); - --spectrum-tag-border-color-focus: var(--spectrum-gray-800); + --spectrum-tag-background-color: var(--spectrum-gray-50); + --spectrum-tag-background-color-hover: var(--spectrum-gray-50); + --spectrum-tag-background-color-active: var(--spectrum-gray-100); + --spectrum-tag-background-color-focus: var(--spectrum-gray-50); - /* corner border radius */ --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); - /* background */ - --spectrum-tag-background-color: var(--spectrum-gray-50); - --spectrum-tag-background-color-hover: var(--spectrum-gray-50); - --spectrum-tag-background-color-active: var(--spectrum-gray-100); - --spectrum-tag-background-color-focus: var(--spectrum-gray-50); + --spectrum-tag-border-color: var(--spectrum-gray-700); + --spectrum-tag-border-color-hover: var(--spectrum-gray-800); + --spectrum-tag-border-color-active: var(--spectrum-gray-900); + --spectrum-tag-border-color-focus: var(--spectrum-gray-800); - /* content color */ --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-tag-content-color-selected: var(--spectrum-gray-25); - /* 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); @@ -56,144 +52,5 @@ --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); - - /* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */ - --spectrum-avatar-opacity-disabled: 0.3; - - --spectrum-tag-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-tag-border-width: var(--spectrum-border-width-100); - - /* focus ring */ - --spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-tag-focus-ring-color: var(--spectrum-focus-indicator-color); - - /* label */ - --spectrum-tag-label-line-height: var(--spectrum-line-height-100); - --spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight); - - /* selected */ - --spectrum-tag-content-color-selected: var(--spectrum-gray-25); - --spectrum-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); - --spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); - --spectrum-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - /* invalid variant */ - --spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900); - --spectrum-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); - --spectrum-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); - --spectrum-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); - - /* invalid variant content */ - --spectrum-tag-content-color-invalid: var(--spectrum-negative-content-color-default); - --spectrum-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover); - --spectrum-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down); - --spectrum-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus); - - /* invalid selected variant */ - --spectrum-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default); - --spectrum-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); - --spectrum-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down); - --spectrum-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus); - --spectrum-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default); - --spectrum-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); - --spectrum-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down); - --spectrum-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus); - - /* invalid selected variant content */ - --spectrum-tag-content-color-invalid-selected: var(--spectrum-white); - - /* emphasized variant */ - --spectrum-tag-border-color-emphasized: var(--spectrum-accent-background-color-default); - --spectrum-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover); - --spectrum-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down); - --spectrum-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); - --spectrum-tag-background-color-emphasized: var(--spectrum-accent-background-color-default); - --spectrum-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover); - --spectrum-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down); - --spectrum-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); - - /* emphasized variant content */ - --spectrum-tag-content-color-emphasized: var(--spectrum-white); - - /* disabled variant content */ - --spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color); - - &, - &.spectrum-Tag--sizeM { - --spectrum-tag-height: var(--spectrum-component-height-100); - --spectrum-tag-font-size: var(--spectrum-font-size-100); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); - - --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - - --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - - --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); /* 6px 9px */ - --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-corner-radius: var(--spectrum-tag-size-medium-corner-radius); - --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-medium-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-medium-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-medium-clear-button-spacing-inline-end); - } - - &.spectrum-Tag--sizeS { - --spectrum-tag-height: var(--spectrum-component-height-75); - --spectrum-tag-font-size: var(--spectrum-font-size-75); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75); - - --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75); - --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small); - - --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - - --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small); - --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75); - - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75); - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-corner-radius: var(--spectrum-tag-size-small-corner-radius); - --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-small-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-small-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-small-clear-button-spacing-inline-end); - } - - &.spectrum-Tag--sizeL { - --spectrum-tag-height: var(--spectrum-component-height-200); - --spectrum-tag-font-size: var(--spectrum-font-size-200); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-200); - - --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200); - --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large); - - --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-200); - - --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large); - --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200); - - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-200); - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-corner-radius: var(--spectrum-tag-size-large-corner-radius); - --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-large-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-large-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-large-clear-button-spacing-inline-end); - } } } diff --git a/components/taggroup/index.css b/components/taggroup/index.css index 6a59b34243..7b653093f7 100644 --- a/components/taggroup/index.css +++ b/components/taggroup/index.css @@ -13,6 +13,11 @@ @import "./themes/spectrum-two.css"; +.spectrum-TagGroup { + --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; diff --git a/components/taggroup/metadata/metadata.json b/components/taggroup/metadata/metadata.json index cca1d76b19..10ed81256f 100644 --- a/components/taggroup/metadata/metadata.json +++ b/components/taggroup/metadata/metadata.json @@ -10,10 +10,7 @@ "--spectrum-tag-group-item-margin-inline" ], "global": ["--spectrum-spacing-75"], - "system-theme": [ - "--system-tag-group-item-margin-block", - "--system-tag-group-item-margin-inline" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/taggroup/themes/spectrum-two.css b/components/taggroup/themes/spectrum-two.css index f843bd9486..3b48a570c2 100644 --- a/components/taggroup/themes/spectrum-two.css +++ b/components/taggroup/themes/spectrum-two.css @@ -10,10 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-TagGroup { - --spectrum-tag-group-item-margin-block: var(--spectrum-spacing-75); - --spectrum-tag-group-item-margin-inline: var(--spectrum-spacing-75); - } -} diff --git a/components/textfield/index.css b/components/textfield/index.css index 871364db85..49f83fa980 100644 --- a/components/textfield/index.css +++ b/components/textfield/index.css @@ -13,16 +13,201 @@ @import "./themes/spectrum-two.css"; -/********* TEXT FIELD and TEXT AREA Outer Wrapper *********/ .spectrum-Textfield { + /* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */ + /* disallow mod for max compatibility */ --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); - --spectrum-textfield-spacing-inline-default: calc(var(--mod-textfield-spacing-inline, var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + --spectrum-texfield-animation-duration: var(--spectrum-animation-duration-100); + + --spectrum-textfield-width: 240px; /* override per api */ + --spectrum-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier); + --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100); + + /* default height */ + --spectrum-textfield-height: var(--spectrum-component-height-100); + + /* default spacing */ + --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); + --spectrum-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet); + --spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100); + --spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100); + --spectrum-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet); + + /* default label spacing */ + --spectrum-textfield-label-spacing-block: var(--spectrum-field-label-to-component); + --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100); + + /* default help text spacing */ + --spectrum-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component); + + /* default icon size */ + --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + + /* default icon spacing - invalid */ + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); + --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + + /* default icon spacing - valid */ + --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); + --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet); + --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); + + /* font styles */ + --spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-textfield-font-weight: var(--spectrum-regular-font-weight); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100); + + /* character count */ + --spectrum-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-textfield-character-count-font-weight: var(--spectrum-regular-font-weight); + --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); + --spectrum-textfield-character-count-spacing-inline: var(--spectrum-spacing-200); + --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --spectrum-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field); + --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); + + /* focus indicator */ + --spectrum-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + + /* Text Colors */ + --spectrum-textfield-text-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus); + --spectrum-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); + --spectrum-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus); + + /* Read Only Text Color */ + --spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default); + + /* Disabled Colors */ + --spectrum-textfield-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-textfield-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color); + + /* Invalid Colors */ + --spectrum-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default); + --spectrum-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); + --spectrum-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); + --spectrum-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); + --spectrum-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus); + --spectrum-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); + + --spectrum-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default); + + /* Valid Colors */ + --spectrum-textfield-text-color-valid: var(--spectrum-neutral-content-color-default); + --spectrum-textfield-icon-color-valid: var(--spectrum-positive-visual-color); + + /* Focus Indicator Color */ + --spectrum-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color); + + /* Text Area / Multiline */ + --spectrum-text-area-min-inline-size: var(--spectrum-text-area-minimum-width); + --spectrum-text-area-min-block-size: var(--spectrum-text-area-minimum-height); + --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100); +} - /* @passthrough start */ - --mod-fieldlabel-margin-block-end: var(--mod-textfield-label-spacing-block, var(--spectrum-textfield-label-spacing-block)); - --mod-disabled-content-color: var(--spectrum-textfield-text-color-disabled); - /* @passthrough end */ +/********* Text field t-shirt sizes *********/ +.spectrum-Textfield--sizeS { + --spectrum-textfield-height: var(--spectrum-component-height-75); + --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small); + --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75); + --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-75); + --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-75); + --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-75); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); + --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small); + --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); + --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small); + --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small); + + /* Text Area / Multiline size small */ + --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-75); +} + +.spectrum-Textfield--sizeM { + --spectrum-textfield-height: var(--spectrum-component-height-100); + --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); + --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); + --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); + --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); + --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); + + /* Text Area / Multiline size medium */ + --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100); +} + +.spectrum-Textfield--sizeL { + --spectrum-textfield-height: var(--spectrum-component-height-200); + --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large); + --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200); + --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200); + --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-200); + --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-200); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); + --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large); + --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-100); + --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100); + --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large); + --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large); + + /* Text Area / Multiline size large */ + --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-200); +} + +.spectrum-Textfield--sizeXL { + --spectrum-textfield-height: var(--spectrum-component-height-300); + --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); + --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300); + --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200); + --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-300); + --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-300); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); + --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large); + --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-200); + --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200); + --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large); + --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large); + + /* Text Area / Multiline size extra large */ + --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-300); +} +/********* TEXT FIELD and TEXT AREA Outer Wrapper *********/ +.spectrum-Textfield { position: relative; text-overflow: ellipsis; @@ -40,39 +225,37 @@ /* Firefox and Safari - Remove the margin for input. */ margin: 0; +} - /*** Input Valid ✅ ***/ - &.is-valid { - --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-valid); - --mod-textfield-text-color-default: var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid)); - --mod-textfield-spacing-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))); - } - - /*** Input Invalid ⛔️ ***/ - &.is-invalid { - --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-invalid-default); - --mod-textfield-border-color: var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default)); - - --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-invalid); - --mod-textfield-text-color-default: var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid)); +.spectrum-Textfield.spectrum-Textfield--quiet { + &::after { + content: ""; + pointer-events: none; + 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-inline-start: 0; + inline-size: 100%; + block-size: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)); } - &:last-of-type:has(.is-invalid) &, - &:only-of-type:has(.is-invalid) & { - --mod-textfield-spacing-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))); + &.is-keyboardFocused { + &::after { + background-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))); + } } - /********* Child Component - Label *********/ - .spectrum-FieldLabel { - grid-row: 1; - grid-column: 1 / span 1; + /*** 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))); + } } - /********* Child Component - Help Text *********/ - .spectrum-HelpText { - margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block)); - grid-row: 3; - grid-column: 1 / span 2; + /*** 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))); + } } } @@ -131,6 +314,32 @@ } } +/********* Child Component - Label *********/ +.spectrum-FieldLabel { + .spectrum-Textfield & { + 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)); + } + + .is-disabled & { + color: var(--spectrum-textfield-text-color-disabled); + } +} + +/********* Child Component - Help Text *********/ +.spectrum-HelpText { + .spectrum-Textfield & { + margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block)); + grid-row: 3; + grid-column: 1 / span 2; + } +} + /********* Child Element - Character Count *********/ .spectrum-Textfield-characterCount { display: inline-flex; @@ -143,33 +352,32 @@ 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-column: 2 / span 1; grid-row: 1; + grid-column: 2 / span 1; 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)); + } } /********* Child Element - Input *********/ .spectrum-Textfield-input { /* no mod defined to allow for maximum compatibility */ line-height: var(--spectrum-textfield-input-line-height); - box-sizing: border-box; inline-size: 100%; min-inline-size: var(--mod-textfield-min-width, var(--spectrum-textfield-min-width)); block-size: var(--mod-textfield-height, var(--spectrum-textfield-height)); + padding-block-start: calc(var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + padding-block-end: calc(var(--mod-textfield-spacing-block-end, var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); - padding-block-start: var(--mod-textfield-spacing-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: var(--mod-textfield-spacing-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-start: var(--mod-textfield-spacing-inline-start, var(--spectrum-textfield-spacing-inline-default)); - padding-inline-end: var(--mod-textfield-spacing-inline-end, var(--spectrum-textfield-spacing-inline-default)); + padding-inline: calc(var(--mod-textfield-spacing-inline, var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); 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-color: var(--highcontrast-textfield-border-color, var(--mod-textfield-border-color, var(--spectrum-textfield-border-color))); - border-style: solid; - border-width: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)); + border: 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; @@ -226,163 +434,151 @@ } /* hover */ - .spectrum-Textfield:not(.is-disabled, .is-readOnly):hover &, - .spectrum-Textfield:not(.is-disabled, .is-readOnly) &:hover { - --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-hover); - --mod-textfield-border-color: var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-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))); - --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-hover); - --mod-textfield-text-color-default: 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))); + } } /* mouse focus */ - .spectrum-Textfield:not(.is-disabled, .is-readOnly).is-focused &, - .spectrum-Textfield:not(.is-disabled, .is-readOnly) &:focus { - --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-focus); - --mod-textfield-border-color: var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-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))); - --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-focus); - --mod-textfield-text-color-default: 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))); + } /* focus hover */ &:hover { - --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-focus-hover); - --mod-textfield-border-color: var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-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))); + } - --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-focus-hover); - --mod-textfield-text-color-default: 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))); } } /* keyboard focus */ - .spectrum-Textfield:not(.is-disabled, .is-readOnly).is-keyboardFocused &, - .spectrum-Textfield:not(.is-disabled, .is-readOnly) &:focus-visible { - --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-keyboard-focus); - --mod-textfield-border-color: var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-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))); - --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-keyboard-focus); - --mod-textfield-text-color-default: var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)); + &::placeholder { + color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))); + } /* focus indicator is focused state */ - outline-width: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)); - outline-style: solid; + 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))); + } + + /*** 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))); + } + /* Invalid hover */ - .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):hover &, - .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) &:hover { - --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-invalid-hover); - --mod-textfield-border-color: var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover)); + .is-invalid:hover:not(.is-disabled) &, + .is-invalid &:hover:not(.is-disabled) { + 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 */ - .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly).is-focused &, - .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):focus &, - .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) &:focus { - --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-invalid-focus); - --mod-textfield-border-color: var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-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))); - /* Invalid mouse focus + hover */ - .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly).is-focused:hover &, - .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):focus:hover &, - .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):hover &:focus, - .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly).is-focused &:hover, - .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):focus &:hover, - .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) &:focus:hover { - --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-invalid-focus-hover); - --mod-textfield-border-color: var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover)); + /* 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))); + } } - /* Invalid keyboard focus */ - .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly).is-keyboardFocused &, - .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) &:focus-visible { - --highcontrast-textfield-border-color: var(--highcontrast-textfield-border-color-invalid-keyboard-focus); - --mod-textfield-border-color: var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus)); + /* 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))); } /****** Input Disabled 🚫 ******/ .spectrum-Textfield.is-disabled &, + .spectrum-Textfield.is-disabled:hover &, &:disabled { - --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-disabled); - --mod-textfield-text-color-default: var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)); - --mod-textfield-border-color: transparent; - --mod-textfield-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))); /* Disable the resize functionality when disabled */ resize: none; /* The opacity must be set to 1 */ opacity: 1; - } - - /****** Input ReadOnly ******/ - .spectrum-Textfield.is-readOnly &, - &:read-only { - --mod-textfield-border-color: transparent; - --highcontrast-textfield-text-color-default: var(--highcontrast-textfield-text-color-readonly); - --mod-textfield-text-color-default: var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)); - outline: none; - - &, &::placeholder { - background-color: transparent; + color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); } } -} - -.spectrum-Textfield--quiet { - --mod-fieldlabel-margin-block-end: var(--mod-textfield-label-spacing-block-quiet, var(--spectrum-textfield-label-spacing-block-quiet)); - --mod-textfield-background-color-disabled: transparent; - --mod-textfield-spacing-block-start: var(--spectrum-textfield-spacing-block-start); - --mod-textfield-spacing-block-end: var(--mod-textfield-spacing-block-quiet, var(--spectrum-textfield-spacing-block-quiet)); - --mod-textfield-spacing-inline-start: var(--mod-textfield-spacing-inline-quiet, var(--spectrum-textfield-spacing-inline-quiet)); - --mod-textfield-spacing-inline-end: var(--mod-textfield-spacing-inline-quiet, var(--spectrum-textfield-spacing-inline-quiet)); - --mod-textfield-background-color: transparent; - --mod-textfield-corner-radius: 0; - --mod-textfield-border-color-disabled: var(--spectrum-textfield-border-color-disabled); - - &::after { - content: ""; - pointer-events: none; - 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-inline-start: 0; - inline-size: 100%; - block-size: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)); - } + /****** Input - Quiet 🤫 ******/ + .spectrum-Textfield--quiet & { + outline: none; + border-block-start-width: 0; + border-inline-width: 0; - &.is-keyboardFocused::after { - background-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))); - } + 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; - /*** Quiet Input Invalid ⚠️ ***/ - &.is-invalid { - --mod-textfield-spacing-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))); + /* Treat all quiet inputs and text areas the same */ + resize: none; + overflow-y: hidden; } - /*** Quiet Input Valid ✅ ***/ - &.is-valid { - --mod-textfield-spacing-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))); - } + /****** Input - Quiet 🤫 + Disabled 🚫 ******/ + .spectrum-Textfield--quiet.is-disabled &, + .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))); - .spectrum-Textfield-characterCount { - margin-block-end: var(--mod-textfield-character-count-spacing-block-quiet, var(--spectrum-textfield-character-count-spacing-block-quiet)); + &::placeholder { + color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + } } - /****** Input - Quiet 🤫 ******/ - .spectrum-Textfield-input { - /* outline: none; */ - border-block-start-width: 0; - border-inline-width: 0; + /****** Input ReadOnly ******/ + .spectrum-Textfield.is-readOnly &, + .spectrum-Textfield.is-readOnly:hover &, + &: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))); + outline: none; - /* Treat all quiet inputs and text areas the same */ - resize: none; - overflow-y: hidden; + &::placeholder { + color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))); + background-color: transparent; + } } } diff --git a/components/textfield/metadata/metadata.json b/components/textfield/metadata/metadata.json index ca5191a220..6f2eec4e8a 100644 --- a/components/textfield/metadata/metadata.json +++ b/components/textfield/metadata/metadata.json @@ -1,6 +1,25 @@ { "sourceFile": "index.css", "selectors": [ + ".is-disabled .spectrum-FieldLabel", + ".is-focused .spectrum-Textfield-input", + ".is-focused .spectrum-Textfield-input::placeholder", + ".is-focused .spectrum-Textfield-input:hover", + ".is-focused .spectrum-Textfield-input:hover::placeholder", + ".is-invalid .spectrum-Textfield-input", + ".is-invalid .spectrum-Textfield-input:focus", + ".is-invalid .spectrum-Textfield-input:focus-visible", + ".is-invalid .spectrum-Textfield-input:focus:hover", + ".is-invalid .spectrum-Textfield-input:hover:not(.is-disabled)", + ".is-invalid.is-focused .spectrum-Textfield-input", + ".is-invalid.is-focused .spectrum-Textfield-input:hover", + ".is-invalid.is-keyboardFocused .spectrum-Textfield-input", + ".is-invalid:focus .spectrum-Textfield-input", + ".is-invalid:focus .spectrum-Textfield-input:hover", + ".is-invalid:hover:not(.is-disabled) .spectrum-Textfield-input", + ".is-keyboardFocused .spectrum-Textfield-input", + ".is-keyboardFocused .spectrum-Textfield-input::placeholder", + ".is-valid .spectrum-Textfield-input", ".spectrum-Textfield", ".spectrum-Textfield .spectrum-FieldLabel", ".spectrum-Textfield .spectrum-HelpText", @@ -11,16 +30,16 @@ ".spectrum-Textfield--multiline.spectrum-Textfield--grows .spectrum-Textfield-input", ".spectrum-Textfield--multiline.spectrum-Textfield--grows.spectrum-Textfield--sideLabel .spectrum-Textfield-input", ".spectrum-Textfield--multiline.spectrum-Textfield--quiet .spectrum-Textfield-input", - ".spectrum-Textfield--quiet", + ".spectrum-Textfield--quiet .spectrum-FieldLabel", ".spectrum-Textfield--quiet .spectrum-Textfield-characterCount", ".spectrum-Textfield--quiet .spectrum-Textfield-input", ".spectrum-Textfield--quiet .spectrum-Textfield-validationIcon", - ".spectrum-Textfield--quiet.is-invalid", + ".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input", + ".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input::placeholder", + ".spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input", + ".spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input::placeholder", ".spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-validationIcon", - ".spectrum-Textfield--quiet.is-keyboardFocused:after", - ".spectrum-Textfield--quiet.is-valid", ".spectrum-Textfield--quiet.is-valid .spectrum-Textfield-validationIcon", - ".spectrum-Textfield--quiet:after", ".spectrum-Textfield--sideLabel", ".spectrum-Textfield--sideLabel .spectrum-FieldLabel", ".spectrum-Textfield--sideLabel .spectrum-HelpText", @@ -28,11 +47,22 @@ ".spectrum-Textfield--sideLabel .spectrum-Textfield-input", ".spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon", ".spectrum-Textfield--sideLabel:after", + ".spectrum-Textfield--sizeL", + ".spectrum-Textfield--sizeM", + ".spectrum-Textfield--sizeS", + ".spectrum-Textfield--sizeXL", ".spectrum-Textfield-characterCount", ".spectrum-Textfield-input", ".spectrum-Textfield-input:-moz-ui-invalid", ".spectrum-Textfield-input::placeholder", ".spectrum-Textfield-input:disabled", + ".spectrum-Textfield-input:disabled::placeholder", + ".spectrum-Textfield-input:focus", + ".spectrum-Textfield-input:focus::placeholder", + ".spectrum-Textfield-input:focus:hover", + ".spectrum-Textfield-input:focus:hover::placeholder", + ".spectrum-Textfield-input:hover", + ".spectrum-Textfield-input:hover::placeholder", ".spectrum-Textfield-input:lang(ja)::placeholder", ".spectrum-Textfield-input:lang(ko)::placeholder", ".spectrum-Textfield-input:lang(zh)::placeholder", @@ -42,45 +72,26 @@ ".spectrum-Textfield-input[type=\"number\"]::-webkit-inner-spin-button", ".spectrum-Textfield-input[type=\"number\"]::-webkit-outer-spin-button", ".spectrum-Textfield.is-disabled .spectrum-Textfield-input", + ".spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder", ".spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.is-focused:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input", - ".spectrum-Textfield.is-focused:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover", - ".spectrum-Textfield.is-invalid", + ".spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input", + ".spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder", ".spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.is-invalid.is-focused:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input", - ".spectrum-Textfield.is-invalid.is-focused:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover", - ".spectrum-Textfield.is-invalid.is-focused:not(.is-disabled, .is-readOnly):hover .spectrum-Textfield-input", - ".spectrum-Textfield.is-invalid.is-keyboardFocused:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input", - ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:focus", - ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:focus-visible", - ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:focus:hover", - ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover", - ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):focus .spectrum-Textfield-input", - ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):focus .spectrum-Textfield-input:hover", - ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):focus:hover .spectrum-Textfield-input", - ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):hover .spectrum-Textfield-input", - ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly):hover .spectrum-Textfield-input:focus", - ".spectrum-Textfield.is-keyboardFocused:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input", ".spectrum-Textfield.is-readOnly .spectrum-Textfield-input", ".spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder", ".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.is-valid", + ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input", + ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder", ".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon", + ".spectrum-Textfield.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input", + ".spectrum-Textfield.spectrum-Textfield--quiet.is-keyboardFocused:after", + ".spectrum-Textfield.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input", + ".spectrum-Textfield.spectrum-Textfield--quiet:after", ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.spectrum-Textfield--sizeL", - ".spectrum-Textfield.spectrum-Textfield--sizeM", - ".spectrum-Textfield.spectrum-Textfield--sizeS", - ".spectrum-Textfield.spectrum-Textfield--sizeXL", - ".spectrum-Textfield:last-of-type:has(.is-invalid) .spectrum-Textfield", - ".spectrum-Textfield:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:focus", - ".spectrum-Textfield:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:focus-visible", - ".spectrum-Textfield:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:focus:hover", - ".spectrum-Textfield:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover", - ".spectrum-Textfield:not(.is-disabled, .is-readOnly):hover .spectrum-Textfield-input", - ".spectrum-Textfield:only-of-type:has(.is-invalid) .spectrum-Textfield" + ".spectrum-Textfield:hover .spectrum-Textfield-input", + ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder" ], "modifiers": [ - "--mod-disabled-content-color", "--mod-texfield-animation-duration", "--mod-text-area-min-block-size", "--mod-text-area-min-block-size-quiet", @@ -136,9 +147,7 @@ "--mod-textfield-spacing-block-quiet", "--mod-textfield-spacing-block-start", "--mod-textfield-spacing-inline", - "--mod-textfield-spacing-inline-end", "--mod-textfield-spacing-inline-quiet", - "--mod-textfield-spacing-inline-start", "--mod-textfield-text-color-default", "--mod-textfield-text-color-disabled", "--mod-textfield-text-color-focus", @@ -204,7 +213,6 @@ "--spectrum-textfield-spacing-block-quiet", "--spectrum-textfield-spacing-block-start", "--spectrum-textfield-spacing-inline", - "--spectrum-textfield-spacing-inline-default", "--spectrum-textfield-spacing-inline-quiet", "--spectrum-textfield-text-color-default", "--spectrum-textfield-text-color-disabled", @@ -323,145 +331,14 @@ ], "system-theme": [ "--system-textfield-background-color", - "--system-textfield-background-color-disabled", "--system-textfield-border-color", - "--system-textfield-border-color-disabled", "--system-textfield-border-color-focus", "--system-textfield-border-color-focus-hover", "--system-textfield-border-color-hover", - "--system-textfield-border-color-invalid-default", - "--system-textfield-border-color-invalid-focus", - "--system-textfield-border-color-invalid-focus-hover", - "--system-textfield-border-color-invalid-hover", - "--system-textfield-border-color-invalid-keyboard-focus", "--system-textfield-border-color-keyboard-focus", - "--system-textfield-border-width", - "--system-textfield-character-count-font-family", - "--system-textfield-character-count-font-size", - "--system-textfield-character-count-font-weight", - "--system-textfield-character-count-spacing-block", - "--system-textfield-character-count-spacing-block-quiet", - "--system-textfield-character-count-spacing-block-side", - "--system-textfield-character-count-spacing-inline", - "--system-textfield-character-count-spacing-inline-side", - "--system-textfield-corner-radius", - "--system-textfield-focus-indicator-color", - "--system-textfield-focus-indicator-gap", - "--system-textfield-focus-indicator-width", - "--system-textfield-font-family", - "--system-textfield-font-weight", - "--system-textfield-height", - "--system-textfield-helptext-spacing-block", - "--system-textfield-icon-color-invalid", - "--system-textfield-icon-color-valid", - "--system-textfield-icon-size-invalid", - "--system-textfield-icon-size-valid", - "--system-textfield-icon-spacing-block-invalid", - "--system-textfield-icon-spacing-block-valid", - "--system-textfield-icon-spacing-inline-end-invalid", - "--system-textfield-icon-spacing-inline-end-quiet-invalid", - "--system-textfield-icon-spacing-inline-end-quiet-valid", - "--system-textfield-icon-spacing-inline-end-valid", - "--system-textfield-icon-spacing-inline-start-invalid", - "--system-textfield-icon-spacing-inline-start-valid", - "--system-textfield-label-spacing-block", - "--system-textfield-label-spacing-block-quiet", - "--system-textfield-label-spacing-inline-side-label", - "--system-textfield-min-width", - "--system-textfield-placeholder-font-size", - "--system-textfield-size-l-character-count-font-size", - "--system-textfield-size-l-character-count-spacing-block", - "--system-textfield-size-l-character-count-spacing-block-quiet", - "--system-textfield-size-l-character-count-spacing-block-side", - "--system-textfield-size-l-height", - "--system-textfield-size-l-icon-size-invalid", - "--system-textfield-size-l-icon-size-valid", - "--system-textfield-size-l-icon-spacing-block-invalid", - "--system-textfield-size-l-icon-spacing-block-valid", - "--system-textfield-size-l-icon-spacing-inline-end-invalid", - "--system-textfield-size-l-icon-spacing-inline-end-valid", - "--system-textfield-size-l-icon-spacing-inline-start-invalid", - "--system-textfield-size-l-icon-spacing-inline-start-valid", - "--system-textfield-size-l-label-spacing-block-quiet", - "--system-textfield-size-l-label-spacing-inline-side-label", - "--system-textfield-size-l-placeholder-font-size", - "--system-textfield-size-l-spacing-inline", - "--system-textfield-size-l-text-area-min-block-size-quiet", - "--system-textfield-size-m-character-count-font-size", - "--system-textfield-size-m-character-count-spacing-block", - "--system-textfield-size-m-character-count-spacing-block-quiet", - "--system-textfield-size-m-character-count-spacing-block-side", - "--system-textfield-size-m-height", - "--system-textfield-size-m-icon-size-invalid", - "--system-textfield-size-m-icon-size-valid", - "--system-textfield-size-m-icon-spacing-block-invalid", - "--system-textfield-size-m-icon-spacing-block-valid", - "--system-textfield-size-m-icon-spacing-inline-end-invalid", - "--system-textfield-size-m-icon-spacing-inline-end-valid", - "--system-textfield-size-m-icon-spacing-inline-start-invalid", - "--system-textfield-size-m-icon-spacing-inline-start-valid", - "--system-textfield-size-m-label-spacing-block-quiet", - "--system-textfield-size-m-label-spacing-inline-side-label", - "--system-textfield-size-m-placeholder-font-size", - "--system-textfield-size-m-spacing-inline", - "--system-textfield-size-m-text-area-min-block-size-quiet", - "--system-textfield-size-s-character-count-font-size", - "--system-textfield-size-s-character-count-spacing-block", - "--system-textfield-size-s-character-count-spacing-block-quiet", - "--system-textfield-size-s-character-count-spacing-block-side", - "--system-textfield-size-s-height", - "--system-textfield-size-s-icon-size-invalid", - "--system-textfield-size-s-icon-size-valid", - "--system-textfield-size-s-icon-spacing-block-invalid", - "--system-textfield-size-s-icon-spacing-block-valid", - "--system-textfield-size-s-icon-spacing-inline-end-invalid", - "--system-textfield-size-s-icon-spacing-inline-end-valid", - "--system-textfield-size-s-icon-spacing-inline-start-invalid", - "--system-textfield-size-s-icon-spacing-inline-start-valid", - "--system-textfield-size-s-label-spacing-block-quiet", - "--system-textfield-size-s-label-spacing-inline-side-label", - "--system-textfield-size-s-placeholder-font-size", - "--system-textfield-size-s-spacing-inline", - "--system-textfield-size-s-text-area-min-block-size-quiet", - "--system-textfield-size-xl-character-count-font-size", - "--system-textfield-size-xl-character-count-spacing-block", - "--system-textfield-size-xl-character-count-spacing-block-quiet", - "--system-textfield-size-xl-character-count-spacing-block-side", - "--system-textfield-size-xl-height", - "--system-textfield-size-xl-icon-size-invalid", - "--system-textfield-size-xl-icon-size-valid", - "--system-textfield-size-xl-icon-spacing-block-invalid", - "--system-textfield-size-xl-icon-spacing-block-valid", - "--system-textfield-size-xl-icon-spacing-inline-end-invalid", - "--system-textfield-size-xl-icon-spacing-inline-end-valid", - "--system-textfield-size-xl-icon-spacing-inline-start-invalid", - "--system-textfield-size-xl-icon-spacing-inline-start-valid", - "--system-textfield-size-xl-label-spacing-block-quiet", - "--system-textfield-size-xl-label-spacing-inline-side-label", - "--system-textfield-size-xl-placeholder-font-size", - "--system-textfield-size-xl-spacing-inline", - "--system-textfield-size-xl-text-area-min-block-size-quiet", - "--system-textfield-spacing-block-end", - "--system-textfield-spacing-block-quiet", - "--system-textfield-spacing-block-start", - "--system-textfield-spacing-inline", - "--system-textfield-spacing-inline-quiet", - "--system-textfield-texfield-animation-duration", - "--system-textfield-text-area-min-block-size", - "--system-textfield-text-area-min-block-size-quiet", - "--system-textfield-text-area-min-inline-size", - "--system-textfield-text-color-default", - "--system-textfield-text-color-disabled", - "--system-textfield-text-color-focus", - "--system-textfield-text-color-focus-hover", - "--system-textfield-text-color-hover", - "--system-textfield-text-color-invalid", - "--system-textfield-text-color-keyboard-focus", - "--system-textfield-text-color-readonly", - "--system-textfield-text-color-valid", - "--system-textfield-width" + "--system-textfield-border-width" ], - "passthroughs": ["--mod-fieldlabel-margin-block-end"], + "passthroughs": [], "high-contrast": [ "--highcontrast-textfield-border-color", "--highcontrast-textfield-border-color-focus", diff --git a/components/textfield/metadata/mods.md b/components/textfield/metadata/mods.md index 76d22d973e..246f118f70 100644 --- a/components/textfield/metadata/mods.md +++ b/components/textfield/metadata/mods.md @@ -1,6 +1,5 @@ | Modifiable custom properties | | ------------------------------------------------------- | -| `--mod-disabled-content-color` | | `--mod-texfield-animation-duration` | | `--mod-text-area-min-block-size` | | `--mod-text-area-min-block-size-quiet` | @@ -56,9 +55,7 @@ | `--mod-textfield-spacing-block-quiet` | | `--mod-textfield-spacing-block-start` | | `--mod-textfield-spacing-inline` | -| `--mod-textfield-spacing-inline-end` | | `--mod-textfield-spacing-inline-quiet` | -| `--mod-textfield-spacing-inline-start` | | `--mod-textfield-text-color-default` | | `--mod-textfield-text-color-disabled` | | `--mod-textfield-text-color-focus` | diff --git a/components/textfield/themes/spectrum-two.css b/components/textfield/themes/spectrum-two.css index d8612cb5dd..5083309c31 100644 --- a/components/textfield/themes/spectrum-two.css +++ b/components/textfield/themes/spectrum-two.css @@ -21,173 +21,7 @@ --spectrum-textfield-border-width: var(--spectrum-border-width-100); - --spectrum-texfield-animation-duration: var(--spectrum-animation-duration-100); - - --spectrum-textfield-width: 240px; /* override per api */ - --spectrum-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier); - --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100); - - /* default spacing */ - --spectrum-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet); - --spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100); - --spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100); - --spectrum-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet); - - /* default label spacing */ - --spectrum-textfield-label-spacing-block: var(--spectrum-field-label-to-component); - - /* default help text spacing */ - --spectrum-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component); - - /* quiet spacing */ - --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet); - --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet); - - /* font styles */ - --spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-textfield-font-weight: var(--spectrum-regular-font-weight); - - /* character count */ - --spectrum-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-textfield-character-count-font-weight: var(--spectrum-regular-font-weight); - --spectrum-textfield-character-count-spacing-inline: var(--spectrum-spacing-200); - --spectrum-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field); - - /* focus indicator */ - --spectrum-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - /*** Colors ***/ --spectrum-textfield-background-color: var(--spectrum-gray-25); - - /* Text Colors */ - --spectrum-textfield-text-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus); - --spectrum-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); - --spectrum-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus); - - /* Read Only Text Color */ - --spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default); - - /* Disabled Colors */ - --spectrum-textfield-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-textfield-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color); - - /* Invalid Colors */ - --spectrum-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default); - --spectrum-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); - --spectrum-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); - --spectrum-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); - --spectrum-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus); - --spectrum-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); - - --spectrum-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default); - - /* Valid Colors */ - --spectrum-textfield-text-color-valid: var(--spectrum-neutral-content-color-default); - --spectrum-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - - /* Focus Indicator Color */ - --spectrum-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color); - - /* Text Area / Multiline */ - --spectrum-text-area-min-inline-size: var(--spectrum-text-area-minimum-width); - --spectrum-text-area-min-block-size: var(--spectrum-text-area-minimum-height); - - /********* Text field t-shirt sizes *********/ - &, - &.spectrum-Textfield--sizeM { - --spectrum-textfield-height: var(--spectrum-component-height-100); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); - - /* Text Area / Multiline size medium */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100); - } - - &.spectrum-Textfield--sizeS { - --spectrum-textfield-height: var(--spectrum-component-height-75); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-75); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-75); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-75); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small); - - /* Text Area / Multiline size small */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-75); - } - - &.spectrum-Textfield--sizeL { - --spectrum-textfield-height: var(--spectrum-component-height-200); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-200); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-200); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-100); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large); - - /* Text Area / Multiline size large */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-200); - } - - &.spectrum-Textfield--sizeXL { - --spectrum-textfield-height: var(--spectrum-component-height-300); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-300); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-300); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-200); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large); - - /* Text Area / Multiline size extra large */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-300); - } } } diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index 9cd768c4bb..b6e2ad2b49 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -13,6 +13,75 @@ @import "./themes/spectrum-two.css"; +.spectrum-Thumbnail { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); + + /* @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-opacity)); + --spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); + --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white); + --spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); + --spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); + + --spectrum-thumbnail-border-width: var(--spectrum-border-width-100); + --spectrum-thumbnail-border-width-selected: var(--spectrum-border-width-200); + --spectrum-thumbnail-border-color-selected: var(--spectrum-accent-color-800); + + --spectrum-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color); + + --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); +} + +.spectrum-Thumbnail--size50 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); +} + +.spectrum-Thumbnail--size75 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75); +} + +.spectrum-Thumbnail--size100 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100); +} + +.spectrum-Thumbnail--size200 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200); +} + +.spectrum-Thumbnail--size300 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300); +} + +.spectrum-Thumbnail--size400 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400); +} + +.spectrum-Thumbnail--size500 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); +} + +.spectrum-Thumbnail--size600 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600); +} + +.spectrum-Thumbnail--size700 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700); +} + +.spectrum-Thumbnail--size800 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800); +} + +.spectrum-Thumbnail--size900 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900); +} + +.spectrum-Thumbnail--size1000 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000); +} + .spectrum-Thumbnail { position: relative; margin: 0; @@ -24,9 +93,6 @@ border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); - overflow: hidden; - z-index: 0; - &::before { content: ""; z-index: 2; @@ -62,6 +128,9 @@ border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); } } + + overflow: hidden; + z-index: 0; } .spectrum-Thumbnail-layer { @@ -108,8 +177,8 @@ .spectrum-Thumbnail-image { position: relative; - max-inline-size: 100%; max-block-size: 100%; + max-inline-size: 100%; z-index: 1; } diff --git a/components/thumbnail/metadata/metadata.json b/components/thumbnail/metadata/metadata.json index aa6a8a0240..201fab8538 100644 --- a/components/thumbnail/metadata/metadata.json +++ b/components/thumbnail/metadata/metadata.json @@ -3,6 +3,18 @@ "selectors": [ ".spectrum-Thumbnail", ".spectrum-Thumbnail--cover .spectrum-Thumbnail-image", + ".spectrum-Thumbnail--size100", + ".spectrum-Thumbnail--size1000", + ".spectrum-Thumbnail--size200", + ".spectrum-Thumbnail--size300", + ".spectrum-Thumbnail--size400", + ".spectrum-Thumbnail--size50", + ".spectrum-Thumbnail--size500", + ".spectrum-Thumbnail--size600", + ".spectrum-Thumbnail--size700", + ".spectrum-Thumbnail--size75", + ".spectrum-Thumbnail--size800", + ".spectrum-Thumbnail--size900", ".spectrum-Thumbnail-background", ".spectrum-Thumbnail-image", ".spectrum-Thumbnail-image-wrapper", @@ -14,18 +26,6 @@ ".spectrum-Thumbnail.is-focused", ".spectrum-Thumbnail.is-focused .spectrum-Thumbnail-image-wrapper", ".spectrum-Thumbnail.is-focused:after", - ".spectrum-Thumbnail.spectrum-Thumbnail--size100", - ".spectrum-Thumbnail.spectrum-Thumbnail--size1000", - ".spectrum-Thumbnail.spectrum-Thumbnail--size200", - ".spectrum-Thumbnail.spectrum-Thumbnail--size300", - ".spectrum-Thumbnail.spectrum-Thumbnail--size400", - ".spectrum-Thumbnail.spectrum-Thumbnail--size50", - ".spectrum-Thumbnail.spectrum-Thumbnail--size500", - ".spectrum-Thumbnail.spectrum-Thumbnail--size600", - ".spectrum-Thumbnail.spectrum-Thumbnail--size700", - ".spectrum-Thumbnail.spectrum-Thumbnail--size75", - ".spectrum-Thumbnail.spectrum-Thumbnail--size800", - ".spectrum-Thumbnail.spectrum-Thumbnail--size900", ".spectrum-Thumbnail:before" ], "modifiers": [ @@ -86,34 +86,7 @@ "--spectrum-gray-800-rgb", "--spectrum-white" ], - "system-theme": [ - "--system-thumbnail-border-color-rgba", - "--system-thumbnail-border-color-selected", - "--system-thumbnail-border-radius", - "--system-thumbnail-border-width", - "--system-thumbnail-border-width-selected", - "--system-thumbnail-color-opacity-disabled", - "--system-thumbnail-focus-indicator-color", - "--system-thumbnail-focus-indicator-gap", - "--system-thumbnail-focus-indicator-thickness", - "--system-thumbnail-layer-border-color-inner", - "--system-thumbnail-layer-border-color-outer", - "--system-thumbnail-layer-border-width-inner", - "--system-thumbnail-layer-border-width-outer", - "--system-thumbnail-size", - "--system-thumbnail-size-100-size", - "--system-thumbnail-size-1000-size", - "--system-thumbnail-size-200-size", - "--system-thumbnail-size-300-size", - "--system-thumbnail-size-400-size", - "--system-thumbnail-size-50-size", - "--system-thumbnail-size-500-size", - "--system-thumbnail-size-600-size", - "--system-thumbnail-size-700-size", - "--system-thumbnail-size-75-size", - "--system-thumbnail-size-800-size", - "--system-thumbnail-size-900-size" - ], + "system-theme": ["--system-thumbnail-border-radius"], "passthroughs": [], "high-contrast": [ "--highcontrast-thumbnail-border-color", diff --git a/components/thumbnail/themes/spectrum-two.css b/components/thumbnail/themes/spectrum-two.css index c6cc2a78b3..4cd647afd8 100644 --- a/components/thumbnail/themes/spectrum-two.css +++ b/components/thumbnail/themes/spectrum-two.css @@ -14,71 +14,5 @@ @container style(--system: spectrum) { .spectrum-Thumbnail { --spectrum-thumbnail-border-radius: 2px; - --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-opacity)); - --spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); - --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white); - --spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); - --spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); - - --spectrum-thumbnail-border-width-selected: var(--spectrum-border-width-200); - --spectrum-thumbnail-border-color-selected: var(--spectrum-accent-color-800); - - --spectrum-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); - - &.spectrum-Thumbnail--size50 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); - } - - &.spectrum-Thumbnail--size75 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75); - } - - &.spectrum-Thumbnail--size100 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100); - } - - &.spectrum-Thumbnail--size200 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200); - } - - &.spectrum-Thumbnail--size300 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300); - } - - &.spectrum-Thumbnail--size400 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400); - } - - &, - &.spectrum-Thumbnail--size500 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); - } - - &.spectrum-Thumbnail--size600 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600); - } - - &.spectrum-Thumbnail--size700 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700); - } - - &.spectrum-Thumbnail--size800 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800); - } - - &.spectrum-Thumbnail--size900 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900); - } - - &.spectrum-Thumbnail--size1000 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000); - } } } diff --git a/components/toast/index.css b/components/toast/index.css index 16080f639e..68af58837a 100644 --- a/components/toast/index.css +++ b/components/toast/index.css @@ -13,6 +13,50 @@ @import "./themes/spectrum-two.css"; +.spectrum-Toast { + /* Hardcoded variables */ + --spectrum-toast-font-weight: var(--spectrum-regular-font-weight); + + /* Size */ + + --spectrum-toast-font-size: var(--spectrum-font-size-100); + --spectrum-toast-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-toast-block-size: var(--spectrum-toast-height); + --spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --spectrum-toast-border-width: var(--spectrum-border-width-100); + + --spectrum-toast-line-height: var(--spectrum-line-height-100); + --spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + + /* Space */ + + --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + + --spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300); + --spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300); + + --spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + + --spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon); + + --spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300); + --spectrum-toast-spacing-close-button: var(--spectrum-spacing-100); + + --spectrum-toast-spacing-block-start: var(--spectrum-spacing-100); + --spectrum-toast-spacing-block-end: var(--spectrum-spacing-100); + + --spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text); + + /* Color */ + --spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default); + --spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default); + --spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default); + + --spectrum-toast-text-and-icon-color: var(--spectrum-white); +} + @media (forced-colors: active) { .spectrum-Toast { /* Border is visible in high contrast mode */ @@ -99,7 +143,6 @@ color: var(--highcontrast-toast-text-and-icon-color, var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color))); - &:lang(ja), &:lang(zh), &:lang(ko) { diff --git a/components/toast/metadata/metadata.json b/components/toast/metadata/metadata.json index 37295ec820..333e84c2af 100644 --- a/components/toast/metadata/metadata.json +++ b/components/toast/metadata/metadata.json @@ -101,31 +101,7 @@ ], "system-theme": [ "--system-toast-background-color-default", - "--system-toast-block-size", - "--system-toast-border-width", - "--system-toast-corner-radius", - "--system-toast-divider-color", - "--system-toast-font-size", - "--system-toast-font-weight", - "--system-toast-informative-background-color-default", - "--system-toast-line-height", - "--system-toast-line-height-cjk", - "--system-toast-max-inline-size", - "--system-toast-negative-background-color-default", - "--system-toast-positive-background-color-default", - "--system-toast-spacing-block-end", - "--system-toast-spacing-block-start", - "--system-toast-spacing-bottom-edge-to-divider", - "--system-toast-spacing-bottom-edge-to-text", - "--system-toast-spacing-close-button", - "--system-toast-spacing-icon-to-text", - "--system-toast-spacing-start-edge-to-text-and-icon", - "--system-toast-spacing-text-and-action-button-to-divider", - "--system-toast-spacing-text-to-action-button-horizontal", - "--system-toast-spacing-top-edge-to-divider", - "--system-toast-spacing-top-edge-to-icon", - "--system-toast-spacing-top-edge-to-text", - "--system-toast-text-and-icon-color" + "--system-toast-divider-color" ], "passthroughs": [], "high-contrast": [ diff --git a/components/toast/themes/spectrum-two.css b/components/toast/themes/spectrum-two.css index 3c1a07eaf5..1097d45729 100644 --- a/components/toast/themes/spectrum-two.css +++ b/components/toast/themes/spectrum-two.css @@ -14,47 +14,6 @@ @container style(--system: spectrum) { .spectrum-Toast { --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - - /* Hardcoded variables */ - --spectrum-toast-font-weight: var(--spectrum-regular-font-weight); - - /* Size */ - --spectrum-toast-font-size: var(--spectrum-font-size-100); - --spectrum-toast-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-toast-block-size: var(--spectrum-toast-height); - --spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --spectrum-toast-border-width: var(--spectrum-border-width-100); - - --spectrum-toast-line-height: var(--spectrum-line-height-100); - --spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - - /* Space */ - --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - - --spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300); - --spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300); - - --spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - - --spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon); - - --spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300); - --spectrum-toast-spacing-close-button: var(--spectrum-spacing-100); - - --spectrum-toast-spacing-block-start: var(--spectrum-spacing-100); - --spectrum-toast-spacing-block-end: var(--spectrum-spacing-100); - - --spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text); - - /* Color */ - --spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default); - --spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default); - --spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default); - - --spectrum-toast-text-and-icon-color: var(--spectrum-white); - --spectrum-toast-divider-color: var(--spectrum-transparent-white-400); } } diff --git a/components/tooltip/index.css b/components/tooltip/index.css index 6ae9291754..3499ec9b60 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -11,8 +11,65 @@ * governing permissions and limitations under the License. */ -@import "@spectrum-css/commons/overlay.css"; @import "./themes/spectrum-two.css"; +@import "@spectrum-css/commons/overlay.css"; + +.spectrum-Tooltip { + --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100); + + /* override if additional spacing to source is required */ + --spectrum-tooltip-margin: 0px; + + --spectrum-tooltip-height: var(--spectrum-component-height-75); + --spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100); + + --spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + + --spectrum-tooltip-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); + + /* 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); + + /* 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); + + /* tip */ + --spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + + /* Width and height of square element used to render the tip triangle. */ + --spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size); + + /* Percentage value of height divided by width, for calculating clip-path within a square tip. */ + --spectrum-tooltip-tip-height-percentage: 50%; + + /* 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); + + /* neutral background changes per theme */ + --spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral); +} @media (forced-colors: active) { .spectrum-Tooltip { @@ -24,7 +81,6 @@ --highcontrast-tooltip-background-color-informative: CanvasText; --highcontrast-tooltip-background-color-positive: CanvasText; --highcontrast-tooltip-background-color-negative: CanvasText; - forced-color-adjust: none; } } @@ -101,7 +157,6 @@ inset-block-start: 100%; /* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */ left: 50%; - transform: translateX(-50%); background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); @@ -294,7 +349,6 @@ block-size: var(--mod-tooltip-icon-height, var(--spectrum-tooltip-icon-height)); align-self: flex-start; flex-shrink: 0; - } /****** Label ******/ @@ -303,7 +357,6 @@ 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 ******/ @@ -401,7 +454,6 @@ } /*** CSS Hover Animation ***/ -/* stylelint-disable selector-class-pattern -- supported legacy state system */ .u-tooltip-showOnHover { display: inline-block; position: relative; @@ -484,6 +536,16 @@ right: 100%; } + /* RTL */ + &:dir(rtl) { + .spectrum-Tooltip--start, + .spectrum-Tooltip--start-top, + .spectrum-Tooltip--start-bottom { + left: 100%; + right: auto; + } + } + .spectrum-Tooltip--right, .spectrum-Tooltip--right-top, .spectrum-Tooltip--right-bottom, @@ -494,6 +556,16 @@ left: 100%; } + /* RTL */ + &:dir(rtl) { + .spectrum-Tooltip--end, + .spectrum-Tooltip--end-top, + .spectrum-Tooltip--end-bottom { + left: auto; + right: 100%; + } + } + &:hover, &:focus, &.is-focused, @@ -505,7 +577,12 @@ .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, @@ -513,7 +590,12 @@ .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, @@ -522,7 +604,26 @@ .spectrum-Tooltip--start-bottom { transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%); } + } + /* 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, @@ -535,30 +636,10 @@ /* RTL */ &:dir(rtl) { - .spectrum-Tooltip--start, - .spectrum-Tooltip--start-top, - .spectrum-Tooltip--start-bottom { - left: 100%; - right: auto; - } - - .spectrum-Tooltip--end, - .spectrum-Tooltip--end-top, - .spectrum-Tooltip--end-bottom { - left: auto; - right: 100%; - } - &: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%); - } - .spectrum-Tooltip--end, .spectrum-Tooltip--end-top, .spectrum-Tooltip--end-bottom { @@ -567,4 +648,3 @@ } } } -/* stylelint-enable selector-class-pattern */ diff --git a/components/tooltip/metadata/metadata.json b/components/tooltip/metadata/metadata.json index 1a0887d013..7f6d6d0b94 100644 --- a/components/tooltip/metadata/metadata.json +++ b/components/tooltip/metadata/metadata.json @@ -391,37 +391,7 @@ "--spectrum-white", "--spectrum-workflow-icon-size-50" ], - "system-theme": [ - "--system-tooltip-animation-duration", - "--system-tooltip-backgound-color-default-neutral", - "--system-tooltip-background-color-default", - "--system-tooltip-background-color-informative", - "--system-tooltip-background-color-negative", - "--system-tooltip-background-color-positive", - "--system-tooltip-border-radius", - "--system-tooltip-cjk-line-height", - "--system-tooltip-content-color", - "--system-tooltip-font-size", - "--system-tooltip-font-weight", - "--system-tooltip-height", - "--system-tooltip-icon-height", - "--system-tooltip-icon-spacing-block-start", - "--system-tooltip-icon-spacing-inline-end", - "--system-tooltip-icon-spacing-inline-start", - "--system-tooltip-icon-width", - "--system-tooltip-line-height", - "--system-tooltip-margin", - "--system-tooltip-max-inline-size", - "--system-tooltip-pointer-corner-spacing", - "--system-tooltip-spacing-block-end", - "--system-tooltip-spacing-block-start", - "--system-tooltip-spacing-inline", - "--system-tooltip-tip-antialiasing-inset", - "--system-tooltip-tip-block-size", - "--system-tooltip-tip-height-percentage", - "--system-tooltip-tip-inline-size", - "--system-tooltip-tip-square-size" - ], + "system-theme": ["--system-tooltip-backgound-color-default-neutral"], "passthroughs": [], "high-contrast": [ "--highcontrast-tooltip-background-color-default", diff --git a/components/tooltip/themes/spectrum-two.css b/components/tooltip/themes/spectrum-two.css index f9fdfd469e..42b423e344 100644 --- a/components/tooltip/themes/spectrum-two.css +++ b/components/tooltip/themes/spectrum-two.css @@ -14,60 +14,5 @@ @container style(--system: spectrum) { .spectrum-Tooltip { --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); - - --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100); - - /* override if additional spacing to source is required */ - --spectrum-tooltip-margin: 0px; - - --spectrum-tooltip-height: var(--spectrum-component-height-75); - --spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100); - - --spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - - --spectrum-tooltip-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); - - /* 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); - - /* 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); - - /* tip */ - --spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); - --spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - - /* Width and height of square element used to render the tip triangle. */ - --spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size); - - /* Percentage value of height divided by width, for calculating clip-path within a square tip. */ - --spectrum-tooltip-tip-height-percentage: 50%; - - /* 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); - - /* neutral background changes per theme */ - --spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral); } } diff --git a/components/tray/index.css b/components/tray/index.css index 46fe1dc981..784ef28874 100644 --- a/components/tray/index.css +++ b/components/tray/index.css @@ -13,6 +13,24 @@ @import "./themes/spectrum-two.css"; +.spectrum-Tray { + /* Placeholder tokens */ + --spectrum-tray-exit-animation-delay: 0ms; + --spectrum-tray-entry-animation-delay: 160ms; + + /* 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; + + --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-wrapper { inset-inline-start: 0; @@ -44,13 +62,18 @@ 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)); + 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)); + 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); } } diff --git a/components/tray/metadata/metadata.json b/components/tray/metadata/metadata.json index 0d445f9d16..2d510b6a7a 100644 --- a/components/tray/metadata/metadata.json +++ b/components/tray/metadata/metadata.json @@ -36,16 +36,7 @@ "--spectrum-background-layer-2-color", "--spectrum-corner-radius-100" ], - "system-theme": [ - "--system-tray-background-color", - "--system-tray-corner-radius", - "--system-tray-entry-animation-delay", - "--system-tray-entry-animation-duration", - "--system-tray-exit-animation-delay", - "--system-tray-exit-animation-duration", - "--system-tray-max-inline-size", - "--system-tray-spacing-edge-to-safe-zone" - ], + "system-theme": [], "passthroughs": ["--mod-modal-max-width"], "high-contrast": ["--highcontrast-tray-background-color"] } diff --git a/components/tray/themes/spectrum-two.css b/components/tray/themes/spectrum-two.css index de56e809b8..3b48a570c2 100644 --- a/components/tray/themes/spectrum-two.css +++ b/components/tray/themes/spectrum-two.css @@ -10,23 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-Tray { - /* Placeholder tokens */ - --spectrum-tray-exit-animation-delay: 0ms; - --spectrum-tray-entry-animation-delay: 160ms; - - /* 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; - - --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); - } -} diff --git a/components/treeview/index.css b/components/treeview/index.css index 9b3264a4f2..b8633ec30a 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -13,6 +13,117 @@ @import "./themes/spectrum-two.css"; +.spectrum-TreeView { + --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-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-heading-color: var(--spectrum-heading-color); + + --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-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-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-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-indicator-animation-duration: var(--spectrum-animation-duration-100); + + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } +} + +.spectrum-TreeView--sizeS { + --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-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--sizeL { + --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-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--sizeXL { + --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-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--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, var(--spectrum-treeview-item-border-color-quiet-selected))); +} + +.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))); +} + +.spectrum-TreeView--detached { + --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; @@ -65,10 +176,6 @@ margin-block: var(--mod-treeview-margin-block, var(--spectrum-treeview-margin-block)); font-size: var(--mod-treeview-font-size, var(--spectrum-treeview-font-size)); - &:dir(rtl) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); - } - /* Close (hide) nested treeviews by default. */ .spectrum-TreeView { position: static; @@ -301,20 +408,9 @@ } /* ***** VARIANTS ***** */ -.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, var(--spectrum-treeview-item-border-color-quiet-selected))); -} - .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))); - .spectrum-TreeView-itemThumbnail { flex-shrink: 0; margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap)); } } - -.spectrum-TreeView--detached { - --spectrum-treeview-item-border-radius: var(--mod-treeview-item-border-radius-detached, var(--spectrum-corner-radius-100)); -} diff --git a/components/treeview/metadata/metadata.json b/components/treeview/metadata/metadata.json index ad31093014..9902324dd1 100644 --- a/components/treeview/metadata/metadata.json +++ b/components/treeview/metadata/metadata.json @@ -5,6 +5,9 @@ ".spectrum-TreeView .spectrum-TreeView", ".spectrum-TreeView--detached", ".spectrum-TreeView--quiet", + ".spectrum-TreeView--sizeL", + ".spectrum-TreeView--sizeS", + ".spectrum-TreeView--sizeXL", ".spectrum-TreeView--thumbnail", ".spectrum-TreeView--thumbnail .spectrum-TreeView-itemThumbnail", ".spectrum-TreeView-heading", @@ -45,11 +48,6 @@ ".spectrum-TreeView-itemLink:hover:before", ".spectrum-TreeView-section > .spectrum-TreeView", ".spectrum-TreeView-section:not(:first-child)", - ".spectrum-TreeView.spectrum-TreeView--detached", - ".spectrum-TreeView.spectrum-TreeView--sizeL", - ".spectrum-TreeView.spectrum-TreeView--sizeM", - ".spectrum-TreeView.spectrum-TreeView--sizeS", - ".spectrum-TreeView.spectrum-TreeView--sizeXL", ".spectrum-TreeView:dir(rtl)", "[dir=\"rtl\"] .spectrum-TreeView" ], @@ -160,7 +158,7 @@ "--spectrum-font-size-200", "--spectrum-font-size-300", "--spectrum-font-size-75", - "--spectrum-gray-100", + "--spectrum-gray-200", "--spectrum-gray-500", "--spectrum-gray-700", "--spectrum-gray-900", @@ -170,79 +168,7 @@ "--spectrum-neutral-content-color-default", "--spectrum-text-to-visual-75" ], - "system-theme": [ - "--system-tree-view-detached-item-border-radius", - "--system-tree-view-font-size", - "--system-tree-view-heading-bottom-to-text", - "--system-tree-view-heading-color", - "--system-tree-view-heading-font-weight", - "--system-tree-view-indicator-animation-duration", - "--system-tree-view-indicator-margin-inline-start", - "--system-tree-view-indicator-padding", - "--system-tree-view-item-background-color-focus", - "--system-tree-view-item-background-color-hover", - "--system-tree-view-item-border-color-focus", - "--system-tree-view-item-border-color-quiet-selected", - "--system-tree-view-item-border-color-selected", - "--system-tree-view-item-border-radius", - "--system-tree-view-item-border-size", - "--system-tree-view-item-border-size-selected", - "--system-tree-view-item-icon-color", - "--system-tree-view-item-icon-color-disabled", - "--system-tree-view-item-icon-color-focus", - "--system-tree-view-item-icon-color-hover", - "--system-tree-view-item-icon-color-selected", - "--system-tree-view-item-icon-gap", - "--system-tree-view-item-indentation", - "--system-tree-view-item-min-block-size", - "--system-tree-view-item-min-block-size-thumbnail-offset", - "--system-tree-view-item-padding-inline-end", - "--system-tree-view-item-padding-inline-start", - "--system-tree-view-item-text-color", - "--system-tree-view-item-text-color-disabled", - "--system-tree-view-item-text-color-focus", - "--system-tree-view-item-text-color-hover", - "--system-tree-view-item-text-color-selected", - "--system-tree-view-line-height", - "--system-tree-view-margin-block", - "--system-tree-view-section-spacing", - "--system-tree-view-size-l-font-size", - "--system-tree-view-size-l-heading-bottom-to-text", - "--system-tree-view-size-l-indicator-margin-inline-start", - "--system-tree-view-size-l-indicator-padding", - "--system-tree-view-size-l-item-indentation", - "--system-tree-view-size-l-item-min-block-size", - "--system-tree-view-size-l-item-min-block-size-thumbnail-offset", - "--system-tree-view-size-l-item-padding-inline-end", - "--system-tree-view-size-l-item-padding-inline-start", - "--system-tree-view-size-m-font-size", - "--system-tree-view-size-m-heading-bottom-to-text", - "--system-tree-view-size-m-indicator-margin-inline-start", - "--system-tree-view-size-m-indicator-padding", - "--system-tree-view-size-m-item-indentation", - "--system-tree-view-size-m-item-min-block-size", - "--system-tree-view-size-m-item-min-block-size-thumbnail-offset", - "--system-tree-view-size-m-item-padding-inline-end", - "--system-tree-view-size-m-item-padding-inline-start", - "--system-tree-view-size-s-font-size", - "--system-tree-view-size-s-heading-bottom-to-text", - "--system-tree-view-size-s-indicator-margin-inline-start", - "--system-tree-view-size-s-indicator-padding", - "--system-tree-view-size-s-item-indentation", - "--system-tree-view-size-s-item-min-block-size", - "--system-tree-view-size-s-item-min-block-size-thumbnail-offset", - "--system-tree-view-size-s-item-padding-inline-end", - "--system-tree-view-size-s-item-padding-inline-start", - "--system-tree-view-size-xl-font-size", - "--system-tree-view-size-xl-heading-bottom-to-text", - "--system-tree-view-size-xl-indicator-margin-inline-start", - "--system-tree-view-size-xl-indicator-padding", - "--system-tree-view-size-xl-item-indentation", - "--system-tree-view-size-xl-item-min-block-size", - "--system-tree-view-size-xl-item-min-block-size-thumbnail-offset", - "--system-tree-view-size-xl-item-padding-inline-end", - "--system-tree-view-size-xl-item-padding-inline-start" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-treeview-heading-color", diff --git a/components/treeview/themes/spectrum-two.css b/components/treeview/themes/spectrum-two.css index c58407b263..3b48a570c2 100644 --- a/components/treeview/themes/spectrum-two.css +++ b/components/treeview/themes/spectrum-two.css @@ -10,106 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-TreeView { - --spectrum-treeview-line-height: var(--spectrum-line-height-200); - --spectrum-treeview-margin-block: 1em; - - --spectrum-treeview-section-spacing: var(--spectrum-treeview-item-indentation-medium); - --spectrum-treeview-heading-font-weight: var(--spectrum-bold-font-weight); - --spectrum-treeview-heading-color: var(--spectrum-heading-color); - - --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-background-color-hover: var(--spectrum-gray-100); - --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); - - --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-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-animation-duration: var(--spectrum-animation-duration-100); - - &, - &.spectrum-TreeView--sizeM { - --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-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100); - - --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-100); - --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-100)); - --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-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--sizeS { - --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-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--sizeL { - --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-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--sizeXL { - --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-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--detached { - --spectrum-treeview-item-border-radius: var(--spectrum-corner-radius-100); - } - } -} diff --git a/components/typography/index.css b/components/typography/index.css index 0d016dcd3a..eba0d7dbb4 100644 --- a/components/typography/index.css +++ b/components/typography/index.css @@ -14,7 +14,15 @@ @import "./themes/spectrum-two.css"; /* Typography - Default */ -.spectrum-Typography { +/* stylelint-disable selector-class-pattern -- @todo update this in a future breaking change to :root or .spectrum-Typography */ +.spectrum { + --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + + --spectrum-font-family: 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); @@ -26,21 +34,23 @@ &:lang(he) { font-family: var(--spectrum-font-family-he); } +} +/* stylelint-enable selector-class-pattern */ - /* Add margin when inside a Typography component */ - .spectrum-Heading { - --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)); - } +/* Typography - Heading */ - .spectrum-Body { - --spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier)); - } +/* 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-Detail { - --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-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)); } /* Windows high contrast mode */ @@ -48,21 +58,50 @@ .spectrum-Heading { --highcontrast-heading-font-color: Text; } +} - .spectrum-Body { - --highcontrast-body-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-Detail { - --highcontrast-detail-font-color: Text; - } +.spectrum-Heading--sizeXS { + --spectrum-heading-font-size: var(--spectrum-heading-size-xs); + --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xs); +} - .spectrum-Code { - --highcontrast-code-font-color: Text; - } +.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--sizeM { + --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); } -/* Heading */ +.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--sizeXXL { + --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); +} + +/* 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)); @@ -70,8 +109,8 @@ 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: var(--mod-heading-margin-start, var(--spectrum-heading-margin-start, 0)); - margin-block-end: var(--mod-heading-margin-end, var(--spectrum-heading-margin-end, 0)); + margin-block-start: 0; + margin-block-end: 0; strong, .spectrum-Heading-strong { @@ -302,15 +341,74 @@ } } +/* 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)); +} + /* 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-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-font-color: var(--spectrum-body-color); +} + +/* Windows high contrast mode */ +@media (forced-colors: active) { + .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--sizeS { + --spectrum-body-font-size: var(--spectrum-body-size-s); +} + +.spectrum-Body--sizeM { + --spectrum-body-font-size: var(--spectrum-body-size-m); +} + +.spectrum-Body--sizeL { + --spectrum-body-font-size: var(--spectrum-body-size-l); +} + +.spectrum-Body--sizeXL { + --spectrum-body-font-size: var(--spectrum-body-size-xl); +} + +.spectrum-Body--sizeXXL { + --spectrum-body-font-size: var(--spectrum-body-size-xxl); +} + +.spectrum-Body--sizeXXXL { + --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: var(--mod-body-margin-start, var(--mod-body-margin, 0)); - margin-block-end: var(--mod-body-margin-end, var(--mod-body-margin, var(--spectrum-body-margin-end, 0))); + margin-block-start: 0; + margin-block-end: 0; line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); @@ -365,7 +463,6 @@ } } -/* Body - Serif */ .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)); @@ -391,14 +488,57 @@ } } +/* Add margin when inside a Typography component */ +.spectrum-Typography .spectrum-Body { + 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-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); +} + +/* Windows high contrast mode */ +@media (forced-colors: active) { + .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--sizeM { + --spectrum-detail-font-size: var(--spectrum-detail-size-m); +} + +.spectrum-Detail--sizeL { + --spectrum-detail-font-size: var(--spectrum-detail-size-l); +} + +.spectrum-Detail--sizeXL { + --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: var(--mod-detail-margin-start, var(--spectrum-detail-margin-start, 0)); - margin-block-end: var(--mod-detail-margin-end, var(--spectrum-detail-margin-end, 0)); + margin-block-start: 0; + margin-block-end: 0; color: var(--highcontrast-detail-font-color, var(--mod-detail-font-color, var(--spectrum-detail-font-color))); @@ -455,7 +595,6 @@ } } -/* Detail - Serif */ .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)); @@ -481,7 +620,7 @@ } } -/* Detail - Light */ +/* 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)); @@ -530,7 +669,6 @@ } } -/* Detail - Serif - Light */ .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)); @@ -555,14 +693,57 @@ } } +/* 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)); +} + /* Code */ + +/* Code tokens */ +.spectrum-Code { + --spectrum-code-font-family: var(--spectrum-code-font-family-stack); + --spectrum-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --spectrum-code-font-color: var(--spectrum-code-color); +} + +/* Windows high contrast mode */ +@media (forced-colors: active) { + .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--sizeS { + --spectrum-code-font-size: var(--spectrum-code-size-s); +} + +.spectrum-Code--sizeM { + --spectrum-code-font-size: var(--spectrum-code-size-m); +} + +.spectrum-Code--sizeL { + --spectrum-code-font-size: var(--spectrum-code-size-l); +} + +.spectrum-Code--sizeXL { + --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: var(--mod-code-margin-start, 0); - margin-block-end: var(--mod-code-margin-end, 0); + margin-block-start: 0; + margin-block-end: 0; line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); diff --git a/components/typography/metadata/metadata.json b/components/typography/metadata/metadata.json index 526d8b97c0..9235bb411b 100644 --- a/components/typography/metadata/metadata.json +++ b/components/typography/metadata/metadata.json @@ -17,13 +17,13 @@ ".spectrum-Body--serif em strong", ".spectrum-Body--serif strong", ".spectrum-Body--serif strong em", - ".spectrum-Body.spectrum-Body--sizeL", - ".spectrum-Body.spectrum-Body--sizeM", - ".spectrum-Body.spectrum-Body--sizeS", - ".spectrum-Body.spectrum-Body--sizeXL", - ".spectrum-Body.spectrum-Body--sizeXS", - ".spectrum-Body.spectrum-Body--sizeXXL", - ".spectrum-Body.spectrum-Body--sizeXXXL", + ".spectrum-Body--sizeL", + ".spectrum-Body--sizeM", + ".spectrum-Body--sizeS", + ".spectrum-Body--sizeXL", + ".spectrum-Body--sizeXS", + ".spectrum-Body--sizeXXL", + ".spectrum-Body--sizeXXXL", ".spectrum-Body:lang(ja)", ".spectrum-Body:lang(ja) .spectrum-Body-emphasized", ".spectrum-Body:lang(ja) .spectrum-Body-strong", @@ -56,11 +56,11 @@ ".spectrum-Code em strong", ".spectrum-Code strong", ".spectrum-Code strong em", - ".spectrum-Code.spectrum-Code--sizeL", - ".spectrum-Code.spectrum-Code--sizeM", - ".spectrum-Code.spectrum-Code--sizeS", - ".spectrum-Code.spectrum-Code--sizeXL", - ".spectrum-Code.spectrum-Code--sizeXS", + ".spectrum-Code--sizeL", + ".spectrum-Code--sizeM", + ".spectrum-Code--sizeS", + ".spectrum-Code--sizeXL", + ".spectrum-Code--sizeXS", ".spectrum-Code:lang(ja)", ".spectrum-Code:lang(ja) .spectrum-Code-emphasized", ".spectrum-Code:lang(ja) .spectrum-Code-strong", @@ -135,10 +135,10 @@ ".spectrum-Detail--serif.spectrum-Detail--light em strong", ".spectrum-Detail--serif.spectrum-Detail--light strong", ".spectrum-Detail--serif.spectrum-Detail--light strong em", - ".spectrum-Detail.spectrum-Detail--sizeL", - ".spectrum-Detail.spectrum-Detail--sizeM", - ".spectrum-Detail.spectrum-Detail--sizeS", - ".spectrum-Detail.spectrum-Detail--sizeXL", + ".spectrum-Detail--sizeL", + ".spectrum-Detail--sizeM", + ".spectrum-Detail--sizeS", + ".spectrum-Detail--sizeXL", ".spectrum-Detail:lang(ja)", ".spectrum-Detail:lang(ja) .spectrum-Detail-emphasized", ".spectrum-Detail:lang(ja) .spectrum-Detail-strong", @@ -259,14 +259,14 @@ ".spectrum-Heading--serif.spectrum-Heading--light em strong", ".spectrum-Heading--serif.spectrum-Heading--light strong", ".spectrum-Heading--serif.spectrum-Heading--light strong em", - ".spectrum-Heading.spectrum-Heading--sizeL", - ".spectrum-Heading.spectrum-Heading--sizeM", - ".spectrum-Heading.spectrum-Heading--sizeS", - ".spectrum-Heading.spectrum-Heading--sizeXL", - ".spectrum-Heading.spectrum-Heading--sizeXS", - ".spectrum-Heading.spectrum-Heading--sizeXXL", - ".spectrum-Heading.spectrum-Heading--sizeXXS", - ".spectrum-Heading.spectrum-Heading--sizeXXXL", + ".spectrum-Heading--sizeL", + ".spectrum-Heading--sizeM", + ".spectrum-Heading--sizeS", + ".spectrum-Heading--sizeXL", + ".spectrum-Heading--sizeXS", + ".spectrum-Heading--sizeXXL", + ".spectrum-Heading--sizeXXS", + ".spectrum-Heading--sizeXXXL", ".spectrum-Heading:lang(ja)", ".spectrum-Heading:lang(ja) .spectrum-Heading-emphasized", ".spectrum-Heading:lang(ja) .spectrum-Heading-strong", @@ -291,12 +291,11 @@ ".spectrum-Heading:lang(zh) em strong", ".spectrum-Heading:lang(zh) strong", ".spectrum-Heading:lang(zh) strong em", - ".spectrum-Typography", ".spectrum-Typography .spectrum-Body", ".spectrum-Typography .spectrum-Detail", ".spectrum-Typography .spectrum-Heading", - ".spectrum-Typography:lang(ar)", - ".spectrum-Typography:lang(he)" + ".spectrum:lang(ar)", + ".spectrum:lang(he)" ], "modifiers": [ "--mod-body-cjk-emphasized-font-style", @@ -314,8 +313,6 @@ "--mod-body-font-size", "--mod-body-line-height", "--mod-body-margin", - "--mod-body-margin-end", - "--mod-body-margin-start", "--mod-body-sans-serif-emphasized-font-style", "--mod-body-sans-serif-emphasized-font-weight", "--mod-body-sans-serif-font-family", @@ -353,8 +350,6 @@ "--mod-code-font-style", "--mod-code-font-weight", "--mod-code-line-height", - "--mod-code-margin-end", - "--mod-code-margin-start", "--mod-code-strong-emphasized-font-style", "--mod-code-strong-emphasized-font-weight", "--mod-code-strong-font-style", @@ -517,7 +512,7 @@ "--spectrum-body-font-color", "--spectrum-body-font-size", "--spectrum-body-line-height", - "--spectrum-body-margin-end", + "--spectrum-body-margin", "--spectrum-body-margin-multiplier", "--spectrum-body-sans-serif-emphasized-font-style", "--spectrum-body-sans-serif-emphasized-font-weight", @@ -576,6 +571,7 @@ "--spectrum-code-strong-emphasized-font-weight", "--spectrum-code-strong-font-style", "--spectrum-code-strong-font-weight", + "--spectrum-default-font-style", "--spectrum-detail-cjk-emphasized-font-style", "--spectrum-detail-cjk-emphasized-font-weight", "--spectrum-detail-cjk-font-family", @@ -645,6 +641,7 @@ "--spectrum-font-family-ar", "--spectrum-font-family-he", "--spectrum-font-size", + "--spectrum-font-size-100", "--spectrum-font-style", "--spectrum-heading-cjk-emphasized-font-style", "--spectrum-heading-cjk-emphasized-font-weight", @@ -751,62 +748,7 @@ "--spectrum-sans-font-family-stack", "--spectrum-serif-font-family-stack" ], - "system-theme": [ - "--system-body-cjk-font-family", - "--system-body-cjk-letter-spacing", - "--system-body-font-color", - "--system-body-font-size", - "--system-body-sans-serif-font-family", - "--system-body-serif-font-family", - "--system-body-size-l-font-size", - "--system-body-size-m-font-size", - "--system-body-size-s-font-size", - "--system-body-size-xl-font-size", - "--system-body-size-xs-font-size", - "--system-body-size-xxl-font-size", - "--system-body-size-xxxl-font-size", - "--system-code-cjk-letter-spacing", - "--system-code-font-color", - "--system-code-font-family", - "--system-code-font-size", - "--system-code-size-l-font-size", - "--system-code-size-m-font-size", - "--system-code-size-s-font-size", - "--system-code-size-xl-font-size", - "--system-code-size-xs-font-size", - "--system-detail-cjk-font-family", - "--system-detail-font-color", - "--system-detail-font-size", - "--system-detail-sans-serif-font-family", - "--system-detail-serif-font-family", - "--system-detail-size-l-font-size", - "--system-detail-size-m-font-size", - "--system-detail-size-s-font-size", - "--system-detail-size-xl-font-size", - "--system-heading-cjk-font-family", - "--system-heading-cjk-font-size", - "--system-heading-cjk-letter-spacing", - "--system-heading-font-color", - "--system-heading-font-size", - "--system-heading-sans-serif-font-family", - "--system-heading-serif-font-family", - "--system-heading-size-l-cjk-font-size", - "--system-heading-size-l-font-size", - "--system-heading-size-m-cjk-font-size", - "--system-heading-size-m-font-size", - "--system-heading-size-s-cjk-font-size", - "--system-heading-size-s-font-size", - "--system-heading-size-xl-cjk-font-size", - "--system-heading-size-xl-font-size", - "--system-heading-size-xs-cjk-font-size", - "--system-heading-size-xs-font-size", - "--system-heading-size-xxl-cjk-font-size", - "--system-heading-size-xxl-font-size", - "--system-heading-size-xxs-cjk-font-size", - "--system-heading-size-xxs-font-size", - "--system-heading-size-xxxl-cjk-font-size", - "--system-heading-size-xxxl-font-size" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-body-font-color", diff --git a/components/typography/metadata/mods.md b/components/typography/metadata/mods.md index ba71cd4327..25bd5b5f0e 100644 --- a/components/typography/metadata/mods.md +++ b/components/typography/metadata/mods.md @@ -15,8 +15,6 @@ | `--mod-body-font-size` | | `--mod-body-line-height` | | `--mod-body-margin` | -| `--mod-body-margin-end` | -| `--mod-body-margin-start` | | `--mod-body-sans-serif-emphasized-font-style` | | `--mod-body-sans-serif-emphasized-font-weight` | | `--mod-body-sans-serif-font-family` | @@ -54,8 +52,6 @@ | `--mod-code-font-style` | | `--mod-code-font-weight` | | `--mod-code-line-height` | -| `--mod-code-margin-end` | -| `--mod-code-margin-start` | | `--mod-code-strong-emphasized-font-style` | | `--mod-code-strong-emphasized-font-weight` | | `--mod-code-strong-font-style` | diff --git a/components/typography/themes/spectrum-two.css b/components/typography/themes/spectrum-two.css index 4119cc9a41..3b48a570c2 100644 --- a/components/typography/themes/spectrum-two.css +++ b/components/typography/themes/spectrum-two.css @@ -10,147 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-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-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - - --spectrum-heading-font-color: var(--spectrum-heading-color); - - &, - &.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--sizeXXS { - --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--sizeS { - --spectrum-heading-font-size: var(--spectrum-heading-size-s); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s); - } - - &.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--sizeXL { - --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--sizeXXXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxxl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl); - } - } - - .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-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - - --spectrum-body-font-color: var(--spectrum-body-color); - - &, - &.spectrum-Body--sizeM { - --spectrum-body-font-size: var(--spectrum-body-size-m); - } - - &.spectrum-Body--sizeXS { - --spectrum-body-font-size: var(--spectrum-body-size-xs); - } - - &.spectrum-Body--sizeS { - --spectrum-body-font-size: var(--spectrum-body-size-s); - } - - &.spectrum-Body--sizeL { - --spectrum-body-font-size: var(--spectrum-body-size-l); - } - - &.spectrum-Body--sizeXL { - --spectrum-body-font-size: var(--spectrum-body-size-xl); - } - - &.spectrum-Body--sizeXXL { - --spectrum-body-font-size: var(--spectrum-body-size-xxl); - } - - &.spectrum-Body--sizeXXXL { - --spectrum-body-font-size: var(--spectrum-body-size-xxxl); - } - } - - .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-font-color: var(--spectrum-detail-color); - - &, - &.spectrum-Detail--sizeM { - --spectrum-detail-font-size: var(--spectrum-detail-size-m); - } - - &.spectrum-Detail--sizeS { - --spectrum-detail-font-size: var(--spectrum-detail-size-s); - } - - &.spectrum-Detail--sizeL { - --spectrum-detail-font-size: var(--spectrum-detail-size-l); - } - - &.spectrum-Detail--sizeXL { - --spectrum-detail-font-size: var(--spectrum-detail-size-xl); - } - } - - .spectrum-Code { - --spectrum-code-font-family: var(--spectrum-code-font-family-stack); - --spectrum-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --spectrum-code-font-color: var(--spectrum-code-color); - - &, - &.spectrum-Code--sizeM { - --spectrum-code-font-size: var(--spectrum-code-size-m); - } - - &.spectrum-Code--sizeXS { - --spectrum-code-font-size: var(--spectrum-code-size-xs); - } - - &.spectrum-Code--sizeS { - --spectrum-code-font-size: var(--spectrum-code-size-s); - } - - &.spectrum-Code--sizeL { - --spectrum-code-font-size: var(--spectrum-code-size-l); - } - - &.spectrum-Code--sizeXL { - --spectrum-code-font-size: var(--spectrum-code-size-xl); - } - } -} diff --git a/components/underlay/index.css b/components/underlay/index.css index b7a071ba65..3ec0db62b6 100644 --- a/components/underlay/index.css +++ b/components/underlay/index.css @@ -14,6 +14,19 @@ @import "@spectrum-css/commons/overlay.css"; @import "./themes/spectrum-two.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 { @extend %spectrum-overlay; diff --git a/components/underlay/metadata/metadata.json b/components/underlay/metadata/metadata.json index 2d792ffda8..d093127754 100644 --- a/components/underlay/metadata/metadata.json +++ b/components/underlay/metadata/metadata.json @@ -32,15 +32,7 @@ "--spectrum-black-rgb", "--spectrum-overlay-opacity" ], - "system-theme": [ - "--system-underlay-background-color", - "--system-underlay-background-entry-animation-delay", - "--system-underlay-background-entry-animation-duration", - "--system-underlay-background-entry-animation-ease", - "--system-underlay-background-exit-animation-delay", - "--system-underlay-background-exit-animation-duration", - "--system-underlay-background-exit-animation-ease" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/underlay/themes/spectrum-two.css b/components/underlay/themes/spectrum-two.css index 25bf2698e8..3b48a570c2 100644 --- a/components/underlay/themes/spectrum-two.css +++ b/components/underlay/themes/spectrum-two.css @@ -10,17 +10,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -@container style(--system: spectrum) { - .spectrum-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-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)); - } -} diff --git a/components/well/index.css b/components/well/index.css index a307feb12e..73d6c73e24 100644 --- a/components/well/index.css +++ b/components/well/index.css @@ -13,16 +13,21 @@ @import "./themes/spectrum-two.css"; +.spectrum-Well { + --spectrum-well-border-width: var(--spectrum-border-width-100); + --spectrum-well-content-color: var(--spectrum-body-color); +} + .spectrum-Well { text-align: start; display: block; - min-inline-size: var(--mod-well-min-width, var(--spectrum-well-minimum-width)); + 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, var(--spectrum-well-background-color)); + 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)); color: var(--mod-well-content-color, var(--spectrum-well-content-color)); } diff --git a/components/well/metadata/metadata.json b/components/well/metadata/metadata.json index 327b566592..33a4944e7b 100644 --- a/components/well/metadata/metadata.json +++ b/components/well/metadata/metadata.json @@ -12,34 +12,21 @@ "--mod-well-padding" ], "component": [ - "--spectrum-well-background-color", "--spectrum-well-border-color", "--spectrum-well-border-radius", "--spectrum-well-border-width", "--spectrum-well-content-color", "--spectrum-well-margin-top", "--spectrum-well-min-width", - "--spectrum-well-minimum-width", "--spectrum-well-padding" ], "global": [ "--spectrum-body-color", "--spectrum-border-width-100", "--spectrum-gray-1000", - "--spectrum-gray-800-rgb", - "--spectrum-spacing-300", - "--spectrum-spacing-75" - ], - "system-theme": [ - "--system-well-background-color", - "--system-well-border-color", - "--system-well-border-radius", - "--system-well-border-width", - "--system-well-content-color", - "--system-well-margin-top", - "--system-well-minimum-width", - "--system-well-padding" + "--spectrum-gray-800-rgb" ], + "system-theme": ["--system-well-border-color"], "passthroughs": [], "high-contrast": [] } diff --git a/components/well/themes/spectrum-two.css b/components/well/themes/spectrum-two.css index 96c9c0c1fb..79a9f9a41f 100644 --- a/components/well/themes/spectrum-two.css +++ b/components/well/themes/spectrum-two.css @@ -13,15 +13,6 @@ @container style(--system: spectrum) { .spectrum-Well { - --spectrum-well-border-width: var(--spectrum-border-width-100); --spectrum-well-border-color: rgba(var(--spectrum-gray-1000), .05); - --spectrum-well-border-radius: var(--spectrum-spacing-75); - - --spectrum-well-content-color: var(--spectrum-body-color); - --spectrum-well-background-color: rgba(var(--spectrum-gray-800-rgb), .02); - - --spectrum-well-padding: var(--spectrum-spacing-300); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-minimum-width: var(--spectrum-well-min-width); } }