@viasat/beam-styles 2.36.0 → 2.37.0

package/components/dialog.module.scss

@@ -6,6 +6,9 @@
 
 $dialogBaseClass: '#{constants.$prefix}dialog';
 
+// Fluent 2 dialog motion duration (durationGentle).
+$dialog-motion-duration: 0.25s;
+
 $sizes: (
   'sm': tokens.$bm-comp-dialog-size-sm,
   'md': tokens.$bm-comp-dialog-size-md,
@@ -33,12 +36,46 @@ $appearances: (
   flex-direction: column;
   max-height: 100%;
 
+  // Fluent 2 surface motion: fade + scale, driven by FloatingUI's data-status.
+  // Enter uses a decelerate curve, exit an accelerate curve (durationGentle = 250ms).
+  // The backdrop scrim fades separately on the overlay (see floatingui.module.scss).
+  opacity: 0;
+  transform: scale(0.85);
+  transition:
+    opacity $dialog-motion-duration cubic-bezier(0.8, 0, 0.78, 1),
+    transform $dialog-motion-duration cubic-bezier(0.8, 0, 0.78, 1);
+
+  &[data-status='open'] {
+    opacity: 1;
+    transform: scale(1);
+    transition-timing-function: cubic-bezier(0, 0, 0, 1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
   @each $size, $sizeValue in $sizes {
     &--#{$size} {
       width: $sizeValue;
       max-width: $sizeValue;
     }
   }
+
+  // One-off structural variant: fills the overlay's padded, centered area so it keeps
+  // the standard viewport-offset gap and never touches the screen edge. Relies on the
+  // overlay's existing flex centering + padding (no overlay changes needed). Can't use
+  // the $sizes width map.
+  &--full {
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+  }
+
+  &--full &__body {
+    flex: 1;
+  }
 }
 
 .#{$dialogBaseClass}__header {

package/components/floatingui.module.scss

@@ -5,6 +5,9 @@
 
 $floatingBaseClass: '#{constants.$prefix}floatingui';
 
+// Fluent 2 dialog motion duration (durationGentle).
+$dialog-motion-duration: 0.25s;
+
 .#{$floatingBaseClass} {
   z-index: 999;
   position: absolute;
@@ -40,6 +43,25 @@ $floatingBaseClass: '#{constants.$prefix}floatingui';
       background: transparent;
     }
 
+    // Backdrop scrim fade (Fluent 2 "FadeRelaxed": durationGentle, curveEasyEase).
+    // Only the scrim's background-color animates — the overlay's own opacity stays 1 so
+    // it never compounds the surface's opacity (the surface fades + scales separately;
+    // see dialog.module.scss). The content's data-status drives the open/close state.
+    // Dialog-scoped via `.bm-dialog`, mirroring the `:has(.panel--contained)` pattern
+    // below. Keep duration in sync with transitionConfig in Dialog.tsx.
+    &:has(.#{constants.$prefix}dialog) {
+      background-color: transparent;
+      transition: background-color $dialog-motion-duration cubic-bezier(0.33, 0, 0.67, 1);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+
+    &:has(.#{constants.$prefix}dialog[data-status='open']) {
+      background-color: tokens.$bm-comp-dialog-color-overlay;
+    }
+
     // FloatingUI applies position:fixed as an inline style; !important is required to
     // override it when the backdrop is scoped inside a container (contained Panel).
     // Targets the Panel `--contained` modifier. If that modifier is renamed in

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-styles",
-  "version": "2.36.0",
+  "version": "2.37.0",
   "description": "SCSS modules and component styles for the Beam Design System",
   "license": "MIT",
   "author": "Viasat",

package/styles.css

@@ -6718,6 +6718,19 @@ textarea:focus-visible,
   display: flex;
   flex-direction: column;
   max-height: 100%;
+  opacity: 0;
+  transform: scale(0.85);
+  transition: opacity 0.25s cubic-bezier(0.8, 0, 0.78, 1), transform 0.25s cubic-bezier(0.8, 0, 0.78, 1);
+}
+.bm-dialog[data-status=open] {
+  opacity: 1;
+  transform: scale(1);
+  transition-timing-function: cubic-bezier(0, 0, 0, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .bm-dialog {
+    transition: none;
+  }
 }
 .bm-dialog--sm {
   width: var(--bm-comp-dialog-size-sm);
@@ -6735,6 +6748,15 @@ textarea:focus-visible,
   width: var(--bm-comp-dialog-size-xl);
   max-width: var(--bm-comp-dialog-size-xl);
 }
+.bm-dialog--full {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+}
+.bm-dialog--full .bm-dialog__body {
+  flex: 1;
+}
 
 .bm-dialog__header {
   font: var(--bm-comp-dialog-typo-heading);
@@ -7705,6 +7727,18 @@ textarea:focus-visible,
 .bm-floatingui__overlay--transparent {
   background: transparent;
 }
+.bm-floatingui__overlay:has(.bm-dialog) {
+  background-color: transparent;
+  transition: background-color 0.25s cubic-bezier(0.33, 0, 0.67, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .bm-floatingui__overlay:has(.bm-dialog) {
+    transition: none;
+  }
+}
+.bm-floatingui__overlay:has(.bm-dialog[data-status=open]) {
+  background-color: var(--bm-comp-dialog-color-overlay);
+}
 .bm-floatingui__overlay:has(.bm-panel--contained) {
   position: absolute !important;
   inset: 0;