@beam-ui/design-tokens 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +78 -1
  3. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @beam-ui/design-tokens
2
2
 
3
+ ## 2.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated README to include npm CDNs examples
8
+
3
9
  ## 2.0.0
4
10
 
5
11
  ### Major Changes
package/README.md CHANGED
@@ -8,12 +8,75 @@ Design tokens are the visual design atoms — specifically, they are named entit
8
8
 
9
9
  ## Installation
10
10
 
11
+ ### Option 1: npm/yarn
12
+
13
+ For applications with a build process:
14
+
11
15
  ```bash
12
16
  npm install @beam-ui/design-tokens
13
17
  # or
14
18
  yarn add @beam-ui/design-tokens
15
19
  ```
16
20
 
21
+ ### Option 2: CDN via UNPKG or jsDelivr (Zero Configuration)
22
+
23
+ For server-side rendered HTML, static sites, or environments where build process is not available.
24
+
25
+ The package is available via CDN with all token formats accessible directly - **no build process needed**! (Works with both UNPKG and jsDelivr.)
26
+
27
+ **Loading CSS Variables:**
28
+
29
+ ```html
30
+ <!-- Import all token layers (recommended) -->
31
+ <link rel="stylesheet" href="https://unpkg.com/@beam-ui/design-tokens@latest/build/globals/variables.css">
32
+ <link rel="stylesheet" href="https://unpkg.com/@beam-ui/design-tokens@latest/build/base/variables.css">
33
+ <link rel="stylesheet" href="https://unpkg.com/@beam-ui/design-tokens@latest/build/semantic/variables.css">
34
+
35
+ <!-- or using jsDelivr -->
36
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@beam-ui/design-tokens@latest/build/globals/variables.css">
37
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@beam-ui/design-tokens@latest/build/base/variables.css">
38
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@beam-ui/design-tokens@latest/build/semantic/variables.css">
39
+ ```
40
+
41
+ **Loading JavaScript Tokens:**
42
+
43
+ ```html
44
+ <script type="module">
45
+ import { colorGrayBlack, spacingMedium } from 'https://unpkg.com/@beam-ui/design-tokens@latest/build/base/tokens.es6.js';
46
+ // or
47
+ import { buttonPrimaryBackground } from 'https://cdn.jsdelivr.net/npm/@beam-ui/design-tokens@latest/build/semantic/tokens.es6.js';
48
+ </script>
49
+ ```
50
+
51
+ **💡 Use Cases for CDN:**
52
+ - Server-side templating (PHP, Ruby, Python, etc.)
53
+ - Static HTML sites without build tools
54
+ - Quick prototypes and demos
55
+ - CodePen/JSFiddle examples
56
+ - Documentation and tutorials
57
+
58
+ **⚡ Performance Benefits:**
59
+ - **Zero configuration** - no build process required
60
+ - **Direct access** to all token formats (CSS, JS, JSON)
61
+ - **Selective loading** - load only the token layers you need
62
+ - **Minified and optimized** by the CDN
63
+
64
+ **⚠️ For Production:** Pin to a specific version instead of using `@latest`:
65
+
66
+ ```html
67
+ <!-- CSS Variables with pinned version -->
68
+ <link rel="stylesheet" href="https://unpkg.com/@beam-ui/design-tokens@2.0.1/build/globals/variables.css">
69
+ <link rel="stylesheet" href="https://unpkg.com/@beam-ui/design-tokens@2.0.1/build/base/variables.css">
70
+ <link rel="stylesheet" href="https://unpkg.com/@beam-ui/design-tokens@2.0.1/build/semantic/variables.css">
71
+
72
+ <!-- JavaScript with pinned version -->
73
+ <script type="module">
74
+ import { colorGrayBlack } from 'https://unpkg.com/@beam-ui/design-tokens@2.0.1/build/base/tokens.es6.js';
75
+ // or
76
+ import { colorGrayBlack } from 'https://cdn.jsdelivr.net/npm/@beam-ui/design-tokens@2.0.1/build/base/tokens.es6.js';
77
+ </script>
78
+ ```
79
+
17
80
  ## Available Output Formats
18
81
 
19
82
  All tokens are available in three formats:
@@ -48,13 +111,20 @@ Brand-specific tokens can be found at `build/{brand}/base/` and `build/{brand}/s
48
111
  @import '@beam-ui/design-tokens/build/semantic/variables.css';
49
112
  ```
50
113
 
51
- Or in your HTML:
114
+ Or in your HTML (with npm):
52
115
  ```html
53
116
  <link rel="stylesheet" href="node_modules/@beam-ui/design-tokens/build/globals/variables.css">
54
117
  <link rel="stylesheet" href="node_modules/@beam-ui/design-tokens/build/base/variables.css">
55
118
  <link rel="stylesheet" href="node_modules/@beam-ui/design-tokens/build/semantic/variables.css">
56
119
  ```
57
120
 
121
+ Or in your HTML (with CDN):
122
+ ```html
123
+ <link rel="stylesheet" href="https://unpkg.com/@beam-ui/design-tokens@2.0.1/build/globals/variables.css">
124
+ <link rel="stylesheet" href="https://unpkg.com/@beam-ui/design-tokens@2.0.1/build/base/variables.css">
125
+ <link rel="stylesheet" href="https://unpkg.com/@beam-ui/design-tokens@2.0.1/build/semantic/variables.css">
126
+ ```
127
+
58
128
  #### Why All Three Files Are Required
59
129
 
60
130
  Tokens use `var()` references to maintain relationships across all layers:
@@ -157,6 +227,13 @@ console.log(tokens.button.primary.background); // "hsl(0, 0%, 0%)"
157
227
  console.log(tokens.color.background.primary); // "hsl(0, 0%, 100%)"
158
228
  ```
159
229
 
230
+ ### npm vs CDN: When to Use Each
231
+
232
+ | Method | Best For | Setup | Performance |
233
+ |--------|----------|-------|-------------|
234
+ | **npm + Bundler** | Apps with build tools (React, Vue, etc.) | Bundler handles imports | Smaller final bundle (tree-shaking) |
235
+ | **CDN** | Server-side templates, static sites | Zero config - direct file loading | No build process needed |
236
+
160
237
  ## Token Reference
161
238
 
162
239
  ### Global Tokens
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@beam-ui/design-tokens",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "description": "A collection of design decisions and other artifacts for the Beam UI Design System",
5
5
  "type": "module",
6
6
  "main": "./build/base/tokens.es6.js",
@@ -34,6 +34,7 @@
34
34
  "scripts": {
35
35
  "build": "node ./build.js",
36
36
  "clean": "rm -rf build",
37
+ "changeset": "changeset",
37
38
  "version": "changeset version",
38
39
  "prerelease": "yarn clean && yarn build",
39
40
  "release": "npm publish --access public",