@viasat/beam-styles 2.0.0

package/components/sideNav.module.scss

@@ -0,0 +1,355 @@
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+@use '../utils/mixins.scss' as mixins;
+@use './actionList.vars.scss' as actionListVars;
+@use './icon.vars.scss' as iconVars;
+@use '../utils/stateLayer.module.scss' as stateLayer;
+@use '../utils/stateLayerVars.scss' as stateLayerVars;
+@use './accordion.vars.scss' as accordionVars;
+
+@import '../../../../tokens/src/lib/components/SideNav';
+
+$sideNavBaseClass: '#{constants.$prefix}side-nav';
+$transitionDuration: 0.3s;
+$sideNavItemBaseClass: '#{$sideNavBaseClass}__action';
+$desktopBreakpoint: 1200px;
+
+@keyframes post-transition-effect {
+  100% {
+    overflow-x: unset;
+  }
+}
+
+.#{$sideNavBaseClass}__wrapper {
+  position: relative;
+}
+
+.#{$sideNavBaseClass} {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  user-select: none;
+  inset-block: 0;
+  inset-inline-start: 0;
+  align-items: center;
+  z-index: 2;
+  transition: inline-size $transitionDuration;
+  background: tokens.$bm-comp-side-nav-color-bg;
+  inline-size: 0px;
+  position: relative;
+  overflow-x: clip;
+  height: 100%;
+
+  .#{actionListVars.$actionListBaseClass} {
+    width: 100%;
+  }
+
+  &--mobile-enabled {
+    @media screen and (max-width: calc(#{$desktopBreakpoint} - 1px)) {
+      display: none;
+
+      &.#{$sideNavBaseClass}--interacted {
+        display: flex;
+      }
+    }
+  }
+
+  &--floating {
+    position: absolute;
+  }
+
+  &--rail {
+    inline-size: tokens.$bm-comp-side-nav-size-rail;
+    border-inline-end: tokens.$bm-sem-border-width-md solid
+      tokens.$bm-comp-side-nav-color-border;
+    box-sizing: content-box;
+
+    @media screen and (max-width: calc(#{$desktopBreakpoint} - 1px)) {
+      &.#{$sideNavBaseClass}--mobile-enabled {
+        display: none;
+      }
+    }
+
+    .#{$sideNavItemBaseClass} {
+      .#{actionListVars.$actionListItemBaseClass} {
+        &__content,
+        &__content-after,
+        &__content-flyout {
+          width: 0;
+          overflow: hidden;
+          min-width: 0;
+        }
+      }
+    }
+
+    .#{$sideNavBaseClass}__header,
+    .#{$sideNavBaseClass}__heading,
+    .#{$sideNavBaseClass}__resize-handler,
+    .#{$sideNavBaseClass}__body__nav-container,
+    .#{$sideNavBaseClass}__footer__slot {
+      display: none;
+    }
+  }
+
+  &--drawer {
+    border-inline-end: tokens.$bm-sem-border-width-md solid
+      tokens.$bm-comp-side-nav-color-border;
+    animation: post-transition-effect $transitionDuration both;
+
+    .#{$sideNavBaseClass}__body__nav-container {
+      @media screen and (min-width: $desktopBreakpoint) {
+        display: none;
+      }
+    }
+  }
+
+  &__action {
+    width: 100%;
+
+    &.#{actionListVars.$actionListItemBaseClass} {
+      padding-inline-start: tokens.$bm-comp-side-nav-space-item-start;
+      text-decoration: none;
+    }
+
+    &--selected {
+      .#{actionListVars.$actionListItemBaseClass}__content-before,
+      .#{actionListVars.$actionListItemBaseClass}__content-after {
+        #{iconVars.$iconColor}: tokens.$bm-comp-actionlist-color-icon-selected;
+      }
+
+      .#{actionListVars.$actionListItemBaseClass}__text {
+        color: tokens.$bm-comp-actionlist-color-text-selected;
+        font: tokens.$bm-comp-actionlist-typo-text-selected;
+      }
+
+      &::after {
+        #{stateLayerVars.$right}: calc(
+          -1 * #{tokens.$bm-comp-actionlist-size-state-offset}
+        );
+        #{stateLayerVars.$left}: calc(
+          -1 * #{tokens.$bm-comp-actionlist-size-state-offset}
+        );
+        @extend %state-layer-base; // TODO: figure out an alternative to this to avoid bringing in the whole stateLayer module
+        content: '';
+        border-radius: tokens.$bm-comp-actionlist-radius;
+        z-index: -2;
+        background-color: #{tokens.$bm-sem-color-surface-selected};
+        opacity: 1;
+      }
+
+      &::before {
+        display: block;
+        position: absolute;
+        background: tokens.$bm-comp-actionlist-color-indicator;
+        content: '';
+        inset-inline-start: 0;
+        transform: translateX(-50%);
+        border-radius: tokens.$bm-comp-actionlist-radius-indicator;
+        width: tokens.$bm-comp-actionlist-size-indicator-width;
+        height: calc(100% - 2 * #{tokens.$bm-sem-space-75});
+      }
+    }
+
+    &--expandable {
+      &.#{$sideNavBaseClass}__action--selected {
+        &::before {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &__resize-handler {
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+    z-index: 100;
+    width: calc(1.5rem / 2);
+    height: 100%;
+    inset-block-start: 0px;
+    inset-inline-end: calc(-1.5rem / 2);
+    display: flex;
+    justify-content: start;
+
+    &:hover,
+    &:active {
+      opacity: 1;
+      cursor: col-resize;
+      border-inline-start: solid tokens.$bm-sem-color-border-selected
+        tokens.$bm-sem-border-width-lg;
+    }
+
+    &--hidden {
+      display: none;
+    }
+  }
+
+  &__backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    transition: all $transitionDuration;
+    background: transparent;
+
+    &--opaque {
+      background: tokens.$bm-sem-color-overlay-black-40;
+    }
+  }
+
+  &__heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-block: tokens.$bm-comp-side-nav-space-heading-y;
+    padding-inline-start: tokens.$bm-comp-side-nav-space-item-start;
+    color: tokens.$bm-comp-actionlist-color-group-heading;
+    white-space: nowrap;
+
+    &__content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      font-family: tokens.$bm-sem-font-family-label;
+      font-size: 0.75rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 1.25rem;
+    }
+  }
+
+  &__group {
+    width: 100%;
+  }
+
+  &__header {
+    display: flex;
+    padding: tokens.$bm-sem-space-50 tokens.$bm-comp-side-nav-space-x;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    align-self: stretch;
+    gap: tokens.$bm-sem-space-50;
+    overflow-x: clip;
+  }
+
+  &__footer {
+    display: flex;
+    padding: tokens.$bm-sem-space-50 tokens.$bm-comp-side-nav-space-x;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: tokens.$bm-sem-space-50;
+    align-self: stretch;
+    > div {
+      width: 100%;
+    }
+  }
+
+  &__body--scrolled-bottom + &__footer {
+    border-block-start: 1px solid tokens.$bm-sem-color-border-01;
+  }
+
+  &__header:has(+ .#{$sideNavBaseClass}__body--scrolled-top) {
+    border-block-end: 1px solid tokens.$bm-sem-color-border-01;
+  }
+
+  &__body {
+    display: flex;
+    padding-block: tokens.$bm-sem-space-50;
+    padding-inline: tokens.$bm-comp-side-nav-space-x;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 0 0;
+    align-self: stretch;
+    overflow-y: auto;
+    overflow-x: hidden;
+    > div {
+      width: 100%;
+    }
+
+    &__divider {
+      margin: #{tokens.$bm-comp-actionlist-space-y} 0;
+    }
+
+    &__nav-container {
+      padding-block-end: tokens.$bm-sem-space-150;
+    }
+  }
+
+  .#{accordionVars.$accordionBaseClass} {
+    position: relative;
+
+    .#{actionListVars.$actionListItemBaseClass} {
+      width: 100%;
+    }
+
+    &__chevron {
+      display: none;
+    }
+
+    .#{accordionVars.$accordionBaseClass}__container {
+      padding: 0;
+      min-height: unset;
+      flex-direction: row-reverse;
+      gap: 0;
+
+      &--expanded {
+        .#{$sideNavItemBaseClass}__expandable-icon svg {
+          will-change: transform;
+          transition: transform 0.2s ease;
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+    section[class*='#{accordionVars.$accordionBaseClass}__panel'] {
+      padding: 0;
+
+      > div {
+        padding-inline: 0.5rem;
+        margin-inline: -0.5rem;
+        overflow: unset;
+        overflow-x: visible;
+        overflow-y: hidden;
+        gap: 0;
+      }
+    }
+
+    .#{accordionVars.$accordionBaseClass}__heading {
+      gap: 0;
+      position: relative;
+
+      .#{$sideNavItemBaseClass}__expandable-icon {
+        #{stateLayerVars.getStateLayerSelector('&', 'focus-within')},
+        #{stateLayerVars.getStateLayerSelector('&', 'focus-visible')},
+        #{stateLayerVars.getStateLayerSelector('&', 'focus')},
+        #{stateLayerVars.getStateLayerSelector('&', 'hover')},
+        #{stateLayerVars.getStateLayerSelector('&', 'active')} {
+          #{stateLayerVars.$background}: transparent;
+        }
+
+        & .#{stateLayerVars.$stateLayerBaseClass} {
+          #{stateLayerVars.$top}: 0.125rem;
+          #{stateLayerVars.$bottom}: 0.125rem;
+          #{stateLayerVars.$left}: 0.125rem;
+          #{stateLayerVars.$right}: 0.125rem;
+          border-radius: tokens.$bm-sem-radius-sm;
+        }
+
+        z-index: 2;
+        position: absolute;
+        inset-inline-start: 0;
+        transform: translateX(-50%);
+        width: tokens.$bm-comp-btn-size-sm-icon;
+        height: tokens.$bm-comp-btn-size-sm-icon;
+
+        &:has(+ .#{$sideNavBaseClass}__action--selected) {
+          color: tokens.$bm-comp-actionlist-color-indicator;
+        }
+      }
+    }
+  }
+}

package/components/slider.module.scss

@@ -0,0 +1,240 @@
+@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/Slider';
+
+$sliderCursor: '--#{constants.$prefix}slider-cursor';
+$sliderTrackCursor: '--#{constants.$prefix}slider-track-cursor';
+$sliderThumbCursor: '--#{constants.$prefix}slider-thumb-cursor';
+
+$sliderMinPercentage: '--#{constants.$prefix}comp-slider-min-percentage';
+$sliderMaxPercentage: '--#{constants.$prefix}comp-slider-max-percentage';
+
+$sliderThumbPercentage: '--#{constants.$prefix}comp-slider-thumb-percentage';
+$sliderThumbScale: '--#{constants.$prefix}comp-slider-thumb-scale';
+
+$sliderBaseClass: '#{constants.$prefix}slider';
+
+$sliderTransitionTimingFunction: cubic-bezier(0, .33, 0, .76);
+$sliderTransitionDuration: 0.05s;
+
+.#{$sliderBaseClass} {
+  width: 100%;
+  @include cursors.applyTextCursors();
+
+  #{$sliderCursor}: pointer;
+  #{$sliderTrackCursor}: pointer;
+  #{$sliderThumbCursor}: pointer;
+
+  #{$sliderMinPercentage}: 0cqw;
+  #{$sliderMaxPercentage}: 0cqw;
+
+  font: tokens.$bm-comp-input-typo-default;
+
+  &--disabled {
+    #{$sliderCursor}: not-allowed;
+    #{$sliderTrackCursor}: not-allowed;
+    #{$sliderThumbCursor}: not-allowed;
+
+    .#{$sliderBaseClass}__thumb {
+      background-color: tokens.$bm-comp-input-color-icon;
+      border: unset;
+    }
+
+    .#{$sliderBaseClass}__track::before {
+      background-color: tokens.$bm-comp-input-color-border-disabled;
+    }
+
+    .#{$sliderBaseClass}__fill {
+      background-color: tokens.$bm-comp-input-color-icon;
+    }
+
+    .#{$sliderBaseClass}__value-axis-label {
+      cursor: not-allowed;
+      pointer-events: none;
+      color: tokens.$bm-comp-input-color-icon;
+    }
+  }
+
+  &--readonly {
+    #{$sliderCursor}: default;
+    #{$sliderTrackCursor}: not-allowed;
+    #{$sliderThumbCursor}: default;
+
+    .#{$sliderBaseClass}__thumb {
+      background-color: tokens.$bm-comp-input-color-icon;
+      border: unset;
+    }
+
+    .#{$sliderBaseClass}__track::before {
+      background-color: tokens.$bm-comp-input-color-border-disabled;
+    }
+
+    .#{$sliderBaseClass}__fill {
+      background-color: tokens.$bm-comp-input-color-border-disabled;
+    }
+
+    .#{$sliderBaseClass}__value-axis-label {
+      cursor: not-allowed;
+      pointer-events: none;
+      color: tokens.$bm-comp-input-color-icon;
+    }
+  }
+
+  &--with-value-axis {
+    .#{$sliderBaseClass}__content-container {
+      align-items: flex-start;
+    }
+  }
+
+  &__track {
+    position: relative;
+    height: tokens.$bm-comp-slider-size-handle;
+    display: flex;
+    align-items: center;
+    cursor: var(#{$sliderTrackCursor}, pointer);
+    container: slider-track / size;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: tokens.$bm-comp-slider-size-track;
+      background-color: tokens.$bm-comp-slider-color-track-bg;
+      border-radius: tokens.$bm-comp-slider-radius-track;
+    }
+  }
+
+  &__fill {
+    position: absolute;
+    height: tokens.$bm-comp-slider-size-track;
+    background-color: tokens.$bm-comp-slider-color-track-bg-filled;
+    border-radius: tokens.$bm-comp-slider-radius-track;
+    transition: transform  $sliderTransitionTimingFunction;
+    left: 0;
+    width: 100%;
+    transform-origin: 0% 50%;
+    transform:
+      translateX(var(#{$sliderMinPercentage}, 0cqw))
+      scaleX(calc((var(#{$sliderMaxPercentage}, 0cqw) - var(#{$sliderMinPercentage}, 0cqw)) / 100cqw));
+      transition: transform $sliderTransitionDuration $sliderTransitionTimingFunction;
+    
+    [dir="rtl"] & {
+      transform:
+        translateX(calc(100cqw - var(#{$sliderMaxPercentage}, 0cqw)))
+        scaleX(calc((var(#{$sliderMaxPercentage}, 0cqw) - var(#{$sliderMinPercentage}, 0cqw)) / 100cqw));
+    }
+  }
+
+  &__thumb-container {
+    #{$sliderThumbPercentage}: 0cqw;
+    #{$sliderThumbScale}: 1;
+
+    position: absolute;
+    left: calc(0 - tokens.$bm-comp-slider-size-handle / 2);
+    width: tokens.$bm-comp-slider-size-handle;
+    height: tokens.$bm-comp-slider-size-handle;
+    transition: transform $sliderTransitionDuration $sliderTransitionTimingFunction;
+    transform-origin: 50% 50%;
+    transform: translateX(calc(var(#{$sliderThumbPercentage}, 0cqw) - 50%));
+
+    [dir="rtl"] & {
+      transform: translateX(calc(50% - var(#{$sliderThumbPercentage}, 0cqw)));
+    }
+  }
+
+  &__thumb {
+    width: 100%;
+    height: 100%;
+    background-color: tokens.$bm-comp-slider-color-handle-bg;
+    border-radius: tokens.$bm-comp-slider-radius-handle;
+    border: tokens.$bm-comp-slider-border-width-handle solid
+      tokens.$bm-comp-slider-color-handle-border;
+    cursor: var(#{$sliderThumbCursor}, grab);
+
+    transform: scale(var(#{$sliderThumbScale}, 1));
+    transition: transform $sliderTransitionDuration $sliderTransitionTimingFunction,
+  }
+
+  &__thumb:focus-visible {
+    outline-color: tokens.$bm-utility-color-accent-default;
+    box-shadow: 0 0 0 tokens.$bm-sem-border-width-focus
+        tokens.$bm-sem-color-surface-01,
+      0 0 0
+        calc(tokens.$bm-sem-border-width-focus + tokens.$bm-sem-border-width-focus)
+        tokens.$bm-sem-color-border-focus;
+  }
+
+  &__thumb-container:active {
+    #{$sliderThumbScale}: calc(tokens.$bm-comp-slider-size-handle-active / tokens.$bm-comp-slider-size-handle);
+  }
+
+  &__tick {
+    position: absolute;
+    top: 50%;
+    width: tokens.$bm-comp-slider-size-step-x;
+    height: tokens.$bm-comp-slider-size-track;
+    background: tokens.$bm-comp-slider-color-step;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  &__value-axis-label {
+    font: tokens.$bm-comp-slider-typo-values;
+    color: tokens.$bm-comp-slider-color-values;
+    position: absolute;
+    background: none;
+    border: none;
+    padding: 0;
+    z-index: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    pointer-events: auto;
+    font-weight: inherit;
+  }
+
+  &__value-axis-helper {
+    visibility: hidden;
+    position: relative;
+  }
+
+  &__value-axis {
+    position: relative;
+    width: 100%;
+    margin-top: tokens.$bm-comp-slider-space-gap-y;
+  }
+
+  &__content-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: tokens.$bm-comp-slider-space-gap-outside-x;
+  }
+
+  &__textfield {
+    width: 100%;
+
+    /* Chromium-based */
+    ::-webkit-outer-spin-button,
+    ::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    /* Firefox */
+    [type='number'] {
+      -moz-appearance: textfield;
+      appearance: textfield;
+    }
+  }
+
+  &__content-before,
+  &__content-after {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}