@viasat/beam-styles 2.38.0 → 2.39.0

package/components/checkbox.module.scss

@@ -42,7 +42,7 @@ $checkboxStates: (
     display: inherit;
     word-break: break-word;
     color: tokens.$bm-comp-input-color-text;
-    font: tokens.$bm-comp-input-typo-default;
+    font: tokens.$bm-comp-input-typo-md;
     gap: tokens.$bm-comp-input-space-choice-gap-inside;
     cursor: var(#{$inputChoiceLabelCursor}, pointer);
   }

package/components/combobox.module.scss

@@ -175,6 +175,12 @@ $stateStyleTokens: (
     // chevron are unaffected, per EPTOOLS-1515.
     &__content-before,
     &__content-after {
+      svg,
+      ::slotted([slot*='content']) {
+        color: tokens.$bm-comp-input-color-icon;
+        height: tokens.$bm-primitive-dimension-100;
+      }
+
       @include inputVars.field-content-icon;
     }
 
@@ -241,7 +247,8 @@ $stateStyleTokens: (
     padding-block: var(#{inputVars.$fieldPaddingY});
     padding-inline: var(#{inputVars.$fieldPaddingX})
       calc(
-        #{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} + var(#{inputVars.$fieldPaddingX})
+        #{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} +
+          var(#{inputVars.$fieldPaddingX})
       );
 
     min-height: var(#{inputVars.$fieldHeight});

package/components/dateField.module.scss

@@ -85,9 +85,9 @@ $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-block: tokens.$bm-comp-input-space-field-y;
-    padding-inline: tokens.$bm-comp-input-space-field-x;
+    height: tokens.$bm-comp-input-size-field-height-md;
+    padding-block: tokens.$bm-comp-input-space-field-y-md;
+    padding-inline: tokens.$bm-comp-input-space-field-x-md;
 
     &:focus-within {
       @include mixins.simulated-inset-outline(
@@ -103,7 +103,7 @@ $stateStyleTokens: (
     display: inline-flex;
     align-items: baseline;
     color: tokens.$bm-comp-input-color-text;
-    font: tokens.$bm-comp-input-typo-default;
+    font: tokens.$bm-comp-input-typo-md;
     font-variant-numeric: tabular-nums;
     gap: tokens.$bm-sem-space-12;
   }
@@ -140,7 +140,7 @@ $stateStyleTokens: (
 
   &__field &__separator {
     color: tokens.$bm-comp-input-color-text;
-    font: tokens.$bm-comp-input-typo-default;
+    font: tokens.$bm-comp-input-typo-md;
     user-select: none;
   }
 }

package/components/input.vars.scss

@@ -19,25 +19,25 @@ $fieldIconSize: '--#{constants.$prefix}input-field-icon-size';
 // 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,
+    'height': tokens.$bm-comp-input-size-field-height-sm,
+    'padding-y': tokens.$bm-comp-input-space-field-y-sm,
+    'padding-x': tokens.$bm-comp-input-space-field-x-sm,
+    'icon': tokens.$bm-comp-input-size-field-icon-sm,
+    'font': tokens.$bm-comp-input-typo-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,
+    'height': tokens.$bm-comp-input-size-field-height-md,
+    'padding-y': tokens.$bm-comp-input-space-field-y-md,
+    'padding-x': tokens.$bm-comp-input-space-field-x-md,
+    'icon': tokens.$bm-comp-input-size-field-icon-md,
+    'font': tokens.$bm-comp-input-typo-md,
   ),
   '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,
+    'height': tokens.$bm-comp-input-size-field-height-lg,
+    'padding-y': tokens.$bm-comp-input-space-field-y-lg,
+    'padding-x': tokens.$bm-comp-input-space-field-x-lg,
+    'icon': tokens.$bm-comp-input-size-field-icon-lg,
+    'font': tokens.$bm-comp-input-typo-lg,
   ),
 );
 // Emits the per-size field custom properties. Include inside an input

package/components/nativeSelect.module.scss

@@ -127,7 +127,8 @@ $stateStyleTokens: (
     padding-block: var(#{inputVars.$fieldPaddingY});
     padding-inline: var(#{inputVars.$fieldPaddingX})
       calc(
-        #{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} + var(#{inputVars.$fieldPaddingX})
+        #{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} +
+          var(#{inputVars.$fieldPaddingX})
       );
 
     &:focus {

package/components/panel.module.scss

@@ -22,7 +22,7 @@ $panel-sizes: (
   display: flex;
   flex-direction: column;
 
-  background-color: tokens.$bm-sem-color-surface-01;
+  background-color: tokens.$bm-comp-panel-color-bg;
 
   &--inline {
     position: relative;
@@ -70,16 +70,31 @@ $panel-sizes: (
 
       $floating-positions: (
         'start': (
-          'x': ('left',),
-          'y': ('top', 'bottom'),
+          'x': (
+            'left',
+          ),
+          'y': (
+            'top',
+            'bottom',
+          ),
         ),
         'end': (
-          'x': ('right',),
-          'y': ('top', 'bottom'),
+          'x': (
+            'right',
+          ),
+          'y': (
+            'top',
+            'bottom',
+          ),
         ),
         'bottom': (
-          'x': ('left', 'right'),
-          'y': ('bottom',),
+          'x': (
+            'left',
+            'right',
+          ),
+          'y': (
+            'bottom',
+          ),
         ),
       );
 
@@ -308,9 +323,27 @@ $panel-sizes: (
 $panelResizeHandleSize: 0.75rem;
 
 $resize-handle-positions: (
-  'start':  (cursor: col-resize, size-prop: width,  stretch: inset-block,  placement: inset-inline-end,   border-side: inline-end),
-  'end':    (cursor: col-resize, size-prop: width,  stretch: inset-block,  placement: inset-inline-start, border-side: inline-start),
-  'bottom': (cursor: row-resize, size-prop: height, stretch: inset-inline, placement: inset-block-start,  border-side: block-start),
+  'start': (
+    cursor: col-resize,
+    size-prop: width,
+    stretch: inset-block,
+    placement: inset-inline-end,
+    border-side: inline-end,
+  ),
+  'end': (
+    cursor: col-resize,
+    size-prop: width,
+    stretch: inset-block,
+    placement: inset-inline-start,
+    border-side: inline-start,
+  ),
+  'bottom': (
+    cursor: row-resize,
+    size-prop: height,
+    stretch: inset-inline,
+    placement: inset-block-start,
+    border-side: block-start,
+  ),
 );
 
 @each $pos, $cfg in $resize-handle-positions {
@@ -337,11 +370,15 @@ $resize-handle-positions: (
   &[data-status='open'] {
     transition: $prop $duration ease-out;
     #{$prop}: $visible;
-    @media (prefers-reduced-motion: reduce) { transition: none; }
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
   &[data-status='close'] {
     transition: $prop $duration ease-in;
-    @media (prefers-reduced-motion: reduce) { transition: none; }
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 }
 
@@ -370,13 +407,17 @@ $resize-handle-positions: (
   &[data-status] {
     width: 0;
     transition: width $panel-transition-duration ease-in;
-    @media (prefers-reduced-motion: reduce) { transition: none; }
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &[data-status='open'] {
     width: var(#{$panelSizeVar}, #{tokens.$bm-comp-panel-size-md});
     transition: width $panel-transition-duration ease-out;
-    @media (prefers-reduced-motion: reduce) { transition: none; }
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &[data-position='bottom'][data-status] {
@@ -388,14 +429,18 @@ $resize-handle-positions: (
     .#{$panelBaseClass}__inline-wrapper-content {
     transform: translateY(100%);
     transition: transform $panel-transition-duration ease-in;
-    @media (prefers-reduced-motion: reduce) { transition: none; }
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &[data-position='bottom'][data-status='open']
     .#{$panelBaseClass}__inline-wrapper-content {
     transform: translateY(0);
     transition: transform $panel-transition-duration ease-out;
-    @media (prefers-reduced-motion: reduce) { transition: none; }
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 }
 

package/components/radioButton.module.scss

@@ -42,7 +42,7 @@ $radioButtonStates: (
     display: inherit;
     word-break: break-word;
     color: tokens.$bm-comp-input-color-text;
-    font: tokens.$bm-comp-input-typo-default;
+    font: tokens.$bm-comp-input-typo-md;
     gap: tokens.$bm-comp-input-space-choice-gap-inside;
     cursor: var(#{$inputChoiceLabelCursor}, pointer);
     pointer-events: var(#{$inputChoiceLabelPointerEvents}, auto);

package/components/search.module.scss

@@ -85,7 +85,7 @@ $stateStyleTokens: (
       &::-webkit-search-cancel-button,
       &::-webkit-search-results-button,
       &::-webkit-search-results-decoration {
-        -webkit-appearance:none;
+        -webkit-appearance: none;
       }
 
       &::placeholder {
@@ -108,7 +108,8 @@ $stateStyleTokens: (
     }
   }
 
-  &--disabled, &--disabled &__field {
+  &--disabled,
+  &--disabled &__field {
     #{$searchCursor}: not-allowed;
     #{$searchInputCursor}: not-allowed;
   }
@@ -183,8 +184,7 @@ $stateStyleTokens: (
     svg,
     ::slotted([slot*='content']) {
       color: tokens.$bm-comp-input-color-icon;
-      width: tokens.$bm-comp-input-size-field-icon;
-      height: tokens.$bm-comp-input-size-field-icon;
+      height: tokens.$bm-primitive-dimension-100;
     }
 
     // Beam icons resize with the field; third-party SVGs keep the fixed size

package/components/slider.module.scss

@@ -32,7 +32,7 @@ $sliderTransitionDuration: 0.05s;
   #{$sliderMinPercentage}: 0cqw;
   #{$sliderMaxPercentage}: 0cqw;
 
-  font: tokens.$bm-comp-input-typo-default;
+  font: tokens.$bm-comp-input-typo-md;
 
   &--disabled {
     #{$sliderCursor}: not-allowed;

package/components/switch.module.scss

@@ -42,7 +42,7 @@ $switchStates: (
     gap: tokens.$bm-comp-input-space-choice-gap-inside;
     min-width: tokens.$bm-comp-input-size-choice-switch-width;
     min-height: tokens.$bm-comp-input-size-choice-switch-height;
-    font: tokens.$bm-comp-input-typo-default;
+    font: tokens.$bm-comp-input-typo-md;
     color: tokens.$bm-comp-input-color-text;
     cursor: var(#{$inputChoiceLabelCursor}, pointer);
     pointer-events: var(#{$inputChoiceLabelPointerEvents}, auto);

package/components/textArea.module.scss

@@ -151,12 +151,12 @@ $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: tokens.$bm-comp-input-typo-md;
     cursor: var(#{$textAreaInputCursor}, text);
     box-shadow: tokens.$bm-comp-input-shadow-field;
     background-color: tokens.$bm-comp-input-color-bg;
     min-height: tokens.$bm-comp-input-size-field-text-area-height;
-    padding: tokens.$bm-comp-input-space-field-y tokens.$bm-comp-input-space-field-x;
+    padding: tokens.$bm-comp-input-space-field-y-md tokens.$bm-comp-input-space-field-x-md;
     transform: translate3d(
       tokens.$bm-sem-space-0,
       tokens.$bm-sem-space-0,

package/components/textField.module.scss

@@ -158,8 +158,7 @@ $stateStyleTokens: (
     svg,
     ::slotted([slot*='content']) {
       color: tokens.$bm-comp-input-color-icon;
-      width: tokens.$bm-comp-input-size-field-icon;
-      height: tokens.$bm-comp-input-size-field-icon;
+      height: tokens.$bm-primitive-dimension-100;
     }
 
     // Beam icons resize with the field; third-party SVGs keep the fixed size

package/package.json

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