@viasat/beam-tokens 2.90.0 → 2.91.0

package/README.md

@@ -10,6 +10,7 @@ Design tokens for the Beam Design System with support for CSS, SASS, and CSS-in-
    - [CSS Usage](#css-usage)
    - [SCSS/SASS Usage](#scsssass-usage)
    - [CSS-in-JS Usage](#css-in-js-usage)
+   - [React Native Usage](#react-native-usage)
 4. [🖌️ Theming](#theming)
    - [Base Theming](#base-theming)
    - [Accent Theming](#accent-theming)
@@ -24,6 +25,7 @@ Design tokens for the Beam Design System with support for CSS, SASS, and CSS-in-
 - **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.
+- **React Native Support** - Pre-resolved token modules for React Native (no CSS required)
 - **Multiple Themes** - Light, dark, accent, product, and brand themes
 - **Internationalization** - Language-specific typography support
 - **TypeScript Support** - Full type definitions for all tokens
@@ -131,6 +133,42 @@ export const MyApp = () => {
 };
 ```
 
+### React Native Usage
+
+React Native has no CSS or cascade, so tokens ship as pre-resolved JavaScript objects instead of CSS variables. Each `accent` × `productType` combination is published as its own module under `@viasat/beam-tokens/native/themes/*`, with both modes nested as `light` and `dark`.
+
+Import the combination your app ships and read a mode's tokens directly:
+
+```tsx
+// my-styles.ts
+import tealEnterprise from '@viasat/beam-tokens/native/themes/teal-enterprise';
+
+const tokens = tealEnterprise.light; // or tealEnterprise.dark
+
+export const styles = {
+  card: {
+    backgroundColor: tokens.sem.color.surface['01'],
+    color: tokens.sem.color.text.primary,
+  },
+};
+```
+
+Each theme module is shaped as `{ accent, productType, light, dark }`. A mode (`light`/`dark`) is a token tree with `sem` (semantic), `expressive` and `dataviz` slices, plus `comp` (Beam's internal component tokens, which may change without notice).
+
+Types are available from `@viasat/beam-tokens/native`:
+
+```ts
+import type { TokenThemes, Accent, Tokens } from '@viasat/beam-tokens/native';
+```
+
+Each theme's type lists the modes it ships, e.g. `TokenThemes<'light' | 'dark'>`,
+so `.light` and `.dark` need no `!`. Bare `TokenThemes` means any theme; use it to
+store themes: `useState<TokenThemes>(tealEnterprise)`.
+
+> 💡 **React Native users**: use `BeamNativeThemeProvider` and `useBeamTokens` from
+> `@viasat/beam-react-native` so tokens follow mode and locale changes. See the
+> [beam-react-native README](https://www.npmjs.com/package/@viasat/beam-react-native).
+
 ## 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.