beacon-ui 3.7.3 → 3.7.5

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 +21 -0
  2. package/README.md +1 -1
  3. package/dist/components/Button.d.ts.map +1 -1
  4. package/dist/components/Button.js +18 -11
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -5,6 +5,27 @@ 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.7.5] - 2026-05-14
9
+
10
+ ### Fixed
11
+ - 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)
12
+ - Button filled `pressed` state border now correctly uses `--border-primary-pressed` (lighter blue) instead of `--bg-primary-pressed` (dark blue), matching Figma spec
13
+ - Button focus ring offset corrected from `2px` to `5px` to match Figma's 5px gap between button edge and focus indicator
14
+ - Button `lg` size font size updated to `--body-regular-text-size` (16px) — Figma specifies Body/Regular for large buttons across all non-default states
15
+ - Button `xs` size minimum height corrected from `28px` to `26px` to match Figma dimensions
16
+
17
+ ## [3.7.4] - 2026-05-06
18
+
19
+ ### Fixed
20
+ - Button `lg` size font corrected to Body2/Medium (`--body-small-text-size`, 14px) — was incorrectly using `--body-medium-text-size` (20px)
21
+ - Button padding-Y corrected for all sizes to match Figma specs:
22
+ - `xs`: `--spacing-50` (2px) → `--spacing-100` (4px)
23
+ - `sm`: `--spacing-100` (4px) → `--spacing-200` (8px)
24
+ - `md`: `--spacing-200` (8px) → `--spacing-300` (12px)
25
+ - `lg`: `--spacing-300` (12px) → `--spacing-400` (16px)
26
+ - `xl`: `--spacing-400` (16px) → `--spacing-450` (20px)
27
+ - Button `xl` size border width corrected to `--border-width-50` (2px) — was using `--border-width-25` (1px)
28
+
8
29
  ## [3.7.0] - 2026-05-01
9
30
 
10
31
  ### Added
package/README.md CHANGED
@@ -582,7 +582,7 @@ https://beacon.uxraza.com/
582
582
 
583
583
  ## Version
584
584
 
585
- Current version: **3.6.0**
585
+ Current version: **3.7.5**
586
586
 
587
587
  ## License
588
588
 
package/dist/components/Button.d.ts.map CHANGED
@@ -1 +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;AAkED,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"}
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,2CA0Sb"}
package/dist/components/Button.js CHANGED
@@ -13,38 +13,43 @@ const CORNER_RADIUS_MAP = {
13
13
  };
14
14
  const SIZE_CONFIG = {
15
15
  xs: {
16
- height: "28px",
16
+ height: "26px",
17
17
  paddingX: "var(--spacing-200)",
18
- paddingY: "var(--spacing-50)",
18
+ paddingY: "var(--spacing-100)",
19
19
  fontSize: "var(--body-extra-small-text-size)",
20
+ borderWidth: "var(--border-width-25)",
20
21
  iconSize: "xs",
21
22
  },
22
23
  sm: {
23
24
  height: "36px",
24
25
  paddingX: "var(--spacing-300)",
25
- paddingY: "var(--spacing-100)",
26
+ paddingY: "var(--spacing-200)",
26
27
  fontSize: "var(--body-small-text-size)",
28
+ borderWidth: "var(--border-width-25)",
27
29
  iconSize: "xs",
28
30
  },
29
31
  md: {
30
32
  height: "44px",
31
33
  paddingX: "var(--spacing-400)",
32
- paddingY: "var(--spacing-200)",
33
- fontSize: "var(--body-regular-text-size)",
34
+ paddingY: "var(--spacing-300)",
35
+ fontSize: "var(--body-small-text-size)",
36
+ borderWidth: "var(--border-width-25)",
34
37
  iconSize: "sm",
35
38
  },
36
39
  lg: {
37
40
  height: "56px",
38
41
  paddingX: "var(--spacing-500)",
39
- paddingY: "var(--spacing-300)",
40
- fontSize: "var(--body-medium-text-size)",
42
+ paddingY: "var(--spacing-400)",
43
+ fontSize: "var(--body-regular-text-size)",
44
+ borderWidth: "var(--border-width-25)",
41
45
  iconSize: "rg",
42
46
  },
43
47
  xl: {
44
48
  height: "68px",
45
49
  paddingX: "var(--spacing-600)",
46
- paddingY: "var(--spacing-400)",
50
+ paddingY: "var(--spacing-450)",
47
51
  fontSize: "var(--body-medium-text-size)",
52
+ borderWidth: "var(--border-width-50)",
48
53
  iconSize: "rm",
49
54
  },
50
55
  };
@@ -111,7 +116,7 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
111
116
  fontSize: sizeConfig.fontSize,
112
117
  lineHeight: "1",
113
118
  fontWeight: "var(--font-weight-secondary-medium)",
114
- borderWidth: "var(--border-width-25)",
119
+ borderWidth: sizeConfig.borderWidth,
115
120
  borderStyle: "solid",
116
121
  borderColor: "transparent",
117
122
  borderRadius,
@@ -131,6 +136,7 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
131
136
  const bgTonalToken = `--bg-${colorPrefix}-tonal`;
132
137
  const bgHoverToken = `--bg-${colorPrefix}-on-hover`;
133
138
  const bgPressedToken = color === "primary" ? `--bg-${colorPrefix}-pressed` : `--bg-${colorPrefix}-on-hover`;
139
+ const borderPressedToken = color === "primary" ? `--border-${colorPrefix}-pressed` : `--bg-${colorPrefix}-on-hover`;
134
140
  const bgFocusedToken = color === "primary" ? `--bg-${colorPrefix}-on-focused` : `--bg-${colorPrefix}-on-hover`;
135
141
  const bgTonalHoverToken = color === "primary" ? `--bg-${colorPrefix}-tonal-on-hover` : `--bg-${colorPrefix}-tonal`;
136
142
  const fgToken = `--fg-${colorPrefix}`;
@@ -148,6 +154,7 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
148
154
  backgroundColor: `var(${bgToken})`,
149
155
  color: "var(--fg-on-action)",
150
156
  borderColor: `var(${bgToken})`,
157
+ 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)",
151
158
  };
152
159
  break;
153
160
  case "tonal":
@@ -218,7 +225,7 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
218
225
  else if (!isLoading && currentState === "pressed") {
219
226
  if (variant === "filled") {
220
227
  stateStyles.backgroundColor = `var(${bgPressedToken})`;
221
- stateStyles.borderColor = `var(${bgPressedToken})`;
228
+ stateStyles.borderColor = `var(${borderPressedToken})`;
222
229
  }
223
230
  else if (variant === "tonal") {
224
231
  stateStyles.backgroundColor = `var(${bgTonalHoverToken})`;
@@ -233,7 +240,7 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
233
240
  stateStyles.borderColor = `var(${borderToken})`;
234
241
  }
235
242
  stateStyles.outline = `2px solid var(${borderToken})`;
236
- stateStyles.outlineOffset = "2px";
243
+ stateStyles.outlineOffset = "5px";
237
244
  }
238
245
  return { ...baseStyles, ...variantStyles, ...stateStyles, ...style };
239
246
  }, [variant, sizeConfig, borderRadius, fillContainer, justifyContent, currentState, isDisabled, isLoading, color, underline, style]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beacon-ui",
3
- "version": "3.7.3",
3
+ "version": "3.7.5",
4
4
  "description": "Beacon Design System - Components and tokens",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",