beacon-ui 3.2.0 → 3.3.1

package/CHANGELOG.md

@@ -5,7 +5,33 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [3.2.0] - 2025-01-02
+## [3.3.1] - 2026-01-01
+
+### Fixed
+- Fixed Card component default background color from `bg-page-tertiary` to `bg-page-secondary`
+- Fixed card preview elements in documentation to use `bg-page-secondary` instead of `bg-page-tertiary`
+- Corrected API documentation to reflect correct default background color (`page-secondary` instead of `page-tertiary`)
+- Fixed incorrect default values in API reference table (`showBgPattern` and `showOverlay` now correctly show `false`)
+
+## [3.3.0] - 2025-01-02
+
+### Added
+- Typography implementation guide section in documentation with code examples and best practices
+- Comprehensive usage examples for typography classes with copy-to-clipboard functionality
+- Implementation patterns for combining typography classes with inline styles for color and spacing
+
+### Changed
+- Refactored all inline typography styles to use typography utility classes throughout documentation
+- Improved typography class usage consistency across all component examples
+- Updated build script to correctly determine font weight prefix based on fontWeight reference (not just fontFamily)
+- Typography classes now properly handle H3 (secondary-semibold) and H6 (secondary-medium) font weights
+
+### Fixed
+- Fixed H3 typography class to use `font-weight-secondary-semibold` instead of `font-weight-primary-semibold`
+- Fixed H6 typography class to use `font-weight-secondary-medium` instead of `font-weight-secondary-semibold`
+- Corrected font weight determination logic in token build script to check fontWeight reference directly
+
+## [3.2.0] - 2025-01-01
 
 ### Changed
 - Simplified Card component usage examples for better developer experience

package/dist/components/Card.js

@@ -45,7 +45,7 @@ export function Card({ padding = 400, height, status = "default", shadow, corner
         padding: getSpacingToken(padding),
         borderRadius: CORNER_RADIUS_MAP[cornerRadius],
         position: "relative",
-        backgroundColor: isDefault ? "var(--bg-page-tertiary)" : "var(--bg-page-primary)",
+        backgroundColor: isDefault ? "var(--bg-page-secondary)" : "var(--bg-page-primary)",
         ...(heightValue && { height: heightValue }),
         ...(shadow && { boxShadow: getShadowToken(shadow) }),
         ...style,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beacon-ui",
-  "version": "3.2.0",
+  "version": "3.3.1",
   "description": "Beacon Design System - Components and tokens",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/tokens/generated/index.css

@@ -434,12 +434,6 @@
 /* Responsive tokens */
 :root {
   --device-width: 1440px;
-  --adaptive-set-d96-t80-m32: 96px;
-  --adaptive-set-d96-t48-m32: 96px;
-  --adaptive-set-d48-t32-m24: 48px;
-  --adaptive-set-d64-t80-m32: 64px;
-  --adaptive-set-d80-t64-m48: 80px;
-  --adaptive-set-d32-t80-m32: 32px;
   --heading-h1-text-size: 64px;
   --fonts-heading-h1-text-size: 64px;
   --heading-h1-paragraph-spacing: 72px;
@@ -506,18 +500,18 @@
   --fonts-body-medium-paragraph-spacing: 28px;
   --body-medium-line-height: 28px;
   --fonts-body-medium-line-height: 28px;
+  --adaptive-set-d96-t80-m32: 96px;
+  --adaptive-set-d96-t48-m32: 96px;
+  --adaptive-set-d48-t32-m24: 48px;
+  --adaptive-set-d64-t80-m32: 64px;
+  --adaptive-set-d80-t64-m48: 80px;
+  --adaptive-set-d32-t80-m32: 32px;
   --menu-width: 224px;
 }
 
 @media (max-width: 1024px) {
   :root {
     --device-width: 834px;
-    --adaptive-set-d96-t80-m32: 80px;
-    --adaptive-set-d96-t48-m32: 48px;
-    --adaptive-set-d48-t32-m24: 32px;
-    --adaptive-set-d64-t80-m32: 80px;
-    --adaptive-set-d80-t64-m48: 64px;
-    --adaptive-set-d32-t80-m32: 80px;
     --heading-h1-text-size: 60px;
     --fonts-heading-h1-text-size: 60px;
     --heading-h1-paragraph-spacing: 64px;
@@ -584,6 +578,12 @@
     --fonts-body-medium-paragraph-spacing: 28px;
     --body-medium-line-height: 28px;
     --fonts-body-medium-line-height: 28px;
+    --adaptive-set-d96-t80-m32: 80px;
+    --adaptive-set-d96-t48-m32: 48px;
+    --adaptive-set-d48-t32-m24: 32px;
+    --adaptive-set-d64-t80-m32: 80px;
+    --adaptive-set-d80-t64-m48: 64px;
+    --adaptive-set-d32-t80-m32: 80px;
     --menu-width: var(--device-width);
   }
 }
@@ -591,12 +591,6 @@
 @media (max-width: 768px) {
   :root {
     --device-width: 430px;
-    --adaptive-set-d96-t80-m32: 32px;
-    --adaptive-set-d96-t48-m32: 32px;
-    --adaptive-set-d48-t32-m24: 24px;
-    --adaptive-set-d64-t80-m32: 32px;
-    --adaptive-set-d80-t64-m48: 48px;
-    --adaptive-set-d32-t80-m32: 32px;
     --heading-h1-text-size: 48px;
     --fonts-heading-h1-text-size: 48px;
     --heading-h1-paragraph-spacing: 56px;
@@ -663,6 +657,12 @@
     --fonts-body-medium-paragraph-spacing: 28px;
     --body-medium-line-height: 28px;
     --fonts-body-medium-line-height: 28px;
+    --adaptive-set-d96-t80-m32: 32px;
+    --adaptive-set-d96-t48-m32: 32px;
+    --adaptive-set-d48-t32-m24: 24px;
+    --adaptive-set-d64-t80-m32: 32px;
+    --adaptive-set-d80-t64-m48: 48px;
+    --adaptive-set-d32-t80-m32: 32px;
     --menu-width: var(--device-width);
   }
 }
@@ -728,7 +728,7 @@
 }
 .text-heading-h3 {
   font-family: var(--font-primary);
-  font-weight: var(--font-weight-primary-semibold);
+  font-weight: var(--font-weight-secondary-semibold);
   text-transform: capitalize;
   font-size: var(--fonts-heading-h3-text-size);
   line-height: var(--fonts-heading-h3-line-height);
@@ -749,7 +749,7 @@
 }
 .text-heading-h6 {
   font-family: var(--font-secondary);
-  font-weight: var(--font-weight-secondary-semibold);
+  font-weight: var(--font-weight-secondary-medium);
   text-transform: capitalize;
   font-size: var(--fonts-heading-h6-text-size);
   line-height: var(--fonts-heading-h6-line-height);

package/tokens/generated/responsive.css

@@ -1,12 +1,6 @@
 /* Responsive tokens */
 :root {
   --device-width: 1440px;
-  --adaptive-set-d96-t80-m32: 96px;
-  --adaptive-set-d96-t48-m32: 96px;
-  --adaptive-set-d48-t32-m24: 48px;
-  --adaptive-set-d64-t80-m32: 64px;
-  --adaptive-set-d80-t64-m48: 80px;
-  --adaptive-set-d32-t80-m32: 32px;
   --heading-h1-text-size: 64px;
   --fonts-heading-h1-text-size: 64px;
   --heading-h1-paragraph-spacing: 72px;
@@ -73,18 +67,18 @@
   --fonts-body-medium-paragraph-spacing: 28px;
   --body-medium-line-height: 28px;
   --fonts-body-medium-line-height: 28px;
+  --adaptive-set-d96-t80-m32: 96px;
+  --adaptive-set-d96-t48-m32: 96px;
+  --adaptive-set-d48-t32-m24: 48px;
+  --adaptive-set-d64-t80-m32: 64px;
+  --adaptive-set-d80-t64-m48: 80px;
+  --adaptive-set-d32-t80-m32: 32px;
   --menu-width: 224px;
 }
 
 @media (max-width: 1024px) {
   :root {
     --device-width: 834px;
-    --adaptive-set-d96-t80-m32: 80px;
-    --adaptive-set-d96-t48-m32: 48px;
-    --adaptive-set-d48-t32-m24: 32px;
-    --adaptive-set-d64-t80-m32: 80px;
-    --adaptive-set-d80-t64-m48: 64px;
-    --adaptive-set-d32-t80-m32: 80px;
     --heading-h1-text-size: 60px;
     --fonts-heading-h1-text-size: 60px;
     --heading-h1-paragraph-spacing: 64px;
@@ -151,6 +145,12 @@
     --fonts-body-medium-paragraph-spacing: 28px;
     --body-medium-line-height: 28px;
     --fonts-body-medium-line-height: 28px;
+    --adaptive-set-d96-t80-m32: 80px;
+    --adaptive-set-d96-t48-m32: 48px;
+    --adaptive-set-d48-t32-m24: 32px;
+    --adaptive-set-d64-t80-m32: 80px;
+    --adaptive-set-d80-t64-m48: 64px;
+    --adaptive-set-d32-t80-m32: 80px;
     --menu-width: var(--device-width);
   }
 }
@@ -158,12 +158,6 @@
 @media (max-width: 768px) {
   :root {
     --device-width: 430px;
-    --adaptive-set-d96-t80-m32: 32px;
-    --adaptive-set-d96-t48-m32: 32px;
-    --adaptive-set-d48-t32-m24: 24px;
-    --adaptive-set-d64-t80-m32: 32px;
-    --adaptive-set-d80-t64-m48: 48px;
-    --adaptive-set-d32-t80-m32: 32px;
     --heading-h1-text-size: 48px;
     --fonts-heading-h1-text-size: 48px;
     --heading-h1-paragraph-spacing: 56px;
@@ -230,6 +224,12 @@
     --fonts-body-medium-paragraph-spacing: 28px;
     --body-medium-line-height: 28px;
     --fonts-body-medium-line-height: 28px;
+    --adaptive-set-d96-t80-m32: 32px;
+    --adaptive-set-d96-t48-m32: 32px;
+    --adaptive-set-d48-t32-m24: 24px;
+    --adaptive-set-d64-t80-m32: 32px;
+    --adaptive-set-d80-t64-m48: 48px;
+    --adaptive-set-d32-t80-m32: 32px;
     --menu-width: var(--device-width);
   }
 }

package/tokens/generated/typography.css

@@ -48,7 +48,7 @@
 }
 .text-heading-h3 {
   font-family: var(--font-primary);
-  font-weight: var(--font-weight-primary-semibold);
+  font-weight: var(--font-weight-secondary-semibold);
   text-transform: capitalize;
   font-size: var(--fonts-heading-h3-text-size);
   line-height: var(--fonts-heading-h3-line-height);
@@ -69,7 +69,7 @@
 }
 .text-heading-h6 {
   font-family: var(--font-secondary);
-  font-weight: var(--font-weight-secondary-semibold);
+  font-weight: var(--font-weight-secondary-medium);
   text-transform: capitalize;
   font-size: var(--fonts-heading-h6-text-size);
   line-height: var(--fonts-heading-h6-line-height);