@viasat/beam-styles 2.0.0

package/components/fileUpload.module.scss

@@ -0,0 +1,282 @@
+@use 'sass:map';
+@use 'sass:math';
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+@use '../utils/stateLayerVars.scss' as stateLayerVars;
+
+@import '../../../../tokens/src/lib/components/FileUpload';
+
+$fileUploadBaseClass: '#{constants.$prefix}file-upload';
+$fileUploadListBaseClass: '#{constants.$prefix}file-upload-list';
+$fileUploadListItemBaseClass: '#{constants.$prefix}file-upload-list-item';
+$fileUploadDropzoneBaseClass: '#{constants.$prefix}file-upload-dropzone';
+$fileUploadButtonBaseClass: '#{constants.$prefix}file-upload-button';
+
+.#{$fileUploadBaseClass} {
+  display: flex;
+  flex-direction: column;
+  gap: tokens.$bm-sem-space-100;
+  max-width: tokens.$bm-comp-input-size-field-width;
+  width: 100%;
+
+  &--fluid {
+    max-width: none;
+  }
+
+  &__uploader {
+    display: flex;
+    gap: 0;
+    flex-direction: column;
+  }
+}
+
+.#{$fileUploadListBaseClass} {
+  display: flex;
+  flex-direction: column;
+  gap: tokens.$bm-sem-space-50;
+}
+
+.#{$fileUploadListItemBaseClass} {
+  $root: &;
+
+  box-sizing: border-box;
+  display: flex;
+  border-radius: tokens.$bm-comp-file-upload-radius-file;
+  min-height: tokens.$bm-comp-file-upload-size-file-md-height;
+  padding: tokens.$bm-comp-file-upload-space-file-md-y
+    tokens.$bm-comp-file-upload-space-file-x;
+  gap: tokens.$bm-comp-file-upload-space-file-gap;
+  align-items: center;
+  background: tokens.$bm-comp-file-upload-color-file-bg;
+  position: relative;
+  overflow: hidden;
+
+  &--uploading,
+  &--uploaded,
+  &--success {
+    display: flex;
+  }
+
+  &--error {
+    align-items: flex-start;
+    outline: tokens.$bm-sem-border-width-lg solid
+      tokens.$bm-sem-color-border-negative-strong;
+  }
+
+  &--lg {
+    min-height: tokens.$bm-comp-file-upload-size-file-lg-height;
+    padding: tokens.$bm-comp-file-upload-space-file-lg-y
+      tokens.$bm-comp-file-upload-space-file-x;
+  }
+
+  &__thumbnail {
+    display: flex;
+
+    width: tokens.$bm-comp-file-upload-size-file-md-thumbnail;
+    height: tokens.$bm-comp-file-upload-size-file-md-thumbnail;
+
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: tokens.$bm-comp-file-upload-radius-thumbnail;
+    background-color: tokens.$bm-sem-color-surface-highlight;
+    overflow: hidden;
+
+    #{$root}--lg & {
+      width: tokens.$bm-comp-file-upload-size-file-lg-thumbnail;
+      height: tokens.$bm-comp-file-upload-size-file-lg-thumbnail;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: row;
+    gap: tokens.$bm-comp-file-upload-space-file-gap-inner;
+    min-width: 0;
+
+    #{$root}--lg &,
+    #{$root}--error & {
+      align-items: flex-start;
+    }
+  }
+
+  &__content-start {
+    display: flex;
+    align-items: center;
+    gap: tokens.$bm-comp-file-upload-space-file-gap-inner;
+    flex: 1 0 0;
+    flex-direction: row;
+    min-width: 0;
+
+    #{$root}--lg &,
+    #{$root}--error & {
+      gap: 0;
+      flex-direction: column;
+      align-items: flex-start;
+      flex: 1;
+    }
+  }
+
+  &__content-end {
+    display: flex;
+    gap: tokens.$bm-comp-file-upload-space-file-gap-inner;
+    align-items: center;
+  }
+
+  &__filename {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    color: tokens.$bm-comp-file-upload-color-file-name;
+    font: tokens.$bm-comp-file-upload-typo-file;
+
+    margin: 0;
+    padding: 0;
+
+    max-width: 100%;
+  }
+
+  &__size {
+    flex-shrink: 0;
+
+    color: tokens.$bm-comp-file-upload-color-file-detail;
+    font: tokens.$bm-comp-file-upload-typo-file;
+
+    margin: 0;
+    padding: 0;
+
+    #{$root}--error & {
+      display: none;
+    }
+  }
+
+  &__status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    & bm-icon {
+      display: flex;
+    }
+  }
+
+  &__remove {
+    display: flex;
+  }
+
+  &__progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  &__error {
+    --bm-comp-helper-text-space-top: 0;
+  }
+}
+
+.#{$fileUploadDropzoneBaseClass} {
+  $root: &;
+
+  position: relative;
+  display: flex;
+  padding: tokens.$bm-comp-file-upload-space-dropzone-md-y
+    tokens.$bm-comp-file-upload-space-dropzone-x;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: tokens.$bm-comp-file-upload-space-dropzone-gap;
+  flex-shrink: 0;
+
+  border-radius: tokens.$bm-comp-file-upload-radius-dropzone;
+  background: tokens.$bm-comp-file-upload-color-dropzone-bg;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &--dragging:not(&--disabled) {
+    background: tokens.$bm-comp-file-upload-color-dropzone-bg-drag;
+  }
+
+  &--disabled {
+    opacity: tokens.$bm-sem-opacity-disabled;
+  }
+
+  &:not(&--disabled) {
+    cursor: pointer;
+  }
+
+  &__state-layer.#{stateLayerVars.$stateLayerBaseClass} {
+    #{stateLayerVars.$opacity}: 1;
+    #{stateLayerVars.$outline-style}: dashed;
+    #{stateLayerVars.$outline-offset}: calc(
+      -1 * #{tokens.$bm-comp-file-upload-border-width-dropzone-default}
+    );
+    #{stateLayerVars.$outline-color}: #{tokens.$bm-comp-file-upload-color-dropzone-border};
+    #{stateLayerVars.$outline-width}: #{tokens.$bm-comp-file-upload-border-width-dropzone-default};
+
+    *:focus-within > & {
+      #{stateLayerVars.$outline-offset}: 0;
+      #{stateLayerVars.$outline-style}: solid;
+      #{stateLayerVars.$outline-color}: #{tokens.$bm-sem-color-border-focus};
+      #{stateLayerVars.$outline-width}: #{tokens.$bm-sem-border-width-focus};
+    }
+
+    #{$root}--dragging:not(#{$root}--disabled) > & {
+      #{stateLayerVars.$outline-color}: #{tokens.$bm-comp-file-upload-color-dropzone-border-drag};
+      #{stateLayerVars.$outline-width}: #{tokens.$bm-comp-file-upload-border-width-dropzone-drag};
+      #{stateLayerVars.$outline-style}: solid;
+      #{stateLayerVars.$background}: transparent;
+    }
+
+    #{$root}--disabled > &,
+    *:disabled > & {
+      #{stateLayerVars.$background}: transparent;
+      #{stateLayerVars.$opacity}: 1;
+    }
+
+    #{$root}--error > & {
+      #{stateLayerVars.$outline-color}: #{tokens.$bm-comp-input-color-border-error};
+      #{stateLayerVars.$outline-width}: #{tokens.$bm-comp-input-border-width-field-error};
+      #{stateLayerVars.$outline-offset}: calc(
+        -1 * #{tokens.$bm-comp-input-border-width-field-error}
+      );
+      #{stateLayerVars.$outline-style}: dashed;
+    }
+  }
+
+  &__icon {
+    color: tokens.$bm-comp-file-upload-color-dropzone-icon;
+    z-index: 1;
+
+    #{$root}--dragging:not(#{$root}--disabled) & {
+      color: tokens.$bm-comp-file-upload-color-dropzone-icon-drag;
+    }
+  }
+
+  &__text {
+    color: tokens.$bm-comp-file-upload-color-dropzone-text;
+    text-align: center;
+    font: tokens.$bm-comp-file-upload-typo-dropzone;
+    z-index: 1;
+  }
+
+  &__link {
+    color: tokens.$bm-sem-color-link-primary;
+
+    #{$root}:is(:hover, #{$root}--dragging):not(:disabled, #{$root}--disabled) & {
+      text-decoration: underline;
+    }
+  }
+}

package/components/flag.module.scss

@@ -0,0 +1,11 @@
+@use '../utils/constants.scss';
+
+$flagBaseClass: '#{constants.$prefix}flag';
+
+.#{$flagBaseClass} {
+  &--clickable { cursor: pointer; }
+  &--inline { display: inline; }
+  &--inline-block { display: inline-block; }
+  &--block { display: block; }
+  &--none { display: none; }
+}

package/components/floatingui.module.scss

@@ -0,0 +1,40 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+
+$floatingBaseClass: '#{constants.$prefix}floatingui';
+
+.#{$floatingBaseClass} {
+  z-index: 999;
+  position: absolute;
+  // unset popover api styles
+  // https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#styling_popovers
+  inset: unset;
+  top: 0;
+  left: 0;
+  width: max-content;
+  overflow: unset;
+  border: unset;
+
+  &__arrow {
+    position: absolute;
+    // to allow the beak to be positioned correctly
+    transform-origin: bottom center;
+  }
+
+  &__overlay {
+    background: tokens.$bm-comp-dialog-color-overlay;
+    padding: tokens.$bm-comp-dialog-space-viewport-offset;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    z-index: 1;
+
+    &--transparent {
+      background: transparent;
+    }
+  }
+}

package/components/header.module.scss

@@ -0,0 +1,123 @@
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/Header';
+
+$headerBaseClass: '#{constants.$prefix}header';
+$headerHeight: tokens.$bm-comp-header-size-height;
+// $desktopBreakpoint: tokens.$bm-sem-size-breakpoint-xl;
+$desktopBreakpoint: 1200px; // TODO: Replace by token when it is available
+
+.#{$headerBaseClass} {
+  display: flex;
+  z-index: 2;
+
+  border-bottom: tokens.$bm-sem-border-width-md solid
+    tokens.$bm-comp-header-color-border;
+  background: tokens.$bm-comp-header-color-bg;
+  padding-inline: tokens.$bm-comp-header-space-x;
+  height: $headerHeight;
+
+  &__menu-button-container {
+    display: flex;
+    align-items: center;
+    padding-inline-start: tokens.$bm-sem-space-25;
+
+    .#{$headerBaseClass}__menu-button {
+      margin-inline-end: tokens.$bm-comp-header-space-gap;
+      height: fit-content;
+
+      [dir='rtl'] & {
+        transform: unset;
+      }
+
+      @media screen and (min-width: $desktopBreakpoint) {
+        [dir='rtl'] & {
+          transform: rotateX(180deg) rotateY(180deg);
+        }
+      }
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    gap: tokens.$bm-comp-header-space-gap;
+    align-items: center;
+  }
+
+  &__nav-container {
+    display: flex;
+    flex: 1;
+
+    &--mobile-enabled {
+      @media screen and (max-width: calc(#{$desktopBreakpoint} - 1px)) {
+        display: none;
+      }
+    }
+  }
+
+  &__masthead {
+    display: flex;
+    gap: tokens.$bm-sem-space-25;
+    text-decoration: none;
+    margin: #{tokens.$bm-sem-space-50} 0;
+    width: fit-content;
+
+    &:focus-visible {
+      @include mixins.simulated-inset-outline();
+      border-radius: tokens.$bm-sem-radius-focus-md;
+    }
+
+    &--content {
+      display: flex;
+      align-items: center;
+      gap: tokens.$bm-sem-space-25;
+    }
+
+    &--content:has(&--signal) {
+      gap: tokens.$bm-sem-space-75;
+    }
+
+    &--logo {
+      padding-bottom: tokens.$bm-sem-space-75;
+    }
+
+    @media screen and (max-width: $desktopBreakpoint) {
+      padding-inline-start: unset;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: tokens.$bm-comp-header-space-actions-gap;
+  }
+
+  &__menu-button-icon__mobile,
+  &__menu-button-icon__desktop {
+    display: block;
+  }
+}
+
+.#{constants.$prefix}button__icon-wrap svg {
+  &.#{$headerBaseClass} {
+    &__menu-button-icon {
+      &__mobile {
+        display: block;
+        @media screen and (min-width: $desktopBreakpoint) {
+          display: none;
+        }
+      }
+
+      &__desktop {
+        display: none;
+        @media screen and (min-width: $desktopBreakpoint) {
+          display: block;
+        }
+      }
+    }
+  }
+}

package/components/helperText.module.scss

@@ -0,0 +1,86 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/HelperText';
+
+$helperTextBaseClass: '#{constants.$prefix}helper-text';
+
+$spaceTop: '--#{constants.$prefix}comp-helper-text-space-top';
+
+$sizes: (
+  sm: (
+    message: tokens.$bm-comp-helper-text-typo-sm,
+    icon: tokens.$bm-comp-helper-text-size-sm-icon,
+  ),
+  md: (
+    message: tokens.$bm-comp-helper-text-typo-md,
+    icon: tokens.$bm-comp-helper-text-size-md-icon,
+  ),
+);
+
+$colors: (
+  info: (
+    icon: tokens.$bm-comp-helper-text-color-info-icon,
+    message: tokens.$bm-comp-helper-text-color-info-text,
+  ),
+  warning: (
+    icon: tokens.$bm-comp-helper-text-color-warning-icon,
+    message: tokens.$bm-comp-helper-text-color-warning-text,
+  ),
+  positive: (
+    icon: tokens.$bm-comp-helper-text-color-positive-icon,
+    message: tokens.$bm-comp-helper-text-color-positive-text,
+  ),
+  negative: (
+    icon: tokens.$bm-comp-helper-text-color-negative-icon,
+    message: tokens.$bm-comp-helper-text-color-negative-text,
+  ),
+  disabled: (
+    icon: tokens.$bm-comp-helper-text-color-info-icon,
+    message: tokens.$bm-comp-helper-text-color-info-text,
+  ),
+);
+
+.#{$helperTextBaseClass} {
+  display: flex;
+  gap: tokens.$bm-comp-helper-text-space-gap;
+  margin-top: var(#{$spaceTop}, tokens.$bm-sem-space-0);
+
+  @each $size, $sizeValue in $sizes {
+    &--#{$size} &__message {
+      font: map.get($sizeValue, 'message');
+    }
+
+    &--#{$size} {
+      svg,
+      ::slotted([slot='icon']) {
+        width: map.get($sizeValue, 'icon');
+        height: map.get($sizeValue, 'icon');
+      }
+    }
+  }
+
+  @each $appearance, $color in $colors {
+    &--#{$appearance} &__message {
+      color: map.get($color, 'message');
+    }
+
+    &--#{$appearance} {
+      svg,
+      ::slotted([slot='icon']) {
+        color: map.get($color, 'icon');
+      }
+    }
+  }
+
+  &--disabled {
+    opacity: tokens.$bm-sem-opacity-disabled;
+  }
+
+  svg,
+  ::slotted([slot='icon']) {
+    flex-shrink: tokens.$bm-sem-space-0;
+    margin-top: tokens.$bm-sem-space-12;
+  }
+}

package/components/icon.module.scss

@@ -0,0 +1,46 @@
+@use 'sass:map';
+@use '../utils/tokens.scss' as tokens;
+@use './icon.vars.scss' as vars;
+
+%icon-rendering-preset {
+  -webkit-font-feature-settings: 'liga';
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.#{vars.$iconBaseClass} {
+  @extend %icon-rendering-preset;
+  #{vars.$iconColor}: inherit;
+  box-sizing: border-box !important;
+  font-weight: normal;
+  font-style: normal;
+  fill: currentColor;
+  font-size: var(#{vars.$iconSize}, tokens.$bm-sem-size-icon-md);
+  width: var(#{vars.$iconSize}, tokens.$bm-sem-size-icon-md);
+  height: var(#{vars.$iconSize}, tokens.$bm-sem-size-icon-md);
+  color: var(#{vars.$iconColor});
+  vertical-align: middle;
+
+  line-height: inherit;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+
+  @each $color, $value in vars.$iconColors {
+    &--#{$color} {
+      #{vars.$iconColor}: #{$value};
+    }
+  }
+
+  @each $size, $value in vars.$iconSizes {
+    &--#{$size} {
+      #{vars.$iconSize}: #{$value};
+    }
+  }
+
+  &--clickable {
+    cursor: pointer;
+  }
+}

package/components/icon.vars.scss

@@ -0,0 +1,31 @@
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+
+$iconBaseClass: '#{constants.$prefix}icon';
+$iconSize: '--#{constants.$prefix}comp-icon-size';
+$iconColor: '--#{constants.$prefix}comp-icon-color';
+
+$iconColors: (
+  'primary': tokens.$bm-sem-color-icon-primary,
+  'secondary': tokens.$bm-sem-color-icon-secondary,
+  'positive': tokens.$bm-sem-color-icon-positive,
+  'warning': tokens.$bm-sem-color-icon-warning,
+  'negative': tokens.$bm-sem-color-icon-negative,
+  'infoPrimary': tokens.$bm-sem-color-icon-info-primary,
+  'infoSecondary': tokens.$bm-sem-color-icon-info-secondary,
+  'positiveStrong': tokens.$bm-sem-color-icon-positive-strong,
+  'warningStrong': tokens.$bm-sem-color-icon-warning-strong,
+  'negativeStrong': tokens.$bm-sem-color-icon-negative-strong,
+  'infoPrimaryStrong': tokens.$bm-sem-color-icon-info-primary-strong,
+  'infoSecondaryStrong': tokens.$bm-sem-color-icon-info-secondary-strong,
+  'primaryInverse': tokens.$bm-sem-color-icon-primary-inverse,
+  'secondaryInverse': tokens.$bm-sem-color-icon-secondary-inverse,
+);
+
+$iconSizes: (
+  'xs': tokens.$bm-sem-size-icon-xs,
+  'sm': tokens.$bm-sem-size-icon-sm,
+  'md': tokens.$bm-sem-size-icon-md,
+  'lg': tokens.$bm-sem-size-icon-lg,
+  'xl': tokens.$bm-sem-size-icon-xl,
+);

package/components/index.scss

@@ -0,0 +1,40 @@
+// Component Styles
+@use './accordion.module.scss';
+@use './actionList.module.scss';
+@use './alert.module.scss';
+@use './badge.module.scss';
+@use './badgeDot.module.scss';
+@use './box.module.scss';
+@use './button.module';
+@use './breadcrumbs.module';
+@use './checkbox.module.scss';
+@use './chip.module.scss';
+@use './chipsGroup.module';
+@use './closeButton.module.scss';
+@use './dialog.module.scss';
+@use './divider.module.scss';
+@use './emptyState.module.scss';
+@use './fileUpload.module.scss';
+@use './flag.module.scss';
+@use './helperText.module.scss';
+@use './inputChoiceGroup.module';
+@use './label.module.scss';
+@use './link.module.scss';
+@use './logo.module.scss';
+@use './pageLayout.module.scss';
+@use './popover.module.scss';
+@use './progressBar.module';
+@use './radioButton.module.scss';
+@use './segmentedControl.module';
+@use './nativeSelect.module';
+@use './sideNav.module.scss';
+@use './switch.module.scss';
+@use './text.module.scss';
+@use './textField.module.scss';
+@use './toast.module.scss';
+@use './toastContainer.module.scss';
+@use './tooltip.module.scss';
+@use './tabs.module';
+
+// State Layer Styles
+@use '../utils/stateLayer.module.scss';

package/components/inputChoiceGroup.module.scss

@@ -0,0 +1,46 @@
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/Input';
+
+$inputChoiceGroupBaseClass: '#{constants.$prefix}input-choice-group';
+
+$labelSpaceBottom: '--#{constants.$prefix}label-space-bottom';
+$helperTextSpaceTop: '--#{constants.$prefix}helper-text-space-top';
+
+.#{$inputChoiceGroupBaseClass} {
+  #{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
+  #{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
+
+  &,
+  legend {
+    border: none;
+    margin: tokens.$bm-sem-space-0;
+    padding: tokens.$bm-sem-space-0;
+  }
+
+  &__inputs {
+    display: flex;
+    gap: tokens.$bm-comp-input-space-choice-gap-items-y
+      tokens.$bm-comp-input-space-choice-gap-items-x;
+  }
+
+  &--vertical &__inputs {
+    flex-direction: column;
+  }
+
+  &--horizontal &__inputs {
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
+
+  &--horizontalFluid &__inputs {
+    flex-direction: row;
+    justify-content: space-between;
+
+    & > *,
+    & > ::slotted(*) {
+      flex: 1 1 auto;
+    }
+  }
+}