@viasat/beam-styles 2.0.0

package/components/switch.module.scss

@@ -0,0 +1,194 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+@use '../utils/animation.scss' as animation;
+@use '../utils/cursors.scss' as cursors;
+
+@import '../../../../tokens/src/lib/components/Input';
+
+$switchClassBase: '#{constants.$prefix}switch';
+$inputChoiceCursor: '--#{constants.$prefix}input-choice-cursor';
+$inputChoiceLabelCursor: '--#{constants.$prefix}input-choice-label-cursor';
+$inputChoiceLabelPointerEvents: '--#{constants.$prefix}input-choice-label-pointer-events';
+$knobOffset: 0.1875rem;
+$svgOffset: 0.3125rem;
+
+$switchStates: (
+  read-only: (
+    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
+    knobColor: tokens.$bm-comp-input-color-icon,
+    svgColor: tokens.$bm-comp-input-color-icon,
+    borderColor: tokens.$bm-comp-input-color-border-disabled,
+    labelColor: tokens.$bm-comp-input-color-text,
+  ),
+  disabled: (
+    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
+    knobColor: tokens.$bm-comp-input-color-icon-disabled,
+    svgColor: tokens.$bm-comp-input-color-icon-disabled,
+    borderColor: tokens.$bm-comp-input-color-border-disabled,
+    labelColor: tokens.$bm-comp-input-color-text-disabled,
+  ),
+);
+
+.#{$switchClassBase} {
+  @include cursors.applyChoiceCursors();
+
+  &__label {
+    display: flex;
+    position: relative;
+    width: fit-content;
+    align-items: start;
+    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;
+    color: tokens.$bm-comp-input-color-text;
+    cursor: var(#{$inputChoiceLabelCursor}, pointer);
+    pointer-events: var(#{$inputChoiceLabelPointerEvents}, auto);
+  }
+
+  input {
+    // hide default checkbox
+    appearance: none;
+    --webkit-appearance: none;
+    --moz-appearance: none;
+
+    position: relative;
+    display: inline-block;
+    flex-shrink: 0;
+    width: tokens.$bm-comp-input-size-choice-switch-width;
+    height: tokens.$bm-comp-input-size-choice-switch-height;
+    margin: tokens.$bm-sem-space-0;
+    cursor: var(#{$inputChoiceCursor}, pointer);
+
+    & + .#{$switchClassBase}__switchBackground {
+      position: absolute;
+      box-sizing: border-box;
+      width: tokens.$bm-comp-input-size-choice-switch-width;
+      height: tokens.$bm-comp-input-size-choice-switch-height;
+      border: tokens.$bm-comp-input-border-width-choice solid
+        tokens.$bm-comp-input-color-border;
+      border-radius: tokens.$bm-comp-input-radius-choice-switch;
+      background-color: tokens.$bm-comp-input-color-bg;
+      transition: background-color animation.duration('medium') ease-in-out,
+        box-shadow animation.duration('medium') ease-in;
+
+      &:before,
+      &:after {
+        content: '';
+        position: absolute;
+        height: tokens.$bm-sem-size-icon-xs;
+        width: tokens.$bm-sem-size-icon-xs;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      &:before {
+        display: none;
+        mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 16.1698L4.83 11.9998L3.41 13.4098L9 18.9998L21 6.99984L19.59 5.58984L9 16.1698Z' fill='currentColor'/%3E%3C/svg%3E");
+        left: $svgOffset;
+        background-color: tokens.$bm-comp-input-color-icon;
+      }
+
+      &:after {
+        display: block;
+        mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z' fill='currentColor'/%3E%3C/svg%3E");
+        right: $svgOffset;
+        background-color: tokens.$bm-comp-input-color-icon;
+      }
+    }
+
+    // switch knob
+    &:after {
+      // TODO: make sure this doesn't brake layouts
+      z-index: 1;
+      position: absolute;
+      box-sizing: border-box;
+      content: '';
+      width: tokens.$bm-comp-input-size-choice-switch-knob;
+      height: tokens.$bm-comp-input-size-choice-switch-knob;
+      top: 50%;
+      transform: translateX(0) translateY(-50%);
+      left: $knobOffset;
+      background-color: tokens.$bm-comp-input-color-icon;
+      border-radius: tokens.$bm-sem-radius-round;
+      transition: left animation.duration('medium') ease-in-out;
+    }
+
+    &:checked {
+      & + .#{$switchClassBase}__switchBackground {
+        background-color: tokens.$bm-comp-input-color-choice-switch-selected-bg;
+        border-color: tokens.$bm-comp-input-color-choice-switch-selected-border;
+
+        &:before {
+          display: block;
+          background-color: tokens.$bm-comp-input-color-choice-switch-selected-icon;
+        }
+
+        &:after {
+          display: none;
+          background-color: tokens.$bm-comp-input-color-choice-switch-selected-bg;
+        }
+      }
+
+      &:after {
+        background-color: tokens.$bm-comp-input-color-choice-switch-selected-icon;
+        left: calc(
+          tokens.$bm-comp-input-size-choice-switch-width -
+            ($knobOffset + tokens.$bm-comp-input-size-choice-switch-knob)
+        );
+      }
+    }
+
+    &:focus-visible {
+      outline: none;
+
+      & + .#{$switchClassBase}__switchBackground {
+        @include mixins.simulated-inset-outline(
+          tokens.$bm-sem-border-width-focus,
+          solid,
+          tokens.$bm-sem-color-border-focus,
+          tokens.$bm-sem-size-focus-offset
+        );
+      }
+    }
+  }
+
+  @each $state, $values in $switchStates {
+    &--#{$state} &__label {
+      span {
+        color: map.get($values, labelColor);
+      }
+    }
+
+    &--#{$state} input:#{$state} {
+      & + .#{$switchClassBase}__switchBackground {
+        background-color: map.get($values, backgroundColor);
+        border-color: map.get($values, borderColor);
+
+        &:after,
+        &:before {
+          background-color: map.get($values, svgColor);
+        }
+      }
+
+      &:after {
+        background-color: map.get($values, knobColor);
+      }
+    }
+  }
+
+  // Text Position
+  &--before {
+    .#{$switchClassBase}__label {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &--after {
+    .#{$switchClassBase}__label {
+      flex-direction: row;
+    }
+  }
+}

package/components/tabs.module.scss

@@ -0,0 +1,412 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/Tabs';
+
+$tabsBaseClass: '#{constants.$prefix}tabs';
+$tabsItemBaseClass: '#{$tabsBaseClass}__item';
+
+$sizes: (
+  'md': (
+    'height': tokens.$bm-comp-tabs-size-md-item,
+    'font': tokens.$bm-comp-tabs-typo-md,
+    'selected-font': tokens.$bm-comp-tabs-typo-md-selected,
+    'icon': tokens.$bm-comp-tabs-size-md-icon,
+    'icon-only': tokens.$bm-comp-tabs-size-md-icon-only,
+    'indicator': tokens.$bm-comp-tabs-size-md-indicator-extent,
+  ),
+  'lg': (
+    'height': tokens.$bm-comp-tabs-size-lg-item,
+    'font': tokens.$bm-comp-tabs-typo-lg,
+    'selected-font': tokens.$bm-comp-tabs-typo-lg-selected,
+    'icon': tokens.$bm-comp-tabs-size-lg-icon,
+    'icon-only': tokens.$bm-comp-tabs-size-lg-icon-only,
+    'indicator': tokens.$bm-comp-tabs-size-lg-indicator-extent,
+  ),
+);
+
+.#{$tabsBaseClass} {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: tokens.$bm-comp-tabs-space-gap-outer;
+  color: tokens.$bm-sem-color-text-primary;
+
+  &--disabled {
+    opacity: tokens.$bm-sem-opacity-disabled;
+    cursor: not-allowed;
+  }
+
+  &--vertical {
+    flex-direction: row;
+  }
+
+  &__wrapper {
+    position: relative;
+    display: flex;
+    justify-content: center;
+
+    .#{$tabsBaseClass}--vertical & {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: flex-start;
+      gap: tokens.$bm-comp-tabs-space-gap-outer;
+    }
+  }
+
+  &__divider {
+    inline-size: 100%;
+    position: absolute;
+    bottom: 0;
+    z-index: 1;
+
+    .#{$tabsBaseClass}--vertical & {
+      inline-size: auto;
+      block-size: 100%;
+      position: absolute;
+      inset-block-end: auto;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      z-index: 1;
+    }
+  }
+}
+
+.#{$tabsBaseClass}__group {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  outline: none;
+  z-index: 2;
+  background: inherit;
+
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    width: auto;
+  }
+
+  &__content {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    width: 100%;
+    gap: tokens.$bm-comp-tabs-space-gap-outer;
+
+    &--scrollable {
+      --gradient-angle: 90deg;
+
+      @at-root [dir='rtl'] & {
+        --gradient-angle: 270deg;
+      }
+
+      &:not(.#{$tabsBaseClass}__group__content--at-start):not(
+          .#{$tabsBaseClass}__group__content--at-end
+        ) {
+        -webkit-mask-image: linear-gradient(
+          var(--gradient-angle),
+          transparent 0%,
+          #fff 25%,
+          #fff 75%,
+          transparent 100%
+        );
+        mask-image: linear-gradient(
+          var(--gradient-angle),
+          transparent 0%,
+          #fff 25%,
+          #fff 75%,
+          transparent 100%
+        );
+      }
+
+      &.#{$tabsBaseClass}__group__content--at-start:not(
+          .#{$tabsBaseClass}__group__content--at-end
+        ) {
+        -webkit-mask-image: linear-gradient(
+          var(--gradient-angle),
+          #fff 0%,
+          #fff 75%,
+          transparent 100%
+        );
+        mask-image: linear-gradient(
+          var(--gradient-angle),
+          #fff 0%,
+          #fff 75%,
+          transparent 100%
+        );
+      }
+
+      &.#{$tabsBaseClass}__group__content--at-end:not(
+          .#{$tabsBaseClass}__group__content--at-start
+        ) {
+        -webkit-mask-image: linear-gradient(
+          var(--gradient-angle),
+          transparent 0%,
+          #fff 25%,
+          #fff 100%
+        );
+        mask-image: linear-gradient(
+          var(--gradient-angle),
+          transparent 0%,
+          #fff 25%,
+          #fff 100%
+        );
+      }
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .#{$tabsBaseClass}--fluid & {
+      gap: tokens.$bm-sem-space-50;
+    }
+
+    .#{$tabsBaseClass}--vertical & {
+      flex-direction: column;
+      align-items: stretch;
+      overflow-y: auto;
+      overflow-x: hidden;
+      width: auto;
+      padding-inline: 0;
+      gap: 0;
+    }
+  }
+
+  &__scroll-container {
+    position: absolute;
+    inset-block-start: 0;
+    inset-block-end: 2px;
+    justify-content: space-between;
+    width: inherit;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+
+    &--left {
+      inset-inline-start: 0;
+      justify-content: flex-start;
+    }
+
+    &--right {
+      inset-inline-end: 0;
+      justify-content: flex-end;
+    }
+  }
+
+  &__scroll-button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    z-index: 6;
+
+    &--visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+
+.#{$tabsItemBaseClass} {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  gap: tokens.$bm-comp-tabs-space-gap;
+  outline: none;
+  color: tokens.$bm-comp-tabs-color-text;
+
+  &--disabled {
+    opacity: tokens.$bm-sem-opacity-disabled;
+    cursor: not-allowed;
+  }
+
+  &--fluid {
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+  }
+
+  &--vertical:not(.#{$tabsItemBaseClass}--icon-only) {
+    padding-inline: tokens.$bm-comp-tabs-space-x;
+    justify-content: flex-start;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 0;
+    flex-basis: content;
+    padding-inline: tokens.$bm-sem-border-width-focus;
+  }
+
+  &__input {
+    display: none;
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: tokens.$bm-comp-btn-space-gap;
+    cursor: inherit;
+    min-width: 0;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  &__indicator {
+    display: hidden;
+    position: absolute;
+    inset-block-end: 0;
+    height: tokens.$bm-comp-tabs-size-indicator;
+    width: 100%;
+    border-start-start-radius: tokens.$bm-comp-tabs-radius-indicator;
+    border-start-end-radius: tokens.$bm-comp-tabs-radius-indicator;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    z-index: 3;
+
+    .#{$tabsBaseClass}--vertical & {
+      inset-inline-start: 0;
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+
+      inset-block-end: auto;
+      width: tokens.$bm-comp-tabs-size-indicator;
+      border-start-start-radius: 0;
+      border-start-end-radius: tokens.$bm-comp-tabs-radius-indicator;
+      border-end-start-radius: 0;
+      border-end-end-radius: tokens.$bm-comp-tabs-radius-indicator;
+    }
+  }
+
+  &:hover {
+    &:not(.#{$tabsItemBaseClass}--selected):not(.#{$tabsItemBaseClass}--disabled) {
+      .#{$tabsItemBaseClass}__indicator {
+        display: block;
+        background: tokens.$bm-comp-tabs-color-indicator;
+      }
+    }
+  }
+
+  &__icon {
+    color: tokens.$bm-comp-tabs-color-icon;
+  }
+
+  &--selected {
+    .#{$tabsItemBaseClass}__indicator {
+      display: block;
+      background: tokens.$bm-comp-tabs-color-indicator-selected;
+    }
+    .#{$tabsItemBaseClass}__icon {
+      color: tokens.$bm-comp-tabs-color-icon-selected;
+    }
+  }
+
+  @each $size, $value in $sizes {
+    &--#{$size} {
+      height: map.get($value, 'height');
+      font: map.get($value, 'font');
+
+      &.#{$tabsItemBaseClass}--selected {
+        font: map.get($value, 'selected-font');
+        color: tokens.$bm-comp-tabs-color-text-selected;
+      }
+
+      .#{$tabsItemBaseClass}__icon {
+        width: map.get($value, 'icon');
+        height: map.get($value, 'icon');
+      }
+
+      &.#{$tabsItemBaseClass}--icon-only {
+        height: map.get($value, 'height');
+        width: map.get($value, 'height');
+
+        .#{$tabsItemBaseClass}__icon {
+          width: map.get($value, 'icon-only');
+          height: map.get($value, 'icon-only');
+        }
+
+        .#{$tabsItemBaseClass}__indicator {
+          width: map.get($value, 'indicator');
+        }
+      }
+
+      .#{$tabsBaseClass}--vertical & {
+        .#{$tabsItemBaseClass}__indicator {
+          height: map.get($value, 'indicator');
+          width: tokens.$bm-comp-tabs-size-indicator;
+        }
+      }
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  // Only show outline when using keyboard navigation
+  &:focus-visible:not(:active) {
+    .#{$tabsItemBaseClass}__label {
+      outline: tokens.$bm-sem-border-width-focus solid
+        tokens.$bm-sem-color-border-focus;
+      border-radius: tokens.$bm-sem-radius-focus-sm;
+      z-index: 1;
+    }
+  }
+
+  &__controlText {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 100%;
+    word-break: break-word;
+    flex: 1;
+
+    .#{$tabsBaseClass}--vertical & {
+      white-space: normal;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      line-clamp: 2;
+    }
+  }
+}
+
+.#{$tabsBaseClass}__panel {
+  display: none;
+
+  &--selected {
+    display: flex;
+    align-self: stretch;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  .#{$tabsBaseClass}--vertical & {
+    flex: 1;
+  }
+}

package/components/text.module.scss

@@ -0,0 +1,112 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+@use '../../../../tokens/src/lib/typography/typography.classes.css';
+
+$textBaseClass: '#{constants.$prefix}text';
+
+$colors: (
+  'primary': tokens.$bm-sem-color-text-primary,
+  'secondary': tokens.$bm-sem-color-text-secondary,
+  'positive': tokens.$bm-sem-color-text-positive,
+  'warning': tokens.$bm-sem-color-text-warning,
+  'negative': tokens.$bm-sem-color-text-negative,
+  'infoPrimary': tokens.$bm-sem-color-text-info-primary,
+  'infoSecondary': tokens.$bm-sem-color-text-info-secondary,
+  'selected': tokens.$bm-sem-color-text-selected,
+  'disabled': tokens.$bm-sem-color-text-disabled,
+  'primaryInverse': tokens.$bm-sem-color-text-primary-inverse,
+  'secondaryInverse': tokens.$bm-sem-color-text-secondary-inverse,
+  'expressive': tokens.$bm-expressive-color-fg,
+  'expressiveStronger': tokens.$bm-expressive-color-fg-stronger,
+  'expressiveInverse': tokens.$bm-expressive-color-inverse-fg,
+  'expressiveInverseStronger': tokens.$bm-expressive-color-inverse-fg-stronger,
+);
+
+// Weights, we only use body-bold the rest are take care by the kind prop
+$weights: (
+  'heading-regular': tokens.$bm-sem-font-weight-heading,
+  'heading-bold': tokens.$bm-sem-font-weight-heading-alt,
+  'body-regular': tokens.$bm-sem-font-weight-body,
+  'body-bold': tokens.$bm-sem-font-weight-body-bold,
+);
+
+.#{$textBaseClass} {
+  padding: tokens.$bm-sem-space-0;
+  margin: tokens.$bm-sem-space-0;
+
+  // Word Breaks
+  &--normal {
+    word-break: normal;
+  }
+
+  &--breakAll {
+    word-break: break-all;
+  }
+
+  &--breakWord {
+    word-break: break-word;
+  }
+
+  // Text Alignments
+  &--start {
+    text-align: start;
+  }
+
+  &--center {
+    text-align: center;
+  }
+
+  &--end {
+    text-align: end;
+  }
+
+  // Booleans
+  &--block {
+    display: block;
+  }
+
+  &--truncate {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    ::slotted(*) {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &--italic {
+    font-style: italic;
+  }
+
+  &--underline#{&}--strikethrough {
+    text-decoration: underline line-through;
+  }
+
+  &--underline {
+    text-decoration: underline;
+  }
+
+  &--strikethrough {
+    text-decoration: line-through;
+  }
+
+  // Weights
+  @each $weightName, $weightValue in $weights {
+    &--#{$weightName} {
+      font-weight: $weightValue;
+    }
+  }
+
+  // Colors
+  @each $colorName, $colorValue in $colors {
+    &--#{$colorName} {
+      color: $colorValue;
+    }
+  }
+}