From e1f3abff079ccc2248ebc2c974483484a9ed083c Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Thu, 27 Mar 2025 17:55:50 -0400 Subject: [PATCH] fix: full update for css packages --- packages/accordion/src/spectrum-accordion.css | 3 + .../action-bar/src/spectrum-action-bar.css | 2 + .../src/spectrum-action-button.css | 88 ++++++ .../src/spectrum-action-group.css | 3 + .../src/spectrum-alert-banner.css | 1 + packages/asset/src/spectrum-asset.css | 3 + packages/button/src/spectrum-button.css | 140 +++++++++ packages/card/src/spectrum-card.css | 5 + packages/checkbox/src/spectrum-checkbox.css | 6 + .../src/clear-button-overrides.css | 50 +--- .../src/spectrum-clear-button.css | 91 ++++-- .../src/spectrum-close-button.css | 16 ++ .../src/coach-indicator-overrides.css | 33 --- .../coachmark/src/coachmark-overrides.css | 34 --- .../src/spectrum-coach-indicator.css | 99 ++++--- packages/coachmark/src/spectrum-coachmark.css | 118 ++++---- .../color-wheel/src/spectrum-color-wheel.css | 4 + packages/combobox/src/spectrum-combobox.css | 8 + packages/dialog/src/dialog-overrides.css | 23 -- packages/dialog/src/spectrum-dialog.css | 43 +-- packages/divider/src/spectrum-divider.css | 6 + packages/dropzone/src/spectrum-dropzone.css | 1 + .../field-group/src/field-group-overrides.css | 5 - .../field-group/src/spectrum-field-group.css | 2 +- .../src/spectrum-infield-button.css | 14 + packages/menu/src/spectrum-menu.css | 11 + packages/meter/src/meter-overrides.css | 26 -- packages/meter/src/progress-bar-overrides.css | 49 ---- packages/meter/src/spectrum-meter.css | 28 +- packages/meter/src/spectrum-progress-bar.css | 211 ++++++++------ packages/modal/src/spectrum-modal.css | 1 + .../src/spectrum-number-field.css | 29 ++ .../src/spectrum-picker-button.css | 10 + packages/picker/src/spectrum-picker.css | 14 + packages/popover/src/spectrum-popover.css | 1 + .../src/progress-bar-overrides.css | 49 ---- .../src/spectrum-progress-bar.css | 211 ++++++++------ .../src/spectrum-progress-circle.css | 6 + packages/radio/src/radio-overrides.css | 86 ------ packages/radio/src/spectrum-radio.css | 91 +++++- packages/search/src/spectrum-search.css | 14 + .../sidenav/src/spectrum-sidenav-heading.css | 10 + .../sidenav/src/spectrum-sidenav-item.css | 10 + packages/sidenav/src/spectrum-sidenav.css | 10 + packages/slider/src/spectrum-slider.css | 26 ++ .../split-view/src/spectrum-split-view.css | 3 + packages/swatch/src/spectrum-swatch-group.css | 9 +- packages/swatch/src/spectrum-swatch.css | 62 +++- .../swatch/src/swatch-group-overrides.css | 6 - packages/swatch/src/swatch-overrides.css | 43 +-- packages/switch/src/spectrum-switch.css | 11 + packages/table/src/spectrum-table.css | 15 + packages/tabs/src/spectrum-tabs.css | 2 + packages/tags/src/spectrum-tag.css | 31 ++ packages/textfield/src/spectrum-textfield.css | 26 ++ packages/thumbnail/src/spectrum-thumbnail.css | 4 + packages/toast/src/spectrum-toast.css | 2 + packages/tooltip/src/spectrum-tooltip.css | 1 + .../styles/tokens-v2/system-theme-bridge.css | 266 +----------------- .../tokens/express/system-theme-bridge.css | 266 +----------------- .../tokens/spectrum/system-theme-bridge.css | 266 +----------------- 61 files changed, 1171 insertions(+), 1533 deletions(-) diff --git a/packages/accordion/src/spectrum-accordion.css b/packages/accordion/src/spectrum-accordion.css index c4f79e97ee4..58ba007c251 100644 --- a/packages/accordion/src/spectrum-accordion.css +++ b/packages/accordion/src/spectrum-accordion.css @@ -11,6 +11,9 @@ */ :host { + --spectrum-accordion-divider-color: var(--spectrum-gray-200); + --spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); + --spectrum-accordion-item-content-color: var(--spectrum-body-color); --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); diff --git a/packages/action-bar/src/spectrum-action-bar.css b/packages/action-bar/src/spectrum-action-bar.css index dc491c2a631..03000621b07 100644 --- a/packages/action-bar/src/spectrum-action-bar.css +++ b/packages/action-bar/src/spectrum-action-bar.css @@ -11,6 +11,8 @@ */ :host { + --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25); + --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); --spectrum-actionbar-height: var(--spectrum-action-bar-height); --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100); --spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-100); diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css index 210ddc0591a..ecc5b593dbd 100644 --- a/packages/action-button/src/spectrum-action-button.css +++ b/packages/action-button/src/spectrum-action-button.css @@ -10,7 +10,95 @@ * governing permissions and limitations under the License. */ +:host([static-color="white"][quiet]) { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-disabled: transparent; +} + +:host([static-color="white"]) { + --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-static-white-background-color); + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); +} + +:host([static-color="black"][quiet]) { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-disabled: transparent; +} + +:host([static-color="black"]) { + --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-static-black-background-color); + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color); + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); +} + +:host([quiet]) { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color); +} + +:host([size="xl"]) { + --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-extra-large); +} + +:host([size="l"]) { + --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-large); +} + +:host([size="s"]) { + --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-small); +} + +:host([size="xs"]) { + --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-extra-small); +} + +:host { + --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-medium); +} + :host { + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default); + --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); + --spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --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-content-color-selected: var(--spectrum-gray-50); cursor: pointer; -webkit-user-select: none; user-select: none; diff --git a/packages/action-group/src/spectrum-action-group.css b/packages/action-group/src/spectrum-action-group.css index 6ec0c3c7241..b04cc7617ca 100644 --- a/packages/action-group/src/spectrum-action-group.css +++ b/packages/action-group/src/spectrum-action-group.css @@ -11,6 +11,9 @@ */ :host { + --spectrum-actiongroup-gap-size-compact: 0; + --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); diff --git a/packages/alert-banner/src/spectrum-alert-banner.css b/packages/alert-banner/src/spectrum-alert-banner.css index 10afd6d4f4d..0195be88629 100644 --- a/packages/alert-banner/src/spectrum-alert-banner.css +++ b/packages/alert-banner/src/spectrum-alert-banner.css @@ -11,6 +11,7 @@ */ :host { + --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; diff --git a/packages/asset/src/spectrum-asset.css b/packages/asset/src/spectrum-asset.css index 45368e20e0f..d47c1b96f9a 100644 --- a/packages/asset/src/spectrum-asset.css +++ b/packages/asset/src/spectrum-asset.css @@ -11,6 +11,9 @@ */ :host { + --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); --spectrum-asset-folder-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-asset-folder-background-color))); --spectrum-asset-file-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-asset-file-background-color))); --spectrum-asset-folder-outline: var(--mod-asset-icon-outline-color, var(--spectrum-asset-icon-outline-color)); diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css index 3dcc3cfb5d1..ce12dd7d295 100644 --- a/packages/button/src/spectrum-button.css +++ b/packages/button/src/spectrum-button.css @@ -10,7 +10,147 @@ * governing permissions and limitations under the License. */ +:host([static-color="black"][variant="secondary"][treatment="outline"]) { + --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); + --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); +} + +:host([static-color="black"][variant="secondary"]) { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-200); + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); +} + +:host([static-color="black"][treatment="outline"]) { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-900); +} + +:host([static-color="black"]) { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); + --spectrum-button-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); +} + +:host([static-color="white"][variant="secondary"][treatment="outline"]) { + --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); + --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); +} + +:host([static-color="white"][variant="secondary"]) { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-200); + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); +} + +:host([static-color="white"][treatment="outline"]) { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); +} + +:host([static-color="white"]) { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-default: var(--spectrum-black); + --spectrum-button-content-color-hover: var(--spectrum-black); + --spectrum-button-content-color-down: var(--spectrum-black); + --spectrum-button-content-color-focus: var(--spectrum-black); +} + +:host([variant="secondary"][treatment="outline"]) { + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); + --spectrum-button-border-color-down: var(--spectrum-gray-400); +} + +:host([variant="secondary"]) { + --spectrum-button-background-color-default: var(--spectrum-gray-100); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-button-background-color-down: var(--spectrum-gray-200); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); +} + +:host([variant="primary"][treatment="outline"]) { + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); +} + +:host([variant="primary"]) { + --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); +} + +:host([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); +} + :host { + --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); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); + --spectrum-button-border-color-default: var(--spectrum-gray-400); + --spectrum-button-border-color-hover: var(--spectrum-gray-500); + --spectrum-button-border-color-down: var(--spectrum-gray-600); + --spectrum-button-border-color-focus: var(--spectrum-gray-500); + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); cursor: pointer; -webkit-user-select: none; user-select: none; diff --git a/packages/card/src/spectrum-card.css b/packages/card/src/spectrum-card.css index fc615e8a651..a2cf890b403 100644 --- a/packages/card/src/spectrum-card.css +++ b/packages/card/src/spectrum-card.css @@ -11,6 +11,11 @@ */ :host { + --spectrum-card-border-color: var(--spectrum-gray-100); + --spectrum-card-border-color-hover: var(--spectrum-gray-200); + --spectrum-card-divider-color: var(--spectrum-gray-200); + --spectrum-card-preview-background-color: var(--spectrum-gray-100); + --spectrum-card-preview-background-color-hover: var(--spectrum-gray-200); --spectrum-card-background-color: var(--mod-card-background-color, var(--spectrum-background-layer-2-color)); --spectrum-card-body-spacing: var(--mod-card-body-spacing, var(--spectrum-spacing-400)); --spectrum-card-body-padding-block-start: var(--mod-card-body-padding-block-start, var(--spectrum-spacing-300)); diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css index ac3697cc602..dee25e68472 100644 --- a/packages/checkbox/src/spectrum-checkbox.css +++ b/packages/checkbox/src/spectrum-checkbox.css @@ -11,6 +11,12 @@ */ :host { + --spectrum-checkbox-control-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); + --spectrum-checkbox-control-color-down: var(--spectrum-gray-800); + --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); + --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50); + --spectrum-checkbox-control-corner-radius: 2px; --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); diff --git a/packages/clear-button/src/clear-button-overrides.css b/packages/clear-button/src/clear-button-overrides.css index 13189584aaa..3d8b1c787d6 100644 --- a/packages/clear-button/src/clear-button-overrides.css +++ b/packages/clear-button/src/clear-button-overrides.css @@ -15,52 +15,10 @@ --spectrum-clear-button-background-color-hover: var(--system-clear-button-background-color-hover); --spectrum-clear-button-background-color-down: var(--system-clear-button-background-color-down); --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-background-color-key-focus); - --spectrum-clear-button-height: var(--system-clear-button-height); - --spectrum-clear-button-width: var(--system-clear-button-width); - --spectrum-clear-button-padding: var(--system-clear-button-padding); - --spectrum-clear-button-icon-color: var(--system-clear-button-icon-color); - --spectrum-clear-button-icon-color-hover: var(--system-clear-button-icon-color-hover); - --spectrum-clear-button-icon-color-down: var(--system-clear-button-icon-color-down); - --spectrum-clear-button-icon-color-key-focus: var(--system-clear-button-icon-color-key-focus); } -:host([size="s"]) { - --spectrum-clear-button-height: var(--system-clear-button-size-s-height); - --spectrum-clear-button-width: var(--system-clear-button-size-s-width); -} - -:host([size="l"]) { - --spectrum-clear-button-height: var(--system-clear-button-size-l-height); - --spectrum-clear-button-width: var(--system-clear-button-size-l-width); -} - -:host([size="xl"]) { - --spectrum-clear-button-height: var(--system-clear-button-size-xl-height); - --spectrum-clear-button-width: var(--system-clear-button-size-xl-width); -} - -:host .spectrum-ClearButton--quiet { - --spectrum-clear-button-background-color: var(--system-clear-button-quiet-background-color); - --spectrum-clear-button-background-color-hover: var(--system-clear-button-quiet-background-color-hover); - --spectrum-clear-button-background-color-down: var(--system-clear-button-quiet-background-color-down); - --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-quiet-background-color-key-focus); -} - -:host([variant="overBackground"]) { - --spectrum-clear-button-icon-color: var(--system-clear-button-over-background-icon-color); - --spectrum-clear-button-icon-color-hover: var(--system-clear-button-over-background-icon-color-hover); - --spectrum-clear-button-icon-color-down: var(--system-clear-button-over-background-icon-color-down); - --spectrum-clear-button-icon-color-key-focus: var(--system-clear-button-over-background-icon-color-key-focus); - --spectrum-clear-button-background-color: var(--system-clear-button-over-background-background-color); - --spectrum-clear-button-background-color-hover: var(--system-clear-button-over-background-background-color-hover); - --spectrum-clear-button-background-color-down: var(--system-clear-button-over-background-background-color-down); - --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-over-background-background-color-key-focus); -} - -:host([disabled]), -:host([disabled]) { - --spectrum-clear-button-icon-color: var(--system-clear-button-disabled-icon-color); - --spectrum-clear-button-icon-color-hover: var(--system-clear-button-disabled-icon-color-hover); - --spectrum-clear-button-icon-color-down: var(--system-clear-button-disabled-icon-color-down); - --spectrum-clear-button-background-color: var(--system-clear-button-disabled-background-color); +:host .spectrum-ClearButton--staticWhite { + --spectrum-clear-button-background-color-hover: var(--system-clear-button-static-white-background-color-hover); + --spectrum-clear-button-background-color-down: var(--system-clear-button-static-white-background-color-down); + --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-static-white-background-color-key-focus); } diff --git a/packages/clear-button/src/spectrum-clear-button.css b/packages/clear-button/src/spectrum-clear-button.css index 912e76ccc78..d1a9e8bf9c8 100644 --- a/packages/clear-button/src/spectrum-clear-button.css +++ b/packages/clear-button/src/spectrum-clear-button.css @@ -10,11 +10,26 @@ * governing permissions and limitations under the License. */ +:host(static-color="white") { + --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); +} + :host { + --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-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)); - cursor: pointer; - background-color: initial; background-color: var(--mod-clear-button-background-color, transparent); padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding)); color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color)); @@ -23,47 +38,84 @@ margin: 0; } +:host([size="s"]) { + --spectrum-clear-button-height: var(--spectrum-component-height-75); + --spectrum-clear-button-width: var(--spectrum-component-height-75); +} + +:host([size="l"]) { + --spectrum-clear-button-height: var(--spectrum-component-height-200); + --spectrum-clear-button-width: var(--spectrum-component-height-200); +} + +:host([size="xl"]) { + --spectrum-clear-button-height: var(--spectrum-component-height-300); + --spectrum-clear-button-width: var(--spectrum-component-height-300); +} + +:host .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; +} + +:host .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; +} + +:host([disabled]), +:host([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); +} + +:host:not(:disabled) { + cursor: pointer; +} + .icon { margin-block: 0; margin-inline: auto; } @media (hover: hover) { - :host(:hover) { + :host:not(:disabled):hover { color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))); } - :host(:hover) .fill { + :host:not(:disabled):hover .fill { background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover)); } } -:host(:is(:active, [active])) { +:host(:is(:active, [active])):not(:disabled) { color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down)); } -:host(:is(:active, [active])) .fill { +:host(:is(:active, [active])):not(:disabled) .fill { background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down)); } -:host([focus-within]) .js-focus-within, -:host(:focus-visible), -:host:focus-within, -:host([focus-within]) .js-focus-within { +:host:not(:disabled):focus-visible, +:host:not(:disabled):focus-within { color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus)); } -:host([focus-within]) .js-focus-within .fill, -:host(:focus-visible) .fill, -:host:focus-within .fill, -:host([focus-within]) .js-focus-within .fill { +:host:not(:disabled):focus-visible .fill, +:host:not(:disabled):focus-within .fill { background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus)); } -:host([disabled]), -:host([disabled]) { - --spectrum-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --spectrum-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent); +.spectrum-ClearButton-icon { + color: inherit; } .fill { @@ -76,7 +128,8 @@ display: flex; } -:host([variant="overBackground"]:focus-visible) { +:host([variant="overBackground"]:focus-visible), +.spectrum-ClearButton--staticWhite:focus-visible { outline: none; } diff --git a/packages/close-button/src/spectrum-close-button.css b/packages/close-button/src/spectrum-close-button.css index 9e55dff056a..ae6c9ea44d0 100644 --- a/packages/close-button/src/spectrum-close-button.css +++ b/packages/close-button/src/spectrum-close-button.css @@ -10,7 +10,23 @@ * governing permissions and limitations under the License. */ +:host([static-color="black"]) { + --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); +} + +:host([static-color="white"]) { + --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); +} + :host { + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-gray-100); + --spectrum-closebutton-background-color-down: var(--spectrum-gray-200); + --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100); cursor: pointer; -webkit-user-select: none; user-select: none; diff --git a/packages/coachmark/src/coach-indicator-overrides.css b/packages/coachmark/src/coach-indicator-overrides.css index e3d8279b929..02fb71ea34c 100644 --- a/packages/coachmark/src/coach-indicator-overrides.css +++ b/packages/coachmark/src/coach-indicator-overrides.css @@ -9,36 +9,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -:host { - --spectrum-coach-indicator-ring-border-size: var(--system-coach-indicator-ring-border-size); - --spectrum-coach-indicator-min-inline-size: var(--system-coach-indicator-min-inline-size); - --spectrum-coach-indicator-min-block-size: var(--system-coach-indicator-min-block-size); - --spectrum-coach-indicator-inline-size: var(--system-coach-indicator-inline-size); - --spectrum-coach-indicator-block-size: var(--system-coach-indicator-block-size); - --spectrum-coach-indicator-ring-inline-size: var(--system-coach-indicator-ring-inline-size); - --spectrum-coach-indicator-ring-block-size: var(--system-coach-indicator-ring-block-size); - --spectrum-coach-indicator-ring-dark-color: var(--system-coach-indicator-ring-dark-color); - --spectrum-coach-indicator-ring-light-color: var(--system-coach-indicator-ring-light-color); - --spectrum-coach-indicator-top: var(--system-coach-indicator-top); - --spectrum-coach-indicator-left: var(--system-coach-indicator-left); - --spectrum-coach-animation-indicator-ring-duration: var(--system-coach-indicator-coach-animation-indicator-ring-duration); - --spectrum-coach-animation-indicator-ring-inner-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple); - --spectrum-coach-animation-indicator-ring-center-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple); - --spectrum-coach-animation-indicator-ring-outer-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple); - --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: var(--system-coach-indicator-quiet-animation-ring-inner-delay-multiple); - --spectrum-coach-indicator-animation-name: var(--system-coach-indicator-animation-name); - --spectrum-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-inner-animation-delay-multiple); - --spectrum-coach-indicator-animation-keyframe-0-scale: var(--system-coach-indicator-animation-keyframe-0-scale); - --spectrum-coach-indicator-animation-keyframe-0-opacity: var(--system-coach-indicator-animation-keyframe-0-opacity); - --spectrum-coach-indicator-animation-keyframe-50-scale: var(--system-coach-indicator-animation-keyframe-50-scale); - --spectrum-coach-indicator-animation-keyframe-50-opacity: var(--system-coach-indicator-animation-keyframe-50-opacity); - --spectrum-coach-indicator-animation-keyframe-100-scale: var(--system-coach-indicator-animation-keyframe-100-scale); - --spectrum-coach-indicator-animation-keyframe-100-opacity: var(--system-coach-indicator-animation-keyframe-100-opacity); - --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: var(--system-coach-indicator-quiet-animation-keyframe-0-scale); -} - -:host([quiet]) { - --spectrum-coach-indicator-quiet-ring-diameter-size: var(--system-coach-indicator-quiet-quiet-ring-diameter-size); - --spectrum-coach-indicator-animation-name: var(--system-coach-indicator-quiet-animation-name); -} diff --git a/packages/coachmark/src/coachmark-overrides.css b/packages/coachmark/src/coachmark-overrides.css index d46f37f36ec..02fb71ea34c 100644 --- a/packages/coachmark/src/coachmark-overrides.css +++ b/packages/coachmark/src/coachmark-overrides.css @@ -9,37 +9,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -:host { - --spectrum-coachmark-min-width: var(--system-coach-mark-min-width); - --spectrum-coachmark-width: var(--system-coach-mark-width); - --spectrum-coachmark-max-width: var(--system-coach-mark-max-width); - --spectrum-coachmark-media-height: var(--system-coach-mark-media-height); - --spectrum-coachmark-media-min-height: var(--system-coach-mark-media-min-height); - --spectrum-coachmark-padding: var(--system-coach-mark-padding); - --spectrum-coachmark-heading-to-action-button: var(--system-coach-mark-heading-to-action-button); - --spectrum-coachmark-header-to-body: var(--system-coach-mark-header-to-body); - --spectrum-coachmark-body-to-footer: var(--system-coach-mark-body-to-footer); - --spectrum-coachmark-title-color: var(--system-coach-mark-title-color); - --spectrum-coachmark-title-font-family: var(--system-coach-mark-title-font-family); - --spectrum-coachmark-title-font-style: var(--system-coach-mark-title-font-style); - --spectrum-coachmark-title-text-font-weight: var(--system-coach-mark-title-text-font-weight); - --spectrum-coachmark-title-font-size: var(--system-coach-mark-title-font-size); - --spectrum-coachmark-title-text-line-height: var(--system-coach-mark-title-text-line-height); - --spectrum-coachmark-content-font-color: var(--system-coach-mark-content-font-color); - --spectrum-coachmark-content-font-weight: var(--system-coach-mark-content-font-weight); - --spectrum-coachmark-content-font-family: var(--system-coach-mark-content-font-family); - --spectrum-coachmark-content-font-style: var(--system-coach-mark-content-font-style); - --spectrum-coachmark-content-line-height: var(--system-coach-mark-content-line-height); - --spectrum-coachmark-content-font-size: var(--system-coach-mark-content-font-size); - --spectrum-coachmark-step-color: var(--system-coach-mark-step-color); - --spectrum-coachmark-step-font-weight: var(--system-coach-mark-step-font-weight); - --spectrum-coachmark-step-font-family: var(--system-coach-mark-step-font-family); - --spectrum-coachmark-step-font-style: var(--system-coach-mark-step-font-style); - --spectrum-coachmark-step-line-height: var(--system-coach-mark-step-line-height); - --spectrum-coachmark-step-font-size: var(--system-coach-mark-step-font-size); - --spectrum-coachmark-step-to-bottom: var(--system-coach-mark-step-to-bottom); - --spectrum-coachmark-popover-border-width: var(--system-coach-mark-popover-border-width); - --spectrum-coachmark-popover-corner-radius: var(--system-coach-mark-popover-corner-radius); - --spectrum-coachmark-buttongroup-spacing-horizontal: var(--system-coach-mark-buttongroup-spacing-horizontal); -} diff --git a/packages/coachmark/src/spectrum-coach-indicator.css b/packages/coachmark/src/spectrum-coach-indicator.css index f646632eb31..1b0e32bf8c1 100644 --- a/packages/coachmark/src/spectrum-coach-indicator.css +++ b/packages/coachmark/src/spectrum-coach-indicator.css @@ -11,58 +11,74 @@ */ :host { + --spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200); + --spectrum-coach-indicator-sizing-multiple: 3; + --spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-ring-diameter, var(--spectrum-coach-indicator-ring-diameter)); + --spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple)); + --spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple)); + --spectrum-coach-indicator-inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-min-inline-size)); + --spectrum-coach-indicator-block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-min-block-size)); + --spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); + --spectrum-coach-indicator-animation-keyframe-scale-initial: 1; + --spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-inner-animation-delay-multiple, -0.5); margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap)); min-inline-size: var(--mod-coach-indicator-min-inline-size, var(--spectrum-coach-indicator-min-inline-size)); min-block-size: var(--mod-coach-indicator-min-block-size, var(--spectrum-coach-indicator-min-block-size)); - inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-inline-size)); - block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-block-size)); + inline-size: var(--spectrum-coach-indicator-inline-size); + block-size: var(--spectrum-coach-indicator-block-size); position: relative; } :host([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-coach-indicator-animation-keyframe-scale-initial: 0.8; + --spectrum-coach-indicator-sizing-multiple: 2.75; + --spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)); + --spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33); +} + +:host([static-color="white"]) { + --spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-white)); +} + +:host([static-color="black"]) { + --spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-black)); +} + +:host .spectrum-CoachIndicator--staticWhite { + --spectrum-coach-indicator-ring-default-color: var(--spectrum-white); +} + +:host .spectrum-CoachIndicator--staticBlack { + --spectrum-coach-indicator-ring-default-color: var(--spectrum-black); } .ring { border-style: solid; border-width: var(--mod-coach-indicator-ring-border-size, var(--spectrum-coach-indicator-ring-border-size)); border-color: var(--mod-coach-indicator-ring-default-color, var(--spectrum-coach-indicator-ring-default-color)); - inline-size: var(--mod-coach-indicator-ring-inline-size, var(--spectrum-coach-indicator-ring-inline-size)); - block-size: var(--mod-coach-indicator-ring-block-size, var(--spectrum-coach-indicator-ring-block-size)); - animation: var(--mod-coach-indicator-animation-name, var(--spectrum-coach-indicator-animation-name)) var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite; + inline-size: var(--mod-coach-indicator-ring-inline-size, var(--spectrum-coach-indicator-ring-diameter-size)); + block-size: var(--mod-coach-indicator-ring-block-size, var(--spectrum-coach-indicator-ring-diameter-size)); + animation: pulse var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite; + animation: var(--mod-coach-indicator-animation-name, pulse) var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite; border-radius: 50%; display: block; position: absolute; - inset-block-start: var(--mod-coach-indicator-top, var(--spectrum-coach-indicator-top)); - inset-inline-start: var(--mod-coach-indicator-left, var(--spectrum-coach-indicator-left)); + inset-block-start: var(--mod-coach-indicator-top, calc(var(--spectrum-coach-indicator-block-size) / 3 - var(--spectrum-coach-indicator-ring-border-size))); + inset-inline-start: var(--mod-coach-indicator-left, calc(var(--spectrum-coach-indicator-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size))); } .ring:first-child { - animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-indicator-inner-animation-delay-multiple, var(--spectrum-coach-indicator-inner-animation-delay-multiple))); + animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--spectrum-coach-indicator-animation-ring-inner-delay-multiple)); } .ring:nth-child(2) { - animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-center-delay-multiple, var(--spectrum-coach-animation-indicator-ring-center-delay-multiple))); + animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * -0.66); + animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-center-delay-multiple, -0.66)); } .ring:nth-child(3) { - animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-outer-delay-multiple, var(--spectrum-coach-animation-indicator-ring-outer-delay-multiple))); -} - -:host([static-color="white"]) .ring { - border-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-coach-indicator-ring-light-color)); -} - -:host([static-color="black"]) .ring { - border-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-coach-indicator-ring-dark-color)); + animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * -1); + animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-outer-delay-multiple, -1)); } @media (prefers-reduced-motion: reduce) { @@ -73,34 +89,17 @@ @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); - } - - to { - 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); + transform: scale(var(--spectrum-coach-indicator-animation-keyframe-scale-initial)); + opacity: 0; } 50% { - transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale)); - opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); + opacity: 1; + transform: scale(1.5); } to { - transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale)); - opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); + opacity: 0; + transform: scale(2); } } diff --git a/packages/coachmark/src/spectrum-coachmark.css b/packages/coachmark/src/spectrum-coachmark.css index b536064dcd1..82435805b69 100644 --- a/packages/coachmark/src/spectrum-coachmark.css +++ b/packages/coachmark/src/spectrum-coachmark.css @@ -11,40 +11,23 @@ */ :host { + --spectrum-coachmark-border-size: var(--mod-coachmark-border-size, var(--mod-popover-border-width)); + --spectrum-coachmark-border-radius: var(--mod-coachmark-border-radius, var(--mod-popover-corner-radius)); --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-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; - --spectrum-coachmark-border-size: var(--mod-popover-border-width); - --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius); - min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coachmark-min-width)); - max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coachmark-max-width)); - inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width)); + min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coach-mark-minimum-width)); + max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coach-mark-maximum-width)); + inline-size: var(--mod-coachmark-width, var(--spectrum-coach-mark-width)); position: relative; } -.buttongroup { - display: var(--spectrum-coachmark-buttongroup-display); -} - -.buttongroup-mobile { - --mod-buttongroup-spacing-horizontal: var(--spectrum-coachmark-buttongroup-spacing-horizontal); - display: var(--spectrum-coachmark-buttongroup-mobile-display); -} - -.menu { - display: var(--spectrum-coachmark-menu-display); -} - -.spectrum-CoachMark-menu--mobile { - display: var(--spectrum-coachmark-menu-mobile-display); -} - .image-wrapper { - block-size: var(--mod-coachmark-media-height, var(--spectrum-coachmark-media-height)); - min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-height)); - inline-size: calc(var(--mod-coachmark-width, var(--spectrum-coachmark-width)) - var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)) * 2); + block-size: var(--mod-coachmark-media-height, var(--spectrum-coach-mark-media-height)); + min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coach-mark-media-minimum-height)); + inline-size: calc(var(--mod-coachmark-width, var(--spectrum-coach-mark-width)) - var(--spectrum-coachmark-border-size) * 2); object-fit: cover; object-position: center; border-start-start-radius: inherit; @@ -55,8 +38,8 @@ inline-size: 100%; block-size: 100%; object-fit: cover; - border-start-start-radius: calc(var(--mod-coachmark-border-radius, var(--spectrum-coachmark-border-radius)) - var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size))); - border-start-end-radius: calc(var(--mod-coachmark-border-radius, var(--spectrum-coachmark-border-radius)) - var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size))); + border-start-start-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size)); + border-start-end-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size)); display: block; } @@ -64,61 +47,76 @@ .footer, .header { padding-block: 0; - padding-inline: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)); + padding-inline: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content)); } .header { justify-content: space-between; align-items: center; - margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-coachmark-header-to-body)); - padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)); + margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-spacing-200)); + padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content)); display: flex; } +.title { + color: var(--mod-coachmark-title-color, var(--spectrum-heading-color)); + font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coach-mark-title-size)); + font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-heading-sans-serif-font-weight)); + font-family: var(--mod-coachmark-title-font-family, var(--spectrum-sans-serif-font)); + font-style: var(--mod-coachmark-title-font-style, var(--spectrum-heading-serif-font-style)); + line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-heading-line-height)); + margin-block-end: 0; +} + .action-menu { white-space: nowrap; z-index: 1; - margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-coachmark-heading-to-action-button)); + margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-spacing-300)); +} + +.menu { + display: var(--spectrum-coachmark-menu-display); +} + +.spectrum-CoachMark-menu--mobile { + --spectrum-coachmark-menu-display: var(--spectrum-coachmark-menu-mobile-display); } .content { - color: var(--mod-coachmark-content-font-color, var(--spectrum-coachmark-content-font-color)); - font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coachmark-content-font-size)); - font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-coachmark-content-font-weight)); - font-family: var(--mod-coachmark-content-font-family, var(--spectrum-coachmark-content-font-family)); - font-style: var(--mod-coachmark-content-font-style, var(--spectrum-coachmark-content-font-style)); - line-height: var(--mod-coachmark-content-line-height, var(--spectrum-coachmark-content-line-height)); - margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-coachmark-body-to-footer)); + color: var(--mod-coachmark-content-font-color, var(--spectrum-body-color)); + font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coach-mark-body-size)); + font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-body-sans-serif-font-weight)); + font-family: var(--mod-coachmark-content-font-family, var(--spectrum-sans-serif-font)); + font-style: var(--mod-coachmark-content-font-style, var(--spectrum-body-sans-serif-font-style)); + line-height: var(--mod-coachmark-content-line-height, var(--spectrum-body-line-height)); + margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-spacing-300)); } .footer { align-items: end; margin-block-start: 0; - padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)); + padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content)); display: grid; } -.footer .spectrum-ButtonGroup { - grid-column-start: 2; +.step { + color: var(--mod-coachmark-step-color, var(--spectrum-coach-mark-pagination-color)); + font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coach-mark-pagination-body-size)); + font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-body-sans-serif-font-weight)); + font-family: var(--spectrum-sans-serif-font); + font-style: var(--mod-coachmark-step-font-style, var(--spectrum-body-sans-serif-font-style)); + line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-body-line-height)); + white-space: nowrap; + justify-self: start; + margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coach-mark-pagination-text-to-bottom-edge)) - var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content))); } -.title { - color: var(--mod-coachmark-title-color, var(--spectrum-coachmark-title-color)); - font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coachmark-title-font-size)); - font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-coachmark-title-text-font-weight)); - font-family: var(--mod-coachmark-title-font-family, var(--spectrum-coachmark-title-font-family)); - font-style: var(--mod-coachmark-title-font-style, var(--spectrum-coachmark-title-font-style)); - line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-coachmark-title-text-line-height)); - margin-block-end: 0; +.buttongroup { + display: var(--spectrum-coachmark-buttongroup-display); + grid-column-start: 2; } -.step { - color: var(--mod-coachmark-step-color, var(--spectrum-coachmark-step-color)); - font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coachmark-step-font-size)); - font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-coachmark-step-text-font-weight)); - font-style: var(--mod-coachmark-step-font-style, var(--spectrum-coachmark-step-font-style)); - line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-coachmark-step-text-line-height)); - white-space: nowrap; - justify-self: start; - margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coachmark-step-to-bottom)) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding))); +.buttongroup-mobile { + --spectrum-coachmark-buttongroup-display: var(--spectrum-coachmark-buttongroup-mobile-display); + --mod-buttongroup-spacing: var(--spectrum-spacing-100); } diff --git a/packages/color-wheel/src/spectrum-color-wheel.css b/packages/color-wheel/src/spectrum-color-wheel.css index 27b5aa4d4bb..80f92cd2305 100644 --- a/packages/color-wheel/src/spectrum-color-wheel.css +++ b/packages/color-wheel/src/spectrum-color-wheel.css @@ -10,6 +10,10 @@ * governing permissions and limitations under the License. */ +:host { + --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300); +} + @media (forced-colors: active) { :host { --highcontrast-colorwheel-border-color-disabled: GrayText; diff --git a/packages/combobox/src/spectrum-combobox.css b/packages/combobox/src/spectrum-combobox.css index cd99f4aa7b9..298daf15e17 100644 --- a/packages/combobox/src/spectrum-combobox.css +++ b/packages/combobox/src/spectrum-combobox.css @@ -11,6 +11,14 @@ */ :host { + --spectrum-combobox-border-color-default: var(--spectrum-gray-500); + --spectrum-combobox-border-color-hover: var(--spectrum-gray-600); + --spectrum-combobox-border-color-focus: var(--spectrum-gray-800); + --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800); + --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500); + --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25); + --spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color); --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)); diff --git a/packages/dialog/src/dialog-overrides.css b/packages/dialog/src/dialog-overrides.css index 68deb9971a6..02fb71ea34c 100644 --- a/packages/dialog/src/dialog-overrides.css +++ b/packages/dialog/src/dialog-overrides.css @@ -9,26 +9,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -:host { - --spectrum-dialog-fullscreen-header-text-size: var(--system-dialog-fullscreen-header-text-size); - --spectrum-dialog-min-inline-size: var(--system-dialog-min-inline-size); - --spectrum-dialog-confirm-small-width: var(--system-dialog-confirm-small-width); - --spectrum-dialog-confirm-medium-width: var(--system-dialog-confirm-medium-width); - --spectrum-dialog-confirm-large-width: var(--system-dialog-confirm-large-width); - --spectrum-dialog-confirm-divider-block-spacing-start: var(--system-dialog-confirm-divider-block-spacing-start); - --spectrum-dialog-confirm-divider-block-spacing-end: var(--system-dialog-confirm-divider-block-spacing-end); - --spectrum-dialog-confirm-description-text-color: var(--system-dialog-confirm-description-text-color); - --spectrum-dialog-confirm-title-text-color: var(--system-dialog-confirm-title-text-color); - --spectrum-dialog-confirm-description-text-line-height: var(--system-dialog-confirm-description-text-line-height); - --spectrum-dialog-confirm-title-text-line-height: var(--system-dialog-confirm-title-text-line-height); - --spectrum-dialog-heading-font-weight: var(--system-dialog-heading-font-weight); - --spectrum-dialog-confirm-description-padding: var(--system-dialog-confirm-description-padding); - --spectrum-dialog-confirm-description-margin: var(--system-dialog-confirm-description-margin); - --spectrum-dialog-confirm-footer-padding-top: var(--system-dialog-confirm-footer-padding-top); - --spectrum-dialog-confirm-gap-size: var(--system-dialog-confirm-gap-size); - --spectrum-dialog-confirm-buttongroup-padding-top: var(--system-dialog-confirm-buttongroup-padding-top); - --spectrum-dialog-confirm-close-button-size: var(--system-dialog-confirm-close-button-size); - --spectrum-dialog-confirm-close-button-padding: var(--system-dialog-confirm-close-button-padding); - --spectrum-dialog-confirm-divider-height: var(--system-dialog-confirm-divider-height); -} diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css index 12e8a9d355e..ff84fabc1cf 100644 --- a/packages/dialog/src/spectrum-dialog.css +++ b/packages/dialog/src/spectrum-dialog.css @@ -11,25 +11,31 @@ */ :host { + --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-description-padding: var(--spectrum-spacing-50); + --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)); box-sizing: border-box; - inline-size: fit-content; - min-inline-size: var(--mod-dialog-min-inline-size, var(--spectrum-dialog-min-inline-size)); + inline-size: 480px; + inline-size: var(--mod-dialog-width, var(--mod-dialog-confirm-medium-width, 480px)); + min-inline-size: 288px; + min-inline-size: var(--mod-dialog-min-inline-size, 288px); max-inline-size: 100%; max-block-size: inherit; outline: none; display: flex; } -:host([size="s"]) { - inline-size: var(--mod-dialog-confirm-small-width, var(--spectrum-dialog-confirm-small-width)); +.spectrum-Dialog--sizeS { + --mod-dialog-width: var(--mod-dialog-confirm-small-width, 400px); } -:host([size="m"]) { - inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width)); -} - -:host([size="l"]) { - inline-size: var(--mod-dialog-confirm-large-width, var(--spectrum-dialog-confirm-large-width)); +.spectrum-Dialog--sizeL { + --mod-dialog-width: var(--mod-dialog-confirm-large-width, 640px); } ::slotted([slot="hero"]) { @@ -59,9 +65,9 @@ ::slotted([slot="heading"]) { font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); - font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-dialog-heading-font-weight)); - line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-dialog-confirm-title-text-line-height)); - color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-dialog-confirm-title-text-color)); + font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight)); + line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-line-height-100)); + color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-gray-900)); outline: none; grid-area: heading; margin: 0; @@ -98,7 +104,7 @@ } :host([no-divider]) ::slotted([slot="heading"]) { - padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-dialog-confirm-divider-height))); + padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-spacing-50))); } .content { @@ -106,10 +112,10 @@ -webkit-overflow-scrolling: touch; font-size: var(--mod-dialog-confirm-description-text-size, var(--spectrum-dialog-confirm-description-text-size)); font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight)); - line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-dialog-confirm-description-text-line-height)); + line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-line-height-100)); color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); 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)); + margin: 0 var(--mod-dialog-confirm-description-margin, calc(var(--spectrum-spacing-50) * -1)); outline: none; grid-area: content; overflow-y: auto; @@ -119,7 +125,7 @@ outline: none; flex-wrap: wrap; grid-area: footer; - padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-dialog-confirm-footer-padding-top)); + padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-spacing-600)); display: flex; } @@ -201,7 +207,8 @@ :host([mode="fullscreen"]) ::slotted([slot="heading"]), :host([mode="fullscreenTakeover"]) ::slotted([slot="heading"]) { - font-size: var(--mod-dialog-fullscreen-header-text-size, var(--spectrum-dialog-fullscreen-header-text-size)); + font-size: 28px; + font-size: var(--mod-dialog-fullscreen-header-text-size, 28px); } :host([mode="fullscreen"]) .content, diff --git a/packages/divider/src/spectrum-divider.css b/packages/divider/src/spectrum-divider.css index 3cb844a9e29..c342bf17141 100644 --- a/packages/divider/src/spectrum-divider.css +++ b/packages/divider/src/spectrum-divider.css @@ -10,6 +10,12 @@ * governing permissions and limitations under the License. */ +:host { + --spectrum-divider-background-color: var(--spectrum-gray-200); + --spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-200); + --spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-200); +} + @media (forced-colors: active) { :host { --highcontrast-divider-background-color: CanvasText; diff --git a/packages/dropzone/src/spectrum-dropzone.css b/packages/dropzone/src/spectrum-dropzone.css index 32e9d1e6d45..bc0a4820fdf 100644 --- a/packages/dropzone/src/spectrum-dropzone.css +++ b/packages/dropzone/src/spectrum-dropzone.css @@ -11,6 +11,7 @@ */ :host { + --spectrum-drop-zone-border-color: var(--spectrum-gray-200); --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); diff --git a/packages/field-group/src/field-group-overrides.css b/packages/field-group/src/field-group-overrides.css index 49f1cf3e2d2..02fb71ea34c 100644 --- a/packages/field-group/src/field-group-overrides.css +++ b/packages/field-group/src/field-group-overrides.css @@ -9,8 +9,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -:host { - --spectrum-fieldgroup-margin: var(--system-field-group-margin); - --spectrum-fieldgroup-readonly-delimiter: var(--system-field-group-readonly-delimiter); -} diff --git a/packages/field-group/src/spectrum-field-group.css b/packages/field-group/src/spectrum-field-group.css index f5317cbd74c..0771e1cadb2 100644 --- a/packages/field-group/src/spectrum-field-group.css +++ b/packages/field-group/src/spectrum-field-group.css @@ -37,7 +37,7 @@ } :host([horizontal]) .group slot:not([name])::slotted(:not(:last-child)) { - margin-inline-end: var(--spectrum-fieldgroup-margin); + margin-inline-end: var(--spectrum-spacing-300); } :host([horizontal]) .group .spectrum-HelpText { diff --git a/packages/infield-button/src/spectrum-infield-button.css b/packages/infield-button/src/spectrum-infield-button.css index a3570226fbf..e4f6fb6034d 100644 --- a/packages/infield-button/src/spectrum-infield-button.css +++ b/packages/infield-button/src/spectrum-infield-button.css @@ -10,7 +10,21 @@ * governing permissions and limitations under the License. */ +:host([disabled]) { + --spectrum-infield-button-border-color: var(--spectrum-gray-300); +} + :host { + --spectrum-infield-button-border-width: var(--spectrum-border-width-100); + --spectrum-infield-button-border-color: inherit; + --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-infield-button-border-radius-reset: 0; + --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset); + --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); + --spectrum-infield-button-background-color: var(--spectrum-gray-100); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-down: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); --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); diff --git a/packages/menu/src/spectrum-menu.css b/packages/menu/src/spectrum-menu.css index 66df013a67e..1b11e59a43f 100644 --- a/packages/menu/src/spectrum-menu.css +++ b/packages/menu/src/spectrum-menu.css @@ -10,6 +10,17 @@ * governing permissions and limitations under the License. */ +:host { + --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); + --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); + --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); + --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-menu-item-focus-indicator-shadow: none; + --spectrum-menu-item-focus-indicator-offset: var(--spectrum-spacing-50); + --spectrum-menu-item-spacing-multiplier: 1; + --spectrum-menu-item-focus-indicator-outline-style: solid; +} + @media (forced-colors: active) { :host { --highcontrast-menu-item-background-color-default: ButtonFace; diff --git a/packages/meter/src/meter-overrides.css b/packages/meter/src/meter-overrides.css index 609762307c2..02fb71ea34c 100644 --- a/packages/meter/src/meter-overrides.css +++ b/packages/meter/src/meter-overrides.css @@ -9,29 +9,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -:host { - --spectrum-meter-min-width: var(--system-meter-min-width); - --spectrum-meter-max-width: var(--system-meter-max-width); - --spectrum-meter-inline-size: var(--system-meter-inline-size); - --spectrum-meter-top-to-text: var(--system-meter-top-to-text); - --spectrum-meter-fill-color-positive: var(--system-meter-fill-color-positive); - --spectrum-meter-fill-color-notice: var(--system-meter-fill-color-notice); - --spectrum-meter-fill-color-negative: var(--system-meter-fill-color-negative); - --spectrum-meter-thickness: var(--system-meter-thickness); - --spectrum-meter-font-size: var(--system-meter-font-size); -} - -:host([size="s"]) { - --spectrum-meter-thickness: var(--system-meter-size-s-thickness); - --spectrum-meter-inline-size: var(--system-meter-size-s-inline-size); - --spectrum-meter-font-size: var(--system-meter-size-s-font-size); - --spectrum-meter-top-to-text: var(--system-meter-size-s-top-to-text); -} - -:host([size="l"]) { - --spectrum-meter-thickness: var(--system-meter-size-l-thickness); - --spectrum-meter-inline-size: var(--system-meter-size-l-inline-size); - --spectrum-meter-font-size: var(--system-meter-size-l-font-size); - --spectrum-meter-top-to-text: var(--system-meter-size-l-top-to-text); -} diff --git a/packages/meter/src/progress-bar-overrides.css b/packages/meter/src/progress-bar-overrides.css index 722272bc7c0..efd96175714 100644 --- a/packages/meter/src/progress-bar-overrides.css +++ b/packages/meter/src/progress-bar-overrides.css @@ -11,55 +11,6 @@ */ :host { - --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--system-progress-bar-animation-ease-in-out-indeterminate); - --spectrum-progressbar-animation-duration-indeterminate: var(--system-progress-bar-animation-duration-indeterminate); - --spectrum-progressbar-corner-radius: var(--system-progress-bar-corner-radius); - --spectrum-progressbar-fill-size-indeterminate: var(--system-progress-bar-fill-size-indeterminate); - --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400); - --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500); - --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800); - --spectrum-progressbar-line-height-cjk: var(--system-progress-bar-line-height-cjk); - --spectrum-progressbar-min-size: var(--system-progress-bar-min-size); - --spectrum-progressbar-max-size: var(--system-progress-bar-max-size); - --spectrum-progressbar-line-height: var(--system-progress-bar-line-height); - --spectrum-progressbar-spacing-label-to-progressbar: var(--system-progress-bar-spacing-label-to); - --spectrum-progressbar-spacing-label-to-text: var(--system-progress-bar-spacing-label-to-text); - --spectrum-progressbar-text-color: var(--system-progress-bar-text-color); --spectrum-progressbar-track-color: var(--system-progress-bar-track-color); - --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color); - --spectrum-progressbar-label-and-value-white: var(--system-progress-bar-label-and-value-white); --spectrum-progressbar-track-color-white: var(--system-progress-bar-track-color-white); - --spectrum-progressbar-fill-color-white: var(--system-progress-bar-fill-color-white); - --spectrum-progressbar-size-default: var(--system-progress-bar-size-default); - --spectrum-progressbar-font-size: var(--system-progress-bar-font-size); - --spectrum-progressbar-thickness: var(--system-progress-bar-thickness); - --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-spacing-top-to-text); -} - -.spectrum-ProgressBar--sizeM { - --spectrum-progressbar-size-default: var(--system-progress-bar-size-m-size-default); - --spectrum-progressbar-font-size: var(--system-progress-bar-size-m-font-size); - --spectrum-progressbar-thickness: var(--system-progress-bar-size-m-thickness); - --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-m-spacing-top-to-text); -} - -.spectrum-ProgressBar--sizeS { - --spectrum-progressbar-size-default: var(--system-progress-bar-size-s-size-default); - --spectrum-progressbar-font-size: var(--system-progress-bar-size-s-font-size); - --spectrum-progressbar-thickness: var(--system-progress-bar-size-s-thickness); - --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-s-spacing-top-to-text); -} - -.spectrum-ProgressBar--sizeL { - --spectrum-progressbar-size-default: var(--system-progress-bar-size-l-size-default); - --spectrum-progressbar-font-size: var(--system-progress-bar-size-l-font-size); - --spectrum-progressbar-thickness: var(--system-progress-bar-size-l-thickness); - --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-l-spacing-top-to-text); -} - -.spectrum-ProgressBar--sizeXL { - --spectrum-progressbar-size-default: var(--system-progress-bar-size-xl-size-default); - --spectrum-progressbar-font-size: var(--system-progress-bar-size-xl-font-size); - --spectrum-progressbar-thickness: var(--system-progress-bar-size-xl-thickness); - --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-xl-spacing-top-to-text); } diff --git a/packages/meter/src/spectrum-meter.css b/packages/meter/src/spectrum-meter.css index 5fad393467e..ea332f0ac0a 100644 --- a/packages/meter/src/spectrum-meter.css +++ b/packages/meter/src/spectrum-meter.css @@ -11,22 +11,32 @@ */ :host { - --mod-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-inline-size)); - --mod-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-max-width)); - --mod-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-min-width)); - --mod-progressbar-thickness: var(--spectrum-meter-thickness); - --mod-progressbar-font-size: var(--spectrum-meter-font-size); - --mod-progressbar-spacing-top-to-text: var(--spectrum-meter-top-to-text); + --mod-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-default-width)); + --mod-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-maximum-width)); + --mod-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-minimum-width)); +} + +:host, +:host([size="s"]) { + --mod-progressbar-thickness: var(--spectrum-meter-thickness-small); + --mod-progressbar-font-size: var(--spectrum-font-size-75); + --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); +} + +:host([size="l"]) { + --mod-progressbar-thickness: var(--spectrum-meter-thickness-large); + --mod-progressbar-font-size: var(--spectrum-font-size-100); + --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); } :host([variant="positive"]) { - --mod-progressbar-fill-color: var(--mod-meter-fill-color-positive, var(--spectrum-meter-fill-color-positive)); + --mod-progressbar-fill-color: var(--spectrum-positive-visual-color); } :host([variant="notice"]) { - --mod-progressbar-fill-color: var(--mod-meter-fill-color-notice, var(--spectrum-meter-fill-color-notice)); + --mod-progressbar-fill-color: var(--spectrum-notice-visual-color); } :host([variant="negative"]) { - --mod-progressbar-fill-color: var(--mod-meter-fill-color-negative, var(--spectrum-meter-fill-color-negative)); + --mod-progressbar-fill-color: var(--spectrum-negative-visual-color); } diff --git a/packages/meter/src/spectrum-progress-bar.css b/packages/meter/src/spectrum-progress-bar.css index 6ce38cc4e67..991e79dc9f2 100644 --- a/packages/meter/src/spectrum-progress-bar.css +++ b/packages/meter/src/spectrum-progress-bar.css @@ -11,137 +11,178 @@ */ :host { - font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size)); - vertical-align: top; - inline-size: var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); - max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size)); - min-inline-size: var(--mod-progressbar-min-size, var(--spectrum-progressbar-min-size)); - flex-flow: wrap; - justify-content: space-between; - align-items: center; - display: inline-flex; - position: relative; + --spectrum-progressbar-track-color: var(--spectrum-gray-200); + --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400); } -.label, -.percentage { - text-align: start; - line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height)); - color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color)); - margin-block-start: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-spacing-top-to-text)); - margin-block-end: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-progressbar-spacing-label-to-progressbar)); +:host, +.spectrum-ProgressBar--sizeM { + --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400); + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large); + --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-100); } -.label:lang(ja), -.label:lang(ko), -.label:lang(zh), -.percentage:lang(ja), -.percentage:lang(ko), -.percentage:lang(zh) { - line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk)); +.spectrum-ProgressBar--sizeS { + --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400); + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-small); + --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-75); } -.label { - flex: 1; +.spectrum-ProgressBar--sizeL { + --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2500); + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-100); + --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large); + --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-200); } -.percentage { - align-self: flex-start; - margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); +.spectrum-ProgressBar--sizeXL { + --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2800); + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-200); + --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-extra-large); + --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-300); } -.track { - inline-size: 100%; - block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); - border-radius: var(--spectrum-progressbar-corner-radius); - background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); - overflow: hidden; +:host { + --spectrum-progressbar-size-default: var(--mod-progressbar-size-default, var(--spectrum-progressbar-sized-size-default)); + --spectrum-progressbar-font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-sized-font-size)); + --spectrum-progressbar-thickness: var(--mod-progressbar-thickness, var(--spectrum-progressbar-sized-thickness)); + --spectrum-progressbar-spacing-top-to-text: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-sized-spacing-top-to-text)); + --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-animation-ease-in-out)); + --spectrum-progressbar-animation-duration-indeterminate: var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-animation-duration-2000)); + --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-progressbar-fill-size-indeterminate: var(--mod-progressbar-fill-size-indeterminate, 70%); + --spectrum-progressbar-dir-indeterminate-multiplier: 1; + --spectrum-progressbar-size-2400: 192px; + --spectrum-progressbar-size-2500: 200px; + --spectrum-progressbar-size-2800: 224px; + --spectrum-progressbar-line-height-cjk: var(--mod-progressbar-line-height-cjk, var(--spectrum-cjk-line-height-100)); + --spectrum-progressbar-min-size: var(--mod-progressbar-min-size, var(--spectrum-progress-bar-minimum-width)); + --spectrum-progressbar-max-size: var(--mod-progressbar-max-size, var(--spectrum-progress-bar-maximum-width)); + --spectrum-progressbar-line-height: var(--mod-progressbar-line-height, var(--spectrum-line-height-100)); + --spectrum-progressbar-spacing-label-to-progressbar: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-spacing-75)); + --spectrum-progressbar-spacing-label-to-text: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-spacing-200)); + --spectrum-progressbar-fill-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-accent-color-900))); + --spectrum-progressbar-track-color-default: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); + --spectrum-progressbar-text-color: var(--mod-progressbar-text-color, var(--spectrum-neutral-content-color-default)); + --spectrum-progressbar-label-and-value-white: var(--mod-progressbar-label-and-value-white, var(--spectrum-white)); + --spectrum-progressbar-fill-color-white: var(--mod-progressbar-fill-color-white, var(--spectrum-white)); + --spectrum-progressbar-static-white-track-color: var(--spectrum-progressbar-track-color-white); + --mod-fieldlabel-font-size: var(--spectrum-progressbar-font-size); +} + +:host:dir(rtl), +:host([dir="rtl"]) { + --spectrum-progressbar-dir-indeterminate-multiplier: -1; +} + +:host:lang(ja), +:host:lang(ko), +:host:lang(zh) { + --mod-progressbar-line-height: var(--spectrum-progressbar-line-height-cjk); } -.fill { - block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); - background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))); - border: none; - transition: width 1s; -} +@media (forced-colors: active) { + :host { + --highcontrast-progressbar-fill-color: ButtonText; + --highcontrast-progressbar-track-color: ButtonFace; + } -:host([indeterminate]) .fill { - inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)); - 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; - position: relative; + .track { + forced-color-adjust: none; + border: 1px solid ButtonText; + } } -:host([indeterminate]) .fill:dir(rtl), -:host([dir="rtl"][indeterminate]) .fill { - animation-name: indeterminate-loop-rtl; +:host { + vertical-align: top; + inline-size: var(--spectrum-progressbar-size-default); + max-inline-size: var(--spectrum-progressbar-max-size); + min-inline-size: var(--spectrum-progressbar-min-size); + flex-flow: wrap; + justify-content: space-between; + align-items: center; + display: inline-flex; + position: relative; } :host([side-label]) { flex-flow: row; justify-content: space-between; - display: inline-flex; } -:host([side-label]) .track { - flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); +:host([static-color="white"]) { + --mod-progressbar-fill-color: var(--spectrum-progressbar-fill-color-white); + --mod-progressbar-text-color: var(--spectrum-progressbar-label-and-value-white); + --mod-progressbar-track-color: var(--spectrum-progressbar-static-white-track-color); +} + +.label, +.percentage { + text-align: start; + line-height: var(--spectrum-progressbar-line-height); + color: var(--spectrum-progressbar-text-color); + margin-block-start: var(--spectrum-progressbar-spacing-top-to-text); + margin-block-end: var(--spectrum-progressbar-spacing-label-to-progressbar); +} + +.label { + flex: 1; } :host([side-label]) .label { flex-grow: 0; margin-block-end: 0; - margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); + margin-inline-end: var(--spectrum-progressbar-spacing-label-to-text); +} + +.percentage { + align-self: flex-start; + margin-inline-start: var(--spectrum-progressbar-spacing-label-to-text); } :host([side-label]) .percentage { text-align: end; order: 3; margin-block-end: 0; - margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); } -:host([static-color="white"]) .fill { - background: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)); +.track { + inline-size: 100%; + block-size: var(--spectrum-progressbar-thickness); + border-radius: var(--spectrum-progressbar-corner-radius); + background: var(--spectrum-progressbar-track-color-default); + overflow: hidden; } -:host([static-color="white"]) .fill, -:host([static-color="white"]) .label, -:host([static-color="white"]) .percentage { - color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); +:host([side-label]) .track { + flex: 1 1 var(--spectrum-progressbar-size-default); } -:host([static-color="white"]) .track { - background: var(--spectrum-progressbar-track-color-white); +.fill { + block-size: var(--spectrum-progressbar-thickness); + background: var(--spectrum-progressbar-fill-color); + border: none; + transition: width 1s; } -@keyframes indeterminate-loop-ltr { - 0% { - transform: translate(calc(var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)) * -1)); - } - - to { - transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default))); - } +:host([indeterminate]) .fill { + inline-size: var(--spectrum-progressbar-fill-size-indeterminate); + will-change: transform; + animation-name: indeterminate-loop; + animation-timing-function: var(--spectrum-progressbar-animation-ease-in-out-indeterminate); + animation-duration: var(--spectrum-progressbar-animation-duration-indeterminate); + animation-iteration-count: infinite; + position: relative; } -@keyframes indeterminate-loop-rtl { +@keyframes indeterminate-loop { 0% { - transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate))); + transform: translate(calc(var(--spectrum-progressbar-dir-indeterminate-multiplier) * -1 * var(--spectrum-progressbar-fill-size-indeterminate))); } to { - transform: translate(calc(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)) * -1)); - } -} - -@media (forced-colors: active) { - .track { - --highcontrast-progressbar-fill-color: ButtonText; - --highcontrast-progressbar-track-color: ButtonFace; - forced-color-adjust: none; - border: 1px solid ButtonText; + transform: translate(calc(var(--spectrum-progressbar-dir-indeterminate-multiplier) * var(--spectrum-progressbar-size-default))); } } diff --git a/packages/modal/src/spectrum-modal.css b/packages/modal/src/spectrum-modal.css index 96a29482e2f..2a8008c467a 100644 --- a/packages/modal/src/spectrum-modal.css +++ b/packages/modal/src/spectrum-modal.css @@ -11,6 +11,7 @@ */ :host { + --spectrum-modal-background-color: var(--spectrum-background-layer-2-color); --spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500)); --spectrum-modal-confirm-entry-animation-delay: var(--mod-overlay-animation-duration-opened, var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))); --spectrum-modal-confirm-exit-animation-duration: var(--mod-overlay-animation-duration, var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))); diff --git a/packages/number-field/src/spectrum-number-field.css b/packages/number-field/src/spectrum-number-field.css index dd420075632..b9f488026ba 100644 --- a/packages/number-field/src/spectrum-number-field.css +++ b/packages/number-field/src/spectrum-number-field.css @@ -10,6 +10,35 @@ * governing permissions and limitations under the License. */ +:host([quiet]) #textfield { + --spectrum-stepper-buttons-border-style: none; + --spectrum-stepper-button-edge-to-fill: 0; +} + +:host { + --spectrum-stepper-border-width: var(--spectrum-border-width-100); + --spectrum-stepper-border-color-default: var(--spectrum-gray-500); + --spectrum-stepper-border-color-hover: var(--spectrum-gray-600); + --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-800); + --spectrum-stepper-buttons-border-style: none; + --spectrum-stepper-buttons-border-width: 0; + --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); + --spectrum-stepper-buttons-background-color: var(--spectrum-gray-100); + --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600); + --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800); + --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-800); + --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); + --spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); + --spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); + --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); + --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); + --spectrum-stepper-border-color-disabled: var(--spectrum-gray-300); + --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-200); + --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); +} + @media (forced-colors: active) { :host { --highcontrast-stepper-border-color: CanvasText; diff --git a/packages/picker-button/src/spectrum-picker-button.css b/packages/picker-button/src/spectrum-picker-button.css index 4571d552e23..f8faeea0738 100644 --- a/packages/picker-button/src/spectrum-picker-button.css +++ b/packages/picker-button/src/spectrum-picker-button.css @@ -11,6 +11,16 @@ */ .root { + --spectrum-picker-button-background-color: var(--spectrum-gray-100); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-down: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); + --spectrum-picker-button-border-color: none; + --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); + --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); + --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); + --spectrum-picker-button-border-width: 0px; + --spectrum-picker-button-padding: 4px; --spectrum-picker-button-height: var(--spectrum-component-height-100); --spectrum-picker-button-width: var(--spectrum-component-height-100); --spectrum-picker-button-gap: var(--spectrum-text-to-visual-50); diff --git a/packages/picker/src/spectrum-picker.css b/packages/picker/src/spectrum-picker.css index d667cb6397e..8304a33e001 100644 --- a/packages/picker/src/spectrum-picker.css +++ b/packages/picker/src/spectrum-picker.css @@ -11,6 +11,20 @@ */ #button { + --spectrum-picker-background-color-default: var(--spectrum-gray-100); + --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-active: var(--spectrum-gray-200); + --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); + --spectrum-picker-border-color-default: var(--spectrum-gray-500); + --spectrum-picker-border-color-default-open: var(--spectrum-gray-800); + --spectrum-picker-border-color-hover: var(--spectrum-gray-600); + --spectrum-picker-border-color-hover-open: var(--spectrum-gray-900); + --spectrum-picker-border-color-active: var(--spectrum-gray-700); + --spectrum-picker-border-color-key-focus: var(--spectrum-gray-900); + --spectrum-picker-border-color-disabled: var(--spectrum-gray-300); + --spectrum-picker-border-width: var(--spectrum-border-width-100); cursor: pointer; -webkit-user-select: none; user-select: none; diff --git a/packages/popover/src/spectrum-popover.css b/packages/popover/src/spectrum-popover.css index 2e9ade1f7af..eae504a32ff 100644 --- a/packages/popover/src/spectrum-popover.css +++ b/packages/popover/src/spectrum-popover.css @@ -11,6 +11,7 @@ */ :host { + --spectrum-popover-border-width: var(--spectrum-border-width-100); pointer-events: none; visibility: hidden; opacity: 0; diff --git a/packages/progress-bar/src/progress-bar-overrides.css b/packages/progress-bar/src/progress-bar-overrides.css index ff68028684a..efd96175714 100644 --- a/packages/progress-bar/src/progress-bar-overrides.css +++ b/packages/progress-bar/src/progress-bar-overrides.css @@ -11,55 +11,6 @@ */ :host { - --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--system-progress-bar-animation-ease-in-out-indeterminate); - --spectrum-progressbar-animation-duration-indeterminate: var(--system-progress-bar-animation-duration-indeterminate); - --spectrum-progressbar-corner-radius: var(--system-progress-bar-corner-radius); - --spectrum-progressbar-fill-size-indeterminate: var(--system-progress-bar-fill-size-indeterminate); - --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400); - --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500); - --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800); - --spectrum-progressbar-line-height-cjk: var(--system-progress-bar-line-height-cjk); - --spectrum-progressbar-min-size: var(--system-progress-bar-min-size); - --spectrum-progressbar-max-size: var(--system-progress-bar-max-size); - --spectrum-progressbar-line-height: var(--system-progress-bar-line-height); - --spectrum-progressbar-spacing-label-to-progressbar: var(--system-progress-bar-spacing-label-to); - --spectrum-progressbar-spacing-label-to-text: var(--system-progress-bar-spacing-label-to-text); - --spectrum-progressbar-text-color: var(--system-progress-bar-text-color); --spectrum-progressbar-track-color: var(--system-progress-bar-track-color); - --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color); - --spectrum-progressbar-label-and-value-white: var(--system-progress-bar-label-and-value-white); --spectrum-progressbar-track-color-white: var(--system-progress-bar-track-color-white); - --spectrum-progressbar-fill-color-white: var(--system-progress-bar-fill-color-white); - --spectrum-progressbar-size-default: var(--system-progress-bar-size-default); - --spectrum-progressbar-font-size: var(--system-progress-bar-font-size); - --spectrum-progressbar-thickness: var(--system-progress-bar-thickness); - --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-spacing-top-to-text); -} - -:host { - --spectrum-progressbar-size-default: var(--system-progress-bar-size-m-size-default); - --spectrum-progressbar-font-size: var(--system-progress-bar-size-m-font-size); - --spectrum-progressbar-thickness: var(--system-progress-bar-size-m-thickness); - --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-m-spacing-top-to-text); -} - -:host([size="s"]) { - --spectrum-progressbar-size-default: var(--system-progress-bar-size-s-size-default); - --spectrum-progressbar-font-size: var(--system-progress-bar-size-s-font-size); - --spectrum-progressbar-thickness: var(--system-progress-bar-size-s-thickness); - --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-s-spacing-top-to-text); -} - -:host([size="l"]) { - --spectrum-progressbar-size-default: var(--system-progress-bar-size-l-size-default); - --spectrum-progressbar-font-size: var(--system-progress-bar-size-l-font-size); - --spectrum-progressbar-thickness: var(--system-progress-bar-size-l-thickness); - --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-l-spacing-top-to-text); -} - -:host([size="xl"]) { - --spectrum-progressbar-size-default: var(--system-progress-bar-size-xl-size-default); - --spectrum-progressbar-font-size: var(--system-progress-bar-size-xl-font-size); - --spectrum-progressbar-thickness: var(--system-progress-bar-size-xl-thickness); - --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-xl-spacing-top-to-text); } diff --git a/packages/progress-bar/src/spectrum-progress-bar.css b/packages/progress-bar/src/spectrum-progress-bar.css index 6ce38cc4e67..c40457b1141 100644 --- a/packages/progress-bar/src/spectrum-progress-bar.css +++ b/packages/progress-bar/src/spectrum-progress-bar.css @@ -11,137 +11,178 @@ */ :host { - font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size)); - vertical-align: top; - inline-size: var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); - max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size)); - min-inline-size: var(--mod-progressbar-min-size, var(--spectrum-progressbar-min-size)); - flex-flow: wrap; - justify-content: space-between; - align-items: center; - display: inline-flex; - position: relative; + --spectrum-progressbar-track-color: var(--spectrum-gray-200); + --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400); } -.label, -.percentage { - text-align: start; - line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height)); - color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color)); - margin-block-start: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-spacing-top-to-text)); - margin-block-end: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-progressbar-spacing-label-to-progressbar)); +:host, +:host { + --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400); + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large); + --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-100); } -.label:lang(ja), -.label:lang(ko), -.label:lang(zh), -.percentage:lang(ja), -.percentage:lang(ko), -.percentage:lang(zh) { - line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk)); +:host([size="s"]) { + --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400); + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-small); + --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-75); } -.label { - flex: 1; +:host([size="l"]) { + --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2500); + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-100); + --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large); + --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-200); } -.percentage { - align-self: flex-start; - margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); +:host([size="xl"]) { + --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2800); + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-200); + --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-extra-large); + --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-300); } -.track { - inline-size: 100%; - block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); - border-radius: var(--spectrum-progressbar-corner-radius); - background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); - overflow: hidden; +:host { + --spectrum-progressbar-size-default: var(--mod-progressbar-size-default, var(--spectrum-progressbar-sized-size-default)); + --spectrum-progressbar-font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-sized-font-size)); + --spectrum-progressbar-thickness: var(--mod-progressbar-thickness, var(--spectrum-progressbar-sized-thickness)); + --spectrum-progressbar-spacing-top-to-text: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-sized-spacing-top-to-text)); + --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-animation-ease-in-out)); + --spectrum-progressbar-animation-duration-indeterminate: var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-animation-duration-2000)); + --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-progressbar-fill-size-indeterminate: var(--mod-progressbar-fill-size-indeterminate, 70%); + --spectrum-progressbar-dir-indeterminate-multiplier: 1; + --spectrum-progressbar-size-2400: 192px; + --spectrum-progressbar-size-2500: 200px; + --spectrum-progressbar-size-2800: 224px; + --spectrum-progressbar-line-height-cjk: var(--mod-progressbar-line-height-cjk, var(--spectrum-cjk-line-height-100)); + --spectrum-progressbar-min-size: var(--mod-progressbar-min-size, var(--spectrum-progress-bar-minimum-width)); + --spectrum-progressbar-max-size: var(--mod-progressbar-max-size, var(--spectrum-progress-bar-maximum-width)); + --spectrum-progressbar-line-height: var(--mod-progressbar-line-height, var(--spectrum-line-height-100)); + --spectrum-progressbar-spacing-label-to-progressbar: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-spacing-75)); + --spectrum-progressbar-spacing-label-to-text: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-spacing-200)); + --spectrum-progressbar-fill-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-accent-color-900))); + --spectrum-progressbar-track-color-default: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); + --spectrum-progressbar-text-color: var(--mod-progressbar-text-color, var(--spectrum-neutral-content-color-default)); + --spectrum-progressbar-label-and-value-white: var(--mod-progressbar-label-and-value-white, var(--spectrum-white)); + --spectrum-progressbar-fill-color-white: var(--mod-progressbar-fill-color-white, var(--spectrum-white)); + --spectrum-progressbar-static-white-track-color: var(--spectrum-progressbar-track-color-white); + --mod-fieldlabel-font-size: var(--spectrum-progressbar-font-size); +} + +:host:dir(rtl), +:host([dir="rtl"]) { + --spectrum-progressbar-dir-indeterminate-multiplier: -1; +} + +:host:lang(ja), +:host:lang(ko), +:host:lang(zh) { + --mod-progressbar-line-height: var(--spectrum-progressbar-line-height-cjk); } -.fill { - block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); - background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))); - border: none; - transition: width 1s; -} +@media (forced-colors: active) { + :host { + --highcontrast-progressbar-fill-color: ButtonText; + --highcontrast-progressbar-track-color: ButtonFace; + } -:host([indeterminate]) .fill { - inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)); - 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; - position: relative; + .track { + forced-color-adjust: none; + border: 1px solid ButtonText; + } } -:host([indeterminate]) .fill:dir(rtl), -:host([dir="rtl"][indeterminate]) .fill { - animation-name: indeterminate-loop-rtl; +:host { + vertical-align: top; + inline-size: var(--spectrum-progressbar-size-default); + max-inline-size: var(--spectrum-progressbar-max-size); + min-inline-size: var(--spectrum-progressbar-min-size); + flex-flow: wrap; + justify-content: space-between; + align-items: center; + display: inline-flex; + position: relative; } :host([side-label]) { flex-flow: row; justify-content: space-between; - display: inline-flex; } -:host([side-label]) .track { - flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); +:host([static-color="white"]) { + --mod-progressbar-fill-color: var(--spectrum-progressbar-fill-color-white); + --mod-progressbar-text-color: var(--spectrum-progressbar-label-and-value-white); + --mod-progressbar-track-color: var(--spectrum-progressbar-static-white-track-color); +} + +.label, +.percentage { + text-align: start; + line-height: var(--spectrum-progressbar-line-height); + color: var(--spectrum-progressbar-text-color); + margin-block-start: var(--spectrum-progressbar-spacing-top-to-text); + margin-block-end: var(--spectrum-progressbar-spacing-label-to-progressbar); +} + +.label { + flex: 1; } :host([side-label]) .label { flex-grow: 0; margin-block-end: 0; - margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); + margin-inline-end: var(--spectrum-progressbar-spacing-label-to-text); +} + +.percentage { + align-self: flex-start; + margin-inline-start: var(--spectrum-progressbar-spacing-label-to-text); } :host([side-label]) .percentage { text-align: end; order: 3; margin-block-end: 0; - margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); } -:host([static-color="white"]) .fill { - background: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)); +.track { + inline-size: 100%; + block-size: var(--spectrum-progressbar-thickness); + border-radius: var(--spectrum-progressbar-corner-radius); + background: var(--spectrum-progressbar-track-color-default); + overflow: hidden; } -:host([static-color="white"]) .fill, -:host([static-color="white"]) .label, -:host([static-color="white"]) .percentage { - color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); +:host([side-label]) .track { + flex: 1 1 var(--spectrum-progressbar-size-default); } -:host([static-color="white"]) .track { - background: var(--spectrum-progressbar-track-color-white); +.fill { + block-size: var(--spectrum-progressbar-thickness); + background: var(--spectrum-progressbar-fill-color); + border: none; + transition: width 1s; } -@keyframes indeterminate-loop-ltr { - 0% { - transform: translate(calc(var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)) * -1)); - } - - to { - transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default))); - } +:host([indeterminate]) .fill { + inline-size: var(--spectrum-progressbar-fill-size-indeterminate); + will-change: transform; + animation-name: indeterminate-loop; + animation-timing-function: var(--spectrum-progressbar-animation-ease-in-out-indeterminate); + animation-duration: var(--spectrum-progressbar-animation-duration-indeterminate); + animation-iteration-count: infinite; + position: relative; } -@keyframes indeterminate-loop-rtl { +@keyframes indeterminate-loop { 0% { - transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate))); + transform: translate(calc(var(--spectrum-progressbar-dir-indeterminate-multiplier) * -1 * var(--spectrum-progressbar-fill-size-indeterminate))); } to { - transform: translate(calc(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)) * -1)); - } -} - -@media (forced-colors: active) { - .track { - --highcontrast-progressbar-fill-color: ButtonText; - --highcontrast-progressbar-track-color: ButtonFace; - forced-color-adjust: none; - border: 1px solid ButtonText; + transform: translate(calc(var(--spectrum-progressbar-dir-indeterminate-multiplier) * var(--spectrum-progressbar-size-default))); } } diff --git a/packages/progress-circle/src/spectrum-progress-circle.css b/packages/progress-circle/src/spectrum-progress-circle.css index 62827d507cd..c8dfc35c83c 100644 --- a/packages/progress-circle/src/spectrum-progress-circle.css +++ b/packages/progress-circle/src/spectrum-progress-circle.css @@ -10,6 +10,12 @@ * governing permissions and limitations under the License. */ +:host { + --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200); + --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400); + --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000); +} + @media (forced-colors: active) { :host { --highcontrast-progress-circle-fill-border-color: Highlight; diff --git a/packages/radio/src/radio-overrides.css b/packages/radio/src/radio-overrides.css index 49dcb2a38ca..c52c3fbfcb3 100644 --- a/packages/radio/src/radio-overrides.css +++ b/packages/radio/src/radio-overrides.css @@ -15,91 +15,5 @@ --spectrum-radio-button-border-color-hover: var(--system-radio-button-border-color-hover); --spectrum-radio-button-border-color-down: var(--system-radio-button-border-color-down); --spectrum-radio-button-border-color-focus: var(--system-radio-button-border-color-focus); - --spectrum-radio-neutral-content-color: var(--system-radio-neutral-content-color); - --spectrum-radio-neutral-content-color-hover: var(--system-radio-neutral-content-color-hover); - --spectrum-radio-neutral-content-color-down: var(--system-radio-neutral-content-color-down); - --spectrum-radio-neutral-content-color-focus: var(--system-radio-neutral-content-color-focus); - --spectrum-radio-focus-indicator-thickness: var(--system-radio-focus-indicator-thickness); - --spectrum-radio-focus-indicator-gap: var(--system-radio-focus-indicator-gap); - --spectrum-radio-focus-indicator-color: var(--system-radio-focus-indicator-color); - --spectrum-radio-disabled-content-color: var(--system-radio-disabled-content-color); - --spectrum-radio-disabled-border-color: var(--system-radio-disabled-border-color); - --spectrum-radio-emphasized-accent-color: var(--system-radio-emphasized-accent-color); - --spectrum-radio-emphasized-accent-color-hover: var(--system-radio-emphasized-accent-color-hover); - --spectrum-radio-emphasized-accent-color-down: var(--system-radio-emphasized-accent-color-down); - --spectrum-radio-emphasized-accent-color-focus: var(--system-radio-emphasized-accent-color-focus); - --spectrum-radio-border-width: var(--system-radio-border-width); --spectrum-radio-button-background-color: var(--system-radio-button-background-color); - --spectrum-radio-button-checked-border-color-default: var(--system-radio-button-checked-border-color-default); - --spectrum-radio-button-checked-border-color-hover: var(--system-radio-button-checked-border-color-hover); - --spectrum-radio-button-checked-border-color-down: var(--system-radio-button-checked-border-color-down); - --spectrum-radio-button-checked-border-color-focus: var(--system-radio-button-checked-border-color-focus); - --spectrum-radio-line-height: var(--system-radio-line-height); - --spectrum-radio-animation-duration: var(--system-radio-animation-duration); - --spectrum-radio-height: var(--system-radio-height); - --spectrum-radio-button-control-size: var(--system-radio-button-control-size); - --spectrum-radio-text-to-control: var(--system-radio-text-to-control); - --spectrum-radio-label-top-to-text: var(--system-radio-label-top-to-text); - --spectrum-radio-label-bottom-to-text: var(--system-radio-label-bottom-to-text); - --spectrum-radio-button-top-to-control: var(--system-radio-button-top-to-control); - --spectrum-radio-font-size: var(--system-radio-font-size); -} - -:host(:lang(ja)) { - --spectrum-radio-line-height-cjk: var(--system-radio-lang-ja-line-height-cjk); -} - -:host(:lang(zh)) { - --spectrum-radio-line-height-cjk: var(--system-radio-lang-zh-line-height-cjk); -} - -:host(:lang(ko)) { - --spectrum-radio-line-height-cjk: var(--system-radio-lang-ko-line-height-cjk); -} - -:host { - --spectrum-radio-height: var(--system-radio-size-m-height); - --spectrum-radio-button-control-size: var(--system-radio-size-m-button-control-size); - --spectrum-radio-text-to-control: var(--system-radio-size-m-text-to-control); - --spectrum-radio-label-top-to-text: var(--system-radio-size-m-label-top-to-text); - --spectrum-radio-label-bottom-to-text: var(--system-radio-size-m-label-bottom-to-text); - --spectrum-radio-button-top-to-control: var(--system-radio-size-m-button-top-to-control); - --spectrum-radio-font-size: var(--system-radio-size-m-font-size); -} - -:host([size="s"]) { - --spectrum-radio-height: var(--system-radio-size-s-height); - --spectrum-radio-button-control-size: var(--system-radio-size-s-button-control-size); - --spectrum-radio-text-to-control: var(--system-radio-size-s-text-to-control); - --spectrum-radio-label-top-to-text: var(--system-radio-size-s-label-top-to-text); - --spectrum-radio-label-bottom-to-text: var(--system-radio-size-s-label-bottom-to-text); - --spectrum-radio-button-top-to-control: var(--system-radio-size-s-button-top-to-control); - --spectrum-radio-font-size: var(--system-radio-size-s-font-size); -} - -:host([size="l"]) { - --spectrum-radio-height: var(--system-radio-size-l-height); - --spectrum-radio-button-control-size: var(--system-radio-size-l-button-control-size); - --spectrum-radio-text-to-control: var(--system-radio-size-l-text-to-control); - --spectrum-radio-label-top-to-text: var(--system-radio-size-l-label-top-to-text); - --spectrum-radio-label-bottom-to-text: var(--system-radio-size-l-label-bottom-to-text); - --spectrum-radio-button-top-to-control: var(--system-radio-size-l-button-top-to-control); - --spectrum-radio-font-size: var(--system-radio-size-l-font-size); -} - -:host([size="xl"]) { - --spectrum-radio-height: var(--system-radio-size-xl-height); - --spectrum-radio-button-control-size: var(--system-radio-size-xl-button-control-size); - --spectrum-radio-text-to-control: var(--system-radio-size-xl-text-to-control); - --spectrum-radio-label-top-to-text: var(--system-radio-size-xl-label-top-to-text); - --spectrum-radio-label-bottom-to-text: var(--system-radio-size-xl-label-bottom-to-text); - --spectrum-radio-button-top-to-control: var(--system-radio-size-xl-button-top-to-control); - --spectrum-radio-font-size: var(--system-radio-size-xl-font-size); -} - -:host([emphasized]) { - --spectrum-radio-button-checked-border-color-default: var(--system-radio-emphasized-button-checked-border-color-default); - --spectrum-radio-button-checked-border-color-hover: var(--system-radio-emphasized-button-checked-border-color-hover); - --spectrum-radio-button-checked-border-color-down: var(--system-radio-emphasized-button-checked-border-color-down); - --spectrum-radio-button-checked-border-color-focus: var(--system-radio-emphasized-button-checked-border-color-focus); } diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css index 9bffd22f1e1..fbd6ae74f35 100644 --- a/packages/radio/src/spectrum-radio.css +++ b/packages/radio/src/spectrum-radio.css @@ -10,8 +10,84 @@ * governing permissions and limitations under the License. */ +:host { + --spectrum-radio-button-border-color-default: var(--spectrum-gray-600); + --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); + --spectrum-radio-button-border-color-down: var(--spectrum-gray-800); + --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); + --spectrum-radio-button-background-color: var(--spectrum-gray-50); + --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); + --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); + --spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color); + --spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color); + --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); + --spectrum-radio-border-width: var(--spectrum-border-width-200); + --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); + --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); + --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --spectrum-radio-line-height: var(--spectrum-line-height-100); + --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100); +} + +:host(:lang(ja)), +:host(:lang(ko)), +:host(:lang(zh)) { + --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100); +} + +:host, +:host { + --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); +} + +:host([size="s"]) { + --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); +} + +:host([size="l"]) { + --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); +} + +:host([size="xl"]) { + --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); +} + @media (forced-colors: active) { :host { + --highcontrast-radio-button-background-color: ButtonFace; --highcontrast-radio-neutral-content-color: CanvasText; --highcontrast-radio-neutral-content-color-hover: CanvasText; --highcontrast-radio-neutral-content-color-down: CanvasText; @@ -79,23 +155,14 @@ color: var(--highcontrast-radio-neutral-content-color-focus, var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus))); } -:host([readonly]) #input:read-only { - cursor: auto; -} - -:host([readonly]) #button { - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - position: fixed; - inset-block-end: 100%; - inset-inline-end: 100%; +:host([readonly]) #input { + pointer-events: none; } :host([readonly][checked][disabled]) #input ~ #label, :host([readonly][disabled]) #input ~ #label, :host([readonly]) #label { color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))); - margin-inline-start: 0; } :host([emphasized][checked]) #input + #button:before { @@ -204,7 +271,7 @@ 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)); - background-color: var(--highcontrast-radio-button-background-color, var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color))); + background-color: var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color)); border-width: var(--mod-radio-border-width, var(--spectrum-radio-border-width)); border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default))); transition: diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css index 91ba2d6eeb9..eb0ab3b92ab 100644 --- a/packages/search/src/spectrum-search.css +++ b/packages/search/src/spectrum-search.css @@ -10,7 +10,21 @@ * governing permissions and limitations under the License. */ +#textfield, +:host([size="m"]) #textfield { + --spectrum-search-border-radius: var(--spectrum-corner-radius-100); + --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); +} + #textfield { + --spectrum-search-border-color-default: var(--spectrum-gray-500); + --spectrum-search-border-color-hover: var(--spectrum-gray-600); + --spectrum-search-border-color-focus: var(--spectrum-gray-800); + --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-search-border-color-key-focus: var(--spectrum-gray-800); + --spectrum-search-background-color: var(--spectrum-gray-25); + --spectrum-search-background-color-disabled: var(--spectrum-gray-25); + --spectrum-search-border-color-disabled: var(--spectrum-gray-300); --spectrum-search-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); diff --git a/packages/sidenav/src/spectrum-sidenav-heading.css b/packages/sidenav/src/spectrum-sidenav-heading.css index 8f76c02dcc7..bc99aaaaf70 100644 --- a/packages/sidenav/src/spectrum-sidenav-heading.css +++ b/packages/sidenav/src/spectrum-sidenav-heading.css @@ -10,6 +10,16 @@ * governing permissions and limitations under the License. */ +#list { + --spectrum-sidenav-background-hover: var(--spectrum-gray-100); + --spectrum-sidenav-item-background-down: var(--spectrum-gray-200); + --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100); + --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100); + --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200); + --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200); + --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100); +} + @media (forced-colors: active) { #list .spectrum-Icon { forced-color-adjust: preserve-parent-color; diff --git a/packages/sidenav/src/spectrum-sidenav-item.css b/packages/sidenav/src/spectrum-sidenav-item.css index 83ed3b94dec..9b8c64cee6c 100644 --- a/packages/sidenav/src/spectrum-sidenav-item.css +++ b/packages/sidenav/src/spectrum-sidenav-item.css @@ -10,6 +10,16 @@ * governing permissions and limitations under the License. */ +#list { + --spectrum-sidenav-background-hover: var(--spectrum-gray-100); + --spectrum-sidenav-item-background-down: var(--spectrum-gray-200); + --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100); + --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100); + --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200); + --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200); + --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100); +} + @media (forced-colors: active) { #list ::slotted([slot="icon"]) { forced-color-adjust: preserve-parent-color; diff --git a/packages/sidenav/src/spectrum-sidenav.css b/packages/sidenav/src/spectrum-sidenav.css index 064658ee021..aaf43beb0b6 100644 --- a/packages/sidenav/src/spectrum-sidenav.css +++ b/packages/sidenav/src/spectrum-sidenav.css @@ -10,6 +10,16 @@ * governing permissions and limitations under the License. */ +:host { + --spectrum-sidenav-background-hover: var(--spectrum-gray-100); + --spectrum-sidenav-item-background-down: var(--spectrum-gray-200); + --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100); + --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100); + --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200); + --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200); + --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100); +} + @media (forced-colors: active) { .spectrum-Icon { forced-color-adjust: preserve-parent-color; diff --git a/packages/slider/src/spectrum-slider.css b/packages/slider/src/spectrum-slider.css index 2e1f076045c..bc38698be25 100644 --- a/packages/slider/src/spectrum-slider.css +++ b/packages/slider/src/spectrum-slider.css @@ -10,7 +10,33 @@ * governing permissions and limitations under the License. */ +:host([size="l"]), +:host([size="xl"]) { + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); +} + +:host, +:host([size="s"]) { + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); +} + :host { + --spectrum-slider-track-color: var(--spectrum-gray-200); + --spectrum-slider-track-fill-color: var(--spectrum-gray-700); + --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); + --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); + --spectrum-slider-handle-background-color: transparent; + --spectrum-slider-handle-background-color-disabled: transparent; + --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); + --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); + --spectrum-slider-handle-border-color: var(--spectrum-gray-700); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); + --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); + --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); + --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); + --spectrum-slider-track-corner-radius: 2px; --spectrum-slider-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); diff --git a/packages/split-view/src/spectrum-split-view.css b/packages/split-view/src/spectrum-split-view.css index 2dba41f5738..25c75999a56 100644 --- a/packages/split-view/src/spectrum-split-view.css +++ b/packages/split-view/src/spectrum-split-view.css @@ -11,6 +11,9 @@ */ :host { + --spectrum-splitview-background-color: var(--spectrum-gray-75); + --spectrum-splitview-handle-background-color: var(--spectrum-gray-200); + --spectrum-splitview-gripper-border-radius: 2px; --spectrum-splitview-vertical-width: 100%; --spectrum-splitview-vertical-gripper-width: 50%; --spectrum-splitview-vertical-gripper-outer-width: 100%; diff --git a/packages/swatch/src/spectrum-swatch-group.css b/packages/swatch/src/spectrum-swatch-group.css index 874b4ed81bf..ba4668d6d23 100644 --- a/packages/swatch/src/spectrum-swatch-group.css +++ b/packages/swatch/src/spectrum-swatch-group.css @@ -11,17 +11,20 @@ */ :host { + --spectrum-swatchgroup-spacing: var(--spectrum-spacing-75); justify-content: flex-start; align-items: flex-start; - gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing-regular)); + gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing)); flex-flow: wrap; display: inline-flex; } :host([density="compact"]) { - gap: var(--mod-swatchgroup-spacing-compact, var(--spectrum-swatchgroup-spacing-compact)); + --mod-swatchgroup-spacing-regular: var(--mod-swatchgroup-spacing-compact); + --spectrum-swatchgroup-spacing: var(--spectrum-spacing-50); } :host([density="spacious"]) { - gap: var(--mod-swatchgroup-spacing-spacious, var(--spectrum-swatchgroup-spacing-spacious)); + --mod-swatchgroup-spacing-regular: var(--mod-swatchgroup-spacing-spacious); + --spectrum-swatchgroup-spacing: var(--spectrum-spacing-100); } diff --git a/packages/swatch/src/spectrum-swatch.css b/packages/swatch/src/spectrum-swatch.css index f0bf0a0f8db..1b4d20b7a0b 100644 --- a/packages/swatch/src/spectrum-swatch.css +++ b/packages/swatch/src/spectrum-swatch.css @@ -10,6 +10,12 @@ * governing permissions and limitations under the License. */ +:host { + --spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); + --spectrum-swatch-border-radius: var(--spectrum-corner-radius-75); +} + @media (forced-colors: active) { :host { --highcontrast-swatch-disabled-icon-color: GrayText; @@ -30,7 +36,43 @@ } } +:host, +:host([size="s"]) { + --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); +} + +:host([size="xs"]) { + --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); +} + :host { + --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); +} + +:host([size="l"]) { + --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); +} + +:host { + --spectrum-swatch-focus-indicator-border-radius: 8px; + --spectrum-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-disabled-icon-border-opacity)); + --spectrum-swatch-disabled-icon-color: var(--spectrum-white); + --spectrum-swatch-border-thickness: var(--spectrum-border-width-100); + --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-swatch-border-color-selected: var(--spectrum-gray-900); + --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); + --spectrum-swatch-slash-icon-color: var(--spectrum-red-900); + --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); block-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); -webkit-user-select: none; @@ -53,7 +95,7 @@ } :host([selected]) { - background-color: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected))); + background: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected))); } :host([selected]) .fill { @@ -76,7 +118,7 @@ } :host .is-image .fill:before { - background-color: initial; + background: none; } :host([mixed-value]) .fill { @@ -90,8 +132,8 @@ } :host([nothing]) .fill { - background-color: initial; - background-color: var(--spectrum-picked-color, transparent); + background: none; + background: var(--spectrum-picked-color, transparent); background-image: none; } @@ -155,24 +197,22 @@ .fill:before { content: ""; z-index: 0; + background: none; + background: var(--spectrum-picked-color, transparent); box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--mod-swatch-border-color, var(--spectrum-swatch-border-color))); border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius)); position: absolute; inset: 0; } -:host([border="none"]) .fill:before, -.fill:before { - background-color: initial; - background-color: var(--spectrum-picked-color, transparent); -} - :host([border="none"]) .fill:before { box-shadow: none; + background: none; + background: var(--spectrum-picked-color, transparent); } :host([border="light"]) .fill:before { - box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color-light, var(--mod-swatch-border-color-light, var(--spectrum-swatch-border-color-light))); + box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--mod-swatch-border-color-light, var(--spectrum-swatch-border-color-light)); } .mixedValueIcon { diff --git a/packages/swatch/src/swatch-group-overrides.css b/packages/swatch/src/swatch-group-overrides.css index 4f7f416ce30..02fb71ea34c 100644 --- a/packages/swatch/src/swatch-group-overrides.css +++ b/packages/swatch/src/swatch-group-overrides.css @@ -9,9 +9,3 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - -:host { - --spectrum-swatchgroup-spacing-compact: var(--system-swatch-group-spacing-compact); - --spectrum-swatchgroup-spacing-regular: var(--system-swatch-group-spacing-regular); - --spectrum-swatchgroup-spacing-spacious: var(--system-swatch-group-spacing-spacious); -} diff --git a/packages/swatch/src/swatch-overrides.css b/packages/swatch/src/swatch-overrides.css index 827a86b74cf..47965584353 100644 --- a/packages/swatch/src/swatch-overrides.css +++ b/packages/swatch/src/swatch-overrides.css @@ -10,49 +10,8 @@ * governing permissions and limitations under the License. */ -:host([size="l"]) { - --spectrum-swatch-size: var(--system-swatch-size-l-size); - --spectrum-swatch-disabled-icon-size: var(--system-swatch-size-l-disabled-icon-size); - --spectrum-swatch-slash-thickness: var(--system-swatch-size-l-slash-thickness); -} - -:host([size="s"]) { - --spectrum-swatch-size: var(--system-swatch-size-s-size); - --spectrum-swatch-disabled-icon-size: var(--system-swatch-size-s-disabled-icon-size); - --spectrum-swatch-slash-thickness: var(--system-swatch-size-s-slash-thickness); -} - -:host([size="xs"]) { - --spectrum-swatch-size: var(--system-swatch-size-xs-size); - --spectrum-swatch-disabled-icon-size: var(--system-swatch-size-xs-disabled-icon-size); - --spectrum-swatch-slash-thickness: var(--system-swatch-size-xs-slash-thickness); -} - :host { - --spectrum-swatch-size: var(--system-swatch-size-m-size); - --spectrum-swatch-disabled-icon-size: var(--system-swatch-size-m-disabled-icon-size); - --spectrum-swatch-slash-thickness: var(--system-swatch-size-m-slash-thickness); -} - -:host { - --spectrum-swatch-border-radius: var(--system-swatch-border-radius); - --spectrum-swatch-focus-indicator-border-radius: var(--system-swatch-focus-indicator-border-radius); - --spectrum-swatch-border-thickness: var(--system-swatch-border-thickness); - --spectrum-swatch-border-thickness-selected: var(--system-swatch-border-thickness-selected); - --spectrum-swatch-focus-indicator-thickness: var(--system-swatch-focus-indicator-thickness); - --spectrum-swatch-focus-indicator-gap: var(--system-swatch-focus-indicator-gap); - --spectrum-swatch-border-color-opacity: var(--system-swatch-border-color-opacity); - --spectrum-swatch-border-color-light-opacity: var(--system-swatch-border-color-light-opacity); --spectrum-swatch-border-color: var(--system-swatch-border-color); - --spectrum-swatch-icon-border-color: var(--system-swatch-icon-border-color); - --spectrum-swatch-border-color-light: var(--system-swatch-border-color-light); - --spectrum-swatch-border-color-selected: var(--system-swatch-border-color-selected); --spectrum-swatch-inner-border-color-selected: var(--system-swatch-inner-border-color-selected); - --spectrum-swatch-disabled-icon-color: var(--system-swatch-disabled-icon-color); - --spectrum-swatch-dash-icon-color: var(--system-swatch-dash-icon-color); - --spectrum-swatch-slash-icon-color: var(--system-swatch-slash-icon-color); - --spectrum-swatch-focus-indicator-color: var(--system-swatch-focus-indicator-color); - --spectrum-swatch-size: var(--system-swatch-size); - --spectrum-swatch-disabled-icon-size: var(--system-swatch-disabled-icon-size); - --spectrum-swatch-slash-thickness: var(--system-swatch-slash-thickness); + --spectrum-swatch-border-radius: var(--system-swatch-border-radius); } diff --git a/packages/switch/src/spectrum-switch.css b/packages/switch/src/spectrum-switch.css index bdcf8069a47..cafde8a9e56 100644 --- a/packages/switch/src/spectrum-switch.css +++ b/packages/switch/src/spectrum-switch.css @@ -11,6 +11,17 @@ */ :host { + --spectrum-switch-handle-border-color-default: var(--spectrum-gray-600); + --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700); + --spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); + --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700); + --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700); + --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); + --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); + --spectrum-switch-background-color: var(--spectrum-gray-200); + --spectrum-switch-background-color-disabled: var(--spectrum-gray-200); + --spectrum-switch-handle-background-color: var(--spectrum-gray-50); --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); diff --git a/packages/table/src/spectrum-table.css b/packages/table/src/spectrum-table.css index d182a4034f0..52fabc0d5c0 100644 --- a/packages/table/src/spectrum-table.css +++ b/packages/table/src/spectrum-table.css @@ -10,6 +10,21 @@ * governing permissions and limitations under the License. */ +:host([quiet]) { + --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); + --spectrum-table-row-background-color: var(--spectrum-transparent-white-25); +} + +:host { + --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); + --spectrum-table-border-color: var(--spectrum-gray-200); + --spectrum-table-divider-color: var(--spectrum-gray-200); + --spectrum-table-row-background-color: var(--spectrum-gray-25); + --spectrum-table-summary-row-background-color: var(--spectrum-gray-100); + --spectrum-table-section-header-background-color: var(--spectrum-gray-100); + --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover); +} + @media (forced-colors: active) { :host { --highcontrast-table-row-background-color: Canvas; diff --git a/packages/tabs/src/spectrum-tabs.css b/packages/tabs/src/spectrum-tabs.css index 326db73d9ae..3b4912387c0 100644 --- a/packages/tabs/src/spectrum-tabs.css +++ b/packages/tabs/src/spectrum-tabs.css @@ -11,6 +11,8 @@ */ #list { + --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight); + --spectrum-tabs-divider-background-color: var(--spectrum-gray-200); --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); diff --git a/packages/tags/src/spectrum-tag.css b/packages/tags/src/spectrum-tag.css index d88636d15e4..c9452c9e758 100644 --- a/packages/tags/src/spectrum-tag.css +++ b/packages/tags/src/spectrum-tag.css @@ -11,6 +11,37 @@ */ :host { + --spectrum-tag-background-color: var(--spectrum-gray-50); + --spectrum-tag-background-color-hover: var(--spectrum-gray-50); + --spectrum-tag-background-color-active: var(--spectrum-gray-100); + --spectrum-tag-background-color-focus: var(--spectrum-gray-50); + --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-tag-border-color: var(--spectrum-gray-700); + --spectrum-tag-border-color-hover: var(--spectrum-gray-800); + --spectrum-tag-border-color-active: var(--spectrum-gray-900); + --spectrum-tag-border-color-focus: var(--spectrum-gray-800); + --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-tag-content-color-selected: var(--spectrum-gray-25); + --spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); + --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); + --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + --spectrum-tag-border-color-disabled: transparent; + --spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); + --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); + --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); + --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); + --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); + --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); + --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); + --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); + --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); --spectrum-avatar-opacity-disabled: 0.3; --spectrum-tag-animation-duration: var(--spectrum-animation-duration-100); --spectrum-tag-border-width: var(--spectrum-border-width-100); diff --git a/packages/textfield/src/spectrum-textfield.css b/packages/textfield/src/spectrum-textfield.css index 098399745d3..0dd7c231b54 100644 --- a/packages/textfield/src/spectrum-textfield.css +++ b/packages/textfield/src/spectrum-textfield.css @@ -10,7 +10,33 @@ * governing permissions and limitations under the License. */ +:host([quiet]) #textfield { + --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); +} + +:host([size="xl"]) #textfield#textfield { + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300); +} + +:host([size="l"]) #textfield#textfield { + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200); +} + +:host([size="s"]) #textfield#textfield { + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75); +} + :host { + --spectrum-textfield-background-color: var(--spectrum-gray-25); + --spectrum-textfield-background-color-disabled: var(--spectrum-gray-25); + --spectrum-textfield-border-color: var(--spectrum-gray-500); + --spectrum-textfield-border-color-hover: var(--spectrum-gray-600); + --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-800); + --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); + --spectrum-textfield-border-width: var(--spectrum-border-width-100); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); --spectrum-texfield-animation-duration: var(--spectrum-animation-duration-100); --spectrum-textfield-width: 240px; diff --git a/packages/thumbnail/src/spectrum-thumbnail.css b/packages/thumbnail/src/spectrum-thumbnail.css index 68c987457ef..1e90fd0a1eb 100644 --- a/packages/thumbnail/src/spectrum-thumbnail.css +++ b/packages/thumbnail/src/spectrum-thumbnail.css @@ -10,6 +10,10 @@ * governing permissions and limitations under the License. */ +:host { + --spectrum-thumbnail-border-radius: 2px; +} + :host, :host([size="500"]) { --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500); diff --git a/packages/toast/src/spectrum-toast.css b/packages/toast/src/spectrum-toast.css index b93b95d3bf9..29efb026c79 100644 --- a/packages/toast/src/spectrum-toast.css +++ b/packages/toast/src/spectrum-toast.css @@ -11,6 +11,8 @@ */ :host { + --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-toast-divider-color: var(--spectrum-transparent-white-400); --spectrum-toast-font-weight: var(--spectrum-regular-font-weight); --spectrum-toast-font-size: var(--spectrum-font-size-100); --spectrum-toast-corner-radius: var(--spectrum-corner-radius-100); diff --git a/packages/tooltip/src/spectrum-tooltip.css b/packages/tooltip/src/spectrum-tooltip.css index 1bc7074c590..70f2f8567e5 100644 --- a/packages/tooltip/src/spectrum-tooltip.css +++ b/packages/tooltip/src/spectrum-tooltip.css @@ -11,6 +11,7 @@ */ #tooltip { + --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); pointer-events: none; visibility: hidden; opacity: 0; diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css index 2ab1aa83de3..e981fabec34 100644 --- a/tools/styles/tokens-v2/system-theme-bridge.css +++ b/tools/styles/tokens-v2/system-theme-bridge.css @@ -187,35 +187,9 @@ --system-clear-button-background-color-hover: transparent; --system-clear-button-background-color-down: transparent; --system-clear-button-background-color-key-focus: transparent; - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); - --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); - --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); - --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); - --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); - --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); - --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); - --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); - --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-500)); - --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); - --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color); - --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-background-color: transparent; + --system-clear-button-static-white-background-color-hover: var(--spectrum-transparent-white-400); + --system-clear-button-static-white-background-color-down: var(--spectrum-transparent-white-500); + --system-clear-button-static-white-background-color-key-focus: var(--spectrum-transparent-white-400); --system-close-button-background-color-default: transparent; --system-close-button-background-color-hover: var(--spectrum-gray-100); --system-close-button-background-color-down: var(--spectrum-gray-200); @@ -226,64 +200,6 @@ --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-400); --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-500); --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-400); - --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); - --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); - --system-coach-indicator-inline-size: var(--system-coach-indicator-min-inline-size); - --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size); - --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); - --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); - --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --system-coach-indicator-ring-light-color: var(--spectrum-gray-25); - --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size)); - --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size)); - --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; - --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --system-coach-indicator-animation-name: pulse; - --system-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple); - --system-coach-indicator-animation-keyframe-0-scale: 1; - --system-coach-indicator-animation-keyframe-0-opacity: 0; - --system-coach-indicator-animation-keyframe-50-scale: 1.5; - --system-coach-indicator-animation-keyframe-50-opacity: 1; - --system-coach-indicator-animation-keyframe-100-scale: 2; - --system-coach-indicator-animation-keyframe-100-opacity: 0; - --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - --system-coach-indicator-quiet-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); - --system-coach-indicator-quiet-animation-name: pulse-quiet; - --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); - --system-coach-mark-width: var(--spectrum-coach-mark-width); - --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); - --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); - --system-coach-mark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); - --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); - --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); - --system-coach-mark-header-to-body: var(--spectrum-spacing-200); - --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); - --system-coach-mark-title-color: var(--spectrum-heading-color); - --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-title-font-style: var(--spectrum-heading-serif-font-style); - --system-coach-mark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); - --system-coach-mark-title-text-line-height: var(--spectrum-heading-line-height); - --system-coach-mark-content-font-color: var(--spectrum-body-color); - --system-coach-mark-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-content-font-style: var(--spectrum-body-sans-serif-font-style); - --system-coach-mark-content-line-height: var(--spectrum-body-line-height); - --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); - --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); - --system-coach-mark-step-font-weight: var(--spectrum-body-medium-font-weight); - --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-step-font-style: var(--spectrum-body-sans-serif-font-style); - --system-coach-mark-step-line-height: var(--spectrum-body-line-height); - --system-coach-mark-step-font-size: var(--spectrum-coach-mark-pagination-body-size); - --system-coach-mark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); - --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); - --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100); - --system-coach-mark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); --system-color-wheel-border-color: var(--spectrum-transparent-black-300); --system-combobox-border-color-default: var(--spectrum-gray-500); --system-combobox-border-color-hover: var(--spectrum-gray-600); @@ -293,32 +209,10 @@ --system-combobox-readonly-input-border-color: var(--spectrum-gray-500); --system-combobox-background-color-disabled: var(--spectrum-gray-25); --system-combobox-border-color-disabled: var(--spectrum-disabled-border-color); - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); - --system-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); - --system-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); - --system-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); - --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-close-button-size: var(--spectrum-component-height-100); - --system-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); --system-divider-background-color: var(--spectrum-gray-200); --system-divider-background-color-static-white: var(--spectrum-transparent-white-200); --system-divider-background-color-static-black: var(--spectrum-transparent-black-200); --system-drop-zone-border-color: var(--spectrum-gray-200); - --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: ","; --system-infield-button-border-width: var(--spectrum-border-width-100); --system-infield-button-border-color: inherit; --system-infield-button-border-radius: var(--spectrum-corner-radius-100); @@ -338,25 +232,6 @@ --system-menu-item-focus-indicator-offset: var(--spectrum-spacing-50); --system-menu-item-spacing-multiplier: 1; --system-menu-item-focus-indicator-outline-style: solid; - --system-meter-min-width: var(--spectrum-meter-minimum-width); - --system-meter-max-width: var(--spectrum-meter-maximum-width); - --system-meter-inline-size: var(--spectrum-meter-width); - --system-meter-top-to-text: var(--spectrum-component-top-to-text); - --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); - --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); - --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); - --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); - --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); - --system-meter-size-s-font-size: var(--spectrum-font-size-75); - --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); - --system-meter-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); - --system-meter-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-font-size: var(--spectrum-font-size-100); - --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-size-l-top-to-text: var(--spectrum-component-top-to-text-200); --system-modal-background-color: var(--spectrum-background-layer-2-color); --system-picker-background-color-default: var(--spectrum-gray-100); --system-picker-background-color-default-open: var(--spectrum-gray-200); @@ -383,45 +258,8 @@ --system-picker-button-border-width: 0px; --system-picker-button-padding: 4px; --system-popover-border-width: var(--spectrum-border-width-100); - --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); - --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); - --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-progress-bar-fill-size-indeterminate: 70%; - --system-progress-bar-size-2400: 192px; - --system-progress-bar-size-2500: 200px; - --system-progress-bar-size-2800: 224px; - --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); - --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); - --system-progress-bar-line-height: var(--spectrum-line-height-100); - --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); - --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); - --system-progress-bar-text-color: var(--spectrum-neutral-content-color-default); --system-progress-bar-track-color: var(--spectrum-gray-200); - --system-progress-bar-fill-color: var(--spectrum-accent-color-900); - --system-progress-bar-label-and-value-white: var(--spectrum-white); --system-progress-bar-track-color-white: var(--spectrum-transparent-white-400); - --system-progress-bar-fill-color-white: var(--spectrum-white); - --system-progress-bar-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); - --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-large); - --system-progress-bar-size-m-thickness: var(--spectrum-progress-bar-thickness-large); - --system-progress-bar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --system-progress-bar-size-m-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --system-progress-bar-size-s-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small); - --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --system-progress-bar-size-l-size-default: var(--system-progress-bar-size-2500); - --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); - --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large); - --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800); - --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); - --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large); - --system-progress-bar-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); --system-progress-circle-track-border-color: var(--spectrum-gray-200); --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400); --system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000); @@ -429,69 +267,7 @@ --system-radio-button-border-color-hover: var(--spectrum-gray-700); --system-radio-button-border-color-down: var(--spectrum-gray-800); --system-radio-button-border-color-focus: var(--spectrum-gray-700); - --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); - --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); - --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); - --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); - --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); - --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); - --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); - --system-radio-border-width: var(--spectrum-border-width-200); --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); - --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); - --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); - --system-radio-line-height: var(--spectrum-line-height-100); - --system-radio-animation-duration: var(--spectrum-animation-duration-100); - --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-height: var(--spectrum-component-height-100); - --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); - --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium); - --system-radio-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - --system-radio-font-size: var(--spectrum-font-size-100); - --system-radio-size-m-font-size: var(--spectrum-font-size-100); - --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small); - --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); - --system-radio-size-s-font-size: var(--spectrum-font-size-75); - --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large); - --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200); - --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); - --system-radio-size-l-font-size: var(--spectrum-font-size-200); - --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large); - --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300); - --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); - --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900); - --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000); - --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); - --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); --system-search-border-color-default: var(--spectrum-gray-500); --system-search-border-color-hover: var(--spectrum-gray-600); --system-search-border-color-focus: var(--spectrum-gray-800); @@ -566,41 +342,9 @@ --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); --system-stepper-quiet-buttons-border-style: none; --system-stepper-quiet-button-edge-to-fill: 0; - --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200); - --system-swatch-border-thickness: var(--spectrum-border-width-100); - --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-opacity: 0.51; - --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--system-swatch-border-color-opacity)); - --system-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity)); - --system-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-light-opacity)); - --system-swatch-border-color-selected: var(--spectrum-gray-900); + --system-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity)); --system-swatch-inner-border-color-selected: var(--spectrum-gray-25); - --system-swatch-disabled-icon-color: var(--spectrum-gray-25); - --system-swatch-dash-icon-color: var(--spectrum-gray-800); - --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-swatch-size: var(--spectrum-swatch-size-medium); - --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); - --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); - --system-swatch-size-m-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); - --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var(--spectrum-workflow-icon-size-50); - --system-swatch-size-xs-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); - --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --system-swatch-size-s-slash-thickness: var(--spectrum-swatch-slash-thickness-small); - --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200); - --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-thickness-large); - --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); - --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); - --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); + --system-swatch-border-radius: var(--spectrum-corner-radius-75); --system-switch-handle-border-color-default: var(--spectrum-gray-600); --system-switch-handle-border-color-hover: var(--spectrum-gray-700); --system-switch-handle-border-color-down: var(--spectrum-gray-800); diff --git a/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css index a5bde1ea167..b1f7cbd9b0f 100644 --- a/tools/styles/tokens/express/system-theme-bridge.css +++ b/tools/styles/tokens/express/system-theme-bridge.css @@ -188,35 +188,9 @@ --system-clear-button-background-color-hover: var(--spectrum-gray-300); --system-clear-button-background-color-down: var(--spectrum-gray-400); --system-clear-button-background-color-key-focus: var(--spectrum-gray-300); - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); - --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); - --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); - --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); - --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); - --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); - --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); - --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); - --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color); - --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-background-color: transparent; + --system-clear-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); + --system-clear-button-static-white-background-color-down: var(--spectrum-transparent-white-400); + --system-clear-button-static-white-background-color-key-focus: var(--spectrum-transparent-white-300); --system-close-button-background-color-default: transparent; --system-close-button-background-color-hover: var(--spectrum-gray-300); --system-close-button-background-color-down: var(--spectrum-gray-400); @@ -227,64 +201,6 @@ --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-300); --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-400); --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-300); - --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); - --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); - --system-coach-indicator-inline-size: var(--system-coach-indicator-min-inline-size); - --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size); - --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); - --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); - --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size)); - --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size)); - --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; - --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --system-coach-indicator-animation-name: pulse; - --system-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple); - --system-coach-indicator-animation-keyframe-0-scale: 1; - --system-coach-indicator-animation-keyframe-0-opacity: 0; - --system-coach-indicator-animation-keyframe-50-scale: 1.5; - --system-coach-indicator-animation-keyframe-50-opacity: 1; - --system-coach-indicator-animation-keyframe-100-scale: 2; - --system-coach-indicator-animation-keyframe-100-opacity: 0; - --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - --system-coach-indicator-quiet-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); - --system-coach-indicator-quiet-animation-name: pulse-quiet; - --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); - --system-coach-mark-width: var(--spectrum-coach-mark-width); - --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); - --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); - --system-coach-mark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); - --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); - --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); - --system-coach-mark-header-to-body: var(--spectrum-spacing-200); - --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); - --system-coach-mark-title-color: var(--spectrum-heading-color); - --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-title-font-style: var(--spectrum-heading-serif-font-style); - --system-coach-mark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); - --system-coach-mark-title-text-line-height: var(--spectrum-heading-line-height); - --system-coach-mark-content-font-color: var(--spectrum-body-color); - --system-coach-mark-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-content-font-style: var(--spectrum-body-sans-serif-font-style); - --system-coach-mark-content-line-height: var(--spectrum-body-line-height); - --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); - --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); - --system-coach-mark-step-font-weight: var(--spectrum-body-medium-font-weight); - --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-step-font-style: var(--spectrum-body-sans-serif-font-style); - --system-coach-mark-step-line-height: var(--spectrum-body-line-height); - --system-coach-mark-step-font-size: var(--spectrum-coach-mark-pagination-body-size); - --system-coach-mark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); - --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); - --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100); - --system-coach-mark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); --system-color-wheel-border-color: var(--spectrum-transparent-black-200); --system-combobox-border-color-default: var(--spectrum-gray-400); --system-combobox-border-color-hover: var(--spectrum-gray-500); @@ -294,32 +210,10 @@ --system-combobox-readonly-input-border-color: var(--spectrum-gray-400); --system-combobox-background-color-disabled: var(--spectrum-disabled-background-color); --system-combobox-border-color-disabled: transparent; - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); - --system-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); - --system-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); - --system-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); - --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-close-button-size: var(--spectrum-component-height-100); - --system-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); --system-divider-background-color: var(--spectrum-gray-300); --system-divider-background-color-static-white: var(--spectrum-transparent-white-300); --system-divider-background-color-static-black: var(--spectrum-transparent-black-300); --system-drop-zone-border-color: var(--spectrum-gray-300); - --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: ","; --system-infield-button-border-width: 0; --system-infield-button-border-color: transparent; --system-infield-button-border-radius: var(--spectrum-corner-radius-75); @@ -339,23 +233,6 @@ --system-menu-item-focus-indicator-offset: 0; --system-menu-item-spacing-multiplier: 0; --system-menu-item-focus-indicator-outline-style: none; - --system-meter-min-width: var(--spectrum-meter-minimum-width); - --system-meter-max-width: var(--spectrum-meter-maximum-width); - --system-meter-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); - --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); - --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); - --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); - --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); - --system-meter-size-s-font-size: var(--spectrum-font-size-75); - --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); - --system-meter-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-top-to-text: var(--spectrum-component-top-to-text-200); --system-modal-background-color: var(--spectrum-gray-100); --system-picker-background-color-default: var(--spectrum-gray-200); --system-picker-background-color-default-open: var(--spectrum-gray-300); @@ -382,45 +259,8 @@ --system-picker-button-border-width: 0px; --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); --system-popover-border-width: 0; - --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); - --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); - --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-progress-bar-fill-size-indeterminate: 70%; - --system-progress-bar-size-2400: 192px; - --system-progress-bar-size-2500: 200px; - --system-progress-bar-size-2800: 224px; - --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); - --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); - --system-progress-bar-line-height: var(--spectrum-line-height-100); - --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); - --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); - --system-progress-bar-text-color: var(--spectrum-neutral-content-color-default); --system-progress-bar-track-color: var(--spectrum-gray-300); - --system-progress-bar-fill-color: var(--spectrum-accent-color-900); - --system-progress-bar-label-and-value-white: var(--spectrum-white); --system-progress-bar-track-color-white: var(--spectrum-transparent-white-300); - --system-progress-bar-fill-color-white: var(--spectrum-white); - --system-progress-bar-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); - --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-large); - --system-progress-bar-size-m-thickness: var(--spectrum-progress-bar-thickness-large); - --system-progress-bar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --system-progress-bar-size-m-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --system-progress-bar-size-s-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small); - --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --system-progress-bar-size-l-size-default: var(--system-progress-bar-size-2500); - --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); - --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large); - --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800); - --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); - --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large); - --system-progress-bar-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); --system-progress-circle-track-border-color: var(--spectrum-gray-300); --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); --system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900); @@ -428,69 +268,7 @@ --system-radio-button-border-color-hover: var(--spectrum-gray-900); --system-radio-button-border-color-down: var(--spectrum-gray-900); --system-radio-button-border-color-focus: var(--spectrum-gray-900); - --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); - --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); - --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); - --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); - --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); - --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); - --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); - --system-radio-border-width: var(--spectrum-border-width-200); - --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); - --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); - --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); - --system-radio-line-height: var(--spectrum-line-height-100); - --system-radio-animation-duration: var(--spectrum-animation-duration-100); - --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-height: var(--spectrum-component-height-100); - --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); - --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium); - --system-radio-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - --system-radio-font-size: var(--spectrum-font-size-100); - --system-radio-size-m-font-size: var(--spectrum-font-size-100); - --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small); - --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); - --system-radio-size-s-font-size: var(--spectrum-font-size-75); - --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large); - --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200); - --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); - --system-radio-size-l-font-size: var(--spectrum-font-size-200); - --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large); - --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300); - --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); - --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900); - --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000); - --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); - --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); + --system-radio-button-background-color: var(--spectrum-gray-75); --system-search-border-color-default: var(--spectrum-gray-400); --system-search-border-color-hover: var(--spectrum-gray-500); --system-search-border-color-focus: var(--spectrum-gray-800); @@ -565,41 +343,9 @@ --system-stepper-buttons-background-color-disabled: var(--spectrum-disabled-background-color); --system-stepper-quiet-buttons-border-style: none; --system-stepper-quiet-button-edge-to-fill: 0; - --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200); - --system-swatch-border-thickness: var(--spectrum-border-width-100); - --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-opacity: 0.51; - --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--system-swatch-border-color-opacity)); - --system-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity)); - --system-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-light-opacity)); - --system-swatch-border-color-selected: var(--spectrum-gray-900); + --system-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-swatch-border-color-opacity)); --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --system-swatch-disabled-icon-color: var(--spectrum-gray-50); - --system-swatch-dash-icon-color: var(--spectrum-gray-800); - --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-swatch-size: var(--spectrum-swatch-size-medium); - --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); - --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); - --system-swatch-size-m-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); - --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var(--spectrum-workflow-icon-size-50); - --system-swatch-size-xs-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); - --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --system-swatch-size-s-slash-thickness: var(--spectrum-swatch-slash-thickness-small); - --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200); - --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-thickness-large); - --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); - --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); - --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); + --system-swatch-border-radius: var(--spectrum-corner-radius-100); --system-switch-handle-border-color-default: var(--spectrum-gray-800); --system-switch-handle-border-color-hover: var(--spectrum-gray-900); --system-switch-handle-border-color-down: var(--spectrum-gray-900); diff --git a/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css index 2a1ab6eb9c9..b29f0d1160c 100644 --- a/tools/styles/tokens/spectrum/system-theme-bridge.css +++ b/tools/styles/tokens/spectrum/system-theme-bridge.css @@ -188,35 +188,9 @@ --system-clear-button-background-color-hover: transparent; --system-clear-button-background-color-down: transparent; --system-clear-button-background-color-key-focus: transparent; - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); - --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); - --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); - --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); - --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); - --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); - --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); - --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); - --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - --system-clear-button-disabled-icon-color: var(--spectrum-disabled-content-color); - --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-background-color: transparent; + --system-clear-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); + --system-clear-button-static-white-background-color-down: var(--spectrum-transparent-white-400); + --system-clear-button-static-white-background-color-key-focus: var(--spectrum-transparent-white-300); --system-close-button-background-color-default: transparent; --system-close-button-background-color-hover: var(--spectrum-gray-200); --system-close-button-background-color-down: var(--spectrum-gray-300); @@ -227,64 +201,6 @@ --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-300); --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-400); --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-300); - --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); - --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); - --system-coach-indicator-inline-size: var(--system-coach-indicator-min-inline-size); - --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size); - --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); - --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); - --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size)); - --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size)); - --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; - --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --system-coach-indicator-animation-name: pulse; - --system-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple); - --system-coach-indicator-animation-keyframe-0-scale: 1; - --system-coach-indicator-animation-keyframe-0-opacity: 0; - --system-coach-indicator-animation-keyframe-50-scale: 1.5; - --system-coach-indicator-animation-keyframe-50-opacity: 1; - --system-coach-indicator-animation-keyframe-100-scale: 2; - --system-coach-indicator-animation-keyframe-100-opacity: 0; - --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - --system-coach-indicator-quiet-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); - --system-coach-indicator-quiet-animation-name: pulse-quiet; - --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); - --system-coach-mark-width: var(--spectrum-coach-mark-width); - --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); - --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); - --system-coach-mark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); - --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); - --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); - --system-coach-mark-header-to-body: var(--spectrum-spacing-200); - --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); - --system-coach-mark-title-color: var(--spectrum-heading-color); - --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-title-font-style: var(--spectrum-heading-serif-font-style); - --system-coach-mark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); - --system-coach-mark-title-text-line-height: var(--spectrum-heading-line-height); - --system-coach-mark-content-font-color: var(--spectrum-body-color); - --system-coach-mark-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-content-font-style: var(--spectrum-body-sans-serif-font-style); - --system-coach-mark-content-line-height: var(--spectrum-body-line-height); - --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); - --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); - --system-coach-mark-step-font-weight: var(--spectrum-body-medium-font-weight); - --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-step-font-style: var(--spectrum-body-sans-serif-font-style); - --system-coach-mark-step-line-height: var(--spectrum-body-line-height); - --system-coach-mark-step-font-size: var(--spectrum-coach-mark-pagination-body-size); - --system-coach-mark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); - --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); - --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100); - --system-coach-mark-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); --system-color-wheel-border-color: var(--spectrum-transparent-black-200); --system-combobox-border-color-default: var(--spectrum-gray-500); --system-combobox-border-color-hover: var(--spectrum-gray-600); @@ -294,32 +210,10 @@ --system-combobox-readonly-input-border-color: var(--spectrum-gray-500); --system-combobox-background-color-disabled: var(--spectrum-disabled-background-color); --system-combobox-border-color-disabled: transparent; - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); - --system-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); - --system-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); - --system-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); - --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-close-button-size: var(--spectrum-component-height-100); - --system-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); --system-divider-background-color: var(--spectrum-gray-300); --system-divider-background-color-static-white: var(--spectrum-transparent-white-300); --system-divider-background-color-static-black: var(--spectrum-transparent-black-300); --system-drop-zone-border-color: var(--spectrum-gray-300); - --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: ","; --system-infield-button-border-width: var(--spectrum-border-width-100); --system-infield-button-border-color: inherit; --system-infield-button-border-radius: var(--spectrum-corner-radius-100); @@ -339,23 +233,6 @@ --system-menu-item-focus-indicator-offset: 0; --system-menu-item-spacing-multiplier: 0; --system-menu-item-focus-indicator-outline-style: none; - --system-meter-min-width: var(--spectrum-meter-minimum-width); - --system-meter-max-width: var(--spectrum-meter-maximum-width); - --system-meter-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); - --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); - --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); - --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); - --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); - --system-meter-size-s-font-size: var(--spectrum-font-size-75); - --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); - --system-meter-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-top-to-text: var(--spectrum-component-top-to-text-200); --system-modal-background-color: var(--spectrum-gray-100); --system-picker-background-color-default: var(--spectrum-gray-75); --system-picker-background-color-default-open: var(--spectrum-gray-200); @@ -382,45 +259,8 @@ --system-picker-button-border-width: var(--spectrum-border-width-100); --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); --system-popover-border-width: var(--spectrum-border-width-100); - --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); - --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); - --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-progress-bar-fill-size-indeterminate: 70%; - --system-progress-bar-size-2400: 192px; - --system-progress-bar-size-2500: 200px; - --system-progress-bar-size-2800: 224px; - --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); - --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); - --system-progress-bar-line-height: var(--spectrum-line-height-100); - --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); - --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); - --system-progress-bar-text-color: var(--spectrum-neutral-content-color-default); --system-progress-bar-track-color: var(--spectrum-gray-300); - --system-progress-bar-fill-color: var(--spectrum-accent-color-900); - --system-progress-bar-label-and-value-white: var(--spectrum-white); --system-progress-bar-track-color-white: var(--spectrum-transparent-white-300); - --system-progress-bar-fill-color-white: var(--spectrum-white); - --system-progress-bar-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); - --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-large); - --system-progress-bar-size-m-thickness: var(--spectrum-progress-bar-thickness-large); - --system-progress-bar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --system-progress-bar-size-m-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --system-progress-bar-size-s-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small); - --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --system-progress-bar-size-l-size-default: var(--system-progress-bar-size-2500); - --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); - --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large); - --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800); - --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); - --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large); - --system-progress-bar-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); --system-progress-circle-track-border-color: var(--spectrum-gray-300); --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); --system-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900); @@ -428,69 +268,7 @@ --system-radio-button-border-color-hover: var(--spectrum-gray-700); --system-radio-button-border-color-down: var(--spectrum-gray-800); --system-radio-button-border-color-focus: var(--spectrum-gray-700); - --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); - --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); - --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); - --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); - --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); - --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); - --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); - --system-radio-border-width: var(--spectrum-border-width-200); - --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); - --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); - --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); - --system-radio-line-height: var(--spectrum-line-height-100); - --system-radio-animation-duration: var(--spectrum-animation-duration-100); - --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-height: var(--spectrum-component-height-100); - --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); - --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium); - --system-radio-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - --system-radio-font-size: var(--spectrum-font-size-100); - --system-radio-size-m-font-size: var(--spectrum-font-size-100); - --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small); - --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); - --system-radio-size-s-font-size: var(--spectrum-font-size-75); - --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large); - --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200); - --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); - --system-radio-size-l-font-size: var(--spectrum-font-size-200); - --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large); - --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300); - --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); - --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900); - --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000); - --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); - --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); + --system-radio-button-background-color: var(--spectrum-gray-75); --system-search-border-color-default: var(--spectrum-gray-500); --system-search-border-color-hover: var(--spectrum-gray-600); --system-search-border-color-focus: var(--spectrum-gray-800); @@ -565,41 +343,9 @@ --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-100); --system-stepper-quiet-buttons-border-style: none; --system-stepper-quiet-button-edge-to-fill: 0; - --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200); - --system-swatch-border-thickness: var(--spectrum-border-width-100); - --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-opacity: 0.51; - --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--system-swatch-border-color-opacity)); - --system-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-opacity)); - --system-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--system-swatch-border-color-light-opacity)); - --system-swatch-border-color-selected: var(--spectrum-gray-900); + --system-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-swatch-border-color-opacity)); --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --system-swatch-disabled-icon-color: var(--spectrum-gray-50); - --system-swatch-dash-icon-color: var(--spectrum-gray-800); - --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-swatch-size: var(--spectrum-swatch-size-medium); - --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); - --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); - --system-swatch-size-m-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); - --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var(--spectrum-workflow-icon-size-50); - --system-swatch-size-xs-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); - --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --system-swatch-size-s-slash-thickness: var(--spectrum-swatch-slash-thickness-small); - --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200); - --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-thickness-large); - --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); - --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); - --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); + --system-swatch-border-radius: var(--spectrum-corner-radius-100); --system-switch-handle-border-color-default: var(--spectrum-gray-600); --system-switch-handle-border-color-hover: var(--spectrum-gray-700); --system-switch-handle-border-color-down: var(--spectrum-gray-800);