@beam-ui/design-tokens 1.0.1 → 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 (9) hide show
  1. package/CHANGELOG.md +13 -1
  2. package/README.md +120 -8
  3. package/build/base/tokens.es6.js +9 -6
  4. package/build/base/tokens.json +9 -6
  5. package/build/base/variables.css +7 -6
  6. package/build/semantic/tokens.es6.js +46 -16
  7. package/build/semantic/tokens.json +39 -16
  8. package/build/semantic/variables.css +29 -8
  9. package/package.json +9 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
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
+
9
+ ## 2.0.0
10
+
11
+ ### Major Changes
12
+
13
+ - Replaced Helvetica based typography tokens with the Inter font based ones. Added focus-ring tokens
14
+
3
15
  ## 1.0.1
4
16
 
5
17
  ### Patch Changes
@@ -16,4 +28,4 @@
16
28
 
17
29
  ### Patch Changes
18
30
 
19
- - 7de247c: The initial project structure in preparation for the release
31
+ - The initial project structure in preparation for the release
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
@@ -176,9 +253,11 @@ console.log(tokens.color.background.primary); // "hsl(0, 0%, 100%)"
176
253
  - Special: `color-transparent`, `color-overlay-dark`, `color-overlay-light`
177
254
 
178
255
  **Typography**
179
- - Font sizes: `font-size-xx-small` through `font-size-xxx-large`
180
- - Line heights: `line-height-xx-small` through `line-height-xxx-large`
181
- - Letter spacing: `letter-spacing-xx-small` through `letter-spacing-xxx-large`
256
+ - Font families: `font-family-inter`, `font-family-favorit`, `font-family-body`, `font-family-display`
257
+ - Font weights: `font-weight-normal` (400), `font-weight-medium` (500)
258
+ - Font sizes: `font-size-x-small` through `font-size-xxxx-large`
259
+ - Line heights: `font-line-height-tight` through `font-line-height-loose`
260
+ - Letter spacing: `font-letter-spacing-x-small` through `font-letter-spacing-x-large`
182
261
 
183
262
  **Spacing**
184
263
  - `spacing-xx-small` through `spacing-xxx-large`
@@ -208,13 +287,46 @@ console.log(tokens.color.background.primary); // "hsl(0, 0%, 100%)"
208
287
  - Brand colors: `color-brand-primary-base`, `color-brand-secondary-base`, etc.
209
288
 
210
289
  **Typography Tokens**
211
- - Headings: `typography-heading-100-*` through `typography-heading-600-*`
212
- - Body text: `typography-body-100-*`, `typography-body-200-*`
213
- - Captions: `typography-caption-100-*`, `typography-caption-200-*`
214
- - Properties: `-font-size`, `-line-height`, `-letter-spacing`
290
+ - Display: `typography-display-100-*` through `typography-display-500-*`
291
+ - Headings: `typography-heading-100-*` through `typography-heading-500-*`
292
+ - Body text: `typography-body-large-*`, `typography-body-base-*`, `typography-body-small-*` (each with `default` and `medium` variants)
293
+ - Label: `typography-label-base-*`
294
+ - Caption: `typography-caption-*`
295
+ - Overline: `typography-overline-*`
296
+ - Properties: `-font-family`, `-font-weight`, `-font-size`, `-line-height`, `-letter-spacing`, `-color`, `-inverse`
297
+
298
+ **Focus Ring Tokens**
299
+ - `focus-ring-width` - Width of the focus ring outline
300
+ - `focus-ring-offset` - Distance between element and focus ring
301
+ - `focus-ring-color` - Color of the focus ring
302
+ - `focus-ring-transition` - Animation for focus ring appearance
215
303
 
216
304
  ## Examples
217
305
 
306
+ ### Using Focus Ring Tokens for Accessibility (CSS)
307
+
308
+ ```css
309
+ /* Import all required token files */
310
+ @import '@beam-ui/design-tokens/build/globals/variables.css';
311
+ @import '@beam-ui/design-tokens/build/base/variables.css';
312
+ @import '@beam-ui/design-tokens/build/semantic/variables.css';
313
+
314
+ .interactive-element {
315
+ /* Remove default browser focus outline */
316
+ outline: none;
317
+ }
318
+
319
+ .interactive-element:focus-visible {
320
+ /* Apply design system focus ring */
321
+ outline: var(--focus-ring-width) solid var(--focus-ring-color);
322
+ outline-offset: var(--focus-ring-offset);
323
+
324
+ @media (prefers-reduced-motion: no-preference) {
325
+ transition: var(--focus-ring-transition);
326
+ }
327
+ }
328
+ ```
329
+
218
330
  ### Complete Button Component (CSS)
219
331
 
220
332
  ```css
package/build/base/tokens.es6.js CHANGED
@@ -73,12 +73,15 @@ export const colorGrayWhite = "hsl(0, 0%, 100%)";
73
73
  export const colorOverlayDark = "hsla(0, 0%, 0%, 0.3)";
74
74
  export const colorOverlayLight = "hsla(0, 0%, 0%, 0.05)";
75
75
  export const colorTransparent = "hsla(0, 0%, 0%, 0)";
76
- export const fontFamilyNormal = "HelveticaNeueeTextPro-Roman";
77
- export const fontFamilyMedium = "HelveticaNeueeTextPro-Md";
78
- export const fontFamilyFavorit = "FavoritStd-MediumExtended";
79
- export const fontFamilyDisplay = "FavoritStd-MediumExtended";
80
- export const fontFamilyHeading = "HelveticaNeueeTextPro-Md";
81
- export const fontFamilyBody = "HelveticaNeueeTextPro-Roman";
76
+ export const fontFamilySystemUI = "system-ui, sans-serif";
77
+ export const fontFamilyInter = "Inter, system-ui, sans-serif";
78
+ export const fontFamilyFavorit =
79
+ "FavoritStd-MediumExtended, system-ui, sans-serif";
80
+ export const fontFamilyDisplay =
81
+ "FavoritStd-MediumExtended, system-ui, sans-serif";
82
+ export const fontFamilyBody = "Inter, system-ui, sans-serif";
83
+ export const fontWeightNormal = 400;
84
+ export const fontWeightMedium = 500;
82
85
  export const fontSizeXSmall = "1.2rem";
83
86
  export const fontSizeSmall = "1.4rem";
84
87
  export const fontSizeMedium = "1.6rem";
package/build/base/tokens.json CHANGED
@@ -100,12 +100,15 @@
100
100
  },
101
101
  "font": {
102
102
  "family": {
103
- "normal": "HelveticaNeueeTextPro-Roman",
104
- "medium": "HelveticaNeueeTextPro-Md",
105
- "favorit": "FavoritStd-MediumExtended",
106
- "display": "FavoritStd-MediumExtended",
107
- "heading": "HelveticaNeueeTextPro-Md",
108
- "body": "HelveticaNeueeTextPro-Roman"
103
+ "systemUI": "system-ui, sans-serif",
104
+ "inter": "Inter, system-ui, sans-serif",
105
+ "favorit": "FavoritStd-MediumExtended, system-ui, sans-serif",
106
+ "display": "FavoritStd-MediumExtended, system-ui, sans-serif",
107
+ "body": "Inter, system-ui, sans-serif"
108
+ },
109
+ "weight": {
110
+ "normal": 400,
111
+ "medium": 500
109
112
  },
110
113
  "size": {
111
114
  "x-small": "1.2rem",
package/build/base/variables.css CHANGED
@@ -74,12 +74,13 @@
74
74
  --color-overlay-dark: hsla(0, 0%, 0%, 0.3);
75
75
  --color-overlay-light: hsla(0, 0%, 0%, 0.05);
76
76
  --color-transparent: hsla(0, 0%, 0%, 0);
77
- --font-family-normal: HelveticaNeueeTextPro-Roman;
78
- --font-family-medium: HelveticaNeueeTextPro-Md;
79
- --font-family-favorit: FavoritStd-MediumExtended;
80
- --font-family-display: FavoritStd-MediumExtended;
81
- --font-family-heading: HelveticaNeueeTextPro-Md;
82
- --font-family-body: HelveticaNeueeTextPro-Roman;
77
+ --font-family-system-ui: system-ui, sans-serif;
78
+ --font-family-inter: Inter, system-ui, sans-serif;
79
+ --font-family-favorit: FavoritStd-MediumExtended, system-ui, sans-serif;
80
+ --font-family-display: FavoritStd-MediumExtended, system-ui, sans-serif;
81
+ --font-family-body: Inter, system-ui, sans-serif;
82
+ --font-weight-normal: 400;
83
+ --font-weight-medium: 500;
83
84
  --font-size-x-small: 1.2rem;
84
85
  --font-size-small: 1.4rem;
85
86
  --font-size-medium: 1.6rem;
package/build/semantic/tokens.es6.js CHANGED
@@ -200,115 +200,145 @@ export const colorAccentLight = "hsl(267, 69%, 85%)";
200
200
  export const colorAccentLighter = "hsl(266, 67%, 75%)";
201
201
  export const colorAccentDark = "hsl(263, 51%, 35%)";
202
202
  export const colorAccentContrast = "hsl(269, 100%, 96%)";
203
- export const typographyDisplay100FontFamily = "FavoritStd-MediumExtended";
203
+ export const focusRingWidth = "0.2rem";
204
+ export const focusRingOffset = "0.2rem";
205
+ export const focusRingColor = "hsl(209, 82%, 49%)";
206
+ export const focusRingTransition =
207
+ "outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1)";
208
+ export const typographyDisplay100FontFamily =
209
+ "FavoritStd-MediumExtended, system-ui, sans-serif";
204
210
  export const typographyDisplay100FontSize = "5.2rem";
205
211
  export const typographyDisplay100LineHeight = "1.2";
206
212
  export const typographyDisplay100LetterSpacing = "-0.02em";
207
213
  export const typographyDisplay100Color = "hsl(0, 0%, 0%)";
208
214
  export const typographyDisplay100Inverse = "hsl(0, 0%, 100%)";
209
- export const typographyDisplay200FontFamily = "FavoritStd-MediumExtended";
215
+ export const typographyDisplay200FontFamily =
216
+ "FavoritStd-MediumExtended, system-ui, sans-serif";
210
217
  export const typographyDisplay200FontSize = "4rem";
211
218
  export const typographyDisplay200LineHeight = "1.2";
212
219
  export const typographyDisplay200LetterSpacing = "-0.02em";
213
220
  export const typographyDisplay200Color = "hsl(0, 0%, 0%)";
214
221
  export const typographyDisplay200Inverse = "hsl(0, 0%, 100%)";
215
- export const typographyDisplay300FontFamily = "FavoritStd-MediumExtended";
222
+ export const typographyDisplay300FontFamily =
223
+ "FavoritStd-MediumExtended, system-ui, sans-serif";
216
224
  export const typographyDisplay300FontSize = "3.2rem";
217
225
  export const typographyDisplay300LineHeight = "1.2";
218
226
  export const typographyDisplay300LetterSpacing = "-0.02em";
219
227
  export const typographyDisplay300Color = "hsl(0, 0%, 0%)";
220
228
  export const typographyDisplay300Inverse = "hsl(0, 0%, 100%)";
221
- export const typographyDisplay400FontFamily = "FavoritStd-MediumExtended";
229
+ export const typographyDisplay400FontFamily =
230
+ "FavoritStd-MediumExtended, system-ui, sans-serif";
222
231
  export const typographyDisplay400FontSize = "2.4rem";
223
232
  export const typographyDisplay400LineHeight = "1.2";
224
233
  export const typographyDisplay400LetterSpacing = "-0.02em";
225
234
  export const typographyDisplay400Color = "hsl(0, 0%, 0%)";
226
235
  export const typographyDisplay400Inverse = "hsl(0, 0%, 100%)";
227
- export const typographyDisplay500FontFamily = "FavoritStd-MediumExtended";
236
+ export const typographyDisplay500FontFamily =
237
+ "FavoritStd-MediumExtended, system-ui, sans-serif";
228
238
  export const typographyDisplay500FontSize = "2rem";
229
239
  export const typographyDisplay500LineHeight = "1.2";
230
240
  export const typographyDisplay500LetterSpacing = "-0.02em";
231
241
  export const typographyDisplay500Color = "hsl(0, 0%, 0%)";
232
242
  export const typographyDisplay500Inverse = "hsl(0, 0%, 100%)";
233
- export const typographyHeading100FontFamily = "HelveticaNeueeTextPro-Md";
243
+ export const typographyHeading100FontFamily = "Inter, system-ui, sans-serif";
244
+ export const typographyHeading100FontWeight = 500;
234
245
  export const typographyHeading100FontSize = "5.2rem";
235
246
  export const typographyHeading100LineHeight = "1.3";
236
247
  export const typographyHeading100LetterSpacing = "-0.01em";
237
248
  export const typographyHeading100Color = "hsl(0, 0%, 0%)";
238
249
  export const typographyHeading100Inverse = "hsl(0, 0%, 100%)";
239
- export const typographyHeading200FontFamily = "HelveticaNeueeTextPro-Md";
250
+ export const typographyHeading200FontFamily = "Inter, system-ui, sans-serif";
251
+ export const typographyHeading200FontWeight = 500;
240
252
  export const typographyHeading200FontSize = "4rem";
241
253
  export const typographyHeading200LineHeight = "1.3";
242
254
  export const typographyHeading200LetterSpacing = "-0.01em";
243
255
  export const typographyHeading200Color = "hsl(0, 0%, 0%)";
244
256
  export const typographyHeading200Inverse = "hsl(0, 0%, 100%)";
245
- export const typographyHeading300FontFamily = "HelveticaNeueeTextPro-Md";
257
+ export const typographyHeading300FontFamily = "Inter, system-ui, sans-serif";
258
+ export const typographyHeading300FontWeight = 500;
246
259
  export const typographyHeading300FontSize = "3.2rem";
247
260
  export const typographyHeading300LineHeight = "1.3";
248
261
  export const typographyHeading300LetterSpacing = "-0.01em";
249
262
  export const typographyHeading300Color = "hsl(0, 0%, 0%)";
250
263
  export const typographyHeading300Inverse = "hsl(0, 0%, 100%)";
251
- export const typographyHeading400FontFamily = "HelveticaNeueeTextPro-Md";
264
+ export const typographyHeading400FontFamily = "Inter, system-ui, sans-serif";
265
+ export const typographyHeading400FontWeight = 500;
252
266
  export const typographyHeading400FontSize = "2.4rem";
253
267
  export const typographyHeading400LineHeight = "1.3";
254
268
  export const typographyHeading400LetterSpacing = "-0.01em";
255
269
  export const typographyHeading400Color = "hsl(0, 0%, 0%)";
256
270
  export const typographyHeading400Inverse = "hsl(0, 0%, 100%)";
257
- export const typographyHeading500FontFamily = "HelveticaNeueeTextPro-Md";
271
+ export const typographyHeading500FontFamily = "Inter, system-ui, sans-serif";
272
+ export const typographyHeading500FontWeight = 500;
258
273
  export const typographyHeading500FontSize = "2rem";
259
274
  export const typographyHeading500LineHeight = "1.3";
260
275
  export const typographyHeading500LetterSpacing = "-0.01em";
261
276
  export const typographyHeading500Color = "hsl(0, 0%, 0%)";
262
277
  export const typographyHeading500Inverse = "hsl(0, 0%, 100%)";
263
278
  export const typographyBodyLargeDefaultFontFamily =
264
- "HelveticaNeueeTextPro-Roman";
279
+ "Inter, system-ui, sans-serif";
280
+ export const typographyBodyLargeDefaultFontWeight = 400;
265
281
  export const typographyBodyLargeDefaultFontSize = "2rem";
266
282
  export const typographyBodyLargeDefaultLineHeight = "1.3";
267
283
  export const typographyBodyLargeDefaultLetterSpacing = 0;
268
284
  export const typographyBodyLargeDefaultColor = "hsl(0, 0%, 0%)";
269
285
  export const typographyBodyLargeDefaultInverse = "hsl(0, 0%, 100%)";
270
- export const typographyBodyLargeMediumFontFamily = "HelveticaNeueeTextPro-Md";
286
+ export const typographyBodyLargeMediumFontFamily =
287
+ "Inter, system-ui, sans-serif";
288
+ export const typographyBodyLargeMediumFontWeight = 500;
271
289
  export const typographyBodyLargeMediumFontSize = "2rem";
272
290
  export const typographyBodyLargeMediumLineHeight = "1.3";
273
291
  export const typographyBodyLargeMediumLetterSpacing = 0;
274
292
  export const typographyBodyLargeMediumColor = "hsl(0, 0%, 0%)";
275
293
  export const typographyBodyLargeMediumInverse = "hsl(0, 0%, 100%)";
276
294
  export const typographyBodyBaseDefaultFontFamily =
277
- "HelveticaNeueeTextPro-Roman";
295
+ "Inter, system-ui, sans-serif";
296
+ export const typographyBodyBaseDefaultFontWeight = 400;
278
297
  export const typographyBodyBaseDefaultFontSize = "1.6rem";
279
298
  export const typographyBodyBaseDefaultLineHeight = "1.3";
280
299
  export const typographyBodyBaseDefaultLetterSpacing = 0;
281
300
  export const typographyBodyBaseDefaultColor = "hsl(0, 0%, 0%)";
282
301
  export const typographyBodyBaseDefaultInverse = "hsl(0, 0%, 100%)";
283
- export const typographyBodyBaseMediumFontFamily = "HelveticaNeueeTextPro-Md";
302
+ export const typographyBodyBaseMediumFontFamily =
303
+ "Inter, system-ui, sans-serif";
304
+ export const typographyBodyBaseMediumFontWeight = 500;
284
305
  export const typographyBodyBaseMediumFontSize = "1.6rem";
285
306
  export const typographyBodyBaseMediumLineHeight = "1.3";
286
307
  export const typographyBodyBaseMediumLetterSpacing = 0;
287
308
  export const typographyBodyBaseMediumColor = "hsl(0, 0%, 0%)";
288
309
  export const typographyBodyBaseMediumInverse = "hsl(0, 0%, 100%)";
289
310
  export const typographyBodySmallDefaultFontFamily =
290
- "HelveticaNeueeTextPro-Roman";
311
+ "Inter, system-ui, sans-serif";
312
+ export const typographyBodySmallDefaultFontWeight = 400;
291
313
  export const typographyBodySmallDefaultFontSize = "1.4rem";
292
314
  export const typographyBodySmallDefaultLineHeight = "1.3";
293
315
  export const typographyBodySmallDefaultLetterSpacing = 0;
294
316
  export const typographyBodySmallDefaultColor = "hsl(0, 0%, 0%)";
295
317
  export const typographyBodySmallDefaultInverse = "hsl(0, 0%, 100%)";
296
- export const typographyBodySmallMediumFontFamily = "HelveticaNeueeTextPro-Md";
318
+ export const typographyBodySmallMediumFontFamily =
319
+ "Inter, system-ui, sans-serif";
320
+ export const typographyBodySmallMediumFontWeight = 500;
297
321
  export const typographyBodySmallMediumFontSize = "1.4rem";
298
322
  export const typographyBodySmallMediumLineHeight = "1.3";
299
323
  export const typographyBodySmallMediumLetterSpacing = 0;
300
324
  export const typographyBodySmallMediumColor = "hsl(0, 0%, 0%)";
301
325
  export const typographyBodySmallMediumInverse = "hsl(0, 0%, 100%)";
326
+ export const typographyLabelBaseFontFamily = "Inter, system-ui, sans-serif";
327
+ export const typographyLabelBaseFontWeight = 400;
302
328
  export const typographyLabelBaseFontSize = "1.2rem";
303
329
  export const typographyLabelBaseLineHeight = "1.3";
304
330
  export const typographyLabelBaseLetterSpacing = "0.01em";
305
331
  export const typographyLabelBaseColor = "hsl(0, 0%, 0%)";
306
332
  export const typographyLabelBaseInverse = "hsl(0, 0%, 100%)";
333
+ export const typographyCaptionFontFamily = "Inter, system-ui, sans-serif";
334
+ export const typographyCaptionFontWeight = 400;
307
335
  export const typographyCaptionFontSize = "1.2rem";
308
336
  export const typographyCaptionLineHeight = "1.3";
309
337
  export const typographyCaptionLetterSpacing = "0.01em";
310
338
  export const typographyCaptionColor = "hsl(222, 11%, 36%)";
311
339
  export const typographyCaptionInverse = "hsl(0, 0%, 100%)";
340
+ export const typographyOverlineFontFamily = "Inter, system-ui, sans-serif";
341
+ export const typographyOverlineFontWeight = 400;
312
342
  export const typographyOverlineFontSize = "1.2rem";
313
343
  export const typographyOverlineLineHeight = "1.3";
314
344
  export const typographyOverlineLetterSpacing = "0.01em";
package/build/semantic/tokens.json CHANGED
@@ -263,10 +263,16 @@
263
263
  }
264
264
  }
265
265
  },
266
+ "focusRing": {
267
+ "width": "0.2rem",
268
+ "offset": "0.2rem",
269
+ "color": "hsl(209, 82%, 49%)",
270
+ "transition": "outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1)"
271
+ },
266
272
  "typography": {
267
273
  "display": {
268
274
  "100": {
269
- "fontFamily": "FavoritStd-MediumExtended",
275
+ "fontFamily": "FavoritStd-MediumExtended, system-ui, sans-serif",
270
276
  "fontSize": "5.2rem",
271
277
  "lineHeight": "1.2",
272
278
  "letterSpacing": "-0.02em",
@@ -274,7 +280,7 @@
274
280
  "inverse": "hsl(0, 0%, 100%)"
275
281
  },
276
282
  "200": {
277
- "fontFamily": "FavoritStd-MediumExtended",
283
+ "fontFamily": "FavoritStd-MediumExtended, system-ui, sans-serif",
278
284
  "fontSize": "4rem",
279
285
  "lineHeight": "1.2",
280
286
  "letterSpacing": "-0.02em",
@@ -282,7 +288,7 @@
282
288
  "inverse": "hsl(0, 0%, 100%)"
283
289
  },
284
290
  "300": {
285
- "fontFamily": "FavoritStd-MediumExtended",
291
+ "fontFamily": "FavoritStd-MediumExtended, system-ui, sans-serif",
286
292
  "fontSize": "3.2rem",
287
293
  "lineHeight": "1.2",
288
294
  "letterSpacing": "-0.02em",
@@ -290,7 +296,7 @@
290
296
  "inverse": "hsl(0, 0%, 100%)"
291
297
  },
292
298
  "400": {
293
- "fontFamily": "FavoritStd-MediumExtended",
299
+ "fontFamily": "FavoritStd-MediumExtended, system-ui, sans-serif",
294
300
  "fontSize": "2.4rem",
295
301
  "lineHeight": "1.2",
296
302
  "letterSpacing": "-0.02em",
@@ -298,7 +304,7 @@
298
304
  "inverse": "hsl(0, 0%, 100%)"
299
305
  },
300
306
  "500": {
301
- "fontFamily": "FavoritStd-MediumExtended",
307
+ "fontFamily": "FavoritStd-MediumExtended, system-ui, sans-serif",
302
308
  "fontSize": "2rem",
303
309
  "lineHeight": "1.2",
304
310
  "letterSpacing": "-0.02em",
@@ -308,7 +314,8 @@
308
314
  },
309
315
  "heading": {
310
316
  "100": {
311
- "fontFamily": "HelveticaNeueeTextPro-Md",
317
+ "fontFamily": "Inter, system-ui, sans-serif",
318
+ "fontWeight": 500,
312
319
  "fontSize": "5.2rem",
313
320
  "lineHeight": "1.3",
314
321
  "letterSpacing": "-0.01em",
@@ -316,7 +323,8 @@
316
323
  "inverse": "hsl(0, 0%, 100%)"
317
324
  },
318
325
  "200": {
319
- "fontFamily": "HelveticaNeueeTextPro-Md",
326
+ "fontFamily": "Inter, system-ui, sans-serif",
327
+ "fontWeight": 500,
320
328
  "fontSize": "4rem",
321
329
  "lineHeight": "1.3",
322
330
  "letterSpacing": "-0.01em",
@@ -324,7 +332,8 @@
324
332
  "inverse": "hsl(0, 0%, 100%)"
325
333
  },
326
334
  "300": {
327
- "fontFamily": "HelveticaNeueeTextPro-Md",
335
+ "fontFamily": "Inter, system-ui, sans-serif",
336
+ "fontWeight": 500,
328
337
  "fontSize": "3.2rem",
329
338
  "lineHeight": "1.3",
330
339
  "letterSpacing": "-0.01em",
@@ -332,7 +341,8 @@
332
341
  "inverse": "hsl(0, 0%, 100%)"
333
342
  },
334
343
  "400": {
335
- "fontFamily": "HelveticaNeueeTextPro-Md",
344
+ "fontFamily": "Inter, system-ui, sans-serif",
345
+ "fontWeight": 500,
336
346
  "fontSize": "2.4rem",
337
347
  "lineHeight": "1.3",
338
348
  "letterSpacing": "-0.01em",
@@ -340,7 +350,8 @@
340
350
  "inverse": "hsl(0, 0%, 100%)"
341
351
  },
342
352
  "500": {
343
- "fontFamily": "HelveticaNeueeTextPro-Md",
353
+ "fontFamily": "Inter, system-ui, sans-serif",
354
+ "fontWeight": 500,
344
355
  "fontSize": "2rem",
345
356
  "lineHeight": "1.3",
346
357
  "letterSpacing": "-0.01em",
@@ -351,7 +362,8 @@
351
362
  "body": {
352
363
  "large": {
353
364
  "default": {
354
- "fontFamily": "HelveticaNeueeTextPro-Roman",
365
+ "fontFamily": "Inter, system-ui, sans-serif",
366
+ "fontWeight": 400,
355
367
  "fontSize": "2rem",
356
368
  "lineHeight": "1.3",
357
369
  "letterSpacing": 0,
@@ -359,7 +371,8 @@
359
371
  "inverse": "hsl(0, 0%, 100%)"
360
372
  },
361
373
  "medium": {
362
- "fontFamily": "HelveticaNeueeTextPro-Md",
374
+ "fontFamily": "Inter, system-ui, sans-serif",
375
+ "fontWeight": 500,
363
376
  "fontSize": "2rem",
364
377
  "lineHeight": "1.3",
365
378
  "letterSpacing": 0,
@@ -369,7 +382,8 @@
369
382
  },
370
383
  "base": {
371
384
  "default": {
372
- "fontFamily": "HelveticaNeueeTextPro-Roman",
385
+ "fontFamily": "Inter, system-ui, sans-serif",
386
+ "fontWeight": 400,
373
387
  "fontSize": "1.6rem",
374
388
  "lineHeight": "1.3",
375
389
  "letterSpacing": 0,
@@ -377,7 +391,8 @@
377
391
  "inverse": "hsl(0, 0%, 100%)"
378
392
  },
379
393
  "medium": {
380
- "fontFamily": "HelveticaNeueeTextPro-Md",
394
+ "fontFamily": "Inter, system-ui, sans-serif",
395
+ "fontWeight": 500,
381
396
  "fontSize": "1.6rem",
382
397
  "lineHeight": "1.3",
383
398
  "letterSpacing": 0,
@@ -387,7 +402,8 @@
387
402
  },
388
403
  "small": {
389
404
  "default": {
390
- "fontFamily": "HelveticaNeueeTextPro-Roman",
405
+ "fontFamily": "Inter, system-ui, sans-serif",
406
+ "fontWeight": 400,
391
407
  "fontSize": "1.4rem",
392
408
  "lineHeight": "1.3",
393
409
  "letterSpacing": 0,
@@ -395,7 +411,8 @@
395
411
  "inverse": "hsl(0, 0%, 100%)"
396
412
  },
397
413
  "medium": {
398
- "fontFamily": "HelveticaNeueeTextPro-Md",
414
+ "fontFamily": "Inter, system-ui, sans-serif",
415
+ "fontWeight": 500,
399
416
  "fontSize": "1.4rem",
400
417
  "lineHeight": "1.3",
401
418
  "letterSpacing": 0,
@@ -406,6 +423,8 @@
406
423
  },
407
424
  "label": {
408
425
  "base": {
426
+ "fontFamily": "Inter, system-ui, sans-serif",
427
+ "fontWeight": 400,
409
428
  "fontSize": "1.2rem",
410
429
  "lineHeight": "1.3",
411
430
  "letterSpacing": "0.01em",
@@ -414,6 +433,8 @@
414
433
  }
415
434
  },
416
435
  "caption": {
436
+ "fontFamily": "Inter, system-ui, sans-serif",
437
+ "fontWeight": 400,
417
438
  "fontSize": "1.2rem",
418
439
  "lineHeight": "1.3",
419
440
  "letterSpacing": "0.01em",
@@ -421,6 +442,8 @@
421
442
  "inverse": "hsl(0, 0%, 100%)"
422
443
  },
423
444
  "overline": {
445
+ "fontFamily": "Inter, system-ui, sans-serif",
446
+ "fontWeight": 400,
424
447
  "fontSize": "1.2rem",
425
448
  "lineHeight": "1.3",
426
449
  "letterSpacing": "0.01em",
package/build/semantic/variables.css CHANGED
@@ -3,6 +3,8 @@
3
3
  */
4
4
 
5
5
  :root {
6
+ --focus-ring-width: 0.2rem;
7
+ --focus-ring-transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
6
8
  --button-primary-background: var(--color-gray-black);
7
9
  --button-primary-background-hover: var(--color-gray-700);
8
10
  --button-primary-background-active: var(--color-gray-500);
@@ -201,6 +203,8 @@
201
203
  --color-accent-lighter: var(--color-purple-300);
202
204
  --color-accent-dark: var(--color-purple-700);
203
205
  --color-accent-contrast: var(--color-purple-100);
206
+ --focus-ring-offset: var(--focus-ring-width);
207
+ --focus-ring-color: var(--color-blue-500);
204
208
  --typography-display-100-font-size: var(--font-size-xxxx-large);
205
209
  --typography-display-100-line-height: var(--font-line-height-tight);
206
210
  --typography-display-100-letter-spacing: var(--font-letter-spacing-x-small);
@@ -226,71 +230,85 @@
226
230
  --typography-display-500-letter-spacing: var(--font-letter-spacing-x-small);
227
231
  --typography-display-500-color: var(--color-gray-black);
228
232
  --typography-display-500-inverse: var(--color-gray-white);
233
+ --typography-heading-100-font-weight: var(--font-weight-medium);
229
234
  --typography-heading-100-font-size: var(--font-size-xxxx-large);
230
235
  --typography-heading-100-line-height: var(--font-line-height-small);
231
236
  --typography-heading-100-letter-spacing: var(--font-letter-spacing-small);
232
237
  --typography-heading-100-color: var(--color-gray-black);
233
238
  --typography-heading-100-inverse: var(--color-gray-white);
239
+ --typography-heading-200-font-weight: var(--font-weight-medium);
234
240
  --typography-heading-200-font-size: var(--font-size-xxx-large);
235
241
  --typography-heading-200-line-height: var(--font-line-height-small);
236
242
  --typography-heading-200-letter-spacing: var(--font-letter-spacing-small);
237
243
  --typography-heading-200-color: var(--color-gray-black);
238
244
  --typography-heading-200-inverse: var(--color-gray-white);
245
+ --typography-heading-300-font-weight: var(--font-weight-medium);
239
246
  --typography-heading-300-font-size: var(--font-size-xx-large);
240
247
  --typography-heading-300-line-height: var(--font-line-height-small);
241
248
  --typography-heading-300-letter-spacing: var(--font-letter-spacing-small);
242
249
  --typography-heading-300-color: var(--color-gray-black);
243
250
  --typography-heading-300-inverse: var(--color-gray-white);
251
+ --typography-heading-400-font-weight: var(--font-weight-medium);
244
252
  --typography-heading-400-font-size: var(--font-size-x-large);
245
253
  --typography-heading-400-line-height: var(--font-line-height-small);
246
254
  --typography-heading-400-letter-spacing: var(--font-letter-spacing-small);
247
255
  --typography-heading-400-color: var(--color-gray-black);
248
256
  --typography-heading-400-inverse: var(--color-gray-white);
257
+ --typography-heading-500-font-weight: var(--font-weight-medium);
249
258
  --typography-heading-500-font-size: var(--font-size-large);
250
259
  --typography-heading-500-line-height: var(--font-line-height-small);
251
260
  --typography-heading-500-letter-spacing: var(--font-letter-spacing-small);
252
261
  --typography-heading-500-color: var(--color-gray-black);
253
262
  --typography-heading-500-inverse: var(--color-gray-white);
263
+ --typography-body-large-default-font-weight: var(--font-weight-normal);
254
264
  --typography-body-large-default-font-size: var(--font-size-large);
255
265
  --typography-body-large-default-line-height: var(--font-line-height-small);
256
266
  --typography-body-large-default-letter-spacing: var(--font-letter-spacing-normal);
257
267
  --typography-body-large-default-color: var(--color-gray-black);
258
268
  --typography-body-large-default-inverse: var(--color-gray-white);
269
+ --typography-body-large-medium-font-weight: var(--font-weight-medium);
259
270
  --typography-body-large-medium-font-size: var(--font-size-large);
260
271
  --typography-body-large-medium-line-height: var(--font-line-height-small);
261
272
  --typography-body-large-medium-letter-spacing: var(--font-letter-spacing-normal);
262
273
  --typography-body-large-medium-color: var(--color-gray-black);
263
274
  --typography-body-large-medium-inverse: var(--color-gray-white);
275
+ --typography-body-base-default-font-weight: var(--font-weight-normal);
264
276
  --typography-body-base-default-font-size: var(--font-size-medium);
265
277
  --typography-body-base-default-line-height: var(--font-line-height-small);
266
278
  --typography-body-base-default-letter-spacing: var(--font-letter-spacing-normal);
267
279
  --typography-body-base-default-color: var(--color-gray-black);
268
280
  --typography-body-base-default-inverse: var(--color-gray-white);
281
+ --typography-body-base-medium-font-weight: var(--font-weight-medium);
269
282
  --typography-body-base-medium-font-size: var(--font-size-medium);
270
283
  --typography-body-base-medium-line-height: var(--font-line-height-small);
271
284
  --typography-body-base-medium-letter-spacing: var(--font-letter-spacing-normal);
272
285
  --typography-body-base-medium-color: var(--color-gray-black);
273
286
  --typography-body-base-medium-inverse: var(--color-gray-white);
287
+ --typography-body-small-default-font-weight: var(--font-weight-normal);
274
288
  --typography-body-small-default-font-size: var(--font-size-small);
275
289
  --typography-body-small-default-line-height: var(--font-line-height-small);
276
290
  --typography-body-small-default-letter-spacing: var(--font-letter-spacing-normal);
277
291
  --typography-body-small-default-color: var(--color-gray-black);
278
292
  --typography-body-small-default-inverse: var(--color-gray-white);
293
+ --typography-body-small-medium-font-weight: var(--font-weight-medium);
279
294
  --typography-body-small-medium-font-size: var(--font-size-small);
280
295
  --typography-body-small-medium-line-height: var(--font-line-height-small);
281
296
  --typography-body-small-medium-letter-spacing: var(--font-letter-spacing-normal);
282
297
  --typography-body-small-medium-color: var(--color-gray-black);
283
298
  --typography-body-small-medium-inverse: var(--color-gray-white);
299
+ --typography-label-base-font-weight: var(--font-weight-normal);
284
300
  --typography-label-base-font-size: var(--font-size-x-small);
285
301
  --typography-label-base-line-height: var(--font-line-height-small);
286
302
  --typography-label-base-letter-spacing: var(--font-letter-spacing-large);
287
303
  --typography-label-base-color: var(--color-gray-black);
288
304
  --typography-label-base-inverse: var(--color-gray-white);
305
+ --typography-caption-font-weight: var(--font-weight-normal);
289
306
  --typography-caption-font-size: var(--font-size-x-small);
290
307
  --typography-caption-line-height: var(--font-line-height-small);
291
308
  --typography-caption-letter-spacing: var(--font-letter-spacing-large);
292
309
  --typography-caption-color: var(--color-gray-700);
293
310
  --typography-caption-inverse: var(--color-gray-white);
311
+ --typography-overline-font-weight: var(--font-weight-normal);
294
312
  --typography-overline-font-size: var(--font-size-x-small);
295
313
  --typography-overline-line-height: var(--font-line-height-small);
296
314
  --typography-overline-letter-spacing: var(--font-letter-spacing-large);
@@ -301,15 +319,18 @@
301
319
  --typography-display-300-font-family: var(--font-family-display);
302
320
  --typography-display-400-font-family: var(--font-family-display);
303
321
  --typography-display-500-font-family: var(--font-family-display);
304
- --typography-heading-100-font-family: var(--font-family-heading);
305
- --typography-heading-200-font-family: var(--font-family-heading);
306
- --typography-heading-300-font-family: var(--font-family-heading);
307
- --typography-heading-400-font-family: var(--font-family-heading);
308
- --typography-heading-500-font-family: var(--font-family-heading);
322
+ --typography-heading-100-font-family: var(--font-family-body);
323
+ --typography-heading-200-font-family: var(--font-family-body);
324
+ --typography-heading-300-font-family: var(--font-family-body);
325
+ --typography-heading-400-font-family: var(--font-family-body);
326
+ --typography-heading-500-font-family: var(--font-family-body);
309
327
  --typography-body-large-default-font-family: var(--font-family-body);
310
- --typography-body-large-medium-font-family: var(--font-family-heading);
328
+ --typography-body-large-medium-font-family: var(--font-family-body);
311
329
  --typography-body-base-default-font-family: var(--font-family-body);
312
- --typography-body-base-medium-font-family: var(--font-family-heading);
330
+ --typography-body-base-medium-font-family: var(--font-family-body);
313
331
  --typography-body-small-default-font-family: var(--font-family-body);
314
- --typography-body-small-medium-font-family: var(--font-family-heading);
332
+ --typography-body-small-medium-font-family: var(--font-family-body);
333
+ --typography-label-base-font-family: var(--font-family-body);
334
+ --typography-caption-font-family: var(--font-family-body);
335
+ --typography-overline-font-family: var(--font-family-body);
315
336
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@beam-ui/design-tokens",
3
- "version": "1.0.1",
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",
@@ -16,7 +16,7 @@
16
16
  ],
17
17
  "repository": {
18
18
  "type": "git",
19
- "url": "https://github.com/tatari-tv/beam-ui.git",
19
+ "url": "git+https://github.com/tatari-tv/beam-ui.git",
20
20
  "directory": "design-tokens"
21
21
  },
22
22
  "homepage": "https://github.com/tatari-tv/beam-ui/tree/main/design-tokens#readme",
@@ -34,11 +34,15 @@
34
34
  "scripts": {
35
35
  "build": "node ./build.js",
36
36
  "clean": "rm -rf build",
37
- "prepublishOnly": "npm run clean && npm run build",
38
37
  "changeset": "changeset",
39
38
  "version": "changeset version",
40
- "release": "npm run build && changeset publish",
41
- "test": "echo \"Error: no test specified\" && exit 1"
39
+ "prerelease": "yarn clean && yarn build",
40
+ "release": "npm publish --access public",
41
+ "create-tag": "node ../scripts/create-tag.js design-tokens",
42
+ "create-tag:push": "yarn create-tag && git push origin $(git describe --tags --abbrev=0)",
43
+ "test": "echo \"Error: no test specified\" && exit 1",
44
+ "test:run": "echo \"No-op\"",
45
+ "lint": "echo \"No-op\""
42
46
  },
43
47
  "author": "Beam UI Team",
44
48
  "license": "MIT",