beacon-ui 3.7.2 → 3.7.4

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 (7) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +1 -1
  3. package/dist/components/Button.d.ts.map +1 -1
  4. package/dist/components/Button.js +13 -8
  5. package/package.json +1 -1
  6. package/tokens/generated/index.css +10 -11
  7. package/tokens/generated/typography.css +10 -11
package/CHANGELOG.md CHANGED
@@ -5,6 +5,18 @@ 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.4] - 2026-05-06
9
+
10
+ ### Fixed
11
+ - Button `lg` size font corrected to Body2/Medium (`--body-small-text-size`, 14px) — was incorrectly using `--body-medium-text-size` (20px)
12
+ - Button padding-Y corrected for all sizes to match Figma specs:
13
+ - `xs`: `--spacing-50` (2px) → `--spacing-100` (4px)
14
+ - `sm`: `--spacing-100` (4px) → `--spacing-200` (8px)
15
+ - `md`: `--spacing-200` (8px) → `--spacing-300` (12px)
16
+ - `lg`: `--spacing-300` (12px) → `--spacing-400` (16px)
17
+ - `xl`: `--spacing-400` (16px) → `--spacing-450` (20px)
18
+ - Button `xl` size border width corrected to `--border-width-50` (2px) — was using `--border-width-25` (1px)
19
+
8
20
  ## [3.7.0] - 2026-05-01
9
21
 
10
22
  ### 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.4**
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,2CAwSb"}
package/dist/components/Button.js CHANGED
@@ -15,36 +15,41 @@ const SIZE_CONFIG = {
15
15
  xs: {
16
16
  height: "28px",
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-small-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,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beacon-ui",
3
- "version": "3.7.2",
3
+ "version": "3.7.4",
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
@@ -947,41 +947,40 @@
947
947
  }
948
948
  .text-heading-h1 {
949
949
  font-family: var(--font-primary);
950
- font-weight: var(--font-weight-primary-semibold);
951
- text-transform: capitalize;
950
+ font-weight: var(--font-weight-primary-medium);
952
951
  font-size: var(--fonts-heading-h1-text-size);
953
952
  line-height: var(--fonts-heading-h1-line-height);
953
+ letter-spacing: -3%;
954
954
  }
955
955
  .text-heading-h2 {
956
956
  font-family: var(--font-primary);
957
- font-weight: var(--font-weight-primary-semibold);
958
- text-transform: capitalize;
957
+ font-weight: var(--font-weight-primary-medium);
959
958
  font-size: var(--fonts-heading-h2-text-size);
960
959
  line-height: var(--fonts-heading-h2-line-height);
960
+ letter-spacing: -2%;
961
961
  }
962
962
  .text-heading-h3 {
963
963
  font-family: var(--font-primary);
964
- font-weight: var(--font-weight-primary-semibold);
965
- text-transform: capitalize;
964
+ font-weight: var(--font-weight-primary-medium);
966
965
  font-size: var(--fonts-heading-h3-text-size);
967
966
  line-height: var(--fonts-heading-h3-line-height);
967
+ letter-spacing: -2%;
968
968
  }
969
969
  .text-heading-h4 {
970
970
  font-family: var(--font-secondary);
971
- font-weight: var(--font-weight-secondary-semibold);
971
+ font-weight: var(--font-weight-primary-medium);
972
972
  font-size: var(--fonts-heading-h4-text-size);
973
973
  line-height: var(--fonts-heading-h4-line-height);
974
974
  }
975
975
  .text-heading-h5 {
976
976
  font-family: var(--font-secondary);
977
- font-weight: var(--font-weight-secondary-semibold);
977
+ font-weight: var(--font-weight-primary-medium);
978
978
  font-size: var(--fonts-heading-h5-text-size);
979
979
  line-height: var(--fonts-heading-h5-line-height);
980
980
  }
981
981
  .text-heading-h6 {
982
982
  font-family: var(--font-secondary);
983
- font-weight: var(--font-weight-secondary-semibold);
984
- text-transform: capitalize;
983
+ font-weight: var(--font-weight-primary-medium);
985
984
  font-size: var(--fonts-heading-h6-text-size);
986
985
  line-height: var(--fonts-heading-h6-line-height);
987
986
  }
@@ -993,7 +992,7 @@
993
992
  }
994
993
  .text-body1-medium {
995
994
  font-family: var(--font-secondary);
996
- font-weight: var(--font-weight-secondary-regular);
995
+ font-weight: var(--font-weight-primary-medium);
997
996
  font-size: var(--fonts-body-extra-small-text-size);
998
997
  line-height: var(--fonts-body-extra-small-line-height);
999
998
  }
package/tokens/generated/typography.css CHANGED
@@ -28,41 +28,40 @@
28
28
  }
29
29
  .text-heading-h1 {
30
30
  font-family: var(--font-primary);
31
- font-weight: var(--font-weight-primary-semibold);
32
- text-transform: capitalize;
31
+ font-weight: var(--font-weight-primary-medium);
33
32
  font-size: var(--fonts-heading-h1-text-size);
34
33
  line-height: var(--fonts-heading-h1-line-height);
34
+ letter-spacing: -3%;
35
35
  }
36
36
  .text-heading-h2 {
37
37
  font-family: var(--font-primary);
38
- font-weight: var(--font-weight-primary-semibold);
39
- text-transform: capitalize;
38
+ font-weight: var(--font-weight-primary-medium);
40
39
  font-size: var(--fonts-heading-h2-text-size);
41
40
  line-height: var(--fonts-heading-h2-line-height);
41
+ letter-spacing: -2%;
42
42
  }
43
43
  .text-heading-h3 {
44
44
  font-family: var(--font-primary);
45
- font-weight: var(--font-weight-primary-semibold);
46
- text-transform: capitalize;
45
+ font-weight: var(--font-weight-primary-medium);
47
46
  font-size: var(--fonts-heading-h3-text-size);
48
47
  line-height: var(--fonts-heading-h3-line-height);
48
+ letter-spacing: -2%;
49
49
  }
50
50
  .text-heading-h4 {
51
51
  font-family: var(--font-secondary);
52
- font-weight: var(--font-weight-secondary-semibold);
52
+ font-weight: var(--font-weight-primary-medium);
53
53
  font-size: var(--fonts-heading-h4-text-size);
54
54
  line-height: var(--fonts-heading-h4-line-height);
55
55
  }
56
56
  .text-heading-h5 {
57
57
  font-family: var(--font-secondary);
58
- font-weight: var(--font-weight-secondary-semibold);
58
+ font-weight: var(--font-weight-primary-medium);
59
59
  font-size: var(--fonts-heading-h5-text-size);
60
60
  line-height: var(--fonts-heading-h5-line-height);
61
61
  }
62
62
  .text-heading-h6 {
63
63
  font-family: var(--font-secondary);
64
- font-weight: var(--font-weight-secondary-semibold);
65
- text-transform: capitalize;
64
+ font-weight: var(--font-weight-primary-medium);
66
65
  font-size: var(--fonts-heading-h6-text-size);
67
66
  line-height: var(--fonts-heading-h6-line-height);
68
67
  }
@@ -74,7 +73,7 @@
74
73
  }
75
74
  .text-body1-medium {
76
75
  font-family: var(--font-secondary);
77
- font-weight: var(--font-weight-secondary-regular);
76
+ font-weight: var(--font-weight-primary-medium);
78
77
  font-size: var(--fonts-body-extra-small-text-size);
79
78
  line-height: var(--fonts-body-extra-small-line-height);
80
79
  }