@viasat/beam-styles 2.0.0

package/components/spinner.module.scss

@@ -0,0 +1,261 @@
+@use 'sass:map';
+@use 'sass:math';
+@use '../utils/tokens.scss' as tokens;
+@use './spinner.vars.scss' as vars;
+
+@function get-var($suffix, $spinnerVarPrefix: vars.$spinnerVarPrefix) {
+  @return var(#{$spinnerVarPrefix}#{vars.$spinnerBgStrokeVarSuffix});
+}
+
+@function getRadius($side-length, $stroke-width) {
+  // NOTE: Leave for future refactor. Svg Circle sizing:
+  // 2 * radius + stroke width = browser computet square area side length (sideLength)
+  // (2r + width = sideLength)
+  // so
+  // 2r = sideLength - width
+
+  $radius: math.div($side-length - $stroke-width, 2);
+  @return $radius;
+}
+
+@function get-size-prop-var-name(
+  $size,
+  $suffix,
+  $spinnerVarPrefix: vars.$spinnerVarPrefix
+) {
+  @return '#{$spinnerVarPrefix}-#{$size}-#{$suffix}';
+}
+
+@function get-size-prop-var(
+  $size,
+  $suffix,
+  $spinnerVarPrefix: vars.$spinnerVarPrefix
+) {
+  @return var(#{$spinnerVarPrefix}-#{$size}-#{$suffix});
+}
+
+@mixin square($size) {
+  width: $size;
+  height: $size;
+}
+
+%spinnerShared {
+  position: relative;
+  margin: 0 auto;
+
+  @include square(var(#{vars.$spinnerSideLengthVar}));
+}
+
+%circlesShared {
+  r: calc(
+    (var(#{vars.$spinnerSideLengthVar}) - var(#{vars.$spinnerStrokeWidth})) / 2
+  );
+  stroke-width: var(#{vars.$spinnerStrokeWidth});
+}
+
+%spinnerSvgElement {
+  position: relative;
+  transform: rotate(#{vars.$initialRotation}deg) translate3d(0, 0, 0);
+
+  @include square(calc(var(#{vars.$spinnerSideLengthVar})));
+}
+
+%spinnerCircleElement {
+  @extend %circlesShared;
+  stroke: tokens.$bm-comp-spinner-color-indicator;
+
+  stroke-linecap: round;
+  transform-origin: center;
+}
+
+%spinnerCircleBgElement {
+  @extend %circlesShared;
+  stroke: tokens.$bm-comp-spinner-color-track;
+}
+
+%indeterminateSpinnerWrap {
+  $muchLargerThanCircumference: 500;
+  $asSmallThatItLooksLikeDot: 1;
+
+  @function stroke-dash($multiplier) {
+    @return calc(
+      (var(#{vars.$spinnerSideLengthVar}) - var(#{vars.$spinnerStrokeWidth})) * #{math.$pi} *
+        #{$multiplier}
+    );
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dashoffset: 0;
+      stroke-dasharray: 1, stroke-dash(1.6);
+    }
+
+    50% {
+      stroke-dasharray: stroke-dash(0.712), $muchLargerThanCircumference;
+      stroke-dashoffset: stroke-dash(-0.278);
+    }
+
+    100% {
+      stroke-dasharray: stroke-dash(0.708), $muchLargerThanCircumference;
+      stroke-dashoffset: stroke-dash(-0.992);
+    }
+  }
+}
+
+.#{vars.$spinnerClassBase} {
+  @extend %spinnerShared;
+
+  &__#{vars.$svgEl} {
+    @extend %spinnerSvgElement;
+  }
+
+  &__#{vars.$circleEl} {
+    @extend %spinnerCircleElement;
+  }
+
+  &__#{vars.$circleBgEl} {
+    @extend %spinnerCircleBgElement;
+  }
+
+  &__content-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(#{vars.$spinnerLabelToDescriptionSpacingVar});
+  }
+
+  &__heading {
+    display: inline-flex;
+    color: tokens.$bm-comp-spinner-color-heading;
+    font: tokens.$bm-comp-spinner-typo-heading;
+  }
+
+  &__percentage-indicator {
+    &:before {
+      content: '\a0'; // non-breaking space, works with rtl too (nbsp in html won't)
+    }
+  }
+
+  &__body {
+    margin: 0;
+    color: tokens.$bm-comp-spinner-color-body;
+    font: tokens.$bm-comp-spinner-typo-body;
+    text-align: center;
+  }
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(#{vars.$initialRotation}deg);
+    }
+
+    100% {
+      transform: rotate(#{360 + vars.$initialRotation}deg);
+    }
+  }
+}
+
+.#{vars.$spinnerIndeterminate} {
+  @extend %indeterminateSpinnerWrap;
+
+  .#{vars.$spinnerClassBase}__#{vars.$svgEl} {
+    animation: rotation calc(var(#{vars.$spinnerAnimationSpeedVar}) / 2) linear
+      infinite;
+  }
+
+  .#{vars.$spinnerClassBase}__#{vars.$circleEl} {
+    animation: dash calc(var(#{vars.$spinnerAnimationSpeedVar}) / 2) ease infinite;
+  }
+}
+
+.#{vars.$spinnerDeterminate} {
+  .#{vars.$spinnerClassBase}__#{vars.$circleEl} {
+    transition: stroke-dasharray 0.5s ease;
+
+    stroke-dasharray: calc(
+        (
+            (var(#{vars.$spinnerSideLengthVar}) - var(#{vars.$spinnerStrokeWidth})) *
+              #{math.$pi}
+          ) * (var(#{vars.$spinnerValueVar}) / 100)
+      )
+      300px;
+    stroke-dashoffset: 0;
+  }
+}
+
+.#{vars.$spinnerWrapClassBase} {
+  #{vars.$spinnerAnimationSpeedVar}: 3s;
+  max-width: tokens.$bm-comp-spinner-size-width;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(#{vars.$spinnerLabelToSpinnerSpacingVar});
+
+  progress {
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    position: absolute;
+    visibility: hidden;
+    width: 0;
+  }
+
+  ::-moz-progress-bar,
+  ::-webkit-progress-bar,
+  ::-webkit-progress-value,
+  ::-webkit-progress-inner-element {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  &--xs,
+  &--xxs {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    max-width: unset;
+
+    .#{vars.$spinnerClassBase} {
+      box-sizing: content-box;
+      margin-bottom: 0;
+      padding: tokens.$bm-comp-spinner-space-nudge-y 0;
+
+      &__content-wrapper {
+        display: inline-flex;
+        flex-direction: row;
+      }
+
+      &__body {
+        text-align: left;
+      }
+    }
+  }
+
+  &--xxs {
+    .#{vars.$spinnerClassBase} {
+      &__heading {
+        font: tokens.$bm-sem-typo-label-sm;
+      }
+
+      &__body {
+        font: tokens.$bm-sem-typo-body-sm;
+      }
+    }
+  }
+
+  @each $size, $token-values in vars.$fromTokens {
+    &--#{$size} {
+      #{vars.$spinnerSideLengthVar}: map.get($token-values, 'side-length');
+      #{vars.$spinnerStrokeWidth}: map.get($token-values, 'stroke-width');
+      #{vars.$spinnerLabelToSpinnerSpacingVar}: map.get(
+        $token-values,
+        'label-to-spinner-spacing'
+      );
+      #{vars.$spinnerLabelToDescriptionSpacingVar}: map.get(
+        $token-values,
+        'label-to-description-spacing'
+      );
+    }
+  }
+}

package/components/spinner.vars.scss

@@ -0,0 +1,85 @@
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/Spinner';
+
+$initialRotation: -90;
+
+$spinnerClassBase: '#{constants.$prefix}spinner';
+$spinnerWrapClassBase: '#{$spinnerClassBase}-wrap';
+$hasValueButNotEmptyValue: '[value]:not([value=""])';
+
+$interdeterminateSuffix: '--indeterminate';
+$determinateSuffix: '--determinate';
+
+$spinnerIndeterminate: '#{$spinnerClassBase}#{$interdeterminateSuffix}';
+$spinnerDeterminate: '#{$spinnerClassBase}#{$determinateSuffix}';
+
+$svgEl: 'svg';
+$circleEl: 'circle';
+$circleBgEl: 'circle-bg';
+
+$spinnerSvgClassBase: '#{$spinnerClassBase}__#{svgEl}';
+$circleSvgClassBase: '#{$spinnerClassBase}__#{$circleEl}';
+$circleBgClassBase: '#{$spinnerClassBase}__#{$circleBgEl}';
+
+$spinnerVarPrefix: '--#{$spinnerClassBase}-' !default;
+
+$spinnerStrokeWidth: '#{$spinnerVarPrefix}stroke-width';
+$spinnerCircleRadiusVar: '#{$spinnerVarPrefix}circle-radius';
+$spinnerSideLengthVar: '#{$spinnerVarPrefix}side-length';
+$spinnerLabelToSpinnerSpacingVar: '#{$spinnerVarPrefix}label-to-spinner-spacing';
+$spinnerLabelToDescriptionSpacingVar: '#{$spinnerVarPrefix}label-to-description-spacing';
+$spinnerAnimationSpeedVar: '#{$spinnerVarPrefix}animation-speed';
+$spinnerStrokeVar: '#{$spinnerVarPrefix}stroke-color';
+$spinnerBgStrokeVar: '#{$spinnerVarPrefix}spinner-bg';
+$spinnerValueVar: '#{$spinnerVarPrefix}value';
+
+$fromTokens: (
+  'xxs': (
+    side-length: tokens.$bm-comp-spinner-size-xxs-track,
+    stroke-width: tokens.$bm-comp-spinner-size-xxs-border-width,
+    label-to-spinner-spacing: tokens.$bm-comp-spinner-space-xs-gap,
+    label-to-description-spacing: tokens.$bm-comp-spinner-space-content-gap,
+  ),
+  'xs': (
+    side-length: tokens.$bm-comp-spinner-size-xs-track,
+    stroke-width: tokens.$bm-comp-spinner-size-xs-border-width,
+    label-to-spinner-spacing: tokens.$bm-comp-spinner-space-xs-gap,
+    label-to-description-spacing: tokens.$bm-comp-spinner-space-content-gap,
+  ),
+  'sm': (
+    side-length: tokens.$bm-comp-spinner-size-sm-track,
+    stroke-width: tokens.$bm-comp-spinner-size-sm-border-width,
+    label-to-spinner-spacing: tokens.$bm-comp-spinner-space-sm-gap,
+    label-to-description-spacing: tokens.$bm-comp-spinner-space-content-gap,
+  ),
+  'md': (
+    side-length: tokens.$bm-comp-spinner-size-md-track,
+    stroke-width: tokens.$bm-comp-spinner-size-md-border-width,
+    label-to-spinner-spacing: tokens.$bm-comp-spinner-space-md-gap,
+    label-to-description-spacing: tokens.$bm-comp-spinner-space-content-gap,
+  ),
+  'lg': (
+    side-length: tokens.$bm-comp-spinner-size-lg-track,
+    stroke-width: tokens.$bm-comp-spinner-size-lg-border-width,
+    label-to-spinner-spacing: tokens.$bm-comp-spinner-space-lg-gap,
+    label-to-description-spacing: tokens.$bm-comp-spinner-space-content-gap,
+  ),
+);
+
+$sizeModifiers: (
+  xs: 'xs',
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+);
+
+$spinnerColors: (
+  stroke-color: tokens.$bm-comp-spinner-color-indicator,
+  spinner-bg: tokens.$bm-comp-spinner-color-track,
+);
+
+$interdeterminateSpinnerFillingAnimationTime: 3s;
+$interdeterminateSpinnerRotationAnimationTime: 2 *
+  $interdeterminateSpinnerFillingAnimationTime;

package/components/stepper.module.scss

@@ -0,0 +1,255 @@
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss';
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/Stepper';
+
+$stepperBaseClass: '#{constants.$prefix}stepper';
+
+$stepperLineThicknessVarName: '--#{constants.$prefix}comp-stepper-line-thickness';
+$stepperMarkerContainerSizeVarName: '--#{constants.$prefix}comp-stepper-size-container';
+$stepperInlineStartLineSpaceVarName: '--#{constants.$prefix}comp-stepper-space-inline-start';
+$stepperVerticalLineMinHeightVarName: '--#{constants.$prefix}comp-stepper-size-line-min-height';
+$stepperLineColorVarName: '--#{constants.$prefix}comp-stepper-line-color';
+
+.#{$stepperBaseClass} {
+  #{$stepperLineThicknessVarName}: #{tokens.$bm-comp-stepper-border-width-line};
+  #{$stepperMarkerContainerSizeVarName}: #{tokens.$bm-comp-stepper-size-md-container};
+  #{$stepperInlineStartLineSpaceVarName}: calc(
+    #{tokens.$bm-comp-stepper-space-horizontal-line-gap} + var(
+        #{$stepperMarkerContainerSizeVarName}
+      ) / 2
+  );
+  #{$stepperVerticalLineMinHeightVarName}: 1.5rem;
+
+  .#{$stepperBaseClass}__step--marker-only {
+    #{$stepperMarkerContainerSizeVarName}: #{tokens.$bm-comp-stepper-size-sm-container};
+    #{$stepperInlineStartLineSpaceVarName}: calc(
+      #{tokens.$bm-comp-stepper-space-horizontal-line-gap} + var(
+          #{$stepperMarkerContainerSizeVarName}
+        ) / 2
+    );
+  }
+
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: unset;
+  align-items: flex-start;
+
+  &--horizontal {
+    flex-direction: row;
+  }
+
+  &--vertical {
+    #{$stepperLineThicknessVarName}: #{tokens.$bm-comp-stepper-border-width-container};
+    #{$stepperInlineStartLineSpaceVarName}: calc(
+      #{tokens.$bm-comp-stepper-size-md-line-wrapper} / 2
+    );
+
+    .#{$stepperBaseClass}__step--marker-only {
+      #{$stepperInlineStartLineSpaceVarName}: calc(
+        #{tokens.$bm-comp-stepper-size-sm-line-wrapper} / 2
+      );
+    }
+
+    flex-direction: column;
+  }
+}
+
+.#{$stepperBaseClass}__step {
+  #{$stepperLineColorVarName}: #{tokens.$bm-comp-stepper-color-line};
+
+  display: flex;
+  position: relative;
+  padding-block: 0;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 0;
+
+  &--error {
+    .#{$stepperBaseClass}__marker {
+      border-color: tokens.$bm-comp-stepper-color-error-border;
+      background: tokens.$bm-comp-stepper-color-error-bg;
+      color: tokens.$bm-comp-stepper-color-error-fg;
+    }
+
+    .#{$stepperBaseClass}__heading {
+      color: tokens.$bm-comp-stepper-color-error-heading;
+    }
+  }
+
+  &--current {
+    .#{$stepperBaseClass}__marker {
+      border-color: tokens.$bm-comp-stepper-color-current-border;
+      background: tokens.$bm-comp-stepper-color-current-bg;
+      color: tokens.$bm-comp-stepper-color-current-fg;
+    }
+
+    .#{$stepperBaseClass}__heading {
+      color: tokens.$bm-comp-stepper-color-current-heading;
+    }
+  }
+
+  &--complete {
+    .#{$stepperBaseClass}__marker {
+      border-color: tokens.$bm-comp-stepper-color-complete-border;
+      background: tokens.$bm-comp-stepper-color-complete-bg;
+      color: tokens.$bm-comp-stepper-color-complete-fg;
+    }
+
+    .#{$stepperBaseClass}__heading {
+      color: tokens.$bm-comp-stepper-color-complete-heading;
+    }
+
+    #{$stepperLineColorVarName}: #{tokens.$bm-comp-stepper-color-line-complete};
+
+    .#{$stepperBaseClass}__content-wrapper {
+      border-inline-start-color: var(#{$stepperLineColorVarName});
+    }
+  }
+
+  &--horizontal {
+    min-width: var(#{$stepperMarkerContainerSizeVarName});
+
+    &::after {
+      content: '';
+      inline-size: calc(
+        100% -
+          (
+            var(#{$stepperMarkerContainerSizeVarName}) + 2 * #{tokens.$bm-comp-stepper-space-horizontal-line-gap}
+          )
+      );
+      inset-inline-start: calc(50% + var(#{$stepperInlineStartLineSpaceVarName}));
+      background: var(#{$stepperLineColorVarName});
+      height: var(#{$stepperLineThicknessVarName});
+      inset-block-start: calc(
+        var(#{$stepperMarkerContainerSizeVarName}) / 2 -
+          var(#{$stepperLineThicknessVarName}) / 2
+      );
+      position: absolute;
+    }
+
+    &:last-child {
+      &::after {
+        content: unset;
+      }
+    }
+
+    .#{$stepperBaseClass}__body {
+      text-align: center;
+    }
+  }
+
+  &--vertical {
+    flex-direction: column;
+    align-items: start;
+    width: 100%;
+
+    .#{$stepperBaseClass}__content-wrapper {
+      width: calc(
+        100% -
+          (
+            var(#{$stepperInlineStartLineSpaceVarName}) + #{tokens.$bm-comp-stepper-space-vertical-content-wrapper-gap}
+          )
+      );
+      min-height: var(#{$stepperVerticalLineMinHeightVarName});
+      flex: 1;
+      border-inline-start: 0.0625rem solid var(#{$stepperLineColorVarName});
+      padding-inline-start: calc(
+        var(#{$stepperInlineStartLineSpaceVarName}) + #{tokens.$bm-comp-stepper-space-vertical-content-wrapper-gap}
+      );
+      margin-inline-start: calc(
+        var(#{$stepperInlineStartLineSpaceVarName}) -
+          (var(#{$stepperLineThicknessVarName}) / 2)
+      );
+      padding-block-end: tokens.$bm-comp-stepper-space-vertical-content-bottom;
+      margin-block: tokens.$bm-comp-stepper-space-vertical-content-wrapper-y;
+    }
+
+    &:last-child {
+      .#{$stepperBaseClass}__content-wrapper {
+        border: unset;
+      }
+    }
+  }
+}
+
+.#{$stepperBaseClass}__marker-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: tokens.$bm-comp-stepper-space-gap;
+
+  &--vertical {
+    flex-direction: row;
+    justify-content: flex-start;
+    padding-inline-start: unset;
+    gap: tokens.$bm-comp-stepper-space-gap;
+  }
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    gap: tokens.$bm-comp-stepper-space-content-gap;
+    padding: 0 #{tokens.$bm-comp-stepper-space-horizontal-content-x};
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+}
+
+.#{$stepperBaseClass}__marker {
+  width: tokens.$bm-comp-stepper-size-md-container;
+  height: tokens.$bm-comp-stepper-size-md-container;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: tokens.$bm-comp-stepper-radius;
+  border: tokens.$bm-comp-stepper-border-width-container solid
+    tokens.$bm-comp-stepper-color-incomplete-border;
+  background: tokens.$bm-comp-stepper-color-incomplete-bg;
+  font: tokens.$bm-comp-stepper-typo-number;
+  color: tokens.$bm-comp-stepper-color-incomplete-fg;
+  text-align: center;
+  padding: unset;
+
+  &--interactive {
+    cursor: pointer;
+    &:focus-visible {
+      @include mixins.simulated-inset-outline();
+    }
+  }
+
+  > svg {
+    width: tokens.$bm-sem-size-icon-sm;
+    height: tokens.$bm-sem-size-icon-sm;
+    flex-shrink: 0;
+  }
+
+  &--marker-only {
+    width: tokens.$bm-comp-stepper-size-sm-container;
+    height: tokens.$bm-comp-stepper-size-sm-container;
+
+    > svg {
+      width: tokens.$bm-sem-size-icon-xs;
+      height: tokens.$bm-sem-size-icon-xs;
+    }
+  }
+}
+
+.#{$stepperBaseClass}__heading {
+  font: tokens.$bm-comp-stepper-typo-heading;
+  color: tokens.$bm-comp-stepper-color-incomplete-heading;
+  text-align: center;
+  &--interactive {
+    cursor: pointer;
+  }
+}
+
+.#{$stepperBaseClass}__body {
+  color: tokens.$bm-comp-stepper-color-body;
+  font: tokens.$bm-comp-stepper-typo-body;
+  text-align: start;
+}