@viasat/beam-styles 2.0.0

package/components/textArea.module.scss

@@ -0,0 +1,183 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+@use '../utils/cursors.scss' as cursors;
+
+@import '../../../../tokens/src/lib/components/Input';
+
+$textAreaBaseClass: '#{constants.$prefix}text-area';
+
+$textAreaCursor: '--#{constants.$prefix}text-field-cursor';
+$textAreaInputCursor: '--#{constants.$prefix}text-field-input-cursor';
+
+$labelSpaceBottom: '--#{constants.$prefix}label-space-bottom';
+$helperTextSpaceTop: '--#{constants.$prefix}helper-text-space-top';
+
+$resizeIconFlip: '--#{constants.$prefix}resize-icon-flip';
+$resizeIcon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzY0NjIyXzQ4MzUzKSI+CjxwYXRoIGQ9Ik0xOC4zMzMzIDE4LjMzMzNIMTYuNjY2N1YxNi42NjY3SDE4LjMzMzNWMTguMzMzM1pNMTguMzMzMyAxNUgxNi42NjY3VjEzLjMzMzNIMTguMzMzM1YxNVpNMTUgMTguMzMzM0gxMy4zMzMzVjE2LjY2NjdIMTVWMTguMzMzM1pNMTUgMTVIMTMuMzMzM1YxMy4zMzMzSDE1VjE1Wk0xMS42NjY3IDE4LjMzMzNIMTBWMTYuNjY2N0gxMS42NjY3VjE4LjMzMzNaTTE4LjMzMzMgMTEuNjY2N0gxNi42NjY3VjEwSDE4LjMzMzNWMTEuNjY2N3oiIGZpbGw9IiM0NjU5NjciLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82NDYyMl80ODM1MyI+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4=');
+
+$stateStyleTokens: (
+  error: (
+    color: tokens.$bm-comp-input-color-text,
+    backgroundColor: tokens.$bm-comp-input-color-bg,
+    svgColor: tokens.$bm-comp-input-color-icon-error,
+    borderColor: tokens.$bm-comp-input-color-border-error,
+    counterColor: tokens.$bm-comp-input-color-text-placeholder,
+    placeholderColor: tokens.$bm-comp-input-color-text-placeholder,
+  ),
+  read-only: (
+    color: tokens.$bm-comp-input-color-text,
+    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
+    svgColor: tokens.$bm-comp-input-color-icon,
+    borderColor: tokens.$bm-comp-input-color-border-disabled,
+    counterColor: tokens.$bm-comp-input-color-text-placeholder,
+    placeholderColor: tokens.$bm-comp-input-color-text-placeholder,
+  ),
+  disabled: (
+    color: tokens.$bm-comp-input-color-text-disabled,
+    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
+    svgColor: tokens.$bm-comp-input-color-text-disabled,
+    borderColor: tokens.$bm-comp-input-color-border-disabled,
+    counterColor: tokens.$bm-comp-input-color-text-disabled,
+    placeholderColor: tokens.$bm-comp-input-color-text-disabled,
+  ),
+);
+
+.#{$textAreaBaseClass} {
+  @include cursors.applyTextCursors();
+  max-width: tokens.$bm-comp-input-size-field-width;
+
+  #{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
+  #{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
+
+  @each $state, $styleTokens in $stateStyleTokens {
+    &--#{$state} &__header &__counter {
+      color: map.get($styleTokens, counterColor);
+    }
+
+    &--#{$state} &__field &__input {
+      color: map.get($styleTokens, color);
+      border-color: map.get($styleTokens, borderColor);
+      background-color: map.get($styleTokens, backgroundColor);
+
+      &::placeholder {
+        color: map.get($styleTokens, placeholderColor);
+      }
+
+      @if ($state == error) {
+        @include mixins.simulated-inset-outline(
+          tokens.$bm-comp-input-border-width-field-error,
+          solid,
+          map.get($styleTokens, borderColor),
+          calc(0px - #{tokens.$bm-comp-input-border-width-field-error})
+        );
+      }
+    }
+  }
+
+  &--fluid {
+    max-width: 100%;
+  }
+
+  @-moz-document url-prefix() {
+    &__field:after {
+      display: none;
+    }
+  }
+
+  &--hide-resize &__field:after {
+    display: none;
+  }
+
+  &--hide-resize &__field &__input {
+    resize: none;
+  }
+
+  &--cols-width {
+    max-width: fit-content;
+  }
+
+  &--cols-width &__field &__input {
+    width: auto;
+  }
+
+  &__header {
+    display: flex;
+    gap: tokens.$bm-sem-space-50;
+  }
+
+  &__header &__counter {
+    margin-block-end: auto;
+    margin-inline-start: auto;
+
+    font: tokens.$bm-comp-input-typo-character-count;
+    color: tokens.$bm-comp-input-color-text-placeholder;
+    padding-block-end: tokens.$bm-comp-label-space-bottom;
+  }
+
+  &__field {
+    position: relative;
+    cursor: var(#{$textAreaCursor}, default);
+
+    &:dir(rtl) {
+      #{$resizeIconFlip}: -1;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      pointer-events: none;
+      width: tokens.$bm-sem-space-125;
+      height: tokens.$bm-sem-space-125;
+
+      @include mixins.svg-icon($resizeIcon);
+      inset-block-end: tokens.$bm-sem-space-12;
+      inset-inline-end: tokens.$bm-sem-space-12;
+      transform: scaleX(var(#{$resizeIconFlip}, 1));
+      background-color: tokens.$bm-sem-color-icon-secondary;
+    }
+  }
+
+  &__field &__input {
+    width: 100%;
+    display: block;
+    resize: vertical;
+    box-sizing: border-box;
+
+    border-style: solid;
+    border-color: tokens.$bm-comp-input-color-border;
+    border-radius: tokens.$bm-comp-input-radius-field;
+    border-width: tokens.$bm-comp-input-border-width-field-default;
+
+    color: tokens.$bm-comp-input-color-text;
+    font: tokens.$bm-comp-input-typo-default;
+    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;
+    transform: translate3d(
+      tokens.$bm-sem-space-0,
+      tokens.$bm-sem-space-0,
+      tokens.$bm-sem-space-0
+    );
+
+    &::-webkit-resizer {
+      display: none;
+    }
+
+    &::placeholder {
+      color: tokens.$bm-comp-input-color-text-placeholder;
+    }
+
+    &:focus {
+      @include mixins.simulated-inset-outline(
+        tokens.$bm-sem-border-width-focus,
+        solid,
+        tokens.$bm-sem-color-border-focus,
+        calc(0px - #{tokens.$bm-sem-size-focus-offset})
+      );
+    }
+  }
+}

package/components/textField.module.scss

@@ -0,0 +1,162 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+@use '../utils/cursors.scss' as cursors;
+
+@import '../../../../tokens/src/lib/components/Input';
+
+$textFieldBaseClass: '#{constants.$prefix}text-field';
+
+$textFieldCursor: '--#{constants.$prefix}text-field-cursor';
+$textFieldInputCursor: '--#{constants.$prefix}text-field-input-cursor';
+
+$labelSpaceBottom: '--#{constants.$prefix}label-space-bottom';
+$helperTextSpaceTop: '--#{constants.$prefix}helper-text-space-top';
+
+$stateStyleTokens: (
+  error: (
+    color: tokens.$bm-comp-input-color-text,
+    backgroundColor: tokens.$bm-comp-input-color-bg,
+    borderColor: tokens.$bm-comp-input-color-border-error,
+    placeholderColor: tokens.$bm-comp-input-color-text-placeholder,
+  ),
+  read-only: (
+    color: tokens.$bm-comp-input-color-text,
+    svgColor: tokens.$bm-comp-input-color-icon,
+    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
+    borderColor: tokens.$bm-comp-input-color-border-disabled,
+    placeholderColor: tokens.$bm-comp-input-color-text-placeholder,
+  ),
+  disabled: (
+    color: tokens.$bm-comp-input-color-text-disabled,
+    svgColor: tokens.$bm-comp-input-color-text-disabled,
+    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
+    borderColor: tokens.$bm-comp-input-color-border-disabled,
+    placeholderColor: tokens.$bm-comp-input-color-text-disabled,
+  ),
+);
+
+.#{$textFieldBaseClass} {
+  @include cursors.applyTextCursors();
+  max-width: tokens.$bm-comp-input-size-field-width;
+
+  #{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
+  #{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
+
+  @each $state, $styleTokens in $stateStyleTokens {
+    &--#{$state} &__field {
+      border-color: map.get($styleTokens, borderColor);
+      background-color: map.get($styleTokens, backgroundColor);
+
+      @if ($state == error) {
+        @include mixins.simulated-inset-outline(
+          tokens.$bm-comp-input-border-width-field-error,
+          solid,
+          map.get($styleTokens, borderColor),
+          calc(0px - #{tokens.$bm-comp-input-border-width-field-error})
+        );
+      }
+    }
+
+    &--#{$state} &__field &__input {
+      color: map.get($styleTokens, color);
+
+      &::placeholder {
+        color: map.get($styleTokens, placeholderColor);
+      }
+    }
+
+    &--#{$state} &__field &__content {
+      @if ($state == disabled) {
+        opacity: tokens.$bm-sem-opacity-disabled;
+      }
+
+      svg,
+      ::slotted([slot*='content']) {
+        color: map.get($styleTokens, svgColor);
+      }
+    }
+  }
+
+  &--fluid {
+    max-width: 100%;
+  }
+
+  &--ellipsis &__field &__input {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__field {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    box-sizing: border-box;
+    transform: translate3d(
+      tokens.$bm-sem-space-0,
+      tokens.$bm-sem-space-0,
+      tokens.$bm-sem-space-0
+    );
+
+    border-style: solid;
+    border-color: tokens.$bm-comp-input-color-border;
+    border-radius: tokens.$bm-comp-input-radius-field;
+    border-width: tokens.$bm-comp-input-border-width-field-default;
+
+    cursor: var(#{$textFieldCursor}, default);
+    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;
+
+    &:focus-within {
+      @include mixins.simulated-inset-outline(
+        tokens.$bm-sem-border-width-focus,
+        solid,
+        tokens.$bm-sem-color-border-focus,
+        calc(0px - #{tokens.$bm-sem-size-focus-offset})
+      );
+    }
+  }
+
+  &__field &__input {
+    border: none;
+    outline: none;
+    background: none;
+
+    width: 100%;
+    padding: tokens.$bm-sem-space-0;
+    color: tokens.$bm-comp-input-color-text;
+    font: tokens.$bm-comp-input-typo-default;
+    cursor: var(#{$textFieldInputCursor}, text);
+
+    &:-webkit-autofill {
+      caret-color: tokens.$bm-comp-input-color-text;
+      -webkit-text-fill-color: tokens.$bm-comp-input-color-text;
+
+      @include mixins.simulated-inset-border(
+        tokens.$bm-comp-input-size-field-md-height,
+        tokens.$bm-comp-input-color-bg
+      );
+    }
+
+    &::placeholder {
+      color: tokens.$bm-comp-input-color-text-placeholder;
+    }
+  }
+
+  &__field &__content {
+    display: flex;
+    align-items: center;
+
+    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;
+    }
+  }
+}

package/components/toast.module.scss

@@ -0,0 +1,235 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss';
+
+@import '../../../../tokens/src/lib/components/Toast';
+
+$toastBaseClass: '#{constants.$prefix}toast';
+$toastCompBaseClass: '#{constants.$prefix}comp-toast';
+
+@keyframes enterFirstAnimation {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+    z-index: 9999;
+  }
+}
+
+@keyframes enterAnimation {
+  0% {
+    position: absolute;
+    max-height: 0px;
+    opacity: 0;
+    z-index: 0;
+  }
+
+  30% {
+    position: relative;
+  }
+
+  50% {
+    max-height: 300px;
+    opacity: 0;
+  }
+
+  100% {
+    max-height: 300px;
+    opacity: 1;
+    z-index: 9999;
+  }
+}
+
+@keyframes exitAnimation {
+  0% {
+    max-height: 300px;
+    opacity: 1;
+  }
+
+  30% {
+    max-height: 300px;
+    opacity: 0;
+  }
+
+  100% {
+    max-height: 0;
+    opacity: 0;
+  }
+}
+
+* {
+  --#{$toastCompBaseClass}-animation-duration: 500ms;
+}
+
+$toast-animation-duration: var(--#{$toastCompBaseClass}-animation-duration);
+
+$appearances: (
+  'information': (
+    'background': tokens.$bm-comp-toast-color-info-bg,
+    'body': tokens.$bm-comp-toast-color-info-body,
+    'border': tokens.$bm-comp-toast-color-info-border,
+    'heading': tokens.$bm-comp-toast-color-info-heading,
+    'highlight': tokens.$bm-comp-toast-color-info-highlight,
+    'icon': tokens.$bm-comp-toast-color-info-icon,
+  ),
+  'negative': (
+    'background': tokens.$bm-comp-toast-color-negative-bg,
+    'body': tokens.$bm-comp-toast-color-negative-body,
+    'border': tokens.$bm-comp-toast-color-negative-border,
+    'heading': tokens.$bm-comp-toast-color-negative-heading,
+    'highlight': tokens.$bm-comp-toast-color-negative-highlight,
+    'icon': tokens.$bm-comp-toast-color-negative-icon,
+  ),
+  'positive': (
+    'background': tokens.$bm-comp-toast-color-positive-bg,
+    'body': tokens.$bm-comp-toast-color-positive-body,
+    'border': tokens.$bm-comp-toast-color-positive-border,
+    'heading': tokens.$bm-comp-toast-color-positive-heading,
+    'highlight': tokens.$bm-comp-toast-color-positive-highlight,
+    'icon': tokens.$bm-comp-toast-color-positive-icon,
+  ),
+  'warning': (
+    'background': tokens.$bm-comp-toast-color-warning-bg,
+    'body': tokens.$bm-comp-toast-color-warning-body,
+    'border': tokens.$bm-comp-toast-color-warning-border,
+    'heading': tokens.$bm-comp-toast-color-warning-heading,
+    'highlight': tokens.$bm-comp-toast-color-warning-highlight,
+    'icon': tokens.$bm-comp-toast-color-warning-icon,
+  ),
+);
+
+.#{$toastBaseClass} {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  border-radius: tokens.$bm-comp-toast-radius;
+  border-width: tokens.$bm-comp-toast-border-width;
+  box-shadow: tokens.$bm-comp-toast-shadow;
+  gap: tokens.$bm-comp-toast-space-gap;
+  padding: tokens.$bm-comp-toast-space-y tokens.$bm-comp-toast-space-x;
+  width: tokens.$bm-comp-toast-size-width;
+  z-index: 9999;
+
+  &:focus,
+  &:focus-visible,
+  &:active {
+    outline: none;
+  }
+
+  &__lil-diss-button {
+    width: tokens.$bm-sem-size-icon-md;
+    height: tokens.$bm-sem-size-icon-md;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__content {
+    flex-direction: column;
+    display: flex;
+    flex: 1;
+    gap: tokens.$bm-comp-toast-space-text-gap;
+
+    &--lite {
+      gap: tokens.$bm-comp-toast-space-gap;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+    }
+  }
+
+  &__heading {
+    font: tokens.$bm-comp-toast-typo-heading;
+  }
+
+  &__inner-content {
+    display: flex;
+    flex-direction: column;
+    gap: tokens.$bm-comp-toast-space-content-gap;
+
+    .#{$toastBaseClass}__content--lite & {
+      flex-direction: row;
+    }
+  }
+
+  &__body {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    font: tokens.$bm-comp-toast-typo-body;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    align-items: center;
+    gap: tokens.$bm-comp-toast-space-actions-gap;
+  }
+
+  &--lite &__actions {
+    align-items: flex-start;
+  }
+
+  &__icon {
+    display: flex;
+    width: tokens.$bm-comp-toast-size-icon;
+    height: tokens.$bm-comp-toast-size-icon;
+
+    ::slotted([slot='icon']) {
+      width: tokens.$bm-comp-toast-size-icon;
+      height: tokens.$bm-comp-toast-size-icon;
+    }
+  }
+
+  &--lite {
+    padding: tokens.$bm-comp-toast-space-lite-y tokens.$bm-comp-toast-space-x;
+    width: auto;
+
+    &::before {
+      content: none;
+      display: none;
+    }
+  }
+
+  &--anim-entering {
+    animation: enterAnimation 1s ease-in-out forwards;
+  }
+
+  &--anim-exiting {
+    animation: exitAnimation 0.8s ease-out forwards;
+  }
+
+  &--anim-first-entering {
+    animation: enterAnimation 0.4s ease-out forwards;
+  }
+
+  @each $state, $colors in $appearances {
+    &--#{$state} {
+      background-color: map.get($colors, 'background');
+      outline: tokens.$bm-comp-toast-border-width solid map.get($colors, 'border');
+      border-inline-start: tokens.$bm-comp-toast-size-highlight-width
+        solid
+        map.get($colors, 'highlight');
+
+      .#{$toastBaseClass}__body {
+        color: map.get($colors, 'body');
+      }
+
+      .#{$toastBaseClass}__heading {
+        color: map.get($colors, 'heading');
+      }
+
+      .#{$toastBaseClass}__icon {
+        color: map.get($colors, 'icon');
+      }
+
+      &.#{$toastBaseClass}--lite {
+        border-inline-start: none;
+      }
+    }
+  }
+}

package/components/toastContainer.module.scss

@@ -0,0 +1,68 @@
+@use '../utils/tokens.scss';
+@use '../utils/constants.scss';
+
+@import '../../../../tokens/src/lib/components/Toast';
+
+$toastBaseClass: '#{constants.$prefix}toast';
+$toastContainerBaseClass: '#{$toastBaseClass}-container';
+$toastCompBaseClass: '#{constants.$prefix}comp-toast';
+
+.#{$toastContainerBaseClass} {
+  padding: tokens.$bm-comp-toast-space-viewport-offset;
+  position: fixed;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: tokens.$bm-comp-toast-space-stack;
+  overflow: hidden;
+  z-index: 9999;
+
+  &--top-left {
+    top: 0;
+    left: 0;
+  }
+
+  &--top-right {
+    top: 0;
+    right: 0;
+  }
+
+  &--top-center {
+    top: 0;
+    left: 50%;
+  }
+
+  &--bottom-left {
+    bottom: 0;
+    left: 0;
+  }
+
+  &--bottom-right {
+    bottom: 0;
+    right: 0;
+  }
+
+  &--bottom-center {
+    bottom: 0;
+    left: 50%;
+  }
+}
+
+@media (max-width: 720px) {
+  .#{$toastContainerBaseClass} {
+    width: 100%;
+
+    &--top-left,
+    &--top-right,
+    &--top-center {
+      top: tokens.$bm-comp-toast-space-viewport-offset;
+      flex-direction: column;
+    }
+
+    &--bottom-left,
+    &--bottom-right,
+    &--bottom-center {
+      bottom: tokens.$bm-comp-toast-space-viewport-offset;
+      flex-direction: column-reverse;
+    }
+  }
+}