@viasat/beam-styles 2.0.0

package/components/aspectRatio.module.scss

@@ -0,0 +1,21 @@
+@use '../utils/constants.scss';
+
+$aspectRatioBaseClass: '#{constants.$prefix}aspect-ratio';
+
+.#{$aspectRatioBaseClass} {
+  aspect-ratio: var(--#{constants.$prefix}comp-aspect-ratio-aspect-ratio);
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+
+  & img,
+  video {
+    position: relative;
+    z-index: 0;
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+}

package/components/avatar.module.scss

@@ -0,0 +1,204 @@
+@use 'sass:map';
+@use '../utils/tokens.scss';
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+
+@import '../../../../tokens/src/lib/components/Avatar';
+
+$avatarSizes: (
+  'xs': (
+    'height': tokens.$bm-comp-avatar-size-xs,
+    'width': tokens.$bm-comp-avatar-size-xs,
+    'icon': tokens.$bm-comp-avatar-size-icon-xs,
+    'gap': tokens.$bm-sem-space-25,
+    'font': tokens.$bm-comp-avatar-typo-xs,
+  ),
+  'sm': (
+    'height': tokens.$bm-comp-avatar-size-sm,
+    'width': tokens.$bm-comp-avatar-size-sm,
+    'icon': tokens.$bm-comp-avatar-size-icon-sm,
+    'gap': tokens.$bm-sem-space-25,
+    'font': tokens.$bm-comp-avatar-typo-sm,
+  ),
+  'md': (
+    'height': tokens.$bm-comp-avatar-size-md,
+    'width': tokens.$bm-comp-avatar-size-md,
+    'icon': tokens.$bm-comp-avatar-size-icon-md,
+    'gap': tokens.$bm-sem-space-25,
+    'font': tokens.$bm-comp-avatar-typo-md,
+  ),
+  'lg': (
+    'height': tokens.$bm-comp-avatar-size-lg,
+    'width': tokens.$bm-comp-avatar-size-lg,
+    'icon': tokens.$bm-comp-avatar-size-icon-lg,
+    'gap': tokens.$bm-sem-space-50,
+    'font': tokens.$bm-comp-avatar-typo-lg,
+  ),
+  'xl': (
+    'height': tokens.$bm-comp-avatar-size-xl,
+    'width': tokens.$bm-comp-avatar-size-xl,
+    'icon': tokens.$bm-comp-avatar-size-icon-xl,
+    'gap': tokens.$bm-sem-space-50,
+    'font': tokens.$bm-comp-avatar-typo-xl,
+  ),
+);
+
+$avatarShapes: (
+  'circle': (
+    'border-radius': tokens.$bm-sem-radius-round,
+  ),
+  'square': (
+    'border-radius': tokens.$bm-sem-radius-sm,
+  ),
+);
+
+$avatarAppearances: (
+  'neutral': (
+    'background': tokens.$bm-comp-avatar-color-neutral-bg,
+    'color': tokens.$bm-comp-avatar-color-neutral-fg,
+  ),
+  'accent': (
+    'background': tokens.$bm-comp-avatar-color-accent-bg,
+    'color': tokens.$bm-comp-avatar-color-accent-fg,
+  ),
+  'overflow': (
+    'background': tokens.$bm-comp-avatar-color-overflow-bg,
+    'color': tokens.$bm-comp-avatar-color-overflow-fg,
+  ),
+);
+
+$avatarBaseClass: '#{constants.$prefix}avatar';
+
+.#{$avatarBaseClass} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+
+  &__image {
+    display: flex; // NOTE: For web-components
+    height: 100%;
+    width: 100%;
+  }
+
+  &--interactive {
+    cursor: pointer;
+  }
+
+  &--disabled {
+    opacity: var(--bm-sem-opacity-disabled);
+    user-select: none;
+  }
+
+  &--hidden {
+    display: none;
+  }
+
+  &--with-border {
+    flex: 0 0 auto;
+    outline: tokens.$bm-sem-border-width-md solid tokens.$bm-comp-avatar-color-border;
+  }
+
+  &--content {
+    z-index: 1;
+    position: relative; // NOTE: For Webcomponent z-index doesn't work without this
+  }
+
+  &:focus-visible {
+    @include mixins.simulated-inset-outline();
+  }
+
+  // Generate size modifiers
+  // ex. .avatar--sm
+  @each $sizeName, $sizeStyles in $avatarSizes {
+    &--#{$sizeName} {
+      height: map.get($sizeStyles, 'height');
+      width: map.get($sizeStyles, 'width');
+    }
+
+    &__icon--#{$sizeName} {
+      display: flex; // NOTE: Without this ONLY xs icon displays wrong
+      color: tokens.$bm-comp-avatar-color-neutral-fg;
+      width: map.get($sizeStyles, 'icon');
+      height: map.get($sizeStyles, 'icon');
+    }
+
+    &__text--#{$sizeName} {
+      cursor: default;
+      font: map.get($sizeStyles, 'font');
+    }
+  }
+
+  // Generate shape modifiers
+  // ex. .avatar-circle
+  @each $shapeName, $shapeStyles in $avatarShapes {
+    &--#{$shapeName} {
+      border-radius: map.get($shapeStyles, 'border-radius');
+    }
+  }
+
+  // Generate shape modifiers
+  // ex. .avatar-neutral
+  @each $appearanceName, $appearanceStyles in $avatarAppearances {
+    &--#{$appearanceName} {
+      background: map.get($appearanceStyles, 'background');
+      color: map.get($appearanceStyles, 'color');
+    }
+  }
+}
+
+$avatarGroupBaseClass: '#{constants.$prefix}avatar-group';
+.#{$avatarGroupBaseClass} {
+  display: flex;
+  row-gap: tokens.$bm-sem-space-50;
+
+  > *,
+  bm-avatar {
+    flex: 0 0 auto;
+    outline: tokens.$bm-sem-border-width-md solid tokens.$bm-comp-avatar-color-border;
+  }
+
+  &--wrapping {
+    flex-wrap: wrap;
+  }
+
+  @each $sizeName, $sizeStyles in $avatarSizes {
+    &--stacked-#{$sizeName} {
+      padding-inline-start: calc(map.get($sizeStyles, 'gap'));
+      ::slotted(*) {
+        margin-inline-start: calc(map.get($sizeStyles, 'gap') * -1);
+      }
+      > *,
+      bm-avatar {
+        margin-inline-start: calc(map.get($sizeStyles, 'gap') * -1);
+      }
+    }
+  }
+
+  @each $sizeName, $sizeStyles in $avatarSizes {
+    &--spaced-#{$sizeName} {
+      gap: map.get($sizeStyles, 'gap');
+    }
+  }
+
+  @each $sizeName, $sizeStyles in $avatarSizes {
+    &--#{$sizeName} {
+      ::slotted(*) {
+        height: map.get($sizeStyles, 'height');
+      }
+    }
+  }
+
+  @each $shapeName, $shapeStyles in $avatarShapes {
+    &--#{$shapeName} {
+      > *,
+      bm-avatar {
+        border-radius: map.get($shapeStyles, 'border-radius');
+      }
+      ::slotted(*) {
+        border-radius: map.get($shapeStyles, 'border-radius');
+      }
+    }
+  }
+}

package/components/badge.module.scss

@@ -0,0 +1,166 @@
+@use 'sass:map';
+@use '../utils/tokens.scss';
+@use '../utils/constants.scss';
+
+@import '../../../../tokens/src/lib/components/Badge';
+
+$badgeSizes: (
+  'sm': (
+    'height': tokens.$bm-comp-badge-size-sm-height,
+    'font': tokens.$bm-comp-badge-typo-sm,
+  ),
+  'md': (
+    'height': tokens.$bm-comp-badge-size-md-height,
+    'font': tokens.$bm-comp-badge-typo-md,
+  ),
+);
+
+$badgeAppearanceAndEmphasis: (
+  'positive': (
+    'strong': (
+      'background-color': tokens.$bm-comp-badge-color-positive-strong-bg,
+      'font-color': tokens.$bm-comp-badge-color-positive-strong-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-positive-strong-border,
+    ),
+    'medium': (
+      'background-color': tokens.$bm-comp-badge-color-positive-medium-bg,
+      'font-color': tokens.$bm-comp-badge-color-positive-medium-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-positive-medium-border,
+    ),
+    'subtle': (
+      'background-color': tokens.$bm-comp-badge-color-positive-subtle-bg,
+      'font-color': tokens.$bm-comp-badge-color-positive-subtle-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-positive-subtle-border,
+    ),
+  ),
+  'warning': (
+    'strong': (
+      'background-color': tokens.$bm-comp-badge-color-warning-strong-bg,
+      'font-color': tokens.$bm-comp-badge-color-warning-strong-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-warning-strong-border,
+    ),
+    'medium': (
+      'background-color': tokens.$bm-comp-badge-color-warning-medium-bg,
+      'font-color': tokens.$bm-comp-badge-color-warning-medium-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-warning-medium-border,
+    ),
+    'subtle': (
+      'background-color': tokens.$bm-comp-badge-color-warning-subtle-bg,
+      'font-color': tokens.$bm-comp-badge-color-warning-subtle-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-warning-subtle-border,
+    ),
+  ),
+  'negative': (
+    'strong': (
+      'background-color': tokens.$bm-comp-badge-color-negative-strong-bg,
+      'font-color': tokens.$bm-comp-badge-color-negative-strong-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-negative-strong-border,
+    ),
+    'medium': (
+      'background-color': tokens.$bm-comp-badge-color-negative-medium-bg,
+      'font-color': tokens.$bm-comp-badge-color-negative-medium-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-negative-medium-border,
+    ),
+    'subtle': (
+      'background-color': tokens.$bm-comp-badge-color-negative-subtle-bg,
+      'font-color': tokens.$bm-comp-badge-color-negative-subtle-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-negative-subtle-border,
+    ),
+  ),
+  'infoPrimary': (
+    'strong': (
+      'background-color': tokens.$bm-comp-badge-color-info-primary-strong-bg,
+      'font-color': tokens.$bm-comp-badge-color-info-primary-strong-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-info-primary-strong-border,
+    ),
+    'medium': (
+      'background-color': tokens.$bm-comp-badge-color-info-primary-medium-bg,
+      'font-color': tokens.$bm-comp-badge-color-info-primary-medium-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-info-primary-medium-border,
+    ),
+    'subtle': (
+      'background-color': tokens.$bm-comp-badge-color-info-primary-subtle-bg,
+      'font-color': tokens.$bm-comp-badge-color-info-primary-subtle-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-info-primary-subtle-border,
+    ),
+  ),
+  'infoSecondary': (
+    'strong': (
+      'background-color': tokens.$bm-comp-badge-color-info-secondary-strong-bg,
+      'font-color': tokens.$bm-comp-badge-color-info-secondary-strong-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-info-secondary-strong-border,
+    ),
+    'medium': (
+      'background-color': tokens.$bm-comp-badge-color-info-secondary-medium-bg,
+      'font-color': tokens.$bm-comp-badge-color-info-secondary-medium-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-info-secondary-medium-border,
+    ),
+    'subtle': (
+      'background-color': tokens.$bm-comp-badge-color-info-secondary-subtle-bg,
+      'font-color': tokens.$bm-comp-badge-color-info-secondary-subtle-fg,
+      'border': tokens.$bm-comp-badge-border-width solid
+        tokens.$bm-comp-badge-color-info-secondary-subtle-border,
+    ),
+  ),
+);
+
+$badgeBaseClass: '#{constants.$prefix}badge';
+
+.#{$badgeBaseClass} {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: tokens.$bm-comp-badge-radius;
+  padding-left: tokens.$bm-comp-badge-space-x;
+  padding-right: tokens.$bm-comp-badge-space-x;
+  max-width: -moz-fit-content;
+  width: fit-content;
+  gap: tokens.$bm-comp-badge-space-gap;
+  box-shadow: tokens.$bm-comp-badge-shadow;
+
+  &__icon {
+    width: tokens.$bm-comp-badge-size-icon;
+    height: tokens.$bm-comp-badge-size-icon;
+    transform: translate3d(0, 0, 0);
+  }
+
+  &__label {
+    text-wrap: nowrap;
+  }
+
+  // Generate sizes modifiers
+  // ex. .badge--sm
+  @each $sizeName, $sizeStyles in $badgeSizes {
+    &--#{$sizeName} {
+      height: map.get($sizeStyles, 'height');
+      font: map.get($sizeStyles, 'font');
+    }
+  }
+
+  // Generate badge appearance & emphasis mix classes with mapping to values (which are css vars under tokens)
+  // ex. .badge--info-primary.badge--strong
+  @each $appearance-name, $emphasis in $badgeAppearanceAndEmphasis {
+    @each $emphasis-name, $styles in $emphasis {
+      &--#{$appearance-name}-#{$emphasis-name} {
+        background-color: map.get($styles, 'background-color');
+        color: map.get($styles, 'font-color');
+        border: map.get($styles, 'border');
+      }
+    }
+  }
+}

package/components/badgeDot.module.scss

@@ -0,0 +1,90 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/BadgeDot';
+
+$badgeDotBaseClass: '#{constants.$prefix}badge-dot';
+
+$appearances: (
+  infoPrimary: (
+    bg: tokens.$bm-comp-badge-dot-color-info-primary-bg,
+    text: tokens.$bm-comp-badge-dot-color-info-primary-text,
+    borderCol: tokens.$bm-comp-badge-dot-color-info-primary-border,
+  ),
+  infoSecondary: (
+    bg: tokens.$bm-comp-badge-dot-color-info-secondary-bg,
+    text: tokens.$bm-comp-badge-dot-color-info-secondary-text,
+    borderCol: tokens.$bm-comp-badge-dot-color-info-secondary-border,
+  ),
+  positive: (
+    bg: tokens.$bm-comp-badge-dot-color-positive-bg,
+    text: tokens.$bm-comp-badge-dot-color-positive-text,
+    borderCol: tokens.$bm-comp-badge-dot-color-positive-border,
+  ),
+  warning: (
+    bg: tokens.$bm-comp-badge-dot-color-warning-bg,
+    text: tokens.$bm-comp-badge-dot-color-warning-text,
+    borderCol: tokens.$bm-comp-badge-dot-color-warning-border,
+  ),
+  negative: (
+    bg: tokens.$bm-comp-badge-dot-color-negative-bg,
+    text: tokens.$bm-comp-badge-dot-color-negative-text,
+    borderCol: tokens.$bm-comp-badge-dot-color-negative-border,
+  ),
+);
+
+$emphasisLevels: (
+  subtle: tokens.$bm-comp-badge-dot-typo-subtle,
+  strong: tokens.$bm-comp-badge-dot-typo-strong,
+);
+
+.#{$badgeDotBaseClass} {
+  display: inline-flex;
+  align-items: center;
+  gap: tokens.$bm-comp-badge-dot-space-gap;
+  font: tokens.$bm-comp-badge-dot-typo-strong;
+  min-width: min-content;
+  color: map.get(map.get($appearances, infoPrimary), text);
+
+  &:before {
+    content: ' ';
+    flex-shrink: 0;
+    min-width: tokens.$bm-comp-badge-dot-size;
+    width: tokens.$bm-comp-badge-dot-size;
+    height: tokens.$bm-comp-badge-dot-size;
+    border-radius: tokens.$bm-comp-badge-dot-radius;
+    border-width: tokens.$bm-comp-badge-dot-border-width;
+    background-color: var(
+      --bm-comp-badge-dot-color,
+      map.get(map.get($appearances, infoPrimary), bg)
+    );
+    border-color: var(
+      --bm-comp-badge-dot-color,
+      map.get(map.get($appearances, infoPrimary), borderCol)
+    );
+    border-style: solid;
+    box-sizing: border-box;
+  }
+
+  &:dir(rtl):before {
+    flex-direction: row-reverse;
+  }
+
+  @each $appearance, $values in $appearances {
+    &--#{$appearance} {
+      &:before {
+        background-color: var(--bm-comp-badge-dot-color, map.get($values, bg));
+        border-color: var(--bm-comp-badge-dot-color, map.get($values, borderCol));
+      }
+
+      color: map.get($values, text);
+    }
+  }
+
+  @each $emphasis, $emphasisValue in $emphasisLevels {
+    &--#{$emphasis} {
+      font: $emphasisValue;
+    }
+  }
+}

package/components/box.module.scss

@@ -0,0 +1,127 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+
+$boxBaseClass: '#{constants.$prefix}box';
+
+$backgroundColors: (
+  'surface-00': tokens.$bm-sem-color-surface-00,
+  'surface-00-alt': tokens.$bm-sem-color-surface-00-alt,
+  'surface-01': tokens.$bm-sem-color-surface-01,
+  'surface-02': tokens.$bm-sem-color-surface-02,
+  'surface-03': tokens.$bm-sem-color-surface-03,
+  'surface-positive': tokens.$bm-sem-color-surface-positive,
+  'surface-warning': tokens.$bm-sem-color-surface-warning,
+  'surface-negative': tokens.$bm-sem-color-surface-negative,
+  'surface-info-primary': tokens.$bm-sem-color-surface-info-primary,
+  'surface-info-secondary': tokens.$bm-sem-color-surface-info-secondary,
+  'surface-positive-strong': tokens.$bm-sem-color-surface-positive-strong,
+  'surface-warning-strong': tokens.$bm-sem-color-surface-warning-strong,
+  'surface-negative-strong': tokens.$bm-sem-color-surface-negative-strong,
+  'surface-info-primary-strong': tokens.$bm-sem-color-surface-info-primary-strong,
+  'surface-info-secondary-strong': tokens.$bm-sem-color-surface-info-secondary-strong,
+  'surface-selected': tokens.$bm-sem-color-surface-selected,
+  'surface-selected-subtle': tokens.$bm-sem-color-surface-selected-subtle,
+  'surface-highlight': tokens.$bm-sem-color-surface-highlight,
+  'surface-transparent': tokens.$bm-sem-color-surface-transparent,
+  'surface-inverse': tokens.$bm-sem-color-surface-inverse,
+  'surface-expressive': tokens.$bm-expressive-color-bg,
+  'surface-expressive-stronger': tokens.$bm-expressive-color-bg-stronger,
+  'surface-expressive-inverse': tokens.$bm-expressive-color-inverse-bg,
+);
+
+$borderColors: (
+  'border-00': tokens.$bm-sem-color-border-00,
+  'border-00-alt': tokens.$bm-sem-color-border-00-alt,
+  'border-01': tokens.$bm-sem-color-border-01,
+  'border-02': tokens.$bm-sem-color-border-02,
+  'border-03': tokens.$bm-sem-color-border-03,
+  'border-strong': tokens.$bm-sem-color-border-strong,
+  'border-positive': tokens.$bm-sem-color-border-positive,
+  'border-warning': tokens.$bm-sem-color-border-warning,
+  'border-negative': tokens.$bm-sem-color-border-negative,
+  'border-info-primary': tokens.$bm-sem-color-border-info-primary,
+  'border-info-secondary': tokens.$bm-sem-color-border-info-secondary,
+  'border-positive-strong': tokens.$bm-sem-color-border-positive-strong,
+  'border-warning-strong': tokens.$bm-sem-color-border-warning-strong,
+  'border-negative-strong': tokens.$bm-sem-color-border-negative-strong,
+  'border-info-primary-strong': tokens.$bm-sem-color-border-info-primary-strong,
+  'border-info-secondary-strong': tokens.$bm-sem-color-border-info-secondary-strong,
+  'border-selected': tokens.$bm-sem-color-border-selected,
+  'border-focus': tokens.$bm-sem-color-border-focus,
+  'border-inverse': tokens.$bm-sem-color-border-inverse,
+  'border-expressive': tokens.$bm-expressive-color-border,
+  'border-expressive-stronger': tokens.$bm-expressive-color-border-stronger,
+  'border-transparent': tokens.$bm-sem-color-border-transparent,
+);
+
+$borderWidths: (
+  'border-width-none': tokens.$bm-sem-border-width-none,
+  'border-width-md': tokens.$bm-sem-border-width-md,
+  'border-width-lg': tokens.$bm-sem-border-width-lg,
+  'border-width-xl': tokens.$bm-sem-border-width-xl,
+  'border-width-divider': tokens.$bm-sem-border-width-md,
+);
+
+$shadows: (
+  'shadow-none': tokens.$bm-sem-shadow-none,
+  'shadow-sm': tokens.$bm-sem-shadow-sm,
+  'shadow-md': tokens.$bm-sem-shadow-md,
+  'shadow-lg': tokens.$bm-sem-shadow-lg,
+  'shadow-overlay': tokens.$bm-sem-shadow-overlay,
+);
+
+$borderRadius: (
+  'radius-none': tokens.$bm-sem-radius-none,
+  'radius-xs': tokens.$bm-sem-radius-xs,
+  'radius-sm': tokens.$bm-sem-radius-sm,
+  'radius-md': tokens.$bm-sem-radius-md,
+  'radius-lg': tokens.$bm-sem-radius-lg,
+  'radius-round': tokens.$bm-sem-radius-round,
+);
+
+.#{$boxBaseClass} {
+  @each $borderWidthName, $borderWidthValue in $borderWidths {
+    &--#{$borderWidthName} {
+      border-width: $borderWidthValue;
+      border-style: solid;
+
+      @if $borderWidthName == 'border-width-divider' {
+        border-top-width: 0;
+        border-right-width: 0;
+        border-left-width: 0;
+      }
+    }
+  }
+
+  @each $backgroundColorName, $backgroundColorValue in $backgroundColors {
+    &--#{$backgroundColorName} {
+      background: $backgroundColorValue;
+    }
+  }
+
+  @each $borderColorName, $borderColorValue in $borderColors {
+    &--#{$borderColorName} {
+      border-color: $borderColorValue;
+      border-style: solid;
+
+      // Provide default value when borderWidth props is not set
+      &:not([class*='border-width-']) {
+        border-width: tokens.$bm-sem-border-width-md;
+      }
+    }
+  }
+
+  @each $borderRadiusName, $borderRadiusValue in $borderRadius {
+    &--#{$borderRadiusName} {
+      border-radius: $borderRadiusValue;
+    }
+  }
+
+  @each $shadowName, $shadowValue in $shadows {
+    &--#{$shadowName} {
+      box-shadow: $shadowValue;
+    }
+  }
+}