feat(overlay): incorporate fallbacks to varstack; allow variable over…

…rides to inherit

components/commons/basebutton.css

@@ -11,67 +11,69 @@ governing permissions and limitations under the License.
 */
 
 %spectrum-BaseButton {
+ cursor: pointer;
+
+ /* stylelint-disable-next-line property-no-vendor-prefix -- need to validate if this can be removed */
+ -webkit-user-select: none;
+ user-select: none;
+
  /* Contain halo */
  position: relative;
 
+ /* Show the button overflow in Edge. */
+ overflow: visible;
  display: inline-flex;
- box-sizing: border-box;
-
  align-items: center;
  justify-content: center;
 
- /* Show the button overflow in Edge. */
- overflow: visible;
+ box-sizing: border-box;
 
  /* Remove button the margin in Firefox and Safari. */
  margin: 0;
 
- border-style: solid;
+ /* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */
+ font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
+
+ /* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */
+ line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
+ text-decoration: none;
+
 
  /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */
  text-transform: none;
- -webkit-font-smoothing: antialiased;
- /* Font smoothing for Firefox */
- -moz-osx-font-smoothing: grayscale;
-
- /* Correct the inability to style clickable types in iOS and Safari. */
- -webkit-appearance: button;
 
  /* Adjacent buttons should be aligned correctly */
  vertical-align: top;
 
- transition: background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
- border-color var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
- color var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
- box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
-
- /* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */
- font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
- text-decoration: none;
-
- /* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */
- line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
+ /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari. */
+ -webkit-appearance: button;
+ border-style: solid;
 
- user-select: none;
- -webkit-user-select: none;
+ 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;
 
- cursor: pointer;
+ -webkit-font-smoothing: antialiased;
 
- &:focus {
- outline: none;
- }
+ /* Font smoothing for Firefox */
+ -moz-osx-font-smoothing: grayscale;
 
  /* Fix Firefox */
  &::-moz-focus-inner {
+ /* Use uppercase PX so values don't get converted to rem */
+ margin-block-start: -2px;
+ margin-block-end: -2px;
+ padding: 0;
+
  border: 0;
 
  /* Remove the inner border and padding for button in Firefox. */
  border-style: none;
-  padding: 0;
+ }
 
- /* Use uppercase PX so values don't get converted to rem */
- margin-block-start: -2px;
- margin-block-end: -2px;
+ &:focus {
+ outline: none;
  }
 
  &:disabled,
@@ -81,42 +83,42 @@ governing permissions and limitations under the License.
 }
 
 %spectrum-ButtonIcon {
- max-block-size: 100%;
  flex-shrink: 0;
+ max-block-size: 100%;
 }
 
 %spectrum-ButtonWithFocusRing {
  &::after {
  content: "";
- display: block;
+
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
 
+ display: block;
+
  /* @deprecation --mod-focus-indicator-gap has been renamed and will be removed in a future version. */
  margin: calc(var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) * -1);
 
  /* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
- transition: opacity var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
- margin var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
+ transition: opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out,
+ margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out;
  }
 
- &:focus-visible {
- &::after {
- margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2);
- }
+ &:focus-visible::after {
+ margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2);
  }
 }
 
 
 %spectrum-AnchorButton {
- /* Remove appearance for clickable types in iOS and Safari. */
- -webkit-appearance: none;
-
  /* Make link text not selectable */
  user-select: none;
+
+ /* stylelint-disable-next-line property-no-vendor-prefix -- Remove appearance for clickable types in iOS and Safari. */
+ -webkit-appearance: none;
 }
 
 %spectrum-ButtonLabel {

components/commons/overlay.css

@@ -10,47 +10,42 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-%spectrum-overlay {
- /* TODO: replace with core tokens */
- --spectrum-overlay-animation-distance: 6px;
- --spectrum-overlay-animation-duration: var(--spectrum-animation-duration-100);
- --spectrum-overlay-animation-duration-opened: var(--spectrum-animation-duration-0);
+/* TODO: replace legacy animation variables with core tokens when available */
 
+/** @note used in modal, popover, quickaction, tooltip, underlay */
+%spectrum-overlay {
  pointer-events: none;
  visibility: hidden;
- opacity: 0;
- transition: transform var(--spectrum-overlay-animation-duration) ease-in-out,
- opacity var(--spectrum-overlay-animation-duration) ease-in-out,
- visibility 0ms linear var(--spectrum-overlay-animation-duration);
+ opacity: 0%;
+ transition: transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out,
+ opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out,
+ visibility 0ms linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms));
 }
 
+/** @note used in modal, popover, quickaction, tooltip, underlay */
 %spectrum-overlay--open {
  pointer-events: auto;
  visibility: visible;
- opacity: 100;
- transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-overlay-animation-duration-opened));
+ opacity: 100%;
+ transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0ms));
 }
 
+/** @note currently unused */
 %spectrum-overlay--bottom--open {
- --spectrum-overlay-animation-distance: 6px;
-
- transform: translateY(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance)));
+ transform: translateY(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px)));
 }
 
+/** @note currently unused */
 %spectrum-overlay--top--open {
- --spectrum-overlay-animation-distance: 6px;
-
- transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
+ transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))));
 }
 
+/** @note used in quickaction */
 %spectrum-overlay--right--open {
- --spectrum-overlay-animation-distance: 6px;
-
- transform: translateX(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance)));
+ transform: translateX(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px)));
 }
 
+/** @note used in quickaction */
 %spectrum-overlay--left--open {
- --spectrum-overlay-animation-distance: 6px;
-
- transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance))));
+ transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))));
 }

components/modal/metadata/mods.md

@@ -11,4 +11,5 @@
 | `--mod-modal-max-height` |
 | `--mod-modal-max-width` |
 | `--mod-modal-transition-animation-duration` |
+| `--mod-overlay-animation-duration` |
 | `--mod-overlay-animation-duration-opened` |

components/page/index.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:root {
+& {
  background-color: var(--spectrum-gray-100);
 
  /* Prevent tap highlights */

components/popover/metadata/mods.md

@@ -1,5 +1,6 @@
 | Modifiable custom properties |
 | --------------------------------------------- |
+| `--mod-overlay-animation-duration` |
 | `--mod-overlay-animation-duration-opened` |
 | `--mod-popover-animation-distance` |
 | `--mod-popover-background-color` |

components/quickaction/metadata/mods.md

@@ -1,4 +1,5 @@
 | Modifiable custom properties |
 | ----------------------------------------- |
 | `--mod-overlay-animation-distance` |
+| `--mod-overlay-animation-duration` |
 | `--mod-overlay-animation-duration-opened` |

components/tooltip/metadata/mods.md

@@ -1,5 +1,6 @@
 | Modifiable custom properties |
 | -------------------------------------------- |
+| `--mod-overlay-animation-duration` |
 | `--mod-overlay-animation-duration-opened` |
 | `--mod-tooltip-animation-distance` |
 | `--mod-tooltip-background-color-default` |

components/underlay/metadata/mods.md

@@ -1,5 +1,6 @@
 | Modifiable custom properties |
 | ---------------------------------------------------- |
+| `--mod-overlay-animation-duration` |
 | `--mod-overlay-animation-duration-opened` |
 | `--mod-underlay-background-color` |
 | `--mod-underlay-background-entry-animation-delay` |