beacon-ui 3.2.0 → 3.3.0

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 (5) hide show
  1. package/CHANGELOG.md +19 -1
  2. package/package.json +1 -1
  3. package/tokens/generated/index.css +20 -20
  4. package/tokens/generated/responsive.css +18 -18
  5. package/tokens/generated/typography.css +2 -2
package/CHANGELOG.md CHANGED
@@ -5,7 +5,25 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
- ## [3.2.0] - 2025-01-02
8
+ ## [3.3.0] - 2025-01-02
9
+
10
+ ### Added
11
+ - Typography implementation guide section in documentation with code examples and best practices
12
+ - Comprehensive usage examples for typography classes with copy-to-clipboard functionality
13
+ - Implementation patterns for combining typography classes with inline styles for color and spacing
14
+
15
+ ### Changed
16
+ - Refactored all inline typography styles to use typography utility classes throughout documentation
17
+ - Improved typography class usage consistency across all component examples
18
+ - Updated build script to correctly determine font weight prefix based on fontWeight reference (not just fontFamily)
19
+ - Typography classes now properly handle H3 (secondary-semibold) and H6 (secondary-medium) font weights
20
+
21
+ ### Fixed
22
+ - Fixed H3 typography class to use `font-weight-secondary-semibold` instead of `font-weight-primary-semibold`
23
+ - Fixed H6 typography class to use `font-weight-secondary-medium` instead of `font-weight-secondary-semibold`
24
+ - Corrected font weight determination logic in token build script to check fontWeight reference directly
25
+
26
+ ## [3.2.0] - 2025-01-01
9
27
 
10
28
  ### Changed
11
29
  - Simplified Card component usage examples for better developer experience
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beacon-ui",
3
- "version": "3.2.0",
3
+ "version": "3.3.0",
4
4
  "description": "Beacon Design System - Components and tokens",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/tokens/generated/index.css CHANGED
@@ -434,12 +434,6 @@
434
434
  /* Responsive tokens */
435
435
  :root {
436
436
  --device-width: 1440px;
437
- --adaptive-set-d96-t80-m32: 96px;
438
- --adaptive-set-d96-t48-m32: 96px;
439
- --adaptive-set-d48-t32-m24: 48px;
440
- --adaptive-set-d64-t80-m32: 64px;
441
- --adaptive-set-d80-t64-m48: 80px;
442
- --adaptive-set-d32-t80-m32: 32px;
443
437
  --heading-h1-text-size: 64px;
444
438
  --fonts-heading-h1-text-size: 64px;
445
439
  --heading-h1-paragraph-spacing: 72px;
@@ -506,18 +500,18 @@
506
500
  --fonts-body-medium-paragraph-spacing: 28px;
507
501
  --body-medium-line-height: 28px;
508
502
  --fonts-body-medium-line-height: 28px;
503
+ --adaptive-set-d96-t80-m32: 96px;
504
+ --adaptive-set-d96-t48-m32: 96px;
505
+ --adaptive-set-d48-t32-m24: 48px;
506
+ --adaptive-set-d64-t80-m32: 64px;
507
+ --adaptive-set-d80-t64-m48: 80px;
508
+ --adaptive-set-d32-t80-m32: 32px;
509
509
  --menu-width: 224px;
510
510
  }
511
511
 
512
512
  @media (max-width: 1024px) {
513
513
  :root {
514
514
  --device-width: 834px;
515
- --adaptive-set-d96-t80-m32: 80px;
516
- --adaptive-set-d96-t48-m32: 48px;
517
- --adaptive-set-d48-t32-m24: 32px;
518
- --adaptive-set-d64-t80-m32: 80px;
519
- --adaptive-set-d80-t64-m48: 64px;
520
- --adaptive-set-d32-t80-m32: 80px;
521
515
  --heading-h1-text-size: 60px;
522
516
  --fonts-heading-h1-text-size: 60px;
523
517
  --heading-h1-paragraph-spacing: 64px;
@@ -584,6 +578,12 @@
584
578
  --fonts-body-medium-paragraph-spacing: 28px;
585
579
  --body-medium-line-height: 28px;
586
580
  --fonts-body-medium-line-height: 28px;
581
+ --adaptive-set-d96-t80-m32: 80px;
582
+ --adaptive-set-d96-t48-m32: 48px;
583
+ --adaptive-set-d48-t32-m24: 32px;
584
+ --adaptive-set-d64-t80-m32: 80px;
585
+ --adaptive-set-d80-t64-m48: 64px;
586
+ --adaptive-set-d32-t80-m32: 80px;
587
587
  --menu-width: var(--device-width);
588
588
  }
589
589
  }
@@ -591,12 +591,6 @@
591
591
  @media (max-width: 768px) {
592
592
  :root {
593
593
  --device-width: 430px;
594
- --adaptive-set-d96-t80-m32: 32px;
595
- --adaptive-set-d96-t48-m32: 32px;
596
- --adaptive-set-d48-t32-m24: 24px;
597
- --adaptive-set-d64-t80-m32: 32px;
598
- --adaptive-set-d80-t64-m48: 48px;
599
- --adaptive-set-d32-t80-m32: 32px;
600
594
  --heading-h1-text-size: 48px;
601
595
  --fonts-heading-h1-text-size: 48px;
602
596
  --heading-h1-paragraph-spacing: 56px;
@@ -663,6 +657,12 @@
663
657
  --fonts-body-medium-paragraph-spacing: 28px;
664
658
  --body-medium-line-height: 28px;
665
659
  --fonts-body-medium-line-height: 28px;
660
+ --adaptive-set-d96-t80-m32: 32px;
661
+ --adaptive-set-d96-t48-m32: 32px;
662
+ --adaptive-set-d48-t32-m24: 24px;
663
+ --adaptive-set-d64-t80-m32: 32px;
664
+ --adaptive-set-d80-t64-m48: 48px;
665
+ --adaptive-set-d32-t80-m32: 32px;
666
666
  --menu-width: var(--device-width);
667
667
  }
668
668
  }
@@ -728,7 +728,7 @@
728
728
  }
729
729
  .text-heading-h3 {
730
730
  font-family: var(--font-primary);
731
- font-weight: var(--font-weight-primary-semibold);
731
+ font-weight: var(--font-weight-secondary-semibold);
732
732
  text-transform: capitalize;
733
733
  font-size: var(--fonts-heading-h3-text-size);
734
734
  line-height: var(--fonts-heading-h3-line-height);
@@ -749,7 +749,7 @@
749
749
  }
750
750
  .text-heading-h6 {
751
751
  font-family: var(--font-secondary);
752
- font-weight: var(--font-weight-secondary-semibold);
752
+ font-weight: var(--font-weight-secondary-medium);
753
753
  text-transform: capitalize;
754
754
  font-size: var(--fonts-heading-h6-text-size);
755
755
  line-height: var(--fonts-heading-h6-line-height);
package/tokens/generated/responsive.css CHANGED
@@ -1,12 +1,6 @@
1
1
  /* Responsive tokens */
2
2
  :root {
3
3
  --device-width: 1440px;
4
- --adaptive-set-d96-t80-m32: 96px;
5
- --adaptive-set-d96-t48-m32: 96px;
6
- --adaptive-set-d48-t32-m24: 48px;
7
- --adaptive-set-d64-t80-m32: 64px;
8
- --adaptive-set-d80-t64-m48: 80px;
9
- --adaptive-set-d32-t80-m32: 32px;
10
4
  --heading-h1-text-size: 64px;
11
5
  --fonts-heading-h1-text-size: 64px;
12
6
  --heading-h1-paragraph-spacing: 72px;
@@ -73,18 +67,18 @@
73
67
  --fonts-body-medium-paragraph-spacing: 28px;
74
68
  --body-medium-line-height: 28px;
75
69
  --fonts-body-medium-line-height: 28px;
70
+ --adaptive-set-d96-t80-m32: 96px;
71
+ --adaptive-set-d96-t48-m32: 96px;
72
+ --adaptive-set-d48-t32-m24: 48px;
73
+ --adaptive-set-d64-t80-m32: 64px;
74
+ --adaptive-set-d80-t64-m48: 80px;
75
+ --adaptive-set-d32-t80-m32: 32px;
76
76
  --menu-width: 224px;
77
77
  }
78
78
 
79
79
  @media (max-width: 1024px) {
80
80
  :root {
81
81
  --device-width: 834px;
82
- --adaptive-set-d96-t80-m32: 80px;
83
- --adaptive-set-d96-t48-m32: 48px;
84
- --adaptive-set-d48-t32-m24: 32px;
85
- --adaptive-set-d64-t80-m32: 80px;
86
- --adaptive-set-d80-t64-m48: 64px;
87
- --adaptive-set-d32-t80-m32: 80px;
88
82
  --heading-h1-text-size: 60px;
89
83
  --fonts-heading-h1-text-size: 60px;
90
84
  --heading-h1-paragraph-spacing: 64px;
@@ -151,6 +145,12 @@
151
145
  --fonts-body-medium-paragraph-spacing: 28px;
152
146
  --body-medium-line-height: 28px;
153
147
  --fonts-body-medium-line-height: 28px;
148
+ --adaptive-set-d96-t80-m32: 80px;
149
+ --adaptive-set-d96-t48-m32: 48px;
150
+ --adaptive-set-d48-t32-m24: 32px;
151
+ --adaptive-set-d64-t80-m32: 80px;
152
+ --adaptive-set-d80-t64-m48: 64px;
153
+ --adaptive-set-d32-t80-m32: 80px;
154
154
  --menu-width: var(--device-width);
155
155
  }
156
156
  }
@@ -158,12 +158,6 @@
158
158
  @media (max-width: 768px) {
159
159
  :root {
160
160
  --device-width: 430px;
161
- --adaptive-set-d96-t80-m32: 32px;
162
- --adaptive-set-d96-t48-m32: 32px;
163
- --adaptive-set-d48-t32-m24: 24px;
164
- --adaptive-set-d64-t80-m32: 32px;
165
- --adaptive-set-d80-t64-m48: 48px;
166
- --adaptive-set-d32-t80-m32: 32px;
167
161
  --heading-h1-text-size: 48px;
168
162
  --fonts-heading-h1-text-size: 48px;
169
163
  --heading-h1-paragraph-spacing: 56px;
@@ -230,6 +224,12 @@
230
224
  --fonts-body-medium-paragraph-spacing: 28px;
231
225
  --body-medium-line-height: 28px;
232
226
  --fonts-body-medium-line-height: 28px;
227
+ --adaptive-set-d96-t80-m32: 32px;
228
+ --adaptive-set-d96-t48-m32: 32px;
229
+ --adaptive-set-d48-t32-m24: 24px;
230
+ --adaptive-set-d64-t80-m32: 32px;
231
+ --adaptive-set-d80-t64-m48: 48px;
232
+ --adaptive-set-d32-t80-m32: 32px;
233
233
  --menu-width: var(--device-width);
234
234
  }
235
235
  }
package/tokens/generated/typography.css CHANGED
@@ -48,7 +48,7 @@
48
48
  }
49
49
  .text-heading-h3 {
50
50
  font-family: var(--font-primary);
51
- font-weight: var(--font-weight-primary-semibold);
51
+ font-weight: var(--font-weight-secondary-semibold);
52
52
  text-transform: capitalize;
53
53
  font-size: var(--fonts-heading-h3-text-size);
54
54
  line-height: var(--fonts-heading-h3-line-height);
@@ -69,7 +69,7 @@
69
69
  }
70
70
  .text-heading-h6 {
71
71
  font-family: var(--font-secondary);
72
- font-weight: var(--font-weight-secondary-semibold);
72
+ font-weight: var(--font-weight-secondary-medium);
73
73
  text-transform: capitalize;
74
74
  font-size: var(--fonts-heading-h6-text-size);
75
75
  line-height: var(--fonts-heading-h6-line-height);