From 0c23d884e287c548046618edb4447ee76a3aded2 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Tue, 16 Jan 2024 15:49:40 -0500 Subject: [PATCH] feat(overlay): incorporate fallbacks to varstack; allow variable overrides to inherit --- components/commons/overlay.css | 37 +++++++++++-------------- components/modal/metadata/mods.md | 1 + components/popover/metadata/mods.md | 1 + components/quickaction/metadata/mods.md | 1 + components/tooltip/metadata/mods.md | 1 + components/underlay/metadata/mods.md | 1 + 6 files changed, 21 insertions(+), 21 deletions(-) diff --git a/components/commons/overlay.css b/components/commons/overlay.css index d531803d234..097304d00d4 100644 --- a/components/commons/overlay.css +++ b/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); + 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)); + 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)))); } diff --git a/components/modal/metadata/mods.md b/components/modal/metadata/mods.md index c7790f2e75c..3cd142425fe 100644 --- a/components/modal/metadata/mods.md +++ b/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` | diff --git a/components/popover/metadata/mods.md b/components/popover/metadata/mods.md index 12e87266143..25cb283e785 100644 --- a/components/popover/metadata/mods.md +++ b/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` | diff --git a/components/quickaction/metadata/mods.md b/components/quickaction/metadata/mods.md index bc075725c2c..e733fcf96e1 100644 --- a/components/quickaction/metadata/mods.md +++ b/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` | diff --git a/components/tooltip/metadata/mods.md b/components/tooltip/metadata/mods.md index 91c5f3d1cda..7931ae66573 100644 --- a/components/tooltip/metadata/mods.md +++ b/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` | diff --git a/components/underlay/metadata/mods.md b/components/underlay/metadata/mods.md index deb3c029815..e66baf3d554 100644 --- a/components/underlay/metadata/mods.md +++ b/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` |