remove animations from some components

packages/modal/src/spectrum-modal-wrapper.css

@@ -20,7 +20,6 @@ governing permissions and limitations under the License.
     visibility: hidden;
     pointer-events: none;
     z-index: 1;
-    transition: visibility 0s linear var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100));
     justify-content: center;
     align-items: center;
     display: flex;

packages/modal/src/spectrum-modal.css

@@ -22,7 +22,6 @@ governing permissions and limitations under the License.
 .modal {
     visibility: hidden;
     opacity: 0;
-    transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-dialog-confirm-entry-animation-distance)));
     z-index: 1;
     max-block-size: 90vh;
     max-block-size: var(--mod-modal-max-height, 90vh);
@@ -31,10 +30,6 @@ governing permissions and limitations under the License.
     background: var(--mod-modal-background-color, var(--spectrum-modal-background-color));
     border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-100));
     pointer-events: auto;
-    transition:
-        opacity var(--spectrum-modal-confirm-exit-animation-duration) var(--spectrum-animation-ease-in) var(--spectrum-modal-confirm-exit-animation-delay),
-        visibility var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)),
-        transform var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration));
     outline: none;
     overflow: hidden;
 }
@@ -43,9 +38,6 @@ governing permissions and limitations under the License.
     pointer-events: auto;
     visibility: visible;
     opacity: 1;
-    transition:
-        transform var(--spectrum-modal-confirm-entry-animation-duration) var(--spectrum-animation-ease-out) var(--spectrum-modal-confirm-entry-animation-delay),
-        opacity var(--spectrum-modal-confirm-entry-animation-duration) var(--spectrum-animation-ease-out) var(--spectrum-modal-confirm-entry-animation-delay);
     transform: translateY(0);
 }
 

packages/overlay/src/overlay.css

@@ -178,11 +178,6 @@ slot[name="longpress-describedby-descriptor"] {
 @supports (overlay: auto) {
     .dialog {
         display: none;
-        transition:
-            all var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)),
-            translate 0s,
-            display var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s));
-        transition-behavior: allow-discrete;
     }
 
     .dialog:popover-open {

packages/picker-button/src/spectrum-picker-button.css

@@ -145,7 +145,6 @@ governing permissions and limitations under the License.
     border-color: var(--mod-picker-button-border-color, var(--spectrum-picker-button-border-color));
     border-width: var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width));
     padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)) - var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width)));
-    transition: border-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out;
     border-style: solid;
     border-start-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));
     border-start-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius));

packages/picker/src/spectrum-picker.css

@@ -22,11 +22,6 @@ governing permissions and limitations under the License.
     text-transform: none;
     vertical-align: top;
     -webkit-appearance: button;
-    transition:
-        background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-        border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-        color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-        box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
     justify-content: center;
     align-items: center;
     margin: 0;
@@ -174,10 +169,6 @@ governing permissions and limitations under the License.
     block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size));
     border-width: var(--mod-picker-border-width, var(--spectrum-picker-border-width));
     border-radius: var(--mod-picker-border-radius, var(--spectrum-picker-border-radius));
-    transition:
-        background-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)),
-        box-shadow var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)),
-        border-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out;
     color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
     background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default)));
     border-style: solid;
@@ -302,7 +293,6 @@ governing permissions and limitations under the License.
 .label.placeholder {
     font-weight: var(--mod-picker-placeholder-font-weight, var(--spectrum-picker-font-weight));
     font-style: var(--mod-picker-placeholder-font-style, var(--spectrum-picker-placeholder-font-style));
-    transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out;
     color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
 }
 
@@ -312,7 +302,6 @@ governing permissions and limitations under the License.
 
 .picker {
     vertical-align: top;
-    transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out;
     margin-inline-start: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon));
     margin-block: var(--mod-picker-spacing-top-to-disclosure-icon, var(--spectrum-picker-spacing-top-to-disclosure-icon));
     color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default, var(--spectrum-picker-icon-color-default)));

packages/popover/src/spectrum-popover.css

@@ -15,22 +15,12 @@ governing permissions and limitations under the License.
     pointer-events: none;
     visibility: hidden;
     opacity: 0;
-    transition:
-        transform 0.13s ease-in-out,
-        opacity 0.13s ease-in-out,
-        visibility 0s linear 0.13s;
-    transition:
-        transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
-        opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
-        visibility 0s linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s));
 }
 
 :host([open]) {
     pointer-events: auto;
     visibility: visible;
     opacity: 1;
-    transition-delay: 0s;
-    transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s));
 }
 
 :host {

packages/tray/src/spectrum-tray.css

@@ -28,14 +28,6 @@ governing permissions and limitations under the License.
     box-sizing: border-box;
     border-radius: 0;
     border-radius: var(--mod-tray-corner-radius-portrait, 0) var(--mod-tray-corner-radius-portrait, 0) 0 0;
-    transition:
-        opacity var(--spectrum-tray-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) 0s,
-        visibility var(--spectrum-tray-exit-animation-duration) linear calc(var(--spectrum-tray-exit-animation-duration)),
-        transform var(--spectrum-tray-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) 0s;
-    transition:
-        opacity var(--spectrum-tray-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-tray-exit-animation-delay),
-        visibility var(--spectrum-tray-exit-animation-duration) linear calc(var(--spectrum-tray-exit-animation-delay) + var(--spectrum-tray-exit-animation-duration)),
-        transform var(--spectrum-tray-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-tray-exit-animation-delay);
     background-color: var(--spectrum-tray-background-color);
     outline: none;
     margin-block-start: var(--spectrum-tray-spacing-edge-to-tray-safe-zone);
@@ -46,9 +38,6 @@ governing permissions and limitations under the License.
 }
 
 :host([open]) .tray {
-    transition:
-        transform var(--spectrum-tray-entry-animation-duration) cubic-bezier(0, 0, 0.4, 1) var(--spectrum-tray-entry-animation-delay),
-        opacity var(--spectrum-tray-entry-animation-duration) cubic-bezier(0, 0, 0.4, 1) var(--spectrum-tray-entry-animation-delay);
     transform: translateY(0);
 }
 

packages/underlay/src/spectrum-underlay.css

@@ -24,9 +24,6 @@ governing permissions and limitations under the License.
     opacity: 0;
     background-color: var(--spectrum-underlay-background-color);
     z-index: 1;
-    transition:
-        opacity var(--spectrum-underlay-background-exit-animation-duration) var(--spectrum-underlay-background-exit-animation-ease) var(--spectrum-underlay-background-exit-animation-delay),
-        visibility 0s linear calc(var(--spectrum-underlay-background-exit-animation-delay) + var(--spectrum-underlay-background-exit-animation-duration));
     position: fixed;
     inset-block: 0;
     inset-inline: 0;
@@ -37,6 +34,4 @@ governing permissions and limitations under the License.
     pointer-events: auto;
     visibility: visible;
     opacity: 1;
-    transition: opacity var(--spectrum-underlay-background-entry-animation-duration) var(--spectrum-underlay-background-entry-animation-ease) var(--spectrum-underlay-background-entry-animation-delay);
-    transition-delay: var(--spectrum-underlay-background-entry-animation-delay);
 }