@viasat/beam-styles 2.0.0 → 2.1.1

package/README.md

@@ -95,11 +95,15 @@ All component styles use CSS Modules with local scope by default:
 ```scss
 // button.module.scss
 .bm-button {
-  // Styles scoped to .button
+  // Base button styles
 }
 
-.bm-button--primary {
-  // Modifier styles
+.bm-button--accent-filled {
+  // Appearance/kind modifier styles
+}
+
+.bm-button--sm {
+  // Size modifier styles
 }
 ```
 
@@ -108,7 +112,7 @@ When imported in JavaScript/TypeScript:
 ```tsx
 import styles from '@viasat/beam-styles/components/button.module.scss';
 
-<button className={styles.button} />;
+<button className={styles['bm-button']} />;
 ```
 
 ## Compiled CSS
@@ -140,10 +144,138 @@ This package is intended for:
 
 This package is **not needed** if you're using `@viasat/beam-react` or `@viasat/beam-web-components` components directly (styles are already included).
 
+## Bundler Configuration
+
+When importing SCSS files directly from `@viasat/beam-styles`, you'll need to configure your bundler to resolve `@viasat/beam-*` path aliases. This is required because Beam's SCSS files use internal imports like `@viasat/beam-tokens/components/Alert`.
+
+### Vite
+
+Configure the Sass preprocessor in your `vite.config.ts`:
+
+```ts
+import { defineConfig } from 'vite';
+import * as path from 'path';
+import { pathToFileURL } from 'node:url';
+
+export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+        importers: [
+          {
+            findFileUrl(url: string): URL | null {
+              if (url.startsWith('@viasat/beam-tokens/')) {
+                const relativePath = url.replace('@viasat/beam-tokens/', '');
+                return pathToFileURL(
+                  path.resolve(
+                    'node_modules/@viasat/beam-tokens/src/lib',
+                    relativePath,
+                  ),
+                ) as URL;
+              }
+              return null;
+            },
+          },
+        ],
+      },
+    },
+  },
+});
+```
+
+### Webpack
+
+Configure `sass-loader` in your Webpack config:
+
+```js
+// webpack.config.js
+const path = require('path');
+const { pathToFileURL } = require('node:url');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              api: 'modern-compiler',
+              sassOptions: {
+                importers: [
+                  {
+                    findFileUrl(url) {
+                      if (url.startsWith('@viasat/beam-tokens/')) {
+                        const relativePath = url.replace('@viasat/beam-tokens/', '');
+                        return pathToFileURL(
+                          path.resolve(
+                            __dirname,
+                            'node_modules/@viasat/beam-tokens/src/lib',
+                            relativePath,
+                          ),
+                        );
+                      }
+                      return null;
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+### Next.js
+
+For Next.js projects, add the Sass configuration to `next.config.js`:
+
+```js
+// next.config.js
+const path = require('path');
+const { pathToFileURL } = require('node:url');
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  sassOptions: {
+    api: 'modern-compiler',
+    importers: [
+      {
+        findFileUrl(url) {
+          if (url.startsWith('@viasat/beam-tokens/')) {
+            const relativePath = url.replace('@viasat/beam-tokens/', '');
+            return pathToFileURL(
+              path.resolve(
+                process.cwd(),
+                'node_modules/@viasat/beam-tokens/src/lib',
+                relativePath,
+              ),
+            );
+          }
+          return null;
+        },
+      },
+    ],
+  },
+};
+
+module.exports = nextConfig;
+```
+
+> **Note**: If you're only using pre-compiled CSS (`@viasat/beam-styles/styles.css`) or the `@viasat/beam-react` components directly, no bundler configuration is needed.
+
 ## Dependencies
 
-- Requires a SASS/SCSS compiler (e.g., `sass`, `node-sass`, `dart-sass`)
+- Requires a SASS/SCSS compiler (e.g., `sass`, `dart-sass`)
 - Works with any CSS Modules implementation
+- Bundler configuration required for direct SCSS imports (see above)
 
 ## License
 

package/components/accordion.module.scss

@@ -2,7 +2,7 @@
 @use './../utils/tokens.scss' as tokens;
 @use './accordion.vars.scss' as accordionVars;
 
-@import '../../../../tokens/src/lib/components/Accordion';
+@import '@viasat/beam-tokens/components/Accordion';
 
 $accordionBaseClass: accordionVars.$accordionBaseClass;
 

package/components/actionList.module.scss

@@ -6,7 +6,7 @@
 @use '../components/button.vars.scss' as buttonVars;
 @use '../components/actionList.vars.scss' as actionListVars;
 
-@import '../../../../tokens/src/lib/components/ActionList';
+@import '@viasat/beam-tokens/components/ActionList';
 
 .#{actionListVars.$actionListBaseClass} {
   display: flex;
@@ -76,13 +76,14 @@
     }
   }
 
-  &__choice, &__switch {
+  &__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;

package/components/alert.module.scss

@@ -2,7 +2,7 @@
 @use '../utils/constants.scss';
 @use '../utils/tokens.scss' as tokens;
 
-@import '../../../../tokens/src/lib/components/Alert';
+@import '@viasat/beam-tokens/components/Alert';
 
 $alertBaseClass: '#{constants.$prefix}alert';
 $alertIconClass: '#{$alertBaseClass}__icon';

package/components/avatar.module.scss

@@ -3,7 +3,7 @@
 @use '../utils/constants.scss';
 @use '../utils/mixins.scss' as mixins;
 
-@import '../../../../tokens/src/lib/components/Avatar';
+@import '@viasat/beam-tokens/components/Avatar';
 
 $avatarSizes: (
   'xs': (

package/components/badge.module.scss

@@ -2,7 +2,7 @@
 @use '../utils/tokens.scss';
 @use '../utils/constants.scss';
 
-@import '../../../../tokens/src/lib/components/Badge';
+@import '@viasat/beam-tokens/components/Badge';
 
 $badgeSizes: (
   'sm': (

package/components/badgeDot.module.scss

@@ -2,7 +2,7 @@
 @use '../utils/constants.scss';
 @use '../utils/tokens.scss' as tokens;
 
-@import '../../../../tokens/src/lib/components/BadgeDot';
+@import '@viasat/beam-tokens/components/BadgeDot';
 
 $badgeDotBaseClass: '#{constants.$prefix}badge-dot';
 

package/components/breadcrumbs.module.scss

@@ -2,7 +2,7 @@
 @use '../utils/tokens.scss';
 @use '../utils/constants.scss';
 
-@import '../../../../tokens/src/lib/components/Breadcrumb';
+@import '@viasat/beam-tokens/components/Breadcrumb';
 
 $breadcrumbsBaseClass: '#{constants.$prefix}breadcrumbs';
 $truncation-width: var(

package/components/button.module.scss

@@ -6,7 +6,7 @@
 @use './button.vars.scss' as vars;
 @use './spinner.vars.scss' as spinner;
 
-@import '../../../../tokens/src/lib/components/Button';
+@import '@viasat/beam-tokens/components/Button';
 
 %icon-size {
   display: block;

package/components/checkbox.module.scss

@@ -4,7 +4,7 @@
 @use '../utils/tokens.scss' as tokens;
 @use '../utils/cursors.scss' as cursors;
 
-@import '../../../../tokens/src/lib/components/Input';
+@import '@viasat/beam-tokens/components/Input';
 
 $checkboxBaseClass: '#{constants.$prefix}checkbox';
 

package/components/chip.module.scss

@@ -3,7 +3,7 @@
 @use '../utils/tokens.scss' as tokens;
 @use '../utils/stateLayerVars.scss' as state-layer;
 
-@import '../../../../tokens/src/lib/components/Chip';
+@import '@viasat/beam-tokens/components/Chip';
 
 $chipBaseClass: '#{constants.$prefix}chip';
 

package/components/chipsGroup.module.scss

@@ -1,6 +1,6 @@
 @use '../utils/constants.scss';
 
-@import '../../../../tokens/src/lib/components/Chip';
+@import '@viasat/beam-tokens/components/Chip';
 
 $chipBaseClass: '#{constants.$prefix}chips-group';
 

package/components/closeButton.module.scss

@@ -4,7 +4,7 @@
 @use '../utils/tokens.scss';
 @use '../utils/stateLayerVars.scss' as state-layer;
 
-@import '../../../../tokens/src/lib/components/CloseButton';
+@import '@viasat/beam-tokens/components/CloseButton';
 
 $closeButtonBaseClass: '#{constants.$prefix}close-button';
 

package/components/combobox.module.scss

@@ -5,7 +5,7 @@
 @use '../utils/cursors.scss' as cursors;
 @use './icon.vars.scss' as iconVars;
 
-@import '../../../../tokens/src/lib/components/Input.css';
+@import '@viasat/beam-tokens/components/Input';
 
 $comboboxBaseClass: '#{constants.$prefix}combobox';
 
@@ -58,7 +58,8 @@ $stateStyleTokens: (
     #{$comboboxInputCursor}: text;
   }
 
-  &--disabled, &--disabled &__field {
+  &--disabled,
+  &--disabled &__field {
     #{$comboboxCursor}: not-allowed;
     #{$comboboxInputCursor}: not-allowed;
   }
@@ -92,13 +93,20 @@ $stateStyleTokens: (
 
       @include mixins.svg-icon($expandIcon, $expandIconWidth $expandIconHeight);
       background-color: tokens.$bm-comp-input-color-icon;
-      inset-inline-end: calc(tokens.$bm-comp-input-space-field-x - (var(#{iconVars.$iconSize}) - $expandIconWidth) / 2);
-      inset-block-start: calc(tokens.$bm-comp-input-size-field-md-height / 2 - var(#{iconVars.$iconSize}) / 2);
+      inset-inline-end: calc(
+        tokens.$bm-comp-input-space-field-x -
+          (var(#{iconVars.$iconSize}) - $expandIconWidth) / 2
+      );
+      inset-block-start: calc(
+        tokens.$bm-comp-input-size-field-md-height / 2 - var(#{iconVars.$iconSize}) /
+          2
+      );
 
       transition: transform 0.2s ease;
 
       .#{$comboboxBaseClass}--dropdown-open & {
-        transform: rotate(180deg) translateY(tokens.$bm-comp-input-border-width-field-default);
+        transform: rotate(180deg)
+          translateY(tokens.$bm-comp-input-border-width-field-default);
       }
     }
 
@@ -124,15 +132,22 @@ $stateStyleTokens: (
 
     &__input {
       background: transparent;
-      min-height: calc(tokens.$bm-comp-input-size-field-md-height - 2 * tokens.$bm-comp-input-space-field-y);
-      line-height: calc(tokens.$bm-comp-input-size-field-md-height - 2 * tokens.$bm-comp-input-space-field-y);
+      min-height: calc(
+        tokens.$bm-comp-input-size-field-md-height - 2 *
+          tokens.$bm-comp-input-space-field-y
+      );
+      line-height: calc(
+        tokens.$bm-comp-input-size-field-md-height - 2 *
+          tokens.$bm-comp-input-space-field-y
+      );
 
       &::placeholder {
         color: tokens.$bm-comp-input-color-text-placeholder;
       }
     }
 
-    &__content-before, &__content-after {
+    &__content-before,
+    &__content-after {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -237,7 +252,10 @@ $stateStyleTokens: (
   &__dropdown {
     padding: tokens.$bm-sem-space-50 tokens.$bm-sem-space-100 !important;
 
-    max-height: calc(var(#{$comboboxDropdownMaxItemsVar}, 8) * #{tokens.$bm-comp-actionlist-size-height} + 2 * #{tokens.$bm-sem-space-50});
+    max-height: calc(
+      var(#{$comboboxDropdownMaxItemsVar}, 8) * #{tokens.$bm-comp-actionlist-size-height} +
+        2 * #{tokens.$bm-sem-space-50}
+    );
     overflow-y: auto;
   }
 }

package/components/dialog.module.scss

@@ -2,7 +2,7 @@
 @use '../utils/tokens.scss' as tokens;
 @use './icon.vars.scss' as iconVars;
 
-@import '../../../../tokens/src/lib/components/Dialog';
+@import '@viasat/beam-tokens/components/Dialog';
 
 $dialogBaseClass: '#{constants.$prefix}dialog';
 

package/components/divider.module.scss

@@ -3,7 +3,7 @@
 @use '../utils/mixins.scss' as mixins;
 @use '../utils/tokens.scss' as tokens;
 
-@import '../../../../tokens/src/lib/components/Divider';
+@import '@viasat/beam-tokens/components/Divider';
 
 $dividerBaseClass: '#{constants.$prefix}divider';
 $divider-length: var(--#{constants.$prefix}comp-divider-length, 100%);

package/components/emptyState.module.scss

@@ -3,7 +3,7 @@
 @use '../utils/mixins.scss' as mixins;
 @use '../utils/tokens.scss' as tokens;
 
-@import '../../../../tokens/src/lib/components/EmptyState';
+@import '@viasat/beam-tokens/components/EmptyState';
 
 $emptyStateBaseClass: '#{constants.$prefix}empty-state';
 

package/components/fileUpload.module.scss

@@ -4,7 +4,7 @@
 @use '../utils/tokens.scss' as tokens;
 @use '../utils/stateLayerVars.scss' as stateLayerVars;
 
-@import '../../../../tokens/src/lib/components/FileUpload';
+@import '@viasat/beam-tokens/components/FileUpload';
 
 $fileUploadBaseClass: '#{constants.$prefix}file-upload';
 $fileUploadListBaseClass: '#{constants.$prefix}file-upload-list';

package/components/header.module.scss

@@ -2,7 +2,7 @@
 @use '../utils/mixins.scss' as mixins;
 @use '../utils/tokens.scss' as tokens;
 
-@import '../../../../tokens/src/lib/components/Header';
+@import '@viasat/beam-tokens/components/Header';
 
 $headerBaseClass: '#{constants.$prefix}header';
 $headerHeight: tokens.$bm-comp-header-size-height;

package/components/helperText.module.scss

@@ -2,7 +2,7 @@
 @use '../utils/constants.scss';
 @use '../utils/tokens.scss' as tokens;
 
-@import '../../../../tokens/src/lib/components/HelperText';
+@import '@viasat/beam-tokens/components/HelperText';
 
 $helperTextBaseClass: '#{constants.$prefix}helper-text';
 

package/components/inputChoiceGroup.module.scss

@@ -1,7 +1,7 @@
 @use '../utils/constants.scss';
 @use '../utils/tokens.scss' as tokens;
 
-@import '../../../../tokens/src/lib/components/Input';
+@import '@viasat/beam-tokens/components/Input';
 
 $inputChoiceGroupBaseClass: '#{constants.$prefix}input-choice-group';
 

package/components/label.module.scss

@@ -1,7 +1,7 @@
 @use '../utils/constants.scss';
 @use '../utils/tokens.scss' as tokens;
 
-@import '../../../../tokens/src/lib/components/Label';
+@import '@viasat/beam-tokens/components/Label';
 
 $labelBaseClass: '#{constants.$prefix}label';
 

package/components/link.module.scss

@@ -2,7 +2,7 @@
 @use '../utils/constants.scss';
 @use '../utils/tokens.scss' as tokens;
 
-@import '../../../../tokens/src/lib/components/Link';
+@import '@viasat/beam-tokens/components/Link';
 
 $linkBaseClass: '#{constants.$prefix}link';
 

package/components/list.module.scss

@@ -3,7 +3,7 @@
 @use '../utils/mixins.scss' as mixins;
 @use '../utils/tokens.scss' as tokens;
 
-@import '../../../../tokens/src/lib/components/List';
+@import '@viasat/beam-tokens/components/List';
 
 $listBaseClass: '#{constants.$prefix}list';
 $listItemBaseClass: '#{constants.$prefix}list__item';

package/components/menu.module.scss

@@ -2,7 +2,7 @@
 @use '../utils/mixins.scss' as mixins;
 @use '../utils/tokens.scss' as tokens;
 
-@import '../../../../tokens/src/lib/components/Menu';
+@import '@viasat/beam-tokens/components/Menu';
 
 $menuBaseClass: '#{constants.$prefix}menu';
 $menuPopoverContentClass: '#{constants.$prefix}menu__popover-content';

package/components/nativeSelect.module.scss

@@ -4,7 +4,7 @@
 @use '../utils/mixins.scss' as mixins;
 @use '../utils/cursors.scss' as cursors;
 
-@import '../../../../tokens/src/lib/components/Input';
+@import '@viasat/beam-tokens/components/Input';
 
 $nativeSelectBaseClass: '#{constants.$prefix}native-select';
 

package/components/pagination.module.scss

@@ -3,7 +3,7 @@
 @use '../utils/stateLayerVars.scss' as state-layer;
 @use '../utils/mixins.scss';
 
-@import '../../../../tokens/src/lib/components/Pagination';
+@import '@viasat/beam-tokens/components/Pagination';
 
 $paginationBaseClass: '#{constants.$prefix}pagination';
 $buttonBaseClass: '#{constants.$prefix}button';

package/components/popover.module.scss

@@ -2,7 +2,7 @@
 @use '../utils/mixins.scss' as mixins;
 @use '../utils/tokens.scss' as tokens;
 
-@import '../../../../tokens/src/lib/components/Popover';
+@import '@viasat/beam-tokens/components/Popover';
 
 $popoverBaseClass: '#{constants.$prefix}popover';
 

package/components/progressBar.module.scss

@@ -2,7 +2,7 @@
 @use '../utils/constants.scss';
 @use '../utils/tokens.scss' as tokens;
 
-@import '../../../../tokens/src/lib/components/ProgressBar';
+@import '@viasat/beam-tokens/components/ProgressBar';
 
 $progressBarBaseClass: '#{constants.$prefix}progress-bar';
 $progressBarLabelClass: '#{$progressBarBaseClass}__label';

package/components/radioButton.module.scss

@@ -4,7 +4,7 @@
 @use '../utils/tokens.scss' as tokens;
 @use '../utils/cursors.scss' as cursors;
 
-@import '../../../../tokens/src/lib/components/Input';
+@import '@viasat/beam-tokens/components/Input';
 
 $radioButtonBaseClass: '#{constants.$prefix}radio-button';
 

package/components/segmentedControl.module.scss

@@ -3,8 +3,8 @@
 @use '../utils/tokens.scss' as tokens;
 @use '../utils/stateLayerVars.scss' as state-layer;
 
-@import '../../../../tokens/src/lib/components/SegmentedControl';
-@import '../../../../tokens/src/lib/components/Button';
+@import '@viasat/beam-tokens/components/SegmentedControl';
+@import '@viasat/beam-tokens/components/Button';
 
 $scBaseClass: '#{constants.$prefix}segmented-control';
 

package/components/sideNav.module.scss

@@ -7,7 +7,7 @@
 @use '../utils/stateLayerVars.scss' as stateLayerVars;
 @use './accordion.vars.scss' as accordionVars;
 
-@import '../../../../tokens/src/lib/components/SideNav';
+@import '@viasat/beam-tokens/components/SideNav';
 
 $sideNavBaseClass: '#{constants.$prefix}side-nav';
 $transitionDuration: 0.3s;

package/components/slider.module.scss

@@ -4,7 +4,7 @@
 @use '../utils/tokens.scss' as tokens;
 @use '../utils/cursors.scss' as cursors;
 
-@import '../../../../tokens/src/lib/components/Slider';
+@import '@viasat/beam-tokens/components/Slider';
 
 $sliderCursor: '--#{constants.$prefix}slider-cursor';
 $sliderTrackCursor: '--#{constants.$prefix}slider-track-cursor';
@@ -18,7 +18,7 @@ $sliderThumbScale: '--#{constants.$prefix}comp-slider-thumb-scale';
 
 $sliderBaseClass: '#{constants.$prefix}slider';
 
-$sliderTransitionTimingFunction: cubic-bezier(0, .33, 0, .76);
+$sliderTransitionTimingFunction: cubic-bezier(0, 0.33, 0, 0.76);
 $sliderTransitionDuration: 0.05s;
 
 .#{$sliderBaseClass} {
@@ -113,19 +113,27 @@ $sliderTransitionDuration: 0.05s;
     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;
+    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));
+    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
+          )
+        );
     }
   }
 
@@ -141,7 +149,7 @@ $sliderTransitionDuration: 0.05s;
     transform-origin: 50% 50%;
     transform: translateX(calc(var(#{$sliderThumbPercentage}, 0cqw) - 50%));
 
-    [dir="rtl"] & {
+    [dir='rtl'] & {
       transform: translateX(calc(50% - var(#{$sliderThumbPercentage}, 0cqw)));
     }
   }
@@ -156,7 +164,7 @@ $sliderTransitionDuration: 0.05s;
     cursor: var(#{$sliderThumbCursor}, grab);
 
     transform: scale(var(#{$sliderThumbScale}, 1));
-    transition: transform $sliderTransitionDuration $sliderTransitionTimingFunction,
+    transition: transform $sliderTransitionDuration $sliderTransitionTimingFunction;
   }
 
   &__thumb:focus-visible {
@@ -169,7 +177,9 @@ $sliderTransitionDuration: 0.05s;
   }
 
   &__thumb-container:active {
-    #{$sliderThumbScale}: calc(tokens.$bm-comp-slider-size-handle-active / tokens.$bm-comp-slider-size-handle);
+    #{$sliderThumbScale}: calc(
+      tokens.$bm-comp-slider-size-handle-active / tokens.$bm-comp-slider-size-handle
+    );
   }
 
   &__tick {