chore: update popover to use latest token patterns

src/dev/pages/button-toggle/button-toggle.scss

@@ -2,6 +2,10 @@
 @use '../../../lib/button-toggle/button-toggle';
 @use '../../../lib/core/styles/theme';
 
+section:not(:last-of-type) {
+  margin-block-end: 32px;
+}
+
 #toolbar-card {
   display: inline-block;
   --forge-card-padding: 0;
@@ -23,11 +27,14 @@
 .legacy-button-toggle-group {
   @include button-toggle-group.provide-theme((
     gap: 1px,
-    padding: 0
+    padding: 0,
+    outline-color: theme.variable(primary),
+    outline-color-active: theme.variable(primary)
   ));
 
   forge-button-toggle {
     @include button-toggle.provide-theme((
+      color: theme.variable(primary),
       selected-color: theme.variable(on-primary),
       selected-background: theme.variable(primary),
       focus-indicator-offset: 2px

src/lib/core/utils/position-utils.ts

@@ -26,7 +26,7 @@ export type PositionStrategy = Strategy;
 export interface IPositionElementResult {
   x: number;
   y: number;
-  visibility: 'visible' | 'hidden';
+  hidden: boolean;
   placement: PositionPlacement;
   arrow?: MiddlewareData['arrow'];
 }
@@ -133,14 +133,12 @@ export async function positionElementAsync({
   }
 
   const { x, y, placement: finalPlacement, middlewareData } = await computePosition(targetElement, element, { strategy, placement, middleware });
-  const visibility = middlewareData.hide?.referenceHidden ? 'hidden' : 'visible';
 
   // Should we apply the position information to the element?
   if (apply) {
     const styles: Partial<CSSStyleDeclaration> = {
       left: transform ? '0' : `${x}px`,
-      top: transform ? '0' : `${y}px`,
-      visibility
+      top: transform ? '0' : `${y}px`
     };
 
     if (transform) {
@@ -152,12 +150,19 @@ export async function positionElementAsync({
     }
 
     Object.assign(element.style, styles);
+
+    // We use `display` here to ensure that any child overlays are also hidden
+    if (middlewareData.hide?.referenceHidden) {
+      element.style.display = 'none';
+    } else {
+      element.style.removeProperty('display');
+    }
   }
 
   return {
     x,
     y,
-    visibility,
+    hidden: middlewareData.hide?.referenceHidden ?? false,
     placement: finalPlacement,
     arrow: middlewareData.arrow
   };
@@ -175,7 +180,7 @@ export const topLayerMiddleware = (): Middleware => ({
       const diffCoords = { x: 0, y: 0 };
 
       try {
-          onTopLayer = onTopLayer || floating.matches(':popover-open');
+        onTopLayer = onTopLayer || floating.matches(':popover-open');
       } catch {}
       try {
         onTopLayer = onTopLayer || floating.matches(':open');

src/lib/overlay/overlay-adapter.ts

@@ -4,7 +4,14 @@ import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 import { locateTargetHeuristic, replaceElement } from '../core/utils/utils';
 import { positionElementAsync } from '../core/utils/position-utils';
 import { IOverlayComponent } from './overlay';
-import { CAN_USE_POPOVER, IOverlayOffset, OverlayPlacement, OverlayPositionStrategy, OverlayToggleEvent, OVERLAY_CONSTANTS } from './overlay-constants';
+import {
+  CAN_USE_POPOVER,
+  IOverlayOffset,
+  OverlayPlacement,
+  OverlayPositionStrategy,
+  OverlayToggleEvent,
+  OVERLAY_CONSTANTS
+} from './overlay-constants';
 
 export interface IOverlayAdapter extends IBaseAdapter {
   setOpen(value: boolean): void;
@@ -67,7 +74,7 @@ export class OverlayAdapter extends BaseAdapter<IOverlayComponent> implements IO
 
       this._rootElement.style.removeProperty('top');
       this._rootElement.style.removeProperty('left');
-      this._rootElement.style.removeProperty('visibility');
+      this._rootElement.style.removeProperty('display');
       this._component.removeAttribute(OVERLAY_CONSTANTS.attributes.POSITION_PLACEMENT);
     }
   }
@@ -117,14 +124,16 @@ export class OverlayAdapter extends BaseAdapter<IOverlayComponent> implements IO
         this._component.setAttribute(OVERLAY_CONSTANTS.attributes.POSITION_PLACEMENT, result.placement);
       }
 
-      // Position our optional arrow element
+      // Position the optional arrow element
       if (this._component.arrowElement && result.arrow) {
         const { x: arrowX, y: arrowY } = result.arrow;
         const arrowLen = this._component.arrowElement.offsetWidth;
+        const { borderWidth = '0' } = getComputedStyle(this._component.arrowElement);
+        const arrowBoxAdjust = parseFloat(borderWidth);
         Object.assign(this._component.arrowElement.style, {
           top: arrowY != null ? `${arrowY}px` : '',
           left: arrowX != null ? `${arrowX}px` : '',
-          [staticSide as string]: `${-arrowLen / 2}px`
+          [staticSide as string]: `${(-arrowLen / 2) - arrowBoxAdjust}px`
         });
       }
     });
@@ -144,10 +153,7 @@ export class OverlayAdapter extends BaseAdapter<IOverlayComponent> implements IO
   }
 
   public addDialogLightDismissListener(listener: EventListener | (() => void)): void {
-    if (this._dialogLightDismissCleanup) {
-      this.removeDialogLightDismissListener();
-    }
-
+    this.removeDialogLightDismissListener?.();
     this._rootElement.addEventListener('cancel', listener);
 
     const backdropClickListener = ({ clientX, clientY }: PointerEvent): void => {
@@ -169,9 +175,7 @@ export class OverlayAdapter extends BaseAdapter<IOverlayComponent> implements IO
   }
 
   public addCustomLightDismissListener(listener: () => void): void {
-    if (this._lightDismissCleanup) {
-      this.removeCustomLightDismissListener();
-    }
+    this.removeCustomLightDismissListener?.();
     this._initializeLightDismiss(listener);
   }
 

src/lib/popover/_animations.scss

@@ -13,7 +13,7 @@
 @keyframes slidein {
   from {
     opacity: 0;
-    transform: translateX(var(--_slidein-x)) translateY(var(--_slidein-y));
+    transform: translateX(var(--_popover-slidein-x)) translateY(var(--_popover-slidein-y));
   }
 
   to {

src/lib/popover/_core.scss

@@ -1,54 +1,59 @@
-@use './variables';
-@use '../core/styles/utils';
-@use '../core/styles/tokens/popover/tokens';
+@use './token-utils' as *;
 
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, popover);
-}
+@forward './token-utils';
 
 @mixin base {
-  background-color: var(--_popover-background-color);
-  border-radius: var(--_popover-border-radius);
-  box-shadow: var(--_popover-box-shadow);
-  border: var(--_popover-border-width) var(--_popover-border-style) var(--_popover-border-color);
   position: relative;
+
+  background-color: #{token(background-color)};
+
+  border-radius: #{token(border-radius)};
+  box-shadow: #{token(box-shadow)};
+  border-width: #{token(border-width)};
+  border-style: #{token(border-style)};
+  border-color: #{token(border-color)};
 }
 
 @mixin arrow {
   position: absolute;
-  height: var(--_popover-arrow-height);
-  width: var(--_popover-arrow-width);
-  background-color: var(--_popover-arrow-background-color);
-  box-shadow: var(--_popover-box-shadow);
-  border: var(--_popover-border-width) var(--_popover-border-style) var(--_popover-border-color);
+
+  background-color: #{token(arrow-background-color)};
+
+  height: #{token(arrow-height)};
+  width: #{token(arrow-width)};
+  box-shadow: #{token(box-shadow)};
+  border-width: #{token(border-width)};
+  border-style: #{token(border-style)};
+  border-color: #{token(border-color)};
+
   transform: 
-    translate(var(--_popover-arrow-translate-x), var(--_popover-arrow-translate-y))
-    rotate(var(--_popover-arrow-rotation));
+    translate(#{token(arrow-translate-x, custom)}, #{token(arrow-translate-y, custom)})
+    rotate(#{token(arrow-rotation, custom)});
   clip-path: var(
     --_popover-arrow-clip-path,
     polygon(
-      calc(var(--_popover-border-width) * -1) calc(var(--_popover-border-width) * -1),
-      calc(100% + var(--_popover-border-width)) calc(var(--_popover-border-width) * -1),
-      calc(100% + var(--_popover-border-width)) calc(100% + var(--_popover-border-width))
+      calc(#{token(border-width)} * -1) calc(#{token(border-width)} * -1),
+      calc(100% + #{token(border-width)}) calc(#{token(border-width)} * -1),
+      calc(100% + #{token(border-width)}) calc(100% + #{token(border-width)})
     )
   );
 }
 
 @mixin zoom-base {
-  animation-duration: var(--_popover-zoom-duration);
-  animation-timing-function: var(--_popover-zoom-timing);
+  animation-duration: #{token(zoom-duration)};
+  animation-timing-function: #{token(zoom-timing)};
   animation-name: zoomin;
-  transform-origin: var(--_popover-zoomin-origin);
+  transform-origin: #{token(zoomin-origin, custom)};
 }
 
 @mixin slide-base {
-  animation-duration: var(--_popover-slide-duration);
-  animation-timing-function: var(--_popover-slide-timing);
+  animation-duration: #{token(slide-duration)};
+  animation-timing-function: #{token(slide-timing)};
   animation-name: slidein;
 }
 
 @mixin fade-base {
-  animation-duration: var(--_popover-fade-duration);
-  animation-timing-function: var(--_popover-fade-timing);
+  animation-duration: #{token(fade-duration)};
+  animation-timing-function: #{token(fade-timing)};
   animation-name: fadein;
 }

src/lib/popover/_token-utils.scss

@@ -0,0 +1,26 @@
+@use '../core/styles/utils';
+@use '../core/styles/tokens/popover/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: popover;
+$_tokens: tokens.$tokens;
+
+@mixin provide-theme($theme) {
+  @include token-utils.provide-theme($_module, $_tokens, $theme);
+}
+
+@function token($name, $type: token) {
+  @return token-utils.token($_module, $_tokens, $name, $type);
+}
+
+@function declare($token) {
+  @return token-utils.declare($_module, $token);
+}
+
+@mixin override($token, $token-or-value, $type: token) {
+  @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
+}
+
+@mixin tokens($includes: null, $excludes: null) {
+  @include token-utils.tokens($_module, $_tokens, $includes, $excludes);
+}

src/lib/popover/index.scss

@@ -0,0 +1 @@
+@forward './core';