beacon-ui 3.4.0 → 3.4.1

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.
package/CHANGELOG.md CHANGED
@@ -5,7 +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.4.0] - 2026-01-15
8
+ ## [3.4.1] - 2026-01-03
9
+
10
+ ### Changed
11
+ - Refactored inline CSS styles in changelog, how-to-use, and releases pages to use design system token variables and CSS utility classes
12
+ - Added CSS utility classes for common content patterns: `.ds-content__grid`, `.ds-content__card`, `.ds-content__flex`, `.ds-content__flex-wrap`, `.ds-content__version-badge`, `.ds-content__entry`, `.ds-content__code-container`, `.ds-content__code-wrapper`
13
+
14
+ ### Fixed
15
+ - Fixed copy button vertical alignment in code blocks for install package sections
16
+ - Fixed button outline appearing momentarily on click - outline now only appears for keyboard navigation, not mouse clicks
17
+ - Improved consistency of styling across documentation pages by replacing inline styles with design system classes
18
+
19
+ ## [3.4.0] - 2026-01-02
9
20
 
10
21
  ### Added
11
22
  - Button Icon component for icon-only button interactions with support for all button variants, sizes, and states
@@ -1 +1 @@
1
- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAW5E,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAoBD,wBAAgB,IAAI,CAAC,EACnB,OAAa,EACb,MAAM,EACN,MAAkB,EAClB,MAAM,EACN,YAAgB,EAChB,aAAqB,EACrB,WAAqB,EACrB,WAAmB,EACnB,UAAiB,EACjB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CA0GX"}
1
+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAW5E,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAoBD,wBAAgB,IAAI,CAAC,EACnB,OAAa,EACb,MAAM,EACN,MAAkB,EAClB,MAAM,EACN,YAAgB,EAChB,aAAqB,EACrB,WAAqB,EACrB,WAAmB,EACnB,UAAiB,EACjB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CAwGX"}
@@ -45,7 +45,7 @@ export function Card({ padding = 400, height, status = "default", shadow, corner
45
45
  padding: getSpacingToken(padding),
46
46
  borderRadius: CORNER_RADIUS_MAP[cornerRadius],
47
47
  position: "relative",
48
- backgroundColor: isDefault ? "var(--bg-page-secondary)" : "var(--bg-page-primary)",
48
+ backgroundColor: "var(--bg-page-primary)",
49
49
  ...(heightValue && { height: heightValue }),
50
50
  ...(shadow && { boxShadow: getShadowToken(shadow) }),
51
51
  ...style,
@@ -58,9 +58,7 @@ export function Card({ padding = 400, height, status = "default", shadow, corner
58
58
  cardStyles.border = "var(--border-width-25) solid var(--border-strong-200)";
59
59
  }
60
60
  }
61
- const overlayGradient = isDefault
62
- ? "var(--bg-page-secondary)"
63
- : "var(--bg-page-primary)";
61
+ const overlayGradient = "var(--bg-page-primary)";
64
62
  // Build background layers using CSS multiple backgrounds
65
63
  // CSS backgrounds stack: first listed = top layer, last listed = bottom layer
66
64
  // We want: overlay (middle) first, pattern (bottom) last
@@ -41,11 +41,11 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
41
41
  const baseStyles = {
42
42
  display: "flex",
43
43
  flexDirection: "column",
44
- backgroundColor: "var(--bg-page-primary)",
45
- borderTop: "var(--border-width-25) solid var(--border-neutral-primary)",
46
- borderRight: "var(--border-width-25) solid var(--border-neutral-primary)",
47
- borderBottom: "var(--border-width-25) solid var(--border-neutral-primary)",
48
- borderLeft: "var(--border-width-25) solid var(--border-neutral-primary)",
44
+ backgroundColor: "var(--bg-page-base)",
45
+ borderTop: "var(--border-width-25) solid var(--border-strong-100)",
46
+ borderRight: "var(--border-width-25) solid var(--border-strong-100)",
47
+ borderBottom: "var(--border-width-25) solid var(--border-strong-100)",
48
+ borderLeft: "var(--border-width-25) solid var(--border-strong-100)",
49
49
  position: "relative",
50
50
  };
51
51
  if (variant === "desktop") {
@@ -56,7 +56,7 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
56
56
  borderLeft: "none",
57
57
  borderTop: "none",
58
58
  borderBottom: "none",
59
- borderRight: "var(--border-width-25) solid var(--border-neutral-primary)",
59
+ borderRight: "var(--border-width-25) solid var(--border-strong-100)",
60
60
  padding: "var(--spacing-500) var(--spacing-400)",
61
61
  gap: "var(--spacing-none)",
62
62
  };
@@ -67,7 +67,7 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
67
67
  width: "430px",
68
68
  borderTop: "none",
69
69
  borderRight: "none",
70
- borderBottom: "var(--border-width-25) solid var(--border-neutral-primary)",
70
+ borderBottom: "var(--border-width-25) solid var(--border-strong-100)",
71
71
  borderLeft: "none",
72
72
  padding: variant === "tablet-open" ? "var(--spacing-200) var(--spacing-400)" : "8px 0",
73
73
  gap: "var(--spacing-none)",
@@ -79,7 +79,7 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
79
79
  width: "400px",
80
80
  borderTop: "none",
81
81
  borderRight: "none",
82
- borderBottom: "var(--border-width-25) solid var(--border-neutral-primary)",
82
+ borderBottom: "var(--border-width-25) solid var(--border-strong-100)",
83
83
  borderLeft: "none",
84
84
  padding: variant === "mobile-open" ? "var(--spacing-200) var(--spacing-400)" : "var(--spacing-200) var(--spacing-none)",
85
85
  gap: "var(--spacing-none)",
@@ -91,7 +91,7 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
91
91
  width: "100%",
92
92
  borderTop: "none",
93
93
  borderRight: "none",
94
- borderBottom: "var(--border-width-25) solid var(--border-neutral-primary)",
94
+ borderBottom: "var(--border-width-25) solid var(--border-strong-100)",
95
95
  borderLeft: "none",
96
96
  padding: "var(--spacing-200) var(--spacing-400)",
97
97
  alignItems: "flex-end",
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../src/components/MenuItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1E,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EACvB,SAAuB,EACvB,SAAgB,EAChB,UAAiB,EACjB,OAAc,EACd,QAAe,EACf,KAAiB,EACjB,OAAO,EACP,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,aAAa,2CAiIf"}
1
+ {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../src/components/MenuItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1E,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EACvB,SAAuB,EACvB,SAAgB,EAChB,UAAiB,EACjB,OAAc,EACd,QAAe,EACf,KAAiB,EACjB,OAAO,EACP,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,aAAa,2CA0If"}
@@ -10,10 +10,10 @@ export function MenuItem({ menuTitle = "Menu Item", iconStart = true, iconStart1
10
10
  const backgroundColor = isActive
11
11
  ? "var(--bg-primary-tonal)"
12
12
  : isHovered
13
- ? "var(--bg-page-secondary)"
13
+ ? "var(--bg-page-primary)"
14
14
  : isDisabled
15
- ? "var(--bg-page-primary)"
16
- : "var(--bg-page-primary)";
15
+ ? "var(--bg-page-base)"
16
+ : "var(--bg-page-base)";
17
17
  // Text colors based on state
18
18
  const textColor = isActive
19
19
  ? "var(--fg-primary-on-tonal)"
@@ -48,9 +48,18 @@ export function MenuItem({ menuTitle = "Menu Item", iconStart = true, iconStart1
48
48
  borderRadius: "var(--corner-radius-200)",
49
49
  width: "100%",
50
50
  backgroundColor,
51
+ background: backgroundColor,
51
52
  border: borderStyle,
52
53
  cursor: isDisabled ? "not-allowed" : onClick ? "pointer" : "default",
53
54
  transition: "background-color 0.2s ease, border-color 0.2s ease",
55
+ appearance: "none",
56
+ WebkitAppearance: "none",
57
+ MozAppearance: "none",
58
+ outline: "none",
59
+ fontFamily: "inherit",
60
+ fontSize: "inherit",
61
+ lineHeight: "inherit",
62
+ textAlign: "left",
54
63
  ...style,
55
64
  };
56
65
  return (_jsxs("button", { type: "button", className: className, style: containerStyles, onClick: isDisabled ? undefined : onClick, disabled: isDisabled, ...rest, children: [iconStart && (_jsx("div", { style: {
@@ -4,9 +4,9 @@
4
4
  */
5
5
  export type ColorPrimitive = "Color.Purple.100" | "Color.Purple.200" | "Color.Purple.300" | "Color.Purple.400" | "Color.Purple.500" | "Color.Purple.600" | "Color.Purple.700" | "Color.Purple.800" | "Color.Purple.900" | "Color.Blue.100" | "Color.Blue.200" | "Color.Blue.300" | "Color.Blue.400" | "Color.Blue.500" | "Color.Blue.600" | "Color.Blue.700" | "Color.Blue.800" | "Color.Blue.900" | "Color.Chromatic.100" | "Color.Chromatic.200" | "Color.Chromatic.300" | "Color.Chromatic.400" | "Color.Chromatic.500" | "Color.Chromatic.600" | "Color.Chromatic.700" | "Color.Chromatic.800" | "Color.Chromatic.900" | "Color.Gray.50" | "Color.Gray.100" | "Color.Gray.200" | "Color.Gray.300" | "Color.Gray.400" | "Color.Gray.500" | "Color.Gray.600" | "Color.Gray.700" | "Color.Gray.800" | "Color.Gray.900" | "Color.Green.100" | "Color.Green.200" | "Color.Green.300" | "Color.Green.400" | "Color.Green.500" | "Color.Green.600" | "Color.Green.700" | "Color.Green.800" | "Color.Red.100" | "Color.Red.200" | "Color.Red.300" | "Color.Red.400" | "Color.Red.500" | "Color.Red.600" | "Color.Red.700" | "Color.Red.800" | "Color.Orange.100" | "Color.Orange.200" | "Color.Orange.300" | "Color.Orange.400" | "Color.Orange.500" | "Color.Orange.600" | "Color.Orange.700" | "Color.Orange.800" | "Color.Black.0" | "Color.Black.100" | "Color.Black.200" | "Color.Black.300" | "Color.Black.400" | "Color.Black.500" | "Color.Black.600" | "Color.Black.700" | "Color.Black.800" | "Color.Black.1000" | "Color.White.0" | "Color.White.100" | "Color.White.200" | "Color.White.300" | "Color.White.400" | "Color.White.500" | "Color.White.600" | "Color.White.700" | "Color.White.800" | "Color.White.1000";
6
6
  export type ScaleToken = "Scale.0" | "Scale.25" | "Scale.50" | "Scale.100" | "Scale.150" | "Scale.200" | "Scale.300" | "Scale.400" | "Scale.450" | "Scale.500" | "Scale.550" | "Scale.600" | "Scale.650" | "Scale.700" | "Scale.800" | "Scale.900" | "Scale.1000" | "Scale.2000";
7
- export type SemanticColor = "Color.Primary.100" | "Color.Primary.200" | "Color.Primary.300" | "Color.Primary.400" | "Color.Primary.500" | "Color.Primary.600" | "Color.Primary.700" | "Color.Primary.800" | "Color.Primary.900" | "Color.Neutral.50" | "Color.Neutral.100" | "Color.Neutral.200" | "Color.Neutral.300" | "Color.Neutral.400" | "Color.Neutral.500" | "Color.Neutral.600" | "Color.Neutral.700" | "Color.Neutral.800" | "Color.Neutral.White" | "Color.Neutral.Black" | "Color.Success.100" | "Color.Success.200" | "Color.Success.300" | "Color.Success.400" | "Color.Success.500" | "Color.Success.600" | "Color.Success.700" | "Color.Success.800" | "Color.Warning.100" | "Color.Warning.200" | "Color.Warning.300" | "Color.Warning.400" | "Color.Warning.500" | "Color.Warning.600" | "Color.Warning.700" | "Color.Warning.800" | "Color.Critical.100" | "Color.Critical.200" | "Color.Critical.300" | "Color.Critical.400" | "Color.Critical.500" | "Color.Critical.600" | "Color.Critical.700" | "Color.Critical.800" | "Color.Alpha-Neutral.White-0" | "Color.Alpha-Neutral.White-100" | "Color.Alpha-Neutral.White-200" | "Color.Alpha-Neutral.White-300" | "Color.Alpha-Neutral.White-400" | "Color.Alpha-Neutral.White-500" | "Color.Alpha-Neutral.White-600" | "Color.Alpha-Neutral.White-700" | "Color.Alpha-Neutral.White-800" | "Color.Alpha-Neutral.White-1000" | "Color.Alpha-Neutral.Black-0" | "Color.Alpha-Neutral.Black-100" | "Color.Alpha-Neutral.Black-200" | "Color.Alpha-Neutral.Black-300" | "Color.Alpha-Neutral.Black-400" | "Color.Alpha-Neutral.Black-500" | "Color.Alpha-Neutral.Black-600" | "Color.Alpha-Neutral.Black-700" | "Color.Alpha-Neutral.Black-800" | "Color.Alpha-Neutral.Black-1000";
7
+ export type SemanticColor = "Color.Primary.100" | "Color.Primary.200" | "Color.Primary.300" | "Color.Primary.400" | "Color.Primary.500" | "Color.Primary.600" | "Color.Primary.700" | "Color.Primary.800" | "Color.Primary.900" | "Color.Neutral.50" | "Color.Neutral.100" | "Color.Neutral.200" | "Color.Neutral.300" | "Color.Neutral.400" | "Color.Neutral.500" | "Color.Neutral.600" | "Color.Neutral.700" | "Color.Neutral.800" | "Color.Neutral.900" | "Color.Neutral.White" | "Color.Neutral.Black" | "Color.Success.100" | "Color.Success.200" | "Color.Success.300" | "Color.Success.400" | "Color.Success.500" | "Color.Success.600" | "Color.Success.700" | "Color.Success.800" | "Color.Warning.100" | "Color.Warning.200" | "Color.Warning.300" | "Color.Warning.400" | "Color.Warning.500" | "Color.Warning.600" | "Color.Warning.700" | "Color.Warning.800" | "Color.Critical.100" | "Color.Critical.200" | "Color.Critical.300" | "Color.Critical.400" | "Color.Critical.500" | "Color.Critical.600" | "Color.Critical.700" | "Color.Critical.800" | "Color.Alpha-Neutral.White-0" | "Color.Alpha-Neutral.White-100" | "Color.Alpha-Neutral.White-200" | "Color.Alpha-Neutral.White-300" | "Color.Alpha-Neutral.White-400" | "Color.Alpha-Neutral.White-500" | "Color.Alpha-Neutral.White-600" | "Color.Alpha-Neutral.White-700" | "Color.Alpha-Neutral.White-800" | "Color.Alpha-Neutral.White-1000" | "Color.Alpha-Neutral.Black-0" | "Color.Alpha-Neutral.Black-100" | "Color.Alpha-Neutral.Black-200" | "Color.Alpha-Neutral.Black-300" | "Color.Alpha-Neutral.Black-400" | "Color.Alpha-Neutral.Black-500" | "Color.Alpha-Neutral.Black-600" | "Color.Alpha-Neutral.Black-700" | "Color.Alpha-Neutral.Black-800" | "Color.Alpha-Neutral.Black-1000";
8
8
  export type SpacingToken = "Spacing.50" | "Spacing.100" | "Spacing.200" | "Spacing.300" | "Spacing.400" | "Spacing.450" | "Spacing.500" | "Spacing.600" | "Spacing.650" | "Spacing.700" | "Spacing.800" | "Spacing.900" | "Spacing.1000" | "Spacing.2000" | "Spacing.None";
9
- export type BackgroundToken = "Background.White" | "Background.Page_Primary" | "Background.Page_Secondary" | "Background.Page_Tertiary" | "Background.Disabled" | "Background.Primary" | "Background.Primary_Tonal" | "Background.Primary_Pressed" | "Background.Primary_Disabled" | "Background.Primary_Dark" | "Background.Primary-On_Hover" | "Background.Primary_Tonal-On_Hover" | "Background.Primary-On_Focused" | "Background.Success" | "Background.Success_Tonal" | "Background.Success_Dark" | "Background.Success_Disabled" | "Background.Success-On_Hover" | "Background.Warning" | "Background.Warning_Tonal" | "Background.Warning_Dark" | "Background.Warning_Disabled" | "Background.Warning-On_Hover" | "Background.Critical" | "Background.Critical_Tonal" | "Background.Critical_Dark" | "Background.Critical_Disabled" | "Background.Critical-On_Hover" | "Background.Transparent";
9
+ export type BackgroundToken = "Background.Page_Base" | "Background.Page_Primary" | "Background.Page_Secondary" | "Background.Page_Tertiary" | "Background.Disabled" | "Background.Primary" | "Background.Primary_Tonal" | "Background.Primary_Pressed" | "Background.Primary_Disabled" | "Background.Primary_Dark" | "Background.Primary-On_Hover" | "Background.Primary_Tonal-On_Hover" | "Background.Primary-On_Focused" | "Background.Success" | "Background.Success_Tonal" | "Background.Success_Dark" | "Background.Success_Disabled" | "Background.Success-On_Hover" | "Background.Warning" | "Background.Warning_Tonal" | "Background.Warning_Dark" | "Background.Warning_Disabled" | "Background.Warning-On_Hover" | "Background.Critical" | "Background.Critical_Tonal" | "Background.Critical_Dark" | "Background.Critical_Disabled" | "Background.Critical-On_Hover" | "Background.Transparent";
10
10
  export type ForegroundToken = "Foreground.Neutral" | "Foreground.Neutral_Secondary" | "Foreground.Neutral_Tertiary" | "Foreground.Primary" | "Foreground.Primary_Disabled" | "Foreground.Primary_Pressed" | "Foreground.Primary_-_On_Tonal" | "Foreground.Primary-_On_Focus" | "Foreground.Primary-_On_Hover" | "Foreground.Critical" | "Foreground.Critical_Tonal" | "Foreground.Critical-_On_Tonal" | "Foreground.Warning" | "Foreground.Warning-_On_Tonal" | "Foreground.Success" | "Foreground.Success-_On_Tonal" | "Foreground.On_Action" | "Foreground.White" | "Foreground.Disabled" | "Foreground.On_Disabled";
11
11
  export type BorderToken = "Border.Strong" | "Border.Strong-100" | "Border.Strong-200" | "Border.Neutral_Primary" | "Border.Neutral_Secondary" | "Border.Neutral_Tertiary" | "Border.Primary" | "Border.Primary_Tonal" | "Border.Primary_Disabled" | "Border.Primary-_On_Hover" | "Border.Primary_Pressed" | "Border.Critical" | "Border.Critical_Tonal" | "Border.Warning" | "Border.Warning_Tonal" | "Border.Success" | "Border.Success_Tonal" | "Border.On_Action" | "Border.White" | "Border.Disabled";
12
12
  export type Theme = "light" | "dark";
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,cAAc,GACtB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,GACf,eAAe,GACf,eAAe,GACf,eAAe,GACf,eAAe,GACf,eAAe,GACf,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,CAAC;AAEvB,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,UAAU,GACV,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,YAAY,GACZ,YAAY,CAAC;AAEjB,MAAM,MAAM,aAAa,GACrB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,kBAAkB,GAClB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,qBAAqB,GACrB,qBAAqB,GACrB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,GACnB,oBAAoB,GACpB,oBAAoB,GACpB,oBAAoB,GACpB,oBAAoB,GACpB,oBAAoB,GACpB,oBAAoB,GACpB,oBAAoB,GACpB,oBAAoB,GACpB,6BAA6B,GAC7B,+BAA+B,GAC/B,+BAA+B,GAC/B,+BAA+B,GAC/B,+BAA+B,GAC/B,+BAA+B,GAC/B,+BAA+B,GAC/B,+BAA+B,GAC/B,+BAA+B,GAC/B,gCAAgC,GAChC,6BAA6B,GAC7B,+BAA+B,GAC/B,+BAA+B,GAC/B,+BAA+B,GAC/B,+BAA+B,GAC/B,+BAA+B,GAC/B,+BAA+B,GAC/B,+BAA+B,GAC/B,+BAA+B,GAC/B,gCAAgC,CAAC;AAErC,MAAM,MAAM,YAAY,GACpB,YAAY,GACZ,aAAa,GACb,aAAa,GACb,aAAa,GACb,aAAa,GACb,aAAa,GACb,aAAa,GACb,aAAa,GACb,aAAa,GACb,aAAa,GACb,aAAa,GACb,aAAa,GACb,cAAc,GACd,cAAc,GACd,cAAc,CAAC;AAEnB,MAAM,MAAM,eAAe,GACvB,kBAAkB,GAClB,yBAAyB,GACzB,2BAA2B,GAC3B,0BAA0B,GAC1B,qBAAqB,GACrB,oBAAoB,GACpB,0BAA0B,GAC1B,4BAA4B,GAC5B,6BAA6B,GAC7B,yBAAyB,GACzB,6BAA6B,GAC7B,mCAAmC,GACnC,+BAA+B,GAC/B,oBAAoB,GACpB,0BAA0B,GAC1B,yBAAyB,GACzB,6BAA6B,GAC7B,6BAA6B,GAC7B,oBAAoB,GACpB,0BAA0B,GAC1B,yBAAyB,GACzB,6BAA6B,GAC7B,6BAA6B,GAC7B,qBAAqB,GACrB,2BAA2B,GAC3B,0BAA0B,GAC1B,8BAA8B,GAC9B,8BAA8B,GAC9B,wBAAwB,CAAC;AAE7B,MAAM,MAAM,eAAe,GACvB,oBAAoB,GACpB,8BAA8B,GAC9B,6BAA6B,GAC7B,oBAAoB,GACpB,6BAA6B,GAC7B,4BAA4B,GAC5B,+BAA+B,GAC/B,8BAA8B,GAC9B,8BAA8B,GAC9B,qBAAqB,GACrB,2BAA2B,GAC3B,+BAA+B,GAC/B,oBAAoB,GACpB,8BAA8B,GAC9B,oBAAoB,GACpB,8BAA8B,GAC9B,sBAAsB,GACtB,kBAAkB,GAClB,qBAAqB,GACrB,wBAAwB,CAAC;AAE7B,MAAM,MAAM,WAAW,GACnB,eAAe,GACf,mBAAmB,GACnB,mBAAmB,GACnB,wBAAwB,GACxB,0BAA0B,GAC1B,yBAAyB,GACzB,gBAAgB,GAChB,sBAAsB,GACtB,yBAAyB,GACzB,0BAA0B,GAC1B,wBAAwB,GACxB,iBAAiB,GACjB,uBAAuB,GACvB,gBAAgB,GAChB,sBAAsB,GACtB,gBAAgB,GAChB,sBAAsB,GACtB,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CAAC;AAEtB,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,SAAS,GAAG,YAAY,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beacon-ui",
3
- "version": "3.4.0",
3
+ "version": "3.4.1",
4
4
  "description": "Beacon Design System - Components and tokens",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -1,6 +1,6 @@
1
1
  /* Brand tokens - dark theme */
2
2
  [data-theme="dark"] {
3
- --bg-white: var(--color-neutral-800);
3
+ --bg-page-base: var(--color-neutral-900);
4
4
  --bg-page-primary: var(--color-neutral-800);
5
5
  --bg-page-secondary: var(--color-neutral-700);
6
6
  --bg-page-tertiary: var(--color-neutral-600);
@@ -1,6 +1,6 @@
1
1
  /* Brand tokens - light theme */
2
2
  :root, [data-theme="light"] {
3
- --bg-white: var(--color-alpha-neutral-white-1000);
3
+ --bg-page-base: var(--color-alpha-neutral-white-1000);
4
4
  --bg-page-primary: var(--color-neutral-50);
5
5
  --bg-page-secondary: var(--color-neutral-100);
6
6
  --bg-page-tertiary: var(--color-neutral-200);
@@ -39,7 +39,7 @@
39
39
  --color-gray-600: #3f3c3d;
40
40
  --color-gray-700: #2a2728;
41
41
  --color-gray-800: #1f1d1d;
42
- --color-gray-900: #0b0a0a;
42
+ --color-gray-900: #161616;
43
43
  --color-green-100: #e0ffff;
44
44
  --color-green-200: #9bfdfa;
45
45
  --color-green-300: #69fcf7;
@@ -170,6 +170,7 @@
170
170
  --color-neutral-600: var(--color-gray-600);
171
171
  --color-neutral-700: var(--color-gray-700);
172
172
  --color-neutral-800: var(--color-gray-800);
173
+ --color-neutral-900: var(--color-gray-900);
173
174
  --color-neutral-white: var(--color-white-1000);
174
175
  --color-neutral-black: var(--color-black-1000);
175
176
  --color-success-100: var(--color-green-100);
@@ -257,7 +258,7 @@
257
258
 
258
259
  /* Brand tokens - light theme */
259
260
  :root, [data-theme="light"] {
260
- --bg-white: var(--color-alpha-neutral-white-1000);
261
+ --bg-page-base: var(--color-alpha-neutral-white-1000);
261
262
  --bg-page-primary: var(--color-neutral-50);
262
263
  --bg-page-secondary: var(--color-neutral-100);
263
264
  --bg-page-tertiary: var(--color-neutral-200);
@@ -344,7 +345,7 @@
344
345
 
345
346
  /* Brand tokens - dark theme */
346
347
  [data-theme="dark"] {
347
- --bg-white: var(--color-neutral-800);
348
+ --bg-page-base: var(--color-neutral-900);
348
349
  --bg-page-primary: var(--color-neutral-800);
349
350
  --bg-page-secondary: var(--color-neutral-700);
350
351
  --bg-page-tertiary: var(--color-neutral-600);
@@ -700,13 +701,13 @@
700
701
  /* Typography utility classes */
701
702
  .text-title-small {
702
703
  font-family: var(--font-secondary);
703
- font-weight: var(--font-weight-secondary-bold);
704
+ font-weight: var(--font-weight-secondary-medium);
704
705
  font-size: var(--fonts-title-small-text-size);
705
706
  line-height: var(--fonts-title-small-line-height);
706
707
  }
707
708
  .text-title-regular {
708
709
  font-family: var(--font-secondary);
709
- font-weight: var(--font-weight-secondary-bold);
710
+ font-weight: var(--font-weight-secondary-medium);
710
711
  font-size: var(--fonts-title-regular-text-size);
711
712
  line-height: var(--fonts-title-regular-line-height);
712
713
  }
@@ -747,7 +748,7 @@
747
748
  }
748
749
  .text-heading-h6 {
749
750
  font-family: var(--font-secondary);
750
- font-weight: var(--font-weight-secondary-medium);
751
+ font-weight: var(--font-weight-secondary-semibold);
751
752
  text-transform: capitalize;
752
753
  font-size: var(--fonts-heading-h6-text-size);
753
754
  line-height: var(--fonts-heading-h6-line-height);
@@ -36,7 +36,7 @@
36
36
  --color-gray-600: #3f3c3d;
37
37
  --color-gray-700: #2a2728;
38
38
  --color-gray-800: #1f1d1d;
39
- --color-gray-900: #0b0a0a;
39
+ --color-gray-900: #161616;
40
40
  --color-green-100: #e0ffff;
41
41
  --color-green-200: #9bfdfa;
42
42
  --color-green-300: #69fcf7;
@@ -50,6 +50,7 @@
50
50
  --color-neutral-600: var(--color-gray-600);
51
51
  --color-neutral-700: var(--color-gray-700);
52
52
  --color-neutral-800: var(--color-gray-800);
53
+ --color-neutral-900: var(--color-gray-900);
53
54
  --color-neutral-white: var(--color-white-1000);
54
55
  --color-neutral-black: var(--color-black-1000);
55
56
  --color-success-100: var(--color-green-100);
@@ -22,13 +22,13 @@
22
22
  /* Typography utility classes */
23
23
  .text-title-small {
24
24
  font-family: var(--font-secondary);
25
- font-weight: var(--font-weight-secondary-bold);
25
+ font-weight: var(--font-weight-secondary-medium);
26
26
  font-size: var(--fonts-title-small-text-size);
27
27
  line-height: var(--fonts-title-small-line-height);
28
28
  }
29
29
  .text-title-regular {
30
30
  font-family: var(--font-secondary);
31
- font-weight: var(--font-weight-secondary-bold);
31
+ font-weight: var(--font-weight-secondary-medium);
32
32
  font-size: var(--fonts-title-regular-text-size);
33
33
  line-height: var(--fonts-title-regular-line-height);
34
34
  }
@@ -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-medium);
72
+ font-weight: var(--font-weight-secondary-semibold);
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);