beacon-ui 3.7.4 → 3.7.5

package/CHANGELOG.md

@@ -5,6 +5,15 @@ 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.7.5] - 2026-05-14
+
+### Fixed
+- Button filled variant now renders isometric depth effect matching Figma: outer drop shadow (`0px 1px 8px rgba(0,0,0,0.15)`) and two inner shadows (`inset 0px 3px 4px rgba(255,255,255,0.25)` top highlight, `inset 0px -3px 4px rgba(0,0,0,0.25)` bottom shadow)
+- Button filled `pressed` state border now correctly uses `--border-primary-pressed` (lighter blue) instead of `--bg-primary-pressed` (dark blue), matching Figma spec
+- Button focus ring offset corrected from `2px` to `5px` to match Figma's 5px gap between button edge and focus indicator
+- Button `lg` size font size updated to `--body-regular-text-size` (16px) — Figma specifies Body/Regular for large buttons across all non-default states
+- Button `xs` size minimum height corrected from `28px` to `26px` to match Figma dimensions
+
 ## [3.7.4] - 2026-05-06
 
 ### Fixed

package/README.md

@@ -582,7 +582,7 @@ https://beacon.uxraza.com/
 
 ## Version
 
-Current version: **3.7.4**
+Current version: **3.7.5**
 
 ## License
 

package/dist/components/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,EAAgC,MAAM,OAAO,CAAC;AAI5G,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,eAAe,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AACxE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAChF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAwED,wBAAgB,MAAM,CAAC,EACrB,OAAkB,EAClB,IAAW,EACX,YAAgB,EAChB,SAAS,EACT,OAAO,EACP,aAAqB,EACrB,cAAyB,EACzB,OAAe,EACf,QAAgB,EAChB,KAAK,EAAE,SAAS,EAChB,KAAiB,EACjB,IAAe,EACf,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CAwSb"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,EAAgC,MAAM,OAAO,CAAC;AAI5G,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,eAAe,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AACxE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAChF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAwED,wBAAgB,MAAM,CAAC,EACrB,OAAkB,EAClB,IAAW,EACX,YAAgB,EAChB,SAAS,EACT,OAAO,EACP,aAAqB,EACrB,cAAyB,EACzB,OAAe,EACf,QAAgB,EAChB,KAAK,EAAE,SAAS,EAChB,KAAiB,EACjB,IAAe,EACf,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CA0Sb"}

package/dist/components/Button.js

@@ -13,7 +13,7 @@ const CORNER_RADIUS_MAP = {
 };
 const SIZE_CONFIG = {
     xs: {
-        height: "28px",
+        height: "26px",
         paddingX: "var(--spacing-200)",
         paddingY: "var(--spacing-100)",
         fontSize: "var(--body-extra-small-text-size)",
@@ -40,7 +40,7 @@ const SIZE_CONFIG = {
         height: "56px",
         paddingX: "var(--spacing-500)",
         paddingY: "var(--spacing-400)",
-        fontSize: "var(--body-small-text-size)",
+        fontSize: "var(--body-regular-text-size)",
         borderWidth: "var(--border-width-25)",
         iconSize: "rg",
     },
@@ -136,6 +136,7 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
         const bgTonalToken = `--bg-${colorPrefix}-tonal`;
         const bgHoverToken = `--bg-${colorPrefix}-on-hover`;
         const bgPressedToken = color === "primary" ? `--bg-${colorPrefix}-pressed` : `--bg-${colorPrefix}-on-hover`;
+        const borderPressedToken = color === "primary" ? `--border-${colorPrefix}-pressed` : `--bg-${colorPrefix}-on-hover`;
         const bgFocusedToken = color === "primary" ? `--bg-${colorPrefix}-on-focused` : `--bg-${colorPrefix}-on-hover`;
         const bgTonalHoverToken = color === "primary" ? `--bg-${colorPrefix}-tonal-on-hover` : `--bg-${colorPrefix}-tonal`;
         const fgToken = `--fg-${colorPrefix}`;
@@ -153,6 +154,7 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
                     backgroundColor: `var(${bgToken})`,
                     color: "var(--fg-on-action)",
                     borderColor: `var(${bgToken})`,
+                    boxShadow: "0px 1px 8px rgba(0, 0, 0, 0.15), inset 0px 3px 4px rgba(255, 255, 255, 0.25), inset 0px -3px 4px rgba(0, 0, 0, 0.25)",
                 };
                 break;
             case "tonal":
@@ -223,7 +225,7 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
         else if (!isLoading && currentState === "pressed") {
             if (variant === "filled") {
                 stateStyles.backgroundColor = `var(${bgPressedToken})`;
-                stateStyles.borderColor = `var(${bgPressedToken})`;
+                stateStyles.borderColor = `var(${borderPressedToken})`;
             }
             else if (variant === "tonal") {
                 stateStyles.backgroundColor = `var(${bgTonalHoverToken})`;
@@ -238,7 +240,7 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
                 stateStyles.borderColor = `var(${borderToken})`;
             }
             stateStyles.outline = `2px solid var(${borderToken})`;
-            stateStyles.outlineOffset = "2px";
+            stateStyles.outlineOffset = "5px";
         }
         return { ...baseStyles, ...variantStyles, ...stateStyles, ...style };
     }, [variant, sizeConfig, borderRadius, fillContainer, justifyContent, currentState, isDisabled, isLoading, color, underline, style]);

package/package.json

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