@viasat/beam-styles 2.36.0 → 2.38.0

package/components/combobox.module.scss

@@ -4,6 +4,7 @@
 @use '../utils/mixins.scss' as mixins;
 @use '../utils/cursors.scss' as cursors;
 @use './icon.vars.scss' as iconVars;
+@use './input.vars.scss' as inputVars;
 
 @import '@viasat/beam-tokens/components/Input';
 
@@ -50,6 +51,8 @@ $stateStyleTokens: (
   #{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
   #{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
 
+  @include inputVars.field-size-scale;
+
   &--fluid {
     max-width: 100%;
   }
@@ -79,11 +82,11 @@ $stateStyleTokens: (
     position: relative;
     cursor: var(#{$comboboxCursor}, pointer);
     user-select: none;
-    font: tokens.$bm-comp-input-typo-default;
-    min-height: tokens.$bm-comp-input-size-field-md-height;
+    font: var(#{inputVars.$fieldFont});
+    min-height: var(#{inputVars.$fieldHeight});
     gap: tokens.$bm-comp-input-space-field-gap;
     #{iconVars.$iconColor}: tokens.$bm-comp-input-color-icon;
-    #{iconVars.$iconSize}: tokens.$bm-comp-input-size-field-icon;
+    #{iconVars.$iconSize}: var(#{inputVars.$fieldIconSize});
 
     &__chevron {
       position: absolute;
@@ -94,12 +97,11 @@ $stateStyleTokens: (
       @include mixins.svg-icon($expandIcon, $expandIconWidth $expandIconHeight);
       background-color: tokens.$bm-comp-input-color-icon;
       inset-inline-end: calc(
-        tokens.$bm-comp-input-space-field-x -
+        var(#{inputVars.$fieldPaddingX}) -
           (var(#{iconVars.$iconSize}) - $expandIconWidth) / 2
       );
       inset-block-start: calc(
-        tokens.$bm-comp-input-size-field-md-height / 2 - var(#{iconVars.$iconSize}) /
-          2
+        var(#{inputVars.$fieldHeight}) / 2 - var(#{iconVars.$iconSize}) / 2
       );
 
       transition: transform 0.2s ease;
@@ -119,26 +121,24 @@ $stateStyleTokens: (
       flex: 0 0 auto;
       gap: tokens.$bm-comp-input-space-field-gap;
       min-height: calc(
-        tokens.$bm-comp-input-size-field-md-height - 2 *
+        var(#{inputVars.$fieldHeight}) - 2 *
           tokens.$bm-comp-input-border-width-field-default - 2 *
-          tokens.$bm-comp-input-space-field-y
+          var(#{inputVars.$fieldPaddingY})
       );
       line-height: calc(
-        tokens.$bm-comp-input-size-field-md-height - 2 *
+        var(#{inputVars.$fieldHeight}) - 2 *
           tokens.$bm-comp-input-border-width-field-default - 2 *
-          tokens.$bm-comp-input-space-field-y
+          var(#{inputVars.$fieldPaddingY})
       );
     }
 
     &__input {
       background: transparent;
       min-height: calc(
-        tokens.$bm-comp-input-size-field-md-height - 2 *
-          tokens.$bm-comp-input-space-field-y
+        var(#{inputVars.$fieldHeight}) - 2 * var(#{inputVars.$fieldPaddingY})
       );
       line-height: calc(
-        tokens.$bm-comp-input-size-field-md-height - 2 *
-          tokens.$bm-comp-input-space-field-y
+        var(#{inputVars.$fieldHeight}) - 2 * var(#{inputVars.$fieldPaddingY})
       );
 
       &::placeholder {
@@ -171,6 +171,13 @@ $stateStyleTokens: (
       margin-block: calc(-1 * tokens.$bm-comp-input-border-width-field-default);
     }
 
+    // Beam icons in the content slots resize with the field; chips and the
+    // chevron are unaffected, per EPTOOLS-1515.
+    &__content-before,
+    &__content-after {
+      @include inputVars.field-content-icon;
+    }
+
     &__input {
       flex: 1;
       cursor: var(#{$comboboxInputCursor}, pointer);
@@ -181,7 +188,7 @@ $stateStyleTokens: (
       outline: 0;
       margin: 0;
       padding: 0;
-      font: tokens.$bm-comp-input-typo-default;
+      font: var(#{inputVars.$fieldFont});
 
       width: 100%;
       min-width: 3rem;
@@ -231,13 +238,13 @@ $stateStyleTokens: (
       tokens.$bm-sem-space-0
     );
 
-    padding-block: tokens.$bm-comp-input-space-field-y;
-    padding-inline: tokens.$bm-comp-input-space-field-x
+    padding-block: var(#{inputVars.$fieldPaddingY});
+    padding-inline: var(#{inputVars.$fieldPaddingX})
       calc(
-        #{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} + #{tokens.$bm-comp-input-space-field-x}
+        #{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} + var(#{inputVars.$fieldPaddingX})
       );
 
-    min-height: tokens.$bm-comp-input-size-field-md-height;
+    min-height: var(#{inputVars.$fieldHeight});
 
     &:focus-within {
       @include mixins.simulated-inset-outline(

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/components/input.vars.scss

@@ -0,0 +1,66 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+@use './icon.vars.scss' as iconVars;
+
+// Shared CSS custom-property names for the input field size scale. These are
+// deliberately distinct from the generic icon size var so a Beam `<Icon>` placed
+// in a field slot resizes with the field even when it carries its own size prop.
+$fieldHeight: '--#{constants.$prefix}input-field-height';
+$fieldPaddingX: '--#{constants.$prefix}input-field-padding-x';
+$fieldPaddingY: '--#{constants.$prefix}input-field-padding-y';
+$fieldFont: '--#{constants.$prefix}input-field-font';
+$fieldIconSize: '--#{constants.$prefix}input-field-icon-size';
+
+// Shared sm / md / lg size scale for every Beam input component (TextField,
+// NativeSelect, Select, Autocomplete, Search). md uses the existing input
+// component tokens; sm + lg use semantic tokens until the component tokens land.
+// TODO(EPTOOLS-1515): replace the sm/lg semantic tokens with
+// bm-comp-input-size-field-{sm,lg}-* component tokens once PR #1315 merges.
+$sizes: (
+  'sm': (
+    'height': tokens.$bm-sem-size-height-sm,
+    'padding-y': tokens.$bm-sem-space-25,
+    'padding-x': tokens.$bm-sem-space-75,
+    'icon': tokens.$bm-sem-size-icon-sm,
+    'font': tokens.$bm-sem-typo-compact-body-sm,
+  ),
+  'md': (
+    'height': tokens.$bm-comp-input-size-field-md-height,
+    'padding-y': tokens.$bm-comp-input-space-field-y,
+    'padding-x': tokens.$bm-comp-input-space-field-x,
+    'icon': tokens.$bm-comp-input-size-field-icon,
+    'font': tokens.$bm-comp-input-typo-default,
+  ),
+  'lg': (
+    'height': tokens.$bm-sem-size-height-lg,
+    'padding-y': tokens.$bm-sem-space-75,
+    'padding-x': tokens.$bm-sem-space-125,
+    'icon': tokens.$bm-comp-input-size-field-icon,
+    'font': tokens.$bm-comp-input-typo-default,
+  ),
+);
+// Emits the per-size field custom properties. Include inside an input
+// component's root block.
+@mixin field-size-scale {
+  @each $size, $props in $sizes {
+    &--#{$size} &__field {
+      #{$fieldHeight}: #{map.get($props, 'height')};
+      #{$fieldPaddingY}: #{map.get($props, 'padding-y')};
+      #{$fieldPaddingX}: #{map.get($props, 'padding-x')};
+      #{$fieldFont}: #{map.get($props, 'font')};
+      #{$fieldIconSize}: #{map.get($props, 'icon')};
+    }
+  }
+}
+
+// Resize rule for Beam icons (.bm-icon) inside an input content slot: they track
+// the field icon size via the dedicated var, which an Icon's own size prop cannot
+// shadow. Non-Beam (third-party) SVGs are left untouched. Include inside the
+// component's content-slot selector.
+@mixin field-content-icon {
+  .#{iconVars.$iconBaseClass} {
+    width: var(#{$fieldIconSize});
+    height: var(#{$fieldIconSize});
+  }
+}

package/components/nativeSelect.module.scss

@@ -3,6 +3,7 @@
 @use '../utils/tokens.scss' as tokens;
 @use '../utils/mixins.scss' as mixins;
 @use '../utils/cursors.scss' as cursors;
+@use './input.vars.scss' as inputVars;
 
 @import '@viasat/beam-tokens/components/Input';
 
@@ -46,6 +47,8 @@ $stateStyleTokens: (
   #{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
   #{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
 
+  @include inputVars.field-size-scale;
+
   &--fluid {
     max-width: 100%;
   }
@@ -69,9 +72,9 @@ $stateStyleTokens: (
 
       @include mixins.svg-icon($expandIcon);
       background-color: tokens.$bm-comp-input-color-icon;
-      inset-inline-end: tokens.$bm-comp-input-space-field-x;
+      inset-inline-end: var(#{inputVars.$fieldPaddingX});
       inset-block-start: calc(
-        #{tokens.$bm-comp-input-space-field-x} + #{$expandIconHeight} / 2
+        var(#{inputVars.$fieldPaddingX}) + #{$expandIconHeight} / 2
       );
     }
   }
@@ -110,21 +113,21 @@ $stateStyleTokens: (
     border-width: tokens.$bm-comp-input-border-width-field-default;
 
     color: tokens.$bm-comp-input-color-text;
-    font: tokens.$bm-comp-input-typo-default;
+    font: var(#{inputVars.$fieldFont});
     cursor: var(#{$selectInputCursor}, pointer);
     box-shadow: tokens.$bm-comp-input-shadow-field;
     background-color: tokens.$bm-comp-input-color-bg;
-    height: tokens.$bm-comp-input-size-field-md-height;
+    height: var(#{inputVars.$fieldHeight});
     transform: translate3d(
       tokens.$bm-sem-space-0,
       tokens.$bm-sem-space-0,
       tokens.$bm-sem-space-0
     );
 
-    padding-block: tokens.$bm-comp-input-space-field-y;
-    padding-inline: tokens.$bm-comp-input-space-field-x
+    padding-block: var(#{inputVars.$fieldPaddingY});
+    padding-inline: var(#{inputVars.$fieldPaddingX})
       calc(
-        #{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} + #{tokens.$bm-comp-input-space-field-x}
+        #{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} + var(#{inputVars.$fieldPaddingX})
       );
 
     &:focus {

package/components/search.module.scss

@@ -5,6 +5,7 @@
 @use '../utils/cursors.scss' as cursors;
 @use './icon.vars.scss' as iconVars;
 @use './actionList.vars.scss' as actionListVars;
+@use './input.vars.scss' as inputVars;
 
 @import '@viasat/beam-tokens/components/Input';
 
@@ -47,6 +48,8 @@ $stateStyleTokens: (
 
   #{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
 
+  @include inputVars.field-size-scale;
+
   &--fluid {
     max-width: 100%;
   }
@@ -59,11 +62,11 @@ $stateStyleTokens: (
     position: relative;
     cursor: var(#{$searchCursor}, pointer);
     user-select: none;
-    font: tokens.$bm-comp-input-typo-default;
-    min-height: tokens.$bm-comp-input-size-field-md-height;
+    font: var(#{inputVars.$fieldFont});
+    min-height: var(#{inputVars.$fieldHeight});
     gap: tokens.$bm-comp-input-space-field-gap;
     #{iconVars.$iconColor}: tokens.$bm-comp-input-color-icon;
-    #{iconVars.$iconSize}: tokens.$bm-comp-input-size-field-icon;
+    #{iconVars.$iconSize}: var(#{inputVars.$fieldIconSize});
 
     &__input {
       display: flex;
@@ -71,8 +74,12 @@ $stateStyleTokens: (
       flex: 0 0 auto;
       gap: tokens.$bm-comp-input-space-field-gap;
       background: transparent;
-      min-height: calc(tokens.$bm-comp-input-size-field-md-height - 2 * tokens.$bm-comp-input-space-field-y);
-      line-height: calc(tokens.$bm-comp-input-size-field-md-height - 2 * tokens.$bm-comp-input-space-field-y);
+      min-height: calc(
+        var(#{inputVars.$fieldHeight}) - 2 * var(#{inputVars.$fieldPaddingY})
+      );
+      line-height: calc(
+        var(#{inputVars.$fieldHeight}) - 2 * var(#{inputVars.$fieldPaddingY})
+      );
 
       &::-webkit-search-decoration,
       &::-webkit-search-cancel-button,
@@ -94,7 +101,7 @@ $stateStyleTokens: (
       outline: 0;
       margin: 0;
       padding: 0;
-      font: tokens.$bm-comp-input-typo-default;
+      font: var(#{inputVars.$fieldFont});
 
       width: 100%;
       min-width: $searchInputMinWidth;
@@ -148,10 +155,10 @@ $stateStyleTokens: (
       tokens.$bm-sem-space-0
     );
 
-    padding-block: tokens.$bm-comp-input-space-field-y;
-    padding-inline: tokens.$bm-comp-input-space-field-x;
+    padding-block: var(#{inputVars.$fieldPaddingY});
+    padding-inline: var(#{inputVars.$fieldPaddingX});
 
-    min-height: tokens.$bm-comp-input-size-field-md-height;
+    min-height: var(#{inputVars.$fieldHeight});
 
     &:focus-within {
       @include mixins.simulated-inset-outline(
@@ -179,6 +186,10 @@ $stateStyleTokens: (
       width: tokens.$bm-comp-input-size-field-icon;
       height: tokens.$bm-comp-input-size-field-icon;
     }
+
+    // Beam icons resize with the field; third-party SVGs keep the fixed size
+    // set above, per EPTOOLS-1515 acceptance criteria.
+    @include inputVars.field-content-icon;
   }
 
   &__dropdown {

package/components/textField.module.scss

@@ -3,6 +3,7 @@
 @use '../utils/mixins.scss' as mixins;
 @use '../utils/tokens.scss' as tokens;
 @use '../utils/cursors.scss' as cursors;
+@use './input.vars.scss' as inputVars;
 
 @import '@viasat/beam-tokens/components/Input';
 
@@ -44,6 +45,8 @@ $stateStyleTokens: (
   #{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
   #{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
 
+  @include inputVars.field-size-scale;
+
   @each $state, $styleTokens in $stateStyleTokens {
     &--#{$state} &__field {
       border-color: map.get($styleTokens, borderColor);
@@ -109,8 +112,8 @@ $stateStyleTokens: (
     gap: tokens.$bm-comp-input-space-field-gap;
     box-shadow: tokens.$bm-comp-input-shadow-field;
     background-color: tokens.$bm-comp-input-color-bg;
-    height: tokens.$bm-comp-input-size-field-md-height;
-    padding: tokens.$bm-comp-input-space-field-y tokens.$bm-comp-input-space-field-x;
+    height: var(#{inputVars.$fieldHeight});
+    padding: var(#{inputVars.$fieldPaddingY}) var(#{inputVars.$fieldPaddingX});
 
     &:focus-within {
       @include mixins.simulated-inset-outline(
@@ -130,7 +133,7 @@ $stateStyleTokens: (
     width: 100%;
     padding: tokens.$bm-sem-space-0;
     color: tokens.$bm-comp-input-color-text;
-    font: tokens.$bm-comp-input-typo-default;
+    font: var(#{inputVars.$fieldFont});
     cursor: var(#{$textFieldInputCursor}, text);
 
     &:-webkit-autofill {
@@ -138,7 +141,7 @@ $stateStyleTokens: (
       -webkit-text-fill-color: tokens.$bm-comp-input-color-text;
 
       @include mixins.simulated-inset-border(
-        tokens.$bm-comp-input-size-field-md-height,
+        var(#{inputVars.$fieldHeight}),
         tokens.$bm-comp-input-color-bg
       );
     }
@@ -158,5 +161,9 @@ $stateStyleTokens: (
       width: tokens.$bm-comp-input-size-field-icon;
       height: tokens.$bm-comp-input-size-field-icon;
     }
+
+    // Beam icons resize with the field; third-party SVGs keep the fixed size
+    // set above, per EPTOOLS-1515 acceptance criteria.
+    @include inputVars.field-content-icon;
   }
 }

package/package.json

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