@viasat/beam-styles 2.0.0

package/components/dialog.module.scss

@@ -0,0 +1,199 @@
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+@use './icon.vars.scss' as iconVars;
+
+@import '../../../../tokens/src/lib/components/Dialog';
+
+$dialogBaseClass: '#{constants.$prefix}dialog';
+
+$sizes: (
+  'sm': tokens.$bm-comp-dialog-size-sm,
+  'md': tokens.$bm-comp-dialog-size-md,
+  'lg': tokens.$bm-comp-dialog-size-lg,
+  'xl': tokens.$bm-comp-dialog-size-xl,
+);
+
+$appearances: (
+  'information': tokens.$bm-comp-dialog-color-icon-info,
+  'positive': tokens.$bm-comp-dialog-color-icon-positive,
+  'negative': tokens.$bm-comp-dialog-color-icon-negative,
+  'warning': tokens.$bm-comp-dialog-color-icon-warning,
+);
+
+.#{$dialogBaseClass} {
+  position: relative;
+  outline: none;
+  background: tokens.$bm-comp-dialog-color-bg;
+  border-color: tokens.$bm-comp-dialog-color-border;
+  border-radius: tokens.$bm-comp-dialog-radius-default;
+  border-width: tokens.$bm-comp-dialog-border-width;
+  box-shadow: tokens.$bm-comp-dialog-shadow;
+
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+
+  @each $size, $sizeValue in $sizes {
+    &--#{$size} {
+      width: $sizeValue;
+      max-width: $sizeValue;
+    }
+  }
+}
+
+.#{$dialogBaseClass}__header {
+  font: tokens.$bm-comp-dialog-typo-heading;
+  color: tokens.$bm-comp-dialog-color-heading;
+  padding-block: tokens.$bm-comp-dialog-space-heading-top 0;
+  padding-inline: tokens.$bm-comp-dialog-space-x;
+  display: flex;
+  flex-direction: column;
+  gap: tokens.$bm-comp-dialog-space-heading-gap-y;
+  flex-shrink: 0;
+
+  &__row {
+    display: flex;
+    gap: tokens.$bm-comp-dialog-space-heading-gap-x;
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  &__icon {
+    height: 1lh;
+    color: tokens.$bm-comp-dialog-color-icon;
+
+    display: flex;
+    align-items: center;
+
+    @each $appearance, $color in $appearances {
+      &--#{$appearance} {
+        color: $color;
+        #{iconVars.$iconColor}: $color;
+      }
+    }
+  }
+
+  &__icon svg {
+    height: tokens.$bm-comp-dialog-size-icon;
+    width: tokens.$bm-comp-dialog-size-icon;
+
+    #{iconVars.$iconSize}: tokens.$bm-comp-dialog-size-icon;
+    #{iconVars.$iconColor}: tokens.$bm-comp-dialog-color-icon;
+  }
+
+  &__heading {
+    margin: 0;
+    font: inherit;
+  }
+
+  &__close-trigger {
+    height: 1lh;
+    width: 1lh;
+    margin-left: auto;
+  }
+
+  &__description {
+    margin: 0;
+  }
+
+  &__description,
+  &__children {
+    font: tokens.$bm-comp-dialog-typo-description;
+    color: tokens.$bm-comp-dialog-color-description;
+  }
+
+  &__divider {
+    border: none;
+    border-top: tokens.$bm-sem-border-width-md solid tokens.$bm-sem-color-border-01;
+
+    margin-block: tokens.$bm-comp-dialog-size-divider-wrapper 0;
+    margin-inline: calc(tokens.$bm-comp-dialog-space-x * -1);
+  }
+}
+
+.#{$dialogBaseClass}__body {
+  font: tokens.$bm-comp-dialog-typo-body;
+  color: tokens.$bm-comp-dialog-color-body;
+  padding-block: tokens.$bm-comp-dialog-space-body-y;
+  padding-inline: tokens.$bm-comp-dialog-space-x;
+
+  display: flex;
+  flex-direction: column;
+  gap: tokens.$bm-comp-dialog-space-body-gap;
+
+  overflow: auto;
+  overscroll-behavior: contain;
+
+  &:focus {
+    outline: var(--bm-sem-border-width-focus) auto var(--bm-sem-color-border-focus);
+  }
+}
+
+.#{$dialogBaseClass}__footer {
+  flex-shrink: 0;
+  padding-inline: tokens.$bm-comp-dialog-space-x;
+
+  &__divider {
+    border-top: tokens.$bm-sem-border-width-md solid tokens.$bm-sem-color-border-01;
+    display: block;
+  }
+
+  padding-block: tokens.$bm-comp-dialog-space-footer-y;
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  gap: tokens.$bm-comp-dialog-space-footer-gap;
+
+  &__actions {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: tokens.$bm-comp-dialog-space-footer-gap;
+  }
+
+  &__tertiaryActions {
+    display: flex;
+  }
+}
+
+/**
+ * Mobile Styles
+ */
+.#{$dialogBaseClass} {
+  @media all and (max-width: 512px) {
+    &__header,
+    &__body,
+    &__footer {
+      padding-inline: tokens.$bm-comp-dialog-space-sm-screen-x;
+    }
+
+    &__header {
+      &__divider {
+        margin-inline: calc(tokens.$bm-comp-dialog-space-sm-screen-x * -1);
+      }
+    }
+
+    &__footer {
+      flex-direction: column;
+      gap: tokens.$bm-comp-dialog-space-footer-sm-screen-gap;
+
+      &__actions,
+      &__tertiaryActions {
+        width: 100%;
+        align-self: stretch;
+        justify-content: center;
+
+        > *,
+        > [class*='bm-'] {
+          width: 100%;
+        }
+      }
+
+      &__actions {
+        flex-direction: column;
+        gap: tokens.$bm-comp-dialog-space-footer-sm-screen-gap;
+      }
+    }
+  }
+}

package/components/divider.module.scss

@@ -0,0 +1,255 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/Divider';
+
+$dividerBaseClass: '#{constants.$prefix}divider';
+$divider-length: var(--#{constants.$prefix}comp-divider-length, 100%);
+
+$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-inverse': tokens.$bm-sem-color-border-inverse,
+);
+
+$borderWidths: (
+  'md': tokens.$bm-sem-border-width-md,
+  'lg': tokens.$bm-sem-border-width-lg,
+  'xl': tokens.$bm-sem-border-width-xl,
+);
+
+:host([orientation='vertical']),
+.bm-divider--vertical {
+  height: $divider-length;
+  width: auto;
+}
+
+:host,
+.bm-divider {
+  width: $divider-length;
+}
+
+.#{$dividerBaseClass} {
+  box-sizing: border-box;
+  width: $divider-length;
+  height: auto;
+
+  &--horizontal {
+    text-align: center;
+  }
+
+  &--vertical {
+    height: $divider-length;
+    width: auto;
+    min-height: 1.25rem;
+
+    .#{$dividerBaseClass}__wrapper {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    &::before,
+    &::after {
+      width: 0.0625rem;
+      height: 100%;
+    }
+
+    .#{$dividerBaseClass}__content {
+      padding: tokens.$bm-comp-divider-space-content 0;
+    }
+  }
+
+  &__wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+
+    &::before,
+    &::after {
+      content: '';
+      background-color: currentColor;
+      flex: 1 1 auto;
+      height: 0.0625rem;
+    }
+  }
+
+  &__content {
+    font: tokens.$bm-comp-divider-typo-text;
+    padding: 0 tokens.$bm-comp-divider-space-content;
+    display: inline-flex;
+    align-items: center;
+    color: tokens.$bm-comp-divider-color-text;
+    gap: tokens.$bm-comp-divider-space-content-gap;
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    color: tokens.$bm-comp-divider-color-icon;
+
+    svg {
+      height: tokens.$bm-comp-divider-size-icon;
+      width: tokens.$bm-comp-divider-size-icon;
+    }
+
+    ::slotted([slot='icon']) {
+      display: inline-flex;
+      height: tokens.$bm-comp-divider-size-icon;
+      width: tokens.$bm-comp-divider-size-icon;
+    }
+  }
+
+  &--icon-only {
+    .#{$dividerBaseClass}__icon {
+      margin-right: 0;
+      color: tokens.$bm-comp-divider-color-icon;
+
+      svg {
+        height: tokens.$bm-comp-divider-size-icon-only;
+        width: tokens.$bm-comp-divider-size-icon-only;
+      }
+
+      ::slotted([slot='icon']) {
+        height: tokens.$bm-comp-divider-size-icon-only;
+        width: tokens.$bm-comp-divider-size-icon-only;
+      }
+    }
+  }
+
+  &__text {
+    white-space: nowrap;
+  }
+
+  @each $width, $value in $borderWidths {
+    &--border-width-#{$width} {
+      .#{$dividerBaseClass}__wrapper::before,
+      .#{$dividerBaseClass}__wrapper::after {
+        height: $value;
+      }
+
+      &.#{$dividerBaseClass}--vertical {
+        .#{$dividerBaseClass}__wrapper::before,
+        .#{$dividerBaseClass}__wrapper::after {
+          width: $value;
+          height: auto;
+        }
+      }
+    }
+  }
+
+  &--border-style-dashed {
+    .#{$dividerBaseClass}__wrapper::before,
+    .#{$dividerBaseClass}__wrapper::after {
+      background: repeating-linear-gradient(
+        to right,
+        currentColor,
+        currentColor 0.25rem,
+        transparent 0.25rem,
+        transparent 0.5rem
+      );
+    }
+
+    &.#{$dividerBaseClass}--vertical {
+      .#{$dividerBaseClass}__wrapper::before,
+      .#{$dividerBaseClass}__wrapper::after {
+        background: repeating-linear-gradient(
+          to bottom,
+          currentColor,
+          currentColor 0.25rem,
+          transparent 0.25rem,
+          transparent 0.5rem
+        );
+      }
+    }
+  }
+
+  &--border-style-dotted {
+    .#{$dividerBaseClass}__wrapper::before,
+    .#{$dividerBaseClass}__wrapper::after {
+      background: repeating-linear-gradient(
+        to right,
+        currentColor,
+        currentColor 0.125rem,
+        transparent 0.125rem,
+        transparent 0.375rem
+      );
+    }
+
+    &.#{$dividerBaseClass}--vertical {
+      .#{$dividerBaseClass}__wrapper::before,
+      .#{$dividerBaseClass}__wrapper::after {
+        background: repeating-linear-gradient(
+          to bottom,
+          currentColor,
+          currentColor 0.125rem,
+          transparent 0.125rem,
+          transparent 0.375rem
+        );
+      }
+    }
+  }
+
+  @each $color, $value in $borderColors {
+    &--border-color-#{$color} {
+      color: $value;
+    }
+  }
+
+  &--align-start {
+    .#{$dividerBaseClass}__wrapper::before {
+      flex: 0 1 0%;
+    }
+    .#{$dividerBaseClass}__wrapper::after {
+      flex: 1 1 auto;
+    }
+    .#{$dividerBaseClass}__content {
+      padding-inline-start: 0;
+    }
+  }
+
+  &--align-end {
+    .#{$dividerBaseClass}__wrapper::before {
+      flex: 1 1 auto;
+    }
+    .#{$dividerBaseClass}__wrapper::after {
+      flex: 0 1 0%;
+    }
+    .#{$dividerBaseClass}__content {
+      padding-inline-end: 0;
+    }
+  }
+
+  &--vertical {
+    &.#{$dividerBaseClass}--align-start {
+      .#{$dividerBaseClass}__wrapper::before {
+        flex: 0 1 1rem;
+      }
+    }
+
+    &.#{$dividerBaseClass}--align-end {
+      .#{$dividerBaseClass}__wrapper::after {
+        flex: 0 1 1rem;
+      }
+    }
+  }
+}

package/components/emptyState.module.scss

@@ -0,0 +1,61 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/EmptyState';
+
+$emptyStateBaseClass: '#{constants.$prefix}empty-state';
+
+.#{$emptyStateBaseClass} {
+  display: flex;
+  flex-direction: column;
+  max-width: tokens.$bm-comp-empty-state-size-width;
+  align-items: center;
+  gap: tokens.$bm-comp-empty-state-space-gap;
+
+  &__icon,
+  ::slotted([slot='icon']) {
+    color: tokens.$bm-comp-empty-state-color-icon;
+  }
+
+  &__icon > svg,
+  ::slotted([slot='icon']) {
+    height: tokens.$bm-comp-empty-state-size-icon;
+    width: tokens.$bm-comp-empty-state-size-icon;
+  }
+
+  &__body-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: tokens.$bm-comp-empty-state-space-text-gap;
+  }
+
+  &__heading,
+  ::slotted([slot='heading']) {
+    text-align: center;
+    font: tokens.$bm-comp-empty-state-typo-heading;
+    color: tokens.$bm-comp-empty-state-color-heading;
+  }
+
+  &__body,
+  ::slotted([slot='body']) {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    font: tokens.$bm-comp-empty-state-typo-body;
+    color: tokens.$bm-comp-empty-state-color-body;
+    gap: tokens.$bm-comp-empty-state-space-text-gap;
+  }
+
+  &__actions,
+  ::slotted([slot='actions']) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: tokens.$bm-comp-empty-state-space-actions-gap;
+  }
+
+  background-color: unset;
+}