@viasat/beam-styles 2.0.0

package/components/breadcrumbs.module.scss

@@ -0,0 +1,149 @@
+@use 'sass:map';
+@use '../utils/tokens.scss';
+@use '../utils/constants.scss';
+
+@import '../../../../tokens/src/lib/components/Breadcrumb';
+
+$breadcrumbsBaseClass: '#{constants.$prefix}breadcrumbs';
+$truncation-width: var(
+  --#{constants.$prefix}comp-breadcrumbs-truncation-width,
+  auto
+);
+$linkSecondaryColor: '--#{constants.$prefix}sem-color-link-secondary';
+$linkPrimaryHoverColor: '--#{constants.$prefix}comp-link-color-primary-hover';
+$linkSecondaryActiveColor: '--#{constants.$prefix}comp-link-color-secondary-active';
+$semOpacityDisabled: '--#{constants.$prefix}sem-opacity-disabled';
+
+.#{$breadcrumbsBaseClass} {
+  &__list {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    gap: tokens.$bm-comp-breadcrumb-space-gap;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: tokens.$bm-comp-breadcrumb-space-gap;
+  }
+
+  &__link {
+    #{$linkSecondaryColor}: #{tokens.$bm-comp-breadcrumb-color-enabled};
+
+    &:hover {
+      #{$linkPrimaryHoverColor}: #{tokens.$bm-comp-breadcrumb-color-hover};
+    }
+
+    &:active {
+      #{$linkSecondaryActiveColor}: #{tokens.$bm-comp-breadcrumb-color-active};
+    }
+
+    &.bm-link--disabled {
+      cursor: pointer;
+      #{$semOpacityDisabled}: 1;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    display: inline-flex;
+
+    ::slotted([slot='icon']) {
+      color: tokens.$bm-comp-breadcrumb-color-enabled;
+      width: tokens.$bm-comp-link-size-sm-icon;
+      height: tokens.$bm-comp-link-size-sm-icon;
+      display: inline-flex;
+    }
+
+    &--current {
+      // Since we use link under the hood, we need to make sure the icon is the same size as the links
+      width: tokens.$bm-comp-link-size-sm-icon;
+      height: tokens.$bm-comp-link-size-sm-icon;
+      color: tokens.$bm-comp-breadcrumb-color-selected;
+    }
+  }
+
+  &__separator {
+    min-width: tokens.$bm-comp-breadcrumb-size-icon-chevron;
+    min-height: tokens.$bm-comp-breadcrumb-size-icon-chevron;
+    max-width: tokens.$bm-comp-breadcrumb-size-icon-chevron;
+    max-height: tokens.$bm-comp-breadcrumb-size-icon-chevron;
+    color: tokens.$bm-comp-breadcrumb-color-enabled;
+
+    [dir='rtl'] & {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+
+    [dir='rtl'] & {
+      unicode-bidi: plaintext;
+    }
+  }
+
+  &__current {
+    color: tokens.$bm-comp-breadcrumb-color-selected;
+    font: tokens.$bm-comp-breadcrumb-typo-default;
+
+    display: flex;
+    align-items: center;
+    gap: tokens.$bm-comp-breadcrumb-space-gap;
+  }
+
+  &__item--ellipsis {
+    color: tokens.$bm-comp-breadcrumb-color-enabled;
+
+    :focus-visible {
+      outline: tokens.$bm-sem-border-width-focus solid
+        tokens.$bm-sem-color-border-focus;
+      border-radius: tokens.$bm-sem-radius-focus-md;
+    }
+  }
+
+  &--wrap {
+    .#{$breadcrumbsBaseClass}__list {
+      flex-wrap: wrap;
+    }
+  }
+
+  :host(*) &__text {
+    color: tokens.$bm-comp-breadcrumb-color-enabled;
+
+    &:hover {
+      color: tokens.$bm-comp-breadcrumb-color-hover;
+    }
+
+    &:active {
+      color: tokens.$bm-comp-breadcrumb-color-active;
+    }
+  }
+}
+
+::part(link) {
+  max-width: $truncation-width;
+  #{$linkSecondaryColor}: #{tokens.$bm-comp-breadcrumb-color-enabled};
+}
+
+:host-context([dir='rtl']) {
+  .#{$breadcrumbsBaseClass} {
+    &__text {
+      unicode-bidi: plaintext;
+    }
+
+    &__separator {
+      transform: rotate(180deg);
+    }
+  }
+}

package/components/button.module.scss

@@ -0,0 +1,179 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+@use '../utils/stateLayerVars.scss' as state-layer-vars;
+@use '../utils/mixins.scss';
+@use './button.vars.scss' as vars;
+@use './spinner.vars.scss' as spinner;
+
+@import '../../../../tokens/src/lib/components/Button';
+
+%icon-size {
+  display: block;
+  width: var(#{vars.$buttonIconSizeVarName});
+  height: var(#{vars.$buttonIconSizeVarName});
+}
+
+.#{vars.$buttonBaseClass} {
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  width: fit-content;
+  padding: var(#{vars.$buttonPaddingYVarName}) var(#{vars.$buttonPaddingXVarName});
+  justify-content: center;
+  align-items: center;
+  gap: tokens.$bm-comp-btn-space-gap;
+  border: none;
+  border-radius: tokens.$bm-comp-btn-radius-container;
+  max-width: 100%;
+
+  // Sizes
+  $defaultSize: map.get(vars.$sizes, 'md');
+  font: #{map.get($defaultSize, 'font')};
+  min-width: #{map.get($defaultSize, 'min-width')};
+  min-height: #{map.get($defaultSize, 'min-height')};
+  #{vars.$buttonPaddingYVarName}: #{map.get($defaultSize, 'padding-y')};
+  #{vars.$buttonPaddingXVarName}: #{map.get($defaultSize, 'padding-x')};
+  #{vars.$buttonIconSizeVarName}: #{map.get($defaultSize, 'icon')};
+
+  @each $size, $props in vars.$sizes {
+    &--#{$size} {
+      font: #{map.get($props, 'font')};
+      min-width: #{map.get($props, 'min-width')};
+      min-height: #{map.get($props, 'min-height')};
+      #{vars.$buttonPaddingYVarName}: #{map.get($props, 'padding-y')};
+      #{vars.$buttonPaddingXVarName}: #{map.get($props, 'padding-x')};
+      #{vars.$buttonIconSizeVarName}: #{map.get($props, 'icon')};
+    }
+  }
+
+  &--icon-only {
+    padding: unset;
+  }
+
+  &__label {
+    z-index: 1;
+    position: relative;
+    padding: 0 tokens.$bm-comp-btn-space-label-x;
+    text-align: start;
+  }
+
+  // Appearance & Kinds
+  $defaultAppearance: 'accent';
+  $defaultKind: 'filled';
+  $defaultProps: map.get(
+    map.get(vars.$appearancesAndKinds, $defaultAppearance),
+    $defaultKind
+  );
+
+  & {
+    background: map.get($defaultProps, 'background');
+    color: map.get($defaultProps, 'color');
+    border-color: map.get($defaultProps, 'border-color');
+  }
+
+  @each $appearance, $kinds in vars.$appearancesAndKinds {
+    @each $kind, $props in $kinds {
+      &--#{$appearance}-#{$kind} {
+        background: map.get($props, 'background');
+        color: map.get($props, 'color');
+        @include mixins.simulated-inset-outline(
+          tokens.$bm-comp-btn-border-width,
+          solid,
+          map.get($props, 'border-color'),
+          -0.0625rem
+        );
+
+        .#{vars.$buttonLoadingSpinner} {
+          .#{spinner.$circleSvgClassBase} {
+            stroke: map.get($props, 'color');
+          }
+
+          .#{spinner.$circleBgClassBase} {
+            stroke: map.get($props, 'color');
+            opacity: tokens.$bm-comp-btn-opacity-spinner-track;
+          }
+        }
+
+        @if ($appearance == 'accent' or $appearance == 'destructive') and
+          $kind ==
+          'filled'
+        {
+          #{state-layer-vars.getStateLayerSelector('&', 'hover')} {
+            #{state-layer-vars.$background}: tokens.$bm-sem-color-state-layer-hover-strong;
+          }
+
+          #{state-layer-vars.getStateLayerSelector('&', 'active')} {
+            #{state-layer-vars.$background}: tokens.$bm-sem-color-state-layer-active-strong;
+          }
+        }
+
+        @if $appearance == 'neutral' and $kind == 'filled' {
+          #{state-layer-vars.getStateLayerSelector('&', 'hover')} {
+            #{state-layer-vars.$background}: tokens.$bm-sem-color-state-layer-hover-inverse;
+          }
+
+          #{state-layer-vars.getStateLayerSelector('&', 'active')} {
+            #{state-layer-vars.$background}: tokens.$bm-sem-color-state-layer-active-inverse;
+          }
+        }
+
+        @if $kind == 'bare' {
+          min-height: unset !important;
+          min-width: unset !important;
+          padding: tokens.$bm-comp-btn-space-bare-y tokens.$bm-comp-btn-space-bare-x;
+          border-radius: tokens.$bm-sem-radius-sm;
+          gap: tokens.$bm-comp-btn-space-bare-gap;
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .#{vars.$buttonBaseClass}__label {
+            padding: 0 tokens.$bm-comp-btn-space-bare-label-x;
+          }
+
+          .#{state-layer-vars.$stateLayerBaseClass} {
+            $offset: calc(0px - tokens.$bm-sem-size-focus-offset);
+            #{state-layer-vars.$top}: $offset;
+            #{state-layer-vars.$right}: $offset;
+            #{state-layer-vars.$bottom}: $offset;
+            #{state-layer-vars.$left}: $offset;
+            #{state-layer-vars.$outline-offset}: 0 !important;
+          }
+        }
+      }
+    }
+  }
+
+  &[class*='filled'] {
+    box-shadow: tokens.$bm-comp-btn-shadow;
+  }
+
+  // Disabled
+  &:disabled {
+    cursor: not-allowed;
+    opacity: tokens.$bm-sem-opacity-disabled;
+  }
+
+  // Loading
+  &--loading {
+    cursor: not-allowed;
+    .#{spinner.$spinnerWrapClassBase} {
+      margin: unset;
+    }
+  }
+
+  // Fluid
+  &--fluid {
+    width: 100%;
+  }
+
+  // With Icon
+  &__icon-wrap svg,
+  ::slotted([slot='iconBefore']),
+  ::slotted([slot='iconAfter']) {
+    @extend %icon-size;
+  }
+}

package/components/button.vars.scss

@@ -0,0 +1,129 @@
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+
+$buttonBaseClass: '#{constants.$prefix}button';
+$buttonLoadingSpinner: '#{$buttonBaseClass}__loading-spinner';
+
+$buttonIconSizeVarName: '--#{constants.$prefix}-comp-btn-size-icon';
+$buttonPaddingYVarName: '--#{constants.$prefix}-comp-btn-space-padding-y';
+$buttonPaddingXVarName: '--#{constants.$prefix}-comp-btn-space-padding-x';
+
+$btn-appearance-kind-var-prefix: '-#{constants.$prefix}-comp-btn-color-';
+
+$appearancesAndKinds: (
+  'accent': (
+    'filled': (
+      'background': tokens.$bm-comp-btn-color-accent-filled-bg,
+      'color': tokens.$bm-comp-btn-color-accent-filled-fg,
+      'border-color': tokens.$bm-comp-btn-color-accent-filled-border,
+    ),
+    'outline': (
+      'background': tokens.$bm-comp-btn-color-accent-outline-bg,
+      'color': tokens.$bm-comp-btn-color-accent-outline-fg,
+      'border-color': tokens.$bm-comp-btn-color-accent-outline-border,
+    ),
+    'ghost': (
+      'background': tokens.$bm-comp-btn-color-accent-ghost-bg,
+      'color': tokens.$bm-comp-btn-color-accent-ghost-fg,
+      'border-color': tokens.$bm-comp-btn-color-accent-ghost-border,
+    ),
+    'bare': (
+      'background': tokens.$bm-comp-btn-color-accent-bare-bg,
+      'color': tokens.$bm-comp-btn-color-accent-bare-fg,
+      'border-color': tokens.$bm-comp-btn-color-accent-bare-border,
+    ),
+  ),
+  'neutral': (
+    'filled': (
+      'background': tokens.$bm-comp-btn-color-neutral-filled-bg,
+      'color': tokens.$bm-comp-btn-color-neutral-filled-fg,
+      'border-color': tokens.$bm-comp-btn-color-neutral-filled-border,
+    ),
+    'outline': (
+      'background': tokens.$bm-comp-btn-color-neutral-outline-bg,
+      'color': tokens.$bm-comp-btn-color-neutral-outline-fg,
+      'border-color': tokens.$bm-comp-btn-color-neutral-outline-border,
+    ),
+    'ghost': (
+      'background': tokens.$bm-comp-btn-color-neutral-ghost-bg,
+      'color': tokens.$bm-comp-btn-color-neutral-ghost-fg,
+      'border-color': tokens.$bm-comp-btn-color-neutral-ghost-border,
+    ),
+    'bare': (
+      'background': tokens.$bm-comp-btn-color-neutral-bare-bg,
+      'color': tokens.$bm-comp-btn-color-neutral-bare-fg,
+      'border-color': tokens.$bm-comp-btn-color-neutral-bare-border,
+    ),
+  ),
+  'neutral-subtle': (
+    'filled': (
+      'background': tokens.$bm-comp-btn-color-neutral-subtle-filled-bg,
+      'color': tokens.$bm-comp-btn-color-neutral-subtle-filled-fg,
+      'border-color': tokens.$bm-comp-btn-color-neutral-subtle-filled-border,
+    ),
+    'outline': (
+      'background': tokens.$bm-comp-btn-color-neutral-subtle-outline-bg,
+      'color': tokens.$bm-comp-btn-color-neutral-subtle-outline-fg,
+      'border-color': tokens.$bm-comp-btn-color-neutral-subtle-outline-border,
+    ),
+    'ghost': (
+      'background': tokens.$bm-comp-btn-color-neutral-subtle-ghost-bg,
+      'color': tokens.$bm-comp-btn-color-neutral-subtle-ghost-fg,
+      'border-color': tokens.$bm-comp-btn-color-neutral-subtle-ghost-border,
+    ),
+    'bare': (
+      'background': tokens.$bm-comp-btn-color-neutral-subtle-bare-bg,
+      'color': tokens.$bm-comp-btn-color-neutral-subtle-bare-fg,
+      'border-color': tokens.$bm-comp-btn-color-neutral-subtle-bare-border,
+    ),
+  ),
+  'destructive': (
+    'filled': (
+      'background': tokens.$bm-comp-btn-color-destructive-filled-bg,
+      'color': tokens.$bm-comp-btn-color-destructive-filled-fg,
+      'border-color': tokens.$bm-comp-btn-color-destructive-filled-border,
+    ),
+    'outline': (
+      'background': tokens.$bm-comp-btn-color-destructive-outline-bg,
+      'color': tokens.$bm-comp-btn-color-destructive-outline-fg,
+      'border-color': tokens.$bm-comp-btn-color-destructive-outline-border,
+    ),
+    'ghost': (
+      'background': tokens.$bm-comp-btn-color-destructive-ghost-bg,
+      'color': tokens.$bm-comp-btn-color-destructive-ghost-fg,
+      'border-color': tokens.$bm-comp-btn-color-destructive-ghost-border,
+    ),
+    'bare': (
+      'background': tokens.$bm-comp-btn-color-destructive-bare-bg,
+      'color': tokens.$bm-comp-btn-color-destructive-bare-fg,
+      'border-color': tokens.$bm-comp-btn-color-destructive-bare-border,
+    ),
+  ),
+);
+
+$sizes: (
+  'sm': (
+    'min-width': tokens.$bm-comp-btn-size-sm-width,
+    'min-height': tokens.$bm-comp-btn-size-sm-height,
+    'icon': tokens.$bm-comp-btn-size-sm-icon,
+    'padding-y': tokens.$bm-comp-btn-space-sm-y,
+    'padding-x': tokens.$bm-comp-btn-space-sm-x,
+    'font': tokens.$bm-comp-btn-typo-sm,
+  ),
+  'md': (
+    'min-width': tokens.$bm-comp-btn-size-md-width,
+    'min-height': tokens.$bm-comp-btn-size-md-height,
+    'icon': tokens.$bm-comp-btn-size-md-icon,
+    'padding-y': tokens.$bm-comp-btn-space-md-y,
+    'padding-x': tokens.$bm-comp-btn-space-md-x,
+    'font': tokens.$bm-comp-btn-typo-md,
+  ),
+  'lg': (
+    'min-width': tokens.$bm-comp-btn-size-lg-width,
+    'min-height': tokens.$bm-comp-btn-size-lg-height,
+    'icon': tokens.$bm-comp-btn-size-lg-icon,
+    'padding-y': tokens.$bm-comp-btn-space-lg-y,
+    'padding-x': tokens.$bm-comp-btn-space-lg-x,
+    'font': tokens.$bm-comp-btn-typo-lg,
+  ),
+);

package/components/card.module.scss

@@ -0,0 +1,232 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/Card';
+
+$cardBaseClass: '#{constants.$prefix}card';
+
+@mixin backdrop-overlay($color) {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    background: $color;
+
+    background-size: cover;
+    background-repeat: no-repeat;
+    z-index: 1;
+    pointer-events: none;
+  }
+}
+
+@mixin media-overlays {
+  &__overlay-top,
+  &__overlay-middle,
+  &__overlay-bottom {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 2;
+  }
+
+  &__overlay-top {
+    top: 0;
+  }
+
+  &__overlay-middle {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &__overlay-bottom {
+    bottom: 0;
+  }
+}
+
+$cardDensity: (
+  density-sm: (
+    gap: tokens.$bm-comp-card-space-gap-sm,
+    inset: tokens.$bm-comp-card-space-pad-sm,
+  ),
+  density-md: (
+    gap: tokens.$bm-comp-card-space-gap-md,
+    inset: tokens.$bm-comp-card-space-pad-md,
+  ),
+  density-lg: (
+    gap: tokens.$bm-comp-card-space-gap-lg,
+    inset: tokens.$bm-comp-card-space-pad-lg,
+  ),
+);
+
+// Main Card component
+.#{$cardBaseClass} {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &--default-background {
+    background: tokens.$bm-comp-card-color-bg;
+  }
+  &--default-shadow {
+    box-shadow: tokens.$bm-comp-card-shadow;
+  }
+  &--default-border {
+    border-color: tokens.$bm-comp-card-color-border;
+  }
+  &--default-border-radius {
+    border-radius: tokens.$bm-comp-card-radius-outer;
+  }
+}
+
+// Card.Content
+.#{$cardBaseClass}__content {
+  display: flex;
+  flex-direction: column;
+
+  @each $density, $values in $cardDensity {
+    &--#{$density} {
+      gap: map.get($values, gap);
+      padding: map.get($values, inset);
+    }
+  }
+}
+
+// Card.Header
+.#{$cardBaseClass}__header {
+  display: flex;
+  flex-direction: row;
+  gap: tokens.$bm-comp-card-space-header-gap;
+
+  &__content-before {
+    order: 1;
+    display: flex;
+    gap: tokens.$bm-comp-card-space-header-actions-gap;
+    color: tokens.$bm-comp-card-color-heading;
+  }
+
+  &__heading {
+    order: 2;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+
+    font: tokens.$bm-comp-card-typo-heading;
+    color: tokens.$bm-comp-card-color-heading;
+
+    // ensure anything slotted will always come after Eyebrow, Text, Supporting text
+    * {
+      order: 999;
+    }
+
+    &__eyebrow {
+      order: 0;
+      display: flex;
+      font: tokens.$bm-comp-card-typo-eyebrow;
+      color: tokens.$bm-comp-card-color-eyebrow;
+      gap: tokens.$bm-comp-card-space-header-actions-gap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &__text {
+      order: 1;
+      display: flex;
+    }
+
+    &__supporting-text {
+      order: 2;
+      display: flex;
+      color: tokens.$bm-comp-card-color-supporting;
+      font: tokens.$bm-comp-card-typo-supporting;
+    }
+  }
+
+  &__content-after {
+    order: 3;
+    display: flex;
+    padding-top: tokens.$bm-sem-space-12;
+    justify-content: flex-end;
+    align-items: flex-start;
+    gap: tokens.$bm-comp-card-space-header-actions-gap;
+    align-self: stretch;
+    color: tokens.$bm-comp-card-color-icon;
+  }
+}
+
+.#{$cardBaseClass}__media-below {
+  border-radius: tokens.$bm-comp-card-radius-inner;
+}
+
+.#{$cardBaseClass}__media-above,
+.#{$cardBaseClass}__media-below {
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  isolation: isolate;
+
+  @each $color in black, white {
+    @each $opacity in 10, 20, 30, 40 {
+      &--overlay-color-#{$color}-#{$opacity} {
+        @include backdrop-overlay(
+          var(--#{constants.$prefix}sem-color-overlay-#{$color}-#{$opacity})
+        );
+      }
+    }
+  }
+
+  @include media-overlays;
+}
+
+// Card.Body
+.#{$cardBaseClass}__body {
+  display: flex;
+  flex-direction: column;
+  color: tokens.$bm-comp-card-color-body;
+  font: tokens.$bm-comp-card-typo-body;
+  gap: tokens.$bm-sem-space-100;
+}
+
+// Card.Footer
+.#{$cardBaseClass}__footer {
+  display: flex;
+  gap: tokens.$bm-sem-space-50;
+  flex-direction: column;
+
+  &__actions {
+    display: flex;
+    padding-top: tokens.$bm-comp-card-space-footer-actions-top;
+    gap: tokens.$bm-comp-card-space-footer-actions-gap;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    align-content: center;
+
+    &--start {
+      justify-content: flex-start;
+    }
+
+    &--end {
+      justify-content: flex-end;
+    }
+
+    &--spaceBetween {
+      justify-content: space-between;
+    }
+
+    &--stacked {
+      justify-content: center;
+      flex-direction: column;
+      gap: tokens.$bm-comp-card-space-footer-actions-gap-stacked;
+    }
+  }
+}