SCSS modules and component styles for the Beam Design System
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.
1. š Overview
2. š» Installation
3. š ļø Usage
4. š Package Structure
5. š¦ CSS Modules
6. šÆ When to Use
@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
``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.
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';
Access helpful mixins and functions:
`scss`
@use '@viasat/beam-styles/utils/mixins';
@use '@viasat/beam-styles/utils/helpers';
@use '@viasat/beam-styles/utils/spacing';
Import component-specific CSS variables:
`scss`
@use '@viasat/beam-styles/components/button.vars';
@use '@viasat/beam-styles/components/icon.vars';
Import all component and utility styles:
`scss`
@use '@viasat/beam-styles/all';
``
@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
All component styles use CSS Modules with local scope by default:
`scss
// button.module.scss
.bm-button {
// Base button styles
}
.bm-button--accent-filled {
// Appearance/kind modifier styles
}
.bm-button--sm {
// Size modifier styles
}
`
When imported in JavaScript/TypeScript:
`tsx
import styles from '@viasat/beam-styles/components/button.module.scss';
;
`
Pre-compiled CSS is also available:
- styles.css - Full compiled CSSstyles.min.css
- - Minified versionstyles.css.map
- - Source map
For non-SCSS projects:
`ts`
import '@viasat/beam-styles/styles.css';
// Or for minified
import '@viasat/beam-styles/styles.min.css';
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).
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.
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;
},
},
],
},
},
},
});
`
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;
},
},
],
},
},
},
],
},
],
},
};
`
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.
- 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)
MIT Ā© Viasat