@viasat/beam-tokens 2.0.0

package/README.md

@@ -0,0 +1,275 @@
+# 🎨 Beam Tokens
+
+Design tokens for the Beam Design System with support for CSS, SASS, and CSS-in-JS. Design tokens are the building blocks of UI elements, the smallest pieces of a design system that can be abstracted and reused across a product. They are the visual design atoms that make up molecules, organisms, and templates. ⚛️
+
+## 🔖 Table of Contents
+
+1. [✨ Features](#features)
+2. [💻 Installation](#installation)
+3. [🛠️ Usage](#usage)
+   - [CSS Usage](#css-usage)
+   - [SCSS/SASS Usage](#scsssass-usage)
+   - [CSS-in-JS Usage](#css-in-js-usage)
+4. [🖌️ Theming](#theming)
+   - [Base Theming](#base-theming)
+   - [Accent Theming](#accent-theming)
+   - [Product Theming](#product-theming)
+   - [Brand Theming](#brand-theming)
+   - [Brand and Accent Theming](#brand-and-accent-theming)
+   - [Headless Typography](#headless-typography)
+5. [⚙️ How It Works](#how-it-works)
+
+## Features
+
+- **CSS Variables** - Use design tokens as CSS custom properties
+- **SASS Variables** - Import tokens as SASS variables for preprocessing
+- **CSS-in-JS Support** - Direct JavaScript imports for styled-components, Emotion, etc.
+- **Multiple Themes** - Light, dark, accent, product, and brand themes
+- **Internationalization** - Language-specific typography support
+- **TypeScript Support** - Full type definitions for all tokens
+
+## Installation
+
+```bash
+npm install @viasat/beam-tokens
+```
+
+```bash
+yarn add @viasat/beam-tokens
+```
+
+```bash
+pnpm add @viasat/beam-tokens
+```
+
+## Usage
+
+Beam Tokens are primarily CSS variables that can be used anywhere CSS variables are supported. They provide a consistent way to access design system values across your application.
+
+### CSS Usage
+
+Import the tokens CSS file and use them as CSS custom properties:
+
+```ts
+import '@viasat/beam-tokens/styles.css';
+```
+
+Use Beam Tokens in your CSS file:
+
+```css
+.my-class {
+  background-color: var(--bm-sem-color-surface-01);
+  color: var(--bm-sem-color-text-primary);
+}
+```
+
+Load a Beam theme and your custom class into your application:
+
+```html
+<div class="bm-light my-class">
+  <p>Hello World</p>
+</div>
+```
+
+### SCSS/SASS Usage
+
+Beam Tokens are also available as SASS variables for preprocessing:
+
+```ts
+// Import CSS variables (required)
+import '@viasat/beam-tokens/styles.css';
+```
+
+```scss
+// my-file.scss
+@use '@viasat/beam-tokens/tokens';
+
+.my-class {
+  background-color: tokens.$bm-sem-color-surface-00;
+  color: tokens.$bm-sem-color-text-primary;
+}
+```
+
+### CSS-in-JS Usage
+
+Import tokens as JavaScript variables for use with styled-components, Emotion, and other CSS-in-JS libraries:
+
+```tsx
+// my-file.jsx
+import { css } from '@emotion/css';
+import styled from 'styled-components';
+
+// Import the tokens
+import { bmSemColorSurface00, bmSemColorTextPrimary } from '@viasat/beam-tokens';
+
+// Example with styled-components
+export const MyComponent = styled.div`
+  background-color: ${bmSemColorSurface00};
+  color: ${bmSemColorTextPrimary};
+`;
+
+// Example with Emotion
+export const myClass = css`
+  background-color: ${bmSemColorSurface00};
+  color: ${bmSemColorTextPrimary};
+`;
+```
+
+Render the component in your application with a Beam theme:
+
+```tsx
+// my-app.jsx
+import { MyComponent, myClass } from 'my-file.jsx';
+
+export const MyApp = () => {
+  return (
+    <div className="bm-light">
+      <MyComponent>Hello World</MyComponent>
+      <div className={myClass}>Hello again</div>
+    </div>
+  );
+};
+```
+
+## Theming
+
+Theming is a core feature of Beam Tokens. We provide a set of themes that can be used to style your application. Each theme is a set of CSS variables that override Beam's default design tokens.
+
+> 💡 **React Users**: For React applications, we recommend using the [BeamThemeProvider](https://react.beam.viasat.com/?path=/docs/concepts-theming--docs) utility component instead of manually managing theme classes. This provides a more robust and type-safe theming experience.
+
+### Base Theming
+
+To use a theme, add the theme class to any element in your application. The theme will apply to that element and all its descendants. For application-wide theming, apply the theme class to the root element:
+
+```tsx
+import React from 'react';
+import '@viasat/beam-tokens/styles.css';
+
+const App = () => (
+  <div className="bm-light">{/* Your application content goes here */}</div>
+);
+
+export default App;
+```
+
+For dark mode, use the `bm-dark` class:
+
+```tsx
+const App = () => (
+  <div className="bm-dark">{/* Your application content goes here */}</div>
+);
+```
+
+### Accent Theming
+
+Accent theming emphasizes a particular color or set of colors in your application. These themes work well for applications that want to highlight specific colors:
+
+```tsx
+import React from 'react';
+import '@viasat/beam-tokens/styles.css';
+import '@viasat/beam-tokens/themes/blue.css';
+
+const App = () => (
+  <div className="bm-light bm-blue">{/* Your application content goes here */}</div>
+);
+```
+
+### Product Theming
+
+Product theming focuses on modifying the shape and spacing of elements rather than colors. This involves adjusting properties such as border radius and spacing to create a distinct style.
+
+Choose between `bm-enterprise` (default) or `bm-consumer` themes:
+
+```tsx
+import React from 'react';
+import '@viasat/beam-tokens/styles.css';
+
+const App = () => (
+  <>
+    <div className="bm-light bm-enterprise">{/* Enterprise styling */}</div>
+    <div className="bm-light bm-consumer">{/* Consumer styling */}</div>
+  </>
+);
+```
+
+### Brand Theming
+
+Brand theming replaces Viasat branding with your own. These themes apply brand-specific colors, typography, and styling attributes:
+
+```tsx
+import React from 'react';
+import '@viasat/beam-tokens/styles.css';
+import '@viasat/beam-tokens/themes/onefi.css';
+
+const App = () => (
+  <div className="bm-light bm-onefi bm-onefi-starlux">
+    {/* Your application content goes here */}
+  </div>
+);
+```
+
+### Brand and Accent Theming
+
+Combine brand and accent theming for more customization:
+
+```tsx
+import React from 'react';
+import '@viasat/beam-tokens/styles.css';
+import '@viasat/beam-tokens/themes/blue.css';
+import '@viasat/beam-tokens/themes/onefi.css';
+
+const App = () => (
+  <div className="bm-light bm-onefi bm-blue">
+    {/* Your application content goes here */}
+  </div>
+);
+```
+
+### Headless Typography
+
+Beam Tokens support headless typography, allowing you to override default font styles with custom ones. You can also apply language-specific typography using the `bm-lang-[Lang-Code]` class or `lang="[Lang-Code]"` attribute:
+
+```tsx
+import React from 'react';
+import '@viasat/beam-tokens/styles.css';
+import '@viasat/beam-tokens/themes/onefi.css';
+
+const App = () => (
+  <>
+    {/* Base brand theming */}
+    <div className="bm-light bm-onefi bm-onefi-emirates">
+      {/* Application content */}
+    </div>
+
+    {/* Language-specific fonts */}
+    <div lang="ar" className="bm-light bm-onefi bm-onefi-emirates">
+      {/* Arabic content */}
+    </div>
+
+    {/* Alternative language class */}
+    <div className="bm-light bm-lang-ar bm-onefi bm-onefi-emirates">
+      {/* Arabic content */}
+    </div>
+  </>
+);
+```
+
+> 💡 **Note**: Language codes should follow the ISO 639-1 standard. In some cases, the browser may automatically apply the correct font based on the language attribute.
+
+## How It Works
+
+Beam Tokens employs a streamlined process to efficiently manage design tokens from their inception to deployment:
+
+1. **Designers define tokens**: Using Figma and Token Studio, designers create and define design tokens, committing them to version control with Git. This phase ensures a collaborative and well-documented approach to token creation.
+
+2. **GitHub Actions**: Upon detecting new tokens, GitHub Actions automatically triggers our token pipeline. This step enables a seamless, automated process for handling new tokens without manual intervention. Only a manual review is required to approve the pull request.
+
+3. **Custom Style Dictionary transform and format**: The tokens then pass through our custom Style Dictionary transformers, where values are mutated according to project requirements. Formatters output the tokens in the desired format (CSS, SASS, etc.). This phase enables customization and ensures compatibility with various styling approaches.
+
+4. **Bundle and deploy**: Finally, the newly generated assets are bundled and deployed within this package, readily available for use. This step guarantees that the latest design tokens are accessible and up-to-date for developers.
+
+By following this streamlined process, Beam Tokens ensures a fluid integration of design tokens into your projects, fostering collaboration between designers and developers.
+
+## License
+
+MIT © Viasat

package/components/Accordion.css

@@ -0,0 +1,108 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-accordion-color-heading: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-accordion-color-body: var(--bm-sem-color-text-secondary, #576775);
+  --bm-comp-accordion-color-icon: var(--bm-sem-color-icon-primary, #141d24);
+  --bm-comp-accordion-color-divider: var(--bm-sem-color-border-01, #dfe7ec);
+  --bm-comp-accordion-size-sm-height: var(
+    --bm-primitive-dimension-275,
+    2.75rem
+  );
+  --bm-comp-accordion-size-sm-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-accordion-size-md-height: var(
+    --bm-primitive-dimension-325,
+    3.25rem
+  );
+  --bm-comp-accordion-size-md-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-accordion-size-lg-height: var(--bm-primitive-dimension-400, 4rem);
+  --bm-comp-accordion-size-lg-icon: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-accordion-space-header-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-accordion-space-content-gap: var(--bm-sem-space-100, 1rem);
+  --bm-comp-accordion-space-sm-header-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-accordion-space-sm-content-bottom: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-accordion-space-md-header-y: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-accordion-space-md-content-bottom: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-accordion-space-lg-header-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-accordion-space-lg-content-bottom: var(--bm-sem-space-200, 2rem);
+  --bm-comp-accordion-typo-sm-heading: var(
+    --bm-sem-typo-compact-label-md,
+    600 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-accordion-typo-sm-body: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-accordion-typo-md-heading: var(
+    --bm-sem-typo-compact-label-lg,
+    600 1.125rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-accordion-typo-md-body: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-accordion-typo-lg-heading: var(
+    --bm-sem-typo-compact-label-xl,
+    600 1.25rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-accordion-typo-lg-body: var(
+    --bm-sem-typo-body-lg,
+    400 1.125rem/1.75rem "Source Sans Pro"
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-accordion-color-heading: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-accordion-color-body: var(--bm-sem-color-text-secondary, #c3cdd5);
+  --bm-comp-accordion-color-icon: var(--bm-sem-color-icon-primary, #ffffff);
+  --bm-comp-accordion-color-divider: var(--bm-sem-color-border-01, #32424e);
+  --bm-comp-accordion-size-sm-height: var(
+    --bm-primitive-dimension-275,
+    2.75rem
+  );
+  --bm-comp-accordion-size-sm-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-accordion-size-md-height: var(
+    --bm-primitive-dimension-325,
+    3.25rem
+  );
+  --bm-comp-accordion-size-md-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-accordion-size-lg-height: var(--bm-primitive-dimension-400, 4rem);
+  --bm-comp-accordion-size-lg-icon: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-accordion-space-header-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-accordion-space-content-gap: var(--bm-sem-space-100, 1rem);
+  --bm-comp-accordion-space-sm-header-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-accordion-space-sm-content-bottom: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-accordion-space-md-header-y: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-accordion-space-md-content-bottom: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-accordion-space-lg-header-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-accordion-space-lg-content-bottom: var(--bm-sem-space-200, 2rem);
+  --bm-comp-accordion-typo-sm-heading: var(
+    --bm-sem-typo-compact-label-md,
+    600 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-accordion-typo-sm-body: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-accordion-typo-md-heading: var(
+    --bm-sem-typo-compact-label-lg,
+    600 1.125rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-accordion-typo-md-body: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-accordion-typo-lg-heading: var(
+    --bm-sem-typo-compact-label-xl,
+    600 1.25rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-accordion-typo-lg-body: var(
+    --bm-sem-typo-body-lg,
+    400 1.125rem/1.75rem "Source Sans Pro"
+  );
+}

package/components/ActionList.css

@@ -0,0 +1,150 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-actionlist-color-text: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-actionlist-color-bg-selected: var(
+    --bm-sem-color-surface-selected,
+    #e9fcff
+  );
+  --bm-comp-actionlist-color-text-selected: var(
+    --bm-sem-color-text-selected,
+    #00768f
+  );
+  --bm-comp-actionlist-color-text-supporting: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-actionlist-color-text-suffix: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-actionlist-color-heading: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-actionlist-color-group-heading: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-actionlist-color-icon: var(--bm-sem-color-icon-secondary, #576775);
+  --bm-comp-actionlist-color-icon-selected: var(
+    --bm-sem-color-icon-selected,
+    #00768f
+  );
+  --bm-comp-actionlist-color-indicator: var(
+    --bm-sem-color-icon-selected,
+    #00768f
+  );
+  --bm-comp-actionlist-color-check: var(--bm-sem-color-icon-secondary, #576775);
+  --bm-comp-actionlist-color-divider: var(--bm-sem-color-border-01, #dfe7ec);
+  --bm-comp-actionlist-radius: var(--bm-sem-radius-md, 0.5rem);
+  --bm-comp-actionlist-radius-indicator: var(--bm-sem-radius-xs, 0.125rem);
+  --bm-comp-actionlist-size-height: var(--bm-primitive-dimension-250, 2.5rem);
+  --bm-comp-actionlist-size-state-offset: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-actionlist-size-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-actionlist-size-choice: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-actionlist-size-indicator-width: var(
+    --bm-primitive-dimension-12,
+    0.125rem
+  );
+  --bm-comp-actionlist-space-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-actionlist-space-choice-y: var(--bm-sem-space-12, 0.125rem);
+  --bm-comp-actionlist-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-actionlist-typo-text: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-actionlist-typo-text-selected: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-actionlist-typo-text-supporting: var(
+    --bm-sem-typo-compact-body-xs,
+    400 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-actionlist-typo-text-suffix: var(
+    --bm-sem-typo-body-xs,
+    400 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-actionlist-typo-heading-group: var(
+    --bm-sem-typo-label-xs,
+    600 0.75rem/1.25rem "Source Sans Pro"
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-actionlist-color-text: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-actionlist-color-bg-selected: var(
+    --bm-sem-color-surface-selected,
+    #00414d
+  );
+  --bm-comp-actionlist-color-text-selected: var(
+    --bm-sem-color-text-selected,
+    #43bfd6
+  );
+  --bm-comp-actionlist-color-text-supporting: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-actionlist-color-text-suffix: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-actionlist-color-heading: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-actionlist-color-group-heading: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-actionlist-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);
+  --bm-comp-actionlist-color-icon-selected: var(
+    --bm-sem-color-icon-selected,
+    #43bfd6
+  );
+  --bm-comp-actionlist-color-indicator: var(
+    --bm-sem-color-icon-selected,
+    #43bfd6
+  );
+  --bm-comp-actionlist-color-check: var(--bm-sem-color-icon-secondary, #c3cdd5);
+  --bm-comp-actionlist-color-divider: var(--bm-sem-color-border-01, #32424e);
+  --bm-comp-actionlist-radius: var(--bm-sem-radius-md, 0.5rem);
+  --bm-comp-actionlist-radius-indicator: var(--bm-sem-radius-xs, 0.125rem);
+  --bm-comp-actionlist-size-height: var(--bm-primitive-dimension-250, 2.5rem);
+  --bm-comp-actionlist-size-state-offset: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-actionlist-size-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-actionlist-size-choice: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-actionlist-size-indicator-width: var(
+    --bm-primitive-dimension-12,
+    0.125rem
+  );
+  --bm-comp-actionlist-space-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-actionlist-space-choice-y: var(--bm-sem-space-12, 0.125rem);
+  --bm-comp-actionlist-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-actionlist-typo-text: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-actionlist-typo-text-selected: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-actionlist-typo-text-supporting: var(
+    --bm-sem-typo-compact-body-xs,
+    400 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-actionlist-typo-text-suffix: var(
+    --bm-sem-typo-body-xs,
+    400 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-actionlist-typo-heading-group: var(
+    --bm-sem-typo-label-xs,
+    600 0.75rem/1.25rem "Source Sans Pro"
+  );
+}