@viasat/beam-styles 2.0.0

package/README.md

@@ -0,0 +1,150 @@
+# 🎨 Beam Styles
+
+SCSS modules and component styles for the Beam Design System. This package provides modular, reusable styles that can be imported directly into your components or applications.
+
+## 🔖 Table of Contents
+
+1. [📋 Overview](#overview)
+2. [💻 Installation](#installation)
+3. [🛠️ Usage](#usage)
+4. [📁 Package Structure](#package-structure)
+5. [📦 CSS Modules](#css-modules)
+6. [🎯 When to Use](#when-to-use)
+
+## Overview
+
+`@viasat/beam-styles` contains:
+
+- **Component SCSS Modules** - Scoped styles for all Beam components
+- **Utility Mixins** - Helper mixins for common styling patterns
+- **CSS Variables** - Component-specific CSS custom properties
+- **Design Tokens** - SCSS variables for spacing, animation, and constants
+
+## Installation
+
+```bash
+npm install @viasat/beam-styles
+```
+
+> **Note**: This package is typically installed automatically as a dependency of `@viasat/beam-react` or for direct SCSS imports in custom implementations.
+
+## Usage
+
+### Component Styles
+
+Import component SCSS modules directly:
+
+```scss
+@use '@viasat/beam-styles/components/button.module';
+@use '@viasat/beam-styles/components/card.module';
+@use '@viasat/beam-styles/components/alert.module';
+```
+
+### Utility Mixins
+
+Access helpful mixins and functions:
+
+```scss
+@use '@viasat/beam-styles/utils/mixins';
+@use '@viasat/beam-styles/utils/helpers';
+@use '@viasat/beam-styles/utils/spacing';
+```
+
+### CSS Variables
+
+Import component-specific CSS variables:
+
+```scss
+@use '@viasat/beam-styles/components/button.vars';
+@use '@viasat/beam-styles/components/icon.vars';
+```
+
+### Complete Import
+
+Import all component and utility styles:
+
+```scss
+@use '@viasat/beam-styles/all';
+```
+
+## Package Structure
+
+```
+@viasat/beam-styles/
+├── components/              # Component SCSS modules
+│   ├── button.module.scss
+│   ├── button.vars.scss    # Component CSS variables
+│   ├── card.module.scss
+│   ├── alert.module.scss
+│   └── ...
+└── utils/                   # Utility styles
+    ├── animation.scss
+    ├── constants.scss
+    ├── cursors.scss
+    ├── globals.scss
+    ├── helpers.scss
+    ├── mixins.scss
+    ├── spacing.scss
+    └── tokens.scss
+```
+
+## CSS Modules
+
+All component styles use CSS Modules with local scope by default:
+
+```scss
+// button.module.scss
+.bm-button {
+  // Styles scoped to .button
+}
+
+.bm-button--primary {
+  // Modifier styles
+}
+```
+
+When imported in JavaScript/TypeScript:
+
+```tsx
+import styles from '@viasat/beam-styles/components/button.module.scss';
+
+<button className={styles.button} />;
+```
+
+## Compiled CSS
+
+Pre-compiled CSS is also available:
+
+- `styles.css` - Full compiled CSS
+- `styles.min.css` - Minified version
+- `styles.css.map` - Source map
+
+## Direct CSS Import
+
+For non-SCSS projects:
+
+```ts
+import '@viasat/beam-styles/styles.css';
+// Or for minified
+import '@viasat/beam-styles/styles.min.css';
+```
+
+## When to Use
+
+This package is intended for:
+
+- ✅ Custom Beam implementations
+- ✅ Direct SCSS imports in React/Vue/Angular apps
+- ✅ Building custom components with Beam styling
+- ✅ Theming and style customization
+
+This package is **not needed** if you're using `@viasat/beam-react` or `@viasat/beam-web-components` components directly (styles are already included).
+
+## Dependencies
+
+- Requires a SASS/SCSS compiler (e.g., `sass`, `node-sass`, `dart-sass`)
+- Works with any CSS Modules implementation
+
+## License
+
+MIT © Viasat

package/all.scss

@@ -0,0 +1,3 @@
+@use './components/index.scss' as components;
+
+@use './utils/index.scss' as utils;

package/components/accordion.module.scss

@@ -0,0 +1,166 @@
+@use 'sass:map';
+@use './../utils/tokens.scss' as tokens;
+@use './accordion.vars.scss' as accordionVars;
+
+@import '../../../../tokens/src/lib/components/Accordion';
+
+$accordionBaseClass: accordionVars.$accordionBaseClass;
+
+$accordionSizes: (
+  'sm': (
+    'height': tokens.$bm-comp-accordion-size-sm-height,
+    'icon': tokens.$bm-comp-accordion-size-sm-icon,
+    'header-y': tokens.$bm-comp-accordion-space-sm-header-y,
+    'heading': tokens.$bm-comp-accordion-typo-sm-heading,
+    'body': tokens.$bm-comp-accordion-typo-sm-body,
+    'content-bottom': tokens.$bm-comp-accordion-space-sm-content-bottom,
+  ),
+  'md': (
+    'height': tokens.$bm-comp-accordion-size-md-height,
+    'icon': tokens.$bm-comp-accordion-size-md-icon,
+    'header-y': tokens.$bm-comp-accordion-space-md-header-y,
+    'heading': tokens.$bm-comp-accordion-typo-md-heading,
+    'body': tokens.$bm-comp-accordion-typo-md-body,
+    'content-bottom': tokens.$bm-comp-accordion-space-md-content-bottom,
+  ),
+  'lg': (
+    'height': tokens.$bm-comp-accordion-size-lg-height,
+    'icon': tokens.$bm-comp-accordion-size-lg-icon,
+    'header-y': tokens.$bm-comp-accordion-space-lg-header-y,
+    'heading': tokens.$bm-comp-accordion-typo-lg-heading,
+    'body': tokens.$bm-comp-accordion-typo-lg-body,
+    'content-bottom': tokens.$bm-comp-accordion-space-lg-content-bottom,
+  ),
+);
+
+@mixin accordion-styles($size) {
+  .#{$accordionBaseClass}--#{$size} {
+    .#{$accordionBaseClass}__container {
+      min-height: map.get(map.get($accordionSizes, $size), 'height');
+      padding: map.get(map.get($accordionSizes, $size), 'header-y') 0;
+    }
+
+    .#{$accordionBaseClass}__chevron {
+      height: map.get(map.get($accordionSizes, $size), 'icon');
+      min-width: map.get(map.get($accordionSizes, $size), 'icon');
+    }
+
+    .#{$accordionBaseClass}__heading {
+      font: map.get(map.get($accordionSizes, $size), 'heading');
+    }
+
+    .#{$accordionBaseClass}__icon {
+      height: map.get(map.get($accordionSizes, $size), 'icon');
+    }
+  }
+
+  .#{$accordionBaseClass}__panel--#{$size} {
+    visibility: hidden;
+    font: map.get(map.get($accordionSizes, $size), 'body');
+    color: tokens.$bm-comp-accordion-color-body;
+
+    position: relative;
+
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows, padding-bottom, 0.2s linear;
+
+    > div {
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: tokens.$bm-comp-accordion-space-content-gap;
+      align-self: stretch;
+
+      // due to overflow: hidden - this prevents focus outline clipping
+      padding: 0.3rem;
+      margin: -0.3rem;
+    }
+
+    will-change: grid-template-rows, transform, padding-bottom;
+  }
+
+  .#{$accordionBaseClass}__panel--expanded--#{$size} {
+    visibility: visible;
+    grid-template-rows: 1fr;
+    padding-bottom: map.get(map.get($accordionSizes, $size), 'content-bottom');
+  }
+}
+
+@include accordion-styles('sm');
+@include accordion-styles('md');
+@include accordion-styles('lg');
+
+.#{$accordionBaseClass} {
+  &__container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    gap: tokens.$bm-comp-accordion-space-header-gap;
+
+    &:focus-visible {
+      outline: tokens.$bm-sem-border-width-focus solid
+        tokens.$bm-sem-color-border-focus;
+      border-radius: tokens.$bm-sem-radius-focus-md;
+    }
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    display: inline-flex;
+    color: tokens.$bm-comp-accordion-color-icon;
+
+    ::slotted([slot='icon']) {
+      display: inline-flex;
+    }
+  }
+
+  &__heading {
+    flex-grow: 1;
+    color: tokens.$bm-comp-accordion-color-heading;
+    display: flex;
+    align-items: center;
+    gap: tokens.$bm-comp-accordion-space-header-gap;
+
+    ::slotted([slot='heading']) {
+      gap: tokens.$bm-comp-accordion-space-header-gap;
+    }
+  }
+
+  &__chevron {
+    transition: transform 0.2s ease;
+    color: tokens.$bm-comp-accordion-color-icon;
+  }
+
+  &__chevron--rotated {
+    transform: rotate(180deg);
+  }
+
+  // Divider for React Accordion (only)
+  & > div:not(:first-child) > &__container {
+    border-top: tokens.$bm-sem-border-width-md solid
+      tokens.$bm-comp-accordion-color-divider;
+  }
+
+  // Divider for Web-Component Accordion (only)
+  :host(:not(:first-of-type)) &__container {
+    border-top: tokens.$bm-sem-border-width-md solid
+      tokens.$bm-comp-accordion-color-divider;
+  }
+
+  // Shadow DOM magic 🤨
+  :host(*) &__container {
+    box-sizing: border-box;
+    &:focus-visible {
+      outline: tokens.$bm-sem-border-width-focus solid
+        tokens.$bm-sem-color-border-focus;
+      border-radius: tokens.$bm-sem-radius-focus-md;
+    }
+  }
+
+  &--no-box {
+    display: contents;
+  }
+}

package/components/accordion.vars.scss

@@ -0,0 +1,3 @@
+@use './../utils/constants.scss';
+
+$accordionBaseClass: '#{constants.$prefix}accordion';

package/components/actionList.module.scss

@@ -0,0 +1,211 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+@use '../utils/stateLayerVars.scss' as stateLayerVars;
+@use '../components/icon.vars.scss' as iconVars;
+@use '../components/button.vars.scss' as buttonVars;
+@use '../components/actionList.vars.scss' as actionListVars;
+
+@import '../../../../tokens/src/lib/components/ActionList';
+
+.#{actionListVars.$actionListBaseClass} {
+  display: flex;
+  flex-direction: column;
+
+  &__no-results {
+    display: flex;
+    min-height: tokens.$bm-comp-actionlist-size-height;
+    padding: tokens.$bm-comp-actionlist-space-y 0;
+    justify-content: center;
+    align-items: center;
+    color: tokens.$bm-sem-color-text-primary;
+    text-align: center;
+    font: tokens.$bm-sem-typo-body-md;
+  }
+
+  &__loading {
+    padding: tokens.$bm-comp-actionlist-space-y 0;
+  }
+}
+
+.#{actionListVars.$actionListItemBaseClass} {
+  display: flex;
+  flex-direction: row;
+  gap: tokens.$bm-comp-actionlist-space-gap;
+  min-height: tokens.$bm-comp-actionlist-size-height;
+  padding: tokens.$bm-comp-actionlist-space-y 0;
+  position: relative;
+  align-items: center;
+  color: tokens.$bm-comp-actionlist-color-text;
+  cursor: pointer;
+  isolation: isolate;
+
+  &[hidden] {
+    display: none;
+  }
+
+  &:has(&__supporting-text) {
+    align-items: flex-start;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &--kind-destructive {
+    color: tokens.$bm-sem-color-text-negative;
+  }
+
+  &--disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: tokens.$bm-sem-opacity-disabled;
+
+    & > .#{stateLayerVars.$stateLayerBaseClass} {
+      $appearance: map.get(stateLayerVars.$state-layer-tokens, 'base');
+      $disabled: map.get($appearance, 'disabled');
+      @include stateLayerVars.get-state-layer-styles-body($disabled);
+    }
+  }
+
+  &--active {
+    & > .#{stateLayerVars.$stateLayerBaseClass} {
+      $appearance: map.get(stateLayerVars.$state-layer-tokens, 'base');
+      $focused: map.get($appearance, 'focus-visible-within');
+      @include stateLayerVars.get-state-layer-styles-body($focused);
+    }
+  }
+
+  &__choice, &__switch {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    color: tokens.$bm-comp-actionlist-color-check;
+  }
+  
+  &__choice {
+    width: tokens.$bm-comp-actionlist-size-icon;
+    height: tokens.$bm-comp-actionlist-size-icon;
+  }
+
+  &__content-before {
+    min-width: tokens.$bm-comp-actionlist-size-icon;
+    min-height: tokens.$bm-comp-actionlist-size-icon;
+    display: flex;
+    color: tokens.$bm-comp-actionlist-color-icon;
+
+    #{iconVars.$iconSize}: tokens.$bm-comp-actionlist-size-icon;
+    #{iconVars.$iconColor}: tokens.$bm-comp-actionlist-color-icon;
+
+    .#{actionListVars.$actionListItemBaseClass}--kind-destructive & {
+      #{iconVars.$iconColor}: tokens.$bm-sem-color-icon-negative-strong;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &__text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    align-self: stretch;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: tokens.$bm-comp-actionlist-typo-text;
+  }
+
+  &--header {
+    cursor: default;
+  }
+
+  &--header &__text {
+    color: tokens.$bm-comp-actionlist-color-heading;
+    font: tokens.$bm-sem-typo-label-md;
+  }
+
+  &__supporting-text {
+    align-self: stretch;
+
+    overflow: hidden;
+    color: tokens.$bm-comp-actionlist-color-text-supporting;
+    font: tokens.$bm-comp-actionlist-typo-text-supporting;
+  }
+
+  &__content-after {
+    display: flex;
+    justify-content: flex-end;
+    gap: tokens.$bm-comp-actionlist-space-gap;
+
+    min-width: tokens.$bm-comp-actionlist-size-icon;
+    min-height: tokens.$bm-comp-actionlist-size-icon;
+
+    color: tokens.$bm-comp-actionlist-color-text-suffix;
+    font: tokens.$bm-comp-actionlist-typo-text-suffix;
+    text-align: right;
+
+    #{iconVars.$iconSize}: tokens.$bm-comp-actionlist-size-icon;
+    #{iconVars.$iconColor}: tokens.$bm-comp-actionlist-color-icon;
+
+    .#{buttonVars.$buttonBaseClass} {
+      #{buttonVars.$buttonIconSizeVarName}: tokens.$bm-comp-actionlist-size-icon;
+      --bm-comp-btn-size-sm-width: tokens.$bm-comp-actionlist-size-icon;
+      --bm-comp-btn-size-sm-height: tokens.$bm-comp-actionlist-size-icon;
+    }
+  }
+
+  &__flyout {
+    #{iconVars.$iconSize}: tokens.$bm-comp-actionlist-size-icon;
+    #{iconVars.$iconColor}: tokens.$bm-comp-actionlist-color-icon;
+
+    &:dir(rtl) {
+      transform: scaleX(-1);
+    }
+  }
+
+  & > .#{stateLayerVars.$stateLayerBaseClass} {
+    #{stateLayerVars.$left}: calc(
+      -1 * #{tokens.$bm-comp-actionlist-size-state-offset}
+    );
+    #{stateLayerVars.$right}: calc(
+      -1 * #{tokens.$bm-comp-actionlist-size-state-offset}
+    );
+    #{stateLayerVars.$outline-offset}: calc(
+      -1 * var(#{stateLayerVars.$outline-width})
+    );
+    border-radius: tokens.$bm-comp-actionlist-radius;
+    z-index: -1;
+  }
+}
+
+.#{actionListVars.$actionListGroupBaseClass} {
+  display: flex;
+  flex-direction: column;
+
+  &__heading {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-top: tokens.$bm-comp-actionlist-space-y;
+    color: tokens.$bm-comp-actionlist-color-group-heading;
+    font: tokens.$bm-comp-actionlist-typo-heading-group;
+  }
+
+  &__divider {
+    margin: tokens.$bm-comp-actionlist-space-y 0;
+  }
+}
+
+.#{actionListVars.$actionListIconButtonBaseClass} {
+  &__placeholder {
+    display: flex;
+    width: tokens.$bm-comp-actionlist-size-icon;
+    height: tokens.$bm-comp-actionlist-size-icon;
+  }
+}

package/components/actionList.vars.scss

@@ -0,0 +1,6 @@
+@use '../utils/constants.scss';
+
+$actionListBaseClass: '#{constants.$prefix}action-list';
+$actionListItemBaseClass: '#{constants.$prefix}action-list__item';
+$actionListIconButtonBaseClass: '#{constants.$prefix}action-list__item__icon-button';
+$actionListGroupBaseClass: '#{constants.$prefix}action-list__group';

package/components/alert.module.scss

@@ -0,0 +1,158 @@
+@use 'sass:map';
+@use '../utils/constants.scss';
+@use '../utils/tokens.scss' as tokens;
+
+@import '../../../../tokens/src/lib/components/Alert';
+
+$alertBaseClass: '#{constants.$prefix}alert';
+$alertIconClass: '#{$alertBaseClass}__icon';
+$alertContentClass: '#{$alertBaseClass}__content';
+
+$appearances: (
+  'positive': (
+    'background': tokens.$bm-comp-alert-color-positive-bg,
+    'icon-color': tokens.$bm-comp-alert-color-positive-icon,
+    'body-color': tokens.$bm-comp-alert-color-positive-body,
+    'heading-color': tokens.$bm-comp-alert-color-positive-heading,
+    'border-color': tokens.$bm-comp-alert-color-positive-border,
+  ),
+  'warning': (
+    'background': tokens.$bm-comp-alert-color-warning-bg,
+    'icon-color': tokens.$bm-comp-alert-color-warning-icon,
+    'body-color': tokens.$bm-comp-alert-color-warning-body,
+    'heading-color': tokens.$bm-comp-alert-color-warning-heading,
+    'border-color': tokens.$bm-comp-alert-color-warning-border,
+  ),
+  'negative': (
+    'background': tokens.$bm-comp-alert-color-negative-bg,
+    'icon-color': tokens.$bm-comp-alert-color-negative-icon,
+    'body-color': tokens.$bm-comp-alert-color-negative-body,
+    'heading-color': tokens.$bm-comp-alert-color-negative-heading,
+    'border-color': tokens.$bm-comp-alert-color-negative-border,
+  ),
+  'infoPrimary': (
+    'background': tokens.$bm-comp-alert-color-info-primary-bg,
+    'icon-color': tokens.$bm-comp-alert-color-info-primary-icon,
+    'body-color': tokens.$bm-comp-alert-color-info-primary-body,
+    'heading-color': tokens.$bm-comp-alert-color-info-primary-heading,
+    'border-color': tokens.$bm-comp-alert-color-info-primary-border,
+  ),
+  'infoSecondary': (
+    'background': tokens.$bm-comp-alert-color-info-secondary-bg,
+    'icon-color': tokens.$bm-comp-alert-color-info-secondary-icon,
+    'body-color': tokens.$bm-comp-alert-color-info-secondary-body,
+    'heading-color': tokens.$bm-comp-alert-color-info-secondary-heading,
+    'border-color': tokens.$bm-comp-alert-color-info-secondary-border,
+  ),
+);
+
+.#{$alertBaseClass} {
+  display: flex;
+  align-items: center;
+  word-break: break-word;
+  gap: tokens.$bm-comp-alert-space-gap;
+
+  padding: tokens.$bm-comp-alert-space-sm-y tokens.$bm-comp-alert-space-x;
+
+  box-shadow: tokens.$bm-comp-alert-shadow;
+
+  border-width: tokens.$bm-comp-alert-border-width;
+  border-style: solid;
+  border-radius: tokens.$bm-comp-alert-radius-in-page;
+
+  &__content__wrapper {
+    flex: 1 0 0;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: tokens.$bm-comp-alert-space-gap;
+  }
+
+  .#{$alertContentClass} {
+    display: flex;
+    flex-direction: column;
+    gap: tokens.$bm-comp-alert-space-text-gap;
+    font: tokens.$bm-comp-alert-typo-sm-body;
+
+    &__heading {
+      font: tokens.$bm-comp-alert-typo-sm-heading;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    gap: tokens.$bm-comp-alert-space-actions-gap;
+  }
+
+  .#{$alertIconClass},
+  .#{$alertIconClass} svg {
+    display: flex;
+    align-self: center;
+    align-items: center;
+    min-width: tokens.$bm-comp-alert-size-sm-icon;
+    min-height: tokens.$bm-comp-alert-size-sm-icon;
+
+    &--wrapping {
+      align-self: flex-start;
+    }
+  }
+
+  &__close-button {
+    // Allows the close button to drop in with no extra height
+    display: flex;
+
+    align-self: center;
+
+    &--wrapping {
+      align-self: baseline;
+    }
+  }
+
+  &--full-width {
+    border-radius: tokens.$bm-comp-alert-radius-full-width;
+  }
+
+  &--md {
+    padding: tokens.$bm-comp-alert-space-y tokens.$bm-comp-alert-space-x;
+
+    .#{$alertContentClass} {
+      font: tokens.$bm-comp-alert-typo-md-body;
+
+      &__heading {
+        font: tokens.$bm-comp-alert-typo-md-heading;
+      }
+    }
+
+    .#{$alertIconClass},
+    .#{$alertIconClass} svg {
+      min-width: tokens.$bm-comp-alert-size-md-icon;
+      min-height: tokens.$bm-comp-alert-size-md-icon;
+    }
+  }
+
+  @each $state, $colors in $appearances {
+    &--#{$state} {
+      background-color: map.get($colors, 'background');
+      border-color: map.get($colors, 'border-color');
+
+      .#{$alertIconClass},
+      .#{$alertIconClass} svg {
+        color: map.get($colors, 'icon-color');
+      }
+
+      .#{$alertContentClass} {
+        color: map.get($colors, 'body-color');
+      }
+    }
+  }
+
+  &[dir='rtl'] {
+    flex-direction: row-reverse;
+  }
+
+  &--no-box {
+    display: contents;
+  }
+}