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

…rides to inherit
adobe · Jan 16, 2024 · 0c23d88 · 0c23d88
1 parent 2227b0d
commit 0c23d88
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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` |