beacon-ui 3.5.12 → 3.6.0

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 (18) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +1 -1
  3. package/dist/components/SelectableInput.d.ts +14 -0
  4. package/dist/components/SelectableInput.d.ts.map +1 -0
  5. package/dist/components/SelectableInput.js +134 -0
  6. package/dist/components/TabItem.d.ts.map +1 -1
  7. package/dist/components/TabItem.js +5 -2
  8. package/dist/index.d.ts +2 -0
  9. package/dist/index.d.ts.map +1 -1
  10. package/dist/index.js +1 -0
  11. package/dist/tokens/types.d.ts +2 -2
  12. package/dist/tokens/types.d.ts.map +1 -1
  13. package/package.json +1 -1
  14. package/tokens/generated/index.css +108 -27
  15. package/tokens/generated/primitives.css +31 -2
  16. package/tokens/generated/responsive.css +18 -18
  17. package/tokens/generated/semantic.css +59 -5
  18. package/tokens/generated/typography.css +0 -2
package/CHANGELOG.md CHANGED
@@ -5,6 +5,12 @@ 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.5.13] - 2026-02-05
9
+
10
+ ### Fixed
11
+ - Tab component side variant: removed rounded corners (borderRadius set to 0)
12
+ - Tab component side variant: added left-edge primary indicator (borderLeft) for active state
13
+
8
14
  ## [3.5.12] - 2026-02-05
9
15
 
10
16
  ### Added
package/README.md CHANGED
@@ -582,7 +582,7 @@ https://beacon.uxraza.com/
582
582
 
583
583
  ## Version
584
584
 
585
- Current version: **3.5.12**
585
+ Current version: **3.6.0**
586
586
 
587
587
  ## License
588
588
 
package/dist/components/SelectableInput.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { ComponentPropsWithRef } from "react";
2
+ import type { CornerRadiusStep } from "./Button";
3
+ export type SelectableInputSize = "sm" | "md" | "lg" | "xl";
4
+ export interface SelectableInputProps extends Omit<ComponentPropsWithRef<"button">, "type"> {
5
+ label?: string;
6
+ icon?: React.ReactNode;
7
+ size?: SelectableInputSize;
8
+ selected?: boolean;
9
+ disabled?: boolean;
10
+ cornerRadius?: CornerRadiusStep;
11
+ fullWidth?: boolean;
12
+ }
13
+ export declare function SelectableInput({ label, icon, size, selected, disabled, cornerRadius, fullWidth, className, style, onClick, onMouseEnter, onMouseLeave, ref, ...rest }: SelectableInputProps): import("react/jsx-runtime").JSX.Element;
14
+ //# sourceMappingURL=SelectableInput.d.ts.map
package/dist/components/SelectableInput.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SelectableInput.d.ts","sourceRoot":"","sources":["../../src/components/SelectableInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAG9E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA6D5D,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IACzF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAgB,EAChB,IAAI,EACJ,IAAW,EACX,QAAgB,EAChB,QAAgB,EAChB,YAAgB,EAChB,SAAiB,EACjB,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,GAAG,EACH,GAAG,IAAI,EACR,EAAE,oBAAoB,2CAwHtB"}
package/dist/components/SelectableInput.js ADDED
@@ -0,0 +1,134 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { useMemo, useState, useCallback } from "react";
4
+ import { useThemeSafe } from "../providers/ThemeProvider";
5
+ import { GridUILayoutIcon } from "../icons";
6
+ const CORNER_RADIUS_MAP = {
7
+ 0: "var(--corner-radius-none)",
8
+ 1: "var(--corner-radius-100)",
9
+ 2: "var(--corner-radius-200)",
10
+ 3: "var(--corner-radius-300)",
11
+ 4: "var(--corner-radius-400)",
12
+ 5: "var(--corner-radius-full)",
13
+ };
14
+ const SIZE_CONFIG = {
15
+ sm: {
16
+ padding: "var(--spacing-200)",
17
+ iconSize: 16,
18
+ fontSize: "var(--body-small-text-size)",
19
+ lineHeight: "var(--body-small-line-height)",
20
+ gap: "var(--spacing-100)",
21
+ minWidth: "80px",
22
+ minHeight: "80px",
23
+ },
24
+ md: {
25
+ padding: "var(--spacing-300)",
26
+ iconSize: 20,
27
+ fontSize: "var(--body-small-text-size)",
28
+ lineHeight: "var(--body-small-line-height)",
29
+ gap: "var(--spacing-200)",
30
+ minWidth: "100px",
31
+ minHeight: "100px",
32
+ },
33
+ lg: {
34
+ padding: "var(--spacing-400)",
35
+ iconSize: 24,
36
+ fontSize: "var(--body-regular-text-size)",
37
+ lineHeight: "var(--body-regular-line-height)",
38
+ gap: "var(--spacing-200)",
39
+ minWidth: "120px",
40
+ minHeight: "120px",
41
+ },
42
+ xl: {
43
+ padding: "var(--spacing-500)",
44
+ iconSize: 28,
45
+ fontSize: "var(--body-regular-text-size)",
46
+ lineHeight: "var(--body-regular-line-height)",
47
+ gap: "var(--spacing-300)",
48
+ minWidth: "140px",
49
+ minHeight: "140px",
50
+ },
51
+ };
52
+ export function SelectableInput({ label = "Option", icon, size = "md", selected = false, disabled = false, cornerRadius = 2, fullWidth = false, className, style, onClick, onMouseEnter, onMouseLeave, ref, ...rest }) {
53
+ useThemeSafe();
54
+ const sizeConfig = SIZE_CONFIG[size];
55
+ const [isHovered, setIsHovered] = useState(false);
56
+ const containerStyles = useMemo(() => {
57
+ const baseStyles = {
58
+ display: "flex",
59
+ flexDirection: "column",
60
+ alignItems: "center",
61
+ justifyContent: "center",
62
+ gap: sizeConfig.gap,
63
+ padding: sizeConfig.padding,
64
+ minWidth: sizeConfig.minWidth,
65
+ minHeight: sizeConfig.minHeight,
66
+ borderRadius: CORNER_RADIUS_MAP[cornerRadius],
67
+ border: selected
68
+ ? "var(--border-width-25) solid var(--border-primary)"
69
+ : "var(--border-width-25) solid var(--border-strong-200)",
70
+ backgroundColor: selected
71
+ ? "var(--bg-primary)"
72
+ : "var(--bg-page-primary)",
73
+ cursor: disabled ? "not-allowed" : "pointer",
74
+ opacity: disabled ? 0.6 : 1,
75
+ transition: "background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease",
76
+ outline: "none",
77
+ fontFamily: "var(--font-secondary)",
78
+ ...style,
79
+ };
80
+ if (fullWidth) {
81
+ baseStyles.width = "100%";
82
+ }
83
+ if (isHovered && !disabled && !selected) {
84
+ baseStyles.borderColor = "var(--border-neutral-primary)";
85
+ }
86
+ if (isHovered && !disabled) {
87
+ baseStyles.transform = "scale(1.02)";
88
+ }
89
+ return baseStyles;
90
+ }, [sizeConfig, selected, disabled, cornerRadius, fullWidth, isHovered, style]);
91
+ const iconStyles = useMemo(() => {
92
+ return {
93
+ color: selected
94
+ ? "var(--fg-on-action)"
95
+ : disabled
96
+ ? "var(--fg-disabled)"
97
+ : "var(--fg-neutral)",
98
+ display: "flex",
99
+ alignItems: "center",
100
+ justifyContent: "center",
101
+ flexShrink: 0,
102
+ };
103
+ }, [selected, disabled]);
104
+ const labelStyles = useMemo(() => {
105
+ return {
106
+ fontSize: sizeConfig.fontSize,
107
+ lineHeight: sizeConfig.lineHeight,
108
+ color: selected
109
+ ? "var(--fg-on-action)"
110
+ : disabled
111
+ ? "var(--fg-disabled)"
112
+ : "var(--fg-neutral)",
113
+ textAlign: "center",
114
+ fontWeight: 400,
115
+ };
116
+ }, [sizeConfig, selected, disabled]);
117
+ const defaultIcon = icon || _jsx(GridUILayoutIcon, { size: sizeConfig.iconSize });
118
+ const handleMouseEnter = useCallback((e) => {
119
+ if (!disabled) {
120
+ setIsHovered(true);
121
+ onMouseEnter?.(e);
122
+ }
123
+ }, [disabled, onMouseEnter]);
124
+ const handleMouseLeave = useCallback((e) => {
125
+ setIsHovered(false);
126
+ onMouseLeave?.(e);
127
+ }, [onMouseLeave]);
128
+ const handleClick = useCallback((e) => {
129
+ if (!disabled) {
130
+ onClick?.(e);
131
+ }
132
+ }, [disabled, onClick]);
133
+ return (_jsxs("button", { ref: ref, type: "button", className: className, style: containerStyles, disabled: disabled, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-pressed": selected, "aria-disabled": disabled, ...rest, children: [_jsx("div", { style: iconStyles, children: defaultIcon }), label && _jsx("div", { style: labelStyles, children: label })] }));
134
+ }
package/dist/components/TabItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabItem.d.ts","sourceRoot":"","sources":["../../src/components/TabItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAGjE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AACvE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACpF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAyBD,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,IAAW,EACX,QAAoB,EACpB,OAAO,EACP,SAAS,EACT,KAAK,EAAE,WAAW,EAClB,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,YAAY,2CAqEd"}
1
+ {"version":3,"file":"TabItem.d.ts","sourceRoot":"","sources":["../../src/components/TabItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAGjE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AACvE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACpF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAyBD,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,IAAW,EACX,QAAoB,EACpB,OAAO,EACP,SAAS,EACT,KAAK,EAAE,WAAW,EAClB,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,YAAY,2CAwEd"}
package/dist/components/TabItem.js CHANGED
@@ -36,17 +36,20 @@ export function TabItem({ tabName, state: stateProp, size = "sm", tabStyle = "de
36
36
  lineHeight: sizeConfig.lineHeight,
37
37
  fontWeight: "var(--font-weight-secondary-medium)",
38
38
  cursor: isDisabled ? "not-allowed" : "pointer",
39
- transition: "background-color 0.15s ease, color 0.15s ease",
39
+ transition: "background-color 0.15s ease, color 0.15s ease, border-left 0.15s ease",
40
40
  borderRadius: tabStyle === "pill"
41
41
  ? "var(--corner-radius-100)"
42
42
  : tabStyle === "side"
43
- ? "var(--corner-radius-200)"
43
+ ? "0"
44
44
  : "0",
45
45
  whiteSpace: "nowrap",
46
46
  ...inlineStyle,
47
47
  };
48
48
  if (isActive) {
49
49
  baseStyles.backgroundColor = "var(--bg-primary-tonal)";
50
+ if (tabStyle === "side") {
51
+ baseStyles.borderLeft = "var(--border-width-50) solid var(--border-primary)";
52
+ }
50
53
  }
51
54
  else if (isHovered) {
52
55
  baseStyles.backgroundColor = "var(--bg-page-secondary)";
package/dist/index.d.ts CHANGED
@@ -16,6 +16,7 @@ export { Toast } from "./components/Toast";
16
16
  export { Tab } from "./components/Tab";
17
17
  export { TabItem } from "./components/TabItem";
18
18
  export { Tooltip } from "./components/Tooltip";
19
+ export { SelectableInput } from "./components/SelectableInput";
19
20
  export type { ButtonProps, ButtonVariant, ButtonSize, CornerRadiusStep, JustifyContent, ButtonState, ButtonColor } from "./components/Button";
20
21
  export type { ButtonIconProps } from "./components/ButtonIcon";
21
22
  export type { CardProps, CardStatus, CardShadow } from "./components/Card";
@@ -33,6 +34,7 @@ export type { ToastProps, ToastVariant } from "./components/Toast";
33
34
  export type { TabProps } from "./components/Tab";
34
35
  export type { TabItemProps, TabItemState, TabItemSize, TabItemStyle } from "./components/TabItem";
35
36
  export type { TooltipProps, TooltipPosition, TooltipTrigger } from "./components/Tooltip";
37
+ export type { SelectableInputProps, SelectableInputSize } from "./components/SelectableInput";
36
38
  export { ThemeProvider, useTheme, useThemeSafe } from "./providers/ThemeProvider";
37
39
  export type { Theme, HueVariant } from "./tokens/types";
38
40
  export type { ColorPrimitive, SemanticColor, SpacingToken, CornerRadiusToken, BackgroundToken, ForegroundToken, BorderToken, } from "./tokens/types";
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/dist/index.js CHANGED
@@ -17,5 +17,6 @@ export { Toast } from "./components/Toast";
17
17
  export { Tab } from "./components/Tab";
18
18
  export { TabItem } from "./components/TabItem";
19
19
  export { Tooltip } from "./components/Tooltip";
20
+ export { SelectableInput } from "./components/SelectableInput";
20
21
  // Providers
21
22
  export { ThemeProvider, useTheme, useThemeSafe } from "./providers/ThemeProvider";
package/dist/tokens/types.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * Auto-generated token types
3
3
  * Do not edit directly - regenerate with `npm run build:tokens`
4
4
  */
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.40" | "Color.Black.60" | "Color.Black.80" | "Color.Black.100" | "Color.Black.120" | "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.20" | "Color.White.30" | "Color.White.40" | "Color.White.70" | "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";
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.Dove_Gray.50" | "Color.Dove_Gray.100" | "Color.Dove_Gray.200" | "Color.Dove_Gray.300" | "Color.Dove_Gray.400" | "Color.Dove_Gray.500" | "Color.Dove_Gray.600" | "Color.Dove_Gray.700" | "Color.Dove_Gray.800" | "Color.Dove_Gray.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.40" | "Color.Black.60" | "Color.Black.80" | "Color.Black.100" | "Color.Black.120" | "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.20" | "Color.White.30" | "Color.White.40" | "Color.White.70" | "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" | "Color.K_Green.100" | "Color.K_Green.200" | "Color.K_Green.300" | "Color.K_Green.400" | "Color.K_Green.500" | "Color.K_Green.600" | "Color.K_Green.700" | "Color.K_Green.800" | "Color.K_Green.900";
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
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.W0" | "Color.Alpha-Neutral.W20" | "Color.Alpha-Neutral.W30" | "Color.Alpha-Neutral.W40" | "Color.Alpha-Neutral.W70" | "Color.Alpha-Neutral.W100" | "Color.Alpha-Neutral.W200" | "Color.Alpha-Neutral.W300" | "Color.Alpha-Neutral.W400" | "Color.Alpha-Neutral.W500" | "Color.Alpha-Neutral.W600" | "Color.Alpha-Neutral.W700" | "Color.Alpha-Neutral.W800" | "Color.Alpha-Neutral.W1000" | "Color.Alpha-Neutral.B0" | "Color.Alpha-Neutral.B40" | "Color.Alpha-Neutral.B60" | "Color.Alpha-Neutral.B80" | "Color.Alpha-Neutral.B100" | "Color.Alpha-Neutral.B120" | "Color.Alpha-Neutral.B200" | "Color.Alpha-Neutral.B300" | "Color.Alpha-Neutral.B400" | "Color.Alpha-Neutral.B500" | "Color.Alpha-Neutral.B600" | "Color.Alpha-Neutral.B700" | "Color.Alpha-Neutral.B800" | "Color.Alpha-Neutral.B1000";
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";
@@ -11,5 +11,5 @@ export type BackgroundToken = "Background.Page_Base" | "Background.Page_Primary"
11
11
  export type ForegroundToken = "Foreground.Neutral" | "Foreground.Neutral_Secondary" | "Foreground.Neutral_Tertiary" | "Foreground.Neutral_Base" | "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";
12
12
  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";
13
13
  export type Theme = "light" | "dark";
14
- export type HueVariant = "chromatic-prime" | "hue-sky" | "hue-indigo";
14
+ export type HueVariant = "chromatic-prime" | "hue-sky" | "hue-indigo" | "hue-kelly-green";
15
15
  //# sourceMappingURL=types.d.ts.map
package/dist/tokens/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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"}
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.5.12",
3
+ "version": "3.6.0",
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
@@ -30,11 +30,21 @@
30
30
  --color-chromatic-700: #383c4b;
31
31
  --color-chromatic-800: #2a2c34;
32
32
  --color-chromatic-900: #1d1e25;
33
+ --color-dove-gray-50: #f6f6f6;
34
+ --color-dove-gray-100: #f0efef;
35
+ --color-dove-gray-200: #e8e6e3;
36
+ --color-dove-gray-300: #c7c7c6;
37
+ --color-dove-gray-400: #918d8a;
38
+ --color-dove-gray-500: #4f4945;
39
+ --color-dove-gray-600: #393330;
40
+ --color-dove-gray-700: #292524;
41
+ --color-dove-gray-800: #1c1a18;
42
+ --color-dove-gray-900: #0d0b0a;
33
43
  --color-gray-50: #f7fafc;
34
44
  --color-gray-100: #edf2f7;
35
45
  --color-gray-200: #d2d2d6;
36
- --color-gray-300: #959ba0;
37
- --color-gray-400: #686e70;
46
+ --color-gray-300: #a4a5a7;
47
+ --color-gray-400: #737576;
38
48
  --color-gray-500: #524e4f;
39
49
  --color-gray-600: #3f3c3d;
40
50
  --color-gray-700: #2a2728;
@@ -92,6 +102,15 @@
92
102
  --color-white-700: #ffffffb2;
93
103
  --color-white-800: #ffffffcc;
94
104
  --color-white-1000: #ffffff;
105
+ --color-k-green-100: #d3ffd3;
106
+ --color-k-green-200: #9aff9a;
107
+ --color-k-green-300: #00f000;
108
+ --color-k-green-400: #00c400;
109
+ --color-k-green-500: #00ad00;
110
+ --color-k-green-600: #007f00;
111
+ --color-k-green-700: #004600;
112
+ --color-k-green-800: #002600;
113
+ --color-k-green-900: #001800;
95
114
  --scale-0: 0px;
96
115
  --scale-25: 1px;
97
116
  --scale-50: 2px;
@@ -130,6 +149,16 @@
130
149
  --fonts-inter-weight-medium: 500;
131
150
  --fonts-inter-weight-semibold: 600;
132
151
  --fonts-inter-weight-bold: 700;
152
+ --fonts-ibm-plex-sans-style-ibm-plex-sans: IBM Plex Sans;
153
+ --fonts-ibm-plex-sans-weight-regular: 400;
154
+ --fonts-ibm-plex-sans-weight-medium: 500;
155
+ --fonts-ibm-plex-sans-weight-semibold: 600;
156
+ --fonts-ibm-plex-sans-weight-bold: 700;
157
+ --fonts-chivo-style-chivo: Chivo;
158
+ --fonts-chivo-weight-regular: 400;
159
+ --fonts-chivo-weight-medium: 500;
160
+ --fonts-chivo-weight-semibold: 600;
161
+ --fonts-chivo-weight-bold: 700;
133
162
  }
134
163
 
135
164
  /* Semantic tokens - all hue variants */
@@ -159,6 +188,15 @@
159
188
  --color-primary-700: var(--color-chromatic-700);
160
189
  --color-primary-800: var(--color-chromatic-800);
161
190
  --color-primary-900: var(--color-chromatic-900);
191
+ --color-neutral-50: var(--color-gray-50);
192
+ --color-neutral-100: var(--color-gray-100);
193
+ --color-neutral-200: var(--color-gray-200);
194
+ --color-neutral-300: var(--color-gray-300);
195
+ --color-neutral-500: var(--color-gray-500);
196
+ --color-neutral-600: var(--color-gray-600);
197
+ --color-neutral-700: var(--color-gray-700);
198
+ --color-neutral-800: var(--color-gray-800);
199
+ --color-neutral-900: var(--color-gray-900);
162
200
  }
163
201
 
164
202
  /* hue-sky */
@@ -186,6 +224,15 @@
186
224
  --color-primary-700: var(--color-blue-700);
187
225
  --color-primary-800: var(--color-blue-800);
188
226
  --color-primary-900: var(--color-blue-900);
227
+ --color-neutral-50: var(--color-gray-50);
228
+ --color-neutral-100: var(--color-gray-100);
229
+ --color-neutral-200: var(--color-gray-200);
230
+ --color-neutral-300: var(--color-gray-300);
231
+ --color-neutral-500: var(--color-gray-500);
232
+ --color-neutral-600: var(--color-gray-600);
233
+ --color-neutral-700: var(--color-gray-700);
234
+ --color-neutral-800: var(--color-gray-800);
235
+ --color-neutral-900: var(--color-gray-900);
189
236
  }
190
237
 
191
238
  /* hue-indigo */
@@ -213,20 +260,56 @@
213
260
  --color-primary-700: var(--color-purple-700);
214
261
  --color-primary-800: var(--color-purple-800);
215
262
  --color-primary-900: var(--color-purple-900);
216
- }
217
-
218
- /* Shared semantic tokens (same across all hues) */
219
- :root {
220
263
  --color-neutral-50: var(--color-gray-50);
221
264
  --color-neutral-100: var(--color-gray-100);
222
265
  --color-neutral-200: var(--color-gray-200);
223
266
  --color-neutral-300: var(--color-gray-300);
224
- --color-neutral-400: var(--color-gray-400);
225
267
  --color-neutral-500: var(--color-gray-500);
226
268
  --color-neutral-600: var(--color-gray-600);
227
269
  --color-neutral-700: var(--color-gray-700);
228
270
  --color-neutral-800: var(--color-gray-800);
229
271
  --color-neutral-900: var(--color-gray-900);
272
+ }
273
+
274
+ /* hue-kelly-green */
275
+ [data-hue="hue-kelly-green"] {
276
+ --font-primary: var(--fonts-chivo-style-chivo);
277
+ --font-secondary: var(--fonts-ibm-plex-sans-style-ibm-plex-sans);
278
+ --font-weight-primary-regular: var(--fonts-chivo-weight-regular);
279
+ --font-weight-primary-medium: var(--fonts-chivo-weight-medium);
280
+ --font-weight-primary-semibold: var(--fonts-chivo-weight-semibold);
281
+ --font-weight-primary-bold: var(--fonts-chivo-weight-bold);
282
+ --font-weight-secondary-regular: var(--fonts-ibm-plex-sans-weight-regular);
283
+ --font-weight-secondary-medium: var(--fonts-ibm-plex-sans-weight-medium);
284
+ --font-weight-secondary-semibold: var(--fonts-ibm-plex-sans-weight-semibold);
285
+ --font-weight-secondary-bold: var(--fonts-ibm-plex-sans-weight-bold);
286
+ --font-weight-regular: var(--font-weight-secondary-regular);
287
+ --font-weight-medium: var(--font-weight-secondary-medium);
288
+ --font-weight-semibold: var(--font-weight-secondary-semibold);
289
+ --font-weight-bold: var(--font-weight-secondary-bold);
290
+ --color-primary-100: var(--color-k-green-100);
291
+ --color-primary-200: var(--color-k-green-200);
292
+ --color-primary-300: var(--color-k-green-300);
293
+ --color-primary-400: var(--color-k-green-400);
294
+ --color-primary-500: var(--color-k-green-500);
295
+ --color-primary-600: var(--color-k-green-600);
296
+ --color-primary-700: var(--color-k-green-700);
297
+ --color-primary-800: var(--color-k-green-800);
298
+ --color-primary-900: var(--color-k-green-900);
299
+ --color-neutral-50: var(--color-dove-gray-50);
300
+ --color-neutral-100: var(--color-dove-gray-100);
301
+ --color-neutral-200: var(--color-dove-gray-200);
302
+ --color-neutral-300: var(--color-dove-gray-300);
303
+ --color-neutral-500: var(--color-dove-gray-500);
304
+ --color-neutral-600: var(--color-dove-gray-600);
305
+ --color-neutral-700: var(--color-dove-gray-700);
306
+ --color-neutral-800: var(--color-dove-gray-800);
307
+ --color-neutral-900: var(--color-dove-gray-900);
308
+ }
309
+
310
+ /* Shared semantic tokens (same across all hues) */
311
+ :root {
312
+ --color-neutral-400: var(--color-gray-400);
230
313
  --color-neutral-white: var(--color-white-1000);
231
314
  --color-neutral-black: var(--color-black-1000);
232
315
  --color-success-100: var(--color-green-100);
@@ -523,12 +606,6 @@
523
606
  /* Responsive tokens */
524
607
  :root {
525
608
  --device-width: 1440px;
526
- --adaptive-set-d96-t80-m32: 96px;
527
- --adaptive-set-d96-t48-m32: 96px;
528
- --adaptive-set-d48-t32-m24: 48px;
529
- --adaptive-set-d64-t80-m32: 64px;
530
- --adaptive-set-d80-t64-m48: 80px;
531
- --adaptive-set-d32-t80-m32: 32px;
532
609
  --heading-h1-text-size: 64px;
533
610
  --fonts-heading-h1-text-size: 64px;
534
611
  --heading-h1-paragraph-spacing: 72px;
@@ -601,18 +678,18 @@
601
678
  --fonts-body-medium-paragraph-spacing: 28px;
602
679
  --body-medium-line-height: 28px;
603
680
  --fonts-body-medium-line-height: 28px;
681
+ --adaptive-set-d96-t80-m32: 96px;
682
+ --adaptive-set-d96-t48-m32: 96px;
683
+ --adaptive-set-d48-t32-m24: 48px;
684
+ --adaptive-set-d64-t80-m32: 64px;
685
+ --adaptive-set-d80-t64-m48: 80px;
686
+ --adaptive-set-d32-t80-m32: 32px;
604
687
  --menu-width: 224px;
605
688
  }
606
689
 
607
690
  @media (max-width: 1024px) {
608
691
  :root {
609
692
  --device-width: 834px;
610
- --adaptive-set-d96-t80-m32: 80px;
611
- --adaptive-set-d96-t48-m32: 48px;
612
- --adaptive-set-d48-t32-m24: 32px;
613
- --adaptive-set-d64-t80-m32: 80px;
614
- --adaptive-set-d80-t64-m48: 64px;
615
- --adaptive-set-d32-t80-m32: 80px;
616
693
  --heading-h1-text-size: 60px;
617
694
  --fonts-heading-h1-text-size: 60px;
618
695
  --heading-h1-paragraph-spacing: 64px;
@@ -685,6 +762,12 @@
685
762
  --fonts-body-medium-paragraph-spacing: 28px;
686
763
  --body-medium-line-height: 28px;
687
764
  --fonts-body-medium-line-height: 28px;
765
+ --adaptive-set-d96-t80-m32: 80px;
766
+ --adaptive-set-d96-t48-m32: 48px;
767
+ --adaptive-set-d48-t32-m24: 32px;
768
+ --adaptive-set-d64-t80-m32: 80px;
769
+ --adaptive-set-d80-t64-m48: 64px;
770
+ --adaptive-set-d32-t80-m32: 80px;
688
771
  --menu-width: var(--device-width);
689
772
  }
690
773
  }
@@ -692,12 +775,6 @@
692
775
  @media (max-width: 768px) {
693
776
  :root {
694
777
  --device-width: 430px;
695
- --adaptive-set-d96-t80-m32: 32px;
696
- --adaptive-set-d96-t48-m32: 32px;
697
- --adaptive-set-d48-t32-m24: 24px;
698
- --adaptive-set-d64-t80-m32: 32px;
699
- --adaptive-set-d80-t64-m48: 48px;
700
- --adaptive-set-d32-t80-m32: 32px;
701
778
  --heading-h1-text-size: 48px;
702
779
  --fonts-heading-h1-text-size: 48px;
703
780
  --heading-h1-paragraph-spacing: 56px;
@@ -770,6 +847,12 @@
770
847
  --fonts-body-medium-paragraph-spacing: 28px;
771
848
  --body-medium-line-height: 28px;
772
849
  --fonts-body-medium-line-height: 28px;
850
+ --adaptive-set-d96-t80-m32: 32px;
851
+ --adaptive-set-d96-t48-m32: 32px;
852
+ --adaptive-set-d48-t32-m24: 24px;
853
+ --adaptive-set-d64-t80-m32: 32px;
854
+ --adaptive-set-d80-t64-m48: 48px;
855
+ --adaptive-set-d32-t80-m32: 32px;
773
856
  --menu-width: var(--device-width);
774
857
  }
775
858
  }
@@ -837,14 +920,12 @@
837
920
  .text-heading-h4 {
838
921
  font-family: var(--font-secondary);
839
922
  font-weight: var(--font-weight-secondary-semibold);
840
- text-transform: capitalize;
841
923
  font-size: var(--fonts-heading-h4-text-size);
842
924
  line-height: var(--fonts-heading-h4-line-height);
843
925
  }
844
926
  .text-heading-h5 {
845
927
  font-family: var(--font-secondary);
846
928
  font-weight: var(--font-weight-secondary-semibold);
847
- text-transform: capitalize;
848
929
  font-size: var(--fonts-heading-h5-text-size);
849
930
  line-height: var(--fonts-heading-h5-line-height);
850
931
  }
package/tokens/generated/primitives.css CHANGED
@@ -27,11 +27,21 @@
27
27
  --color-chromatic-700: #383c4b;
28
28
  --color-chromatic-800: #2a2c34;
29
29
  --color-chromatic-900: #1d1e25;
30
+ --color-dove-gray-50: #f6f6f6;
31
+ --color-dove-gray-100: #f0efef;
32
+ --color-dove-gray-200: #e8e6e3;
33
+ --color-dove-gray-300: #c7c7c6;
34
+ --color-dove-gray-400: #918d8a;
35
+ --color-dove-gray-500: #4f4945;
36
+ --color-dove-gray-600: #393330;
37
+ --color-dove-gray-700: #292524;
38
+ --color-dove-gray-800: #1c1a18;
39
+ --color-dove-gray-900: #0d0b0a;
30
40
  --color-gray-50: #f7fafc;
31
41
  --color-gray-100: #edf2f7;
32
42
  --color-gray-200: #d2d2d6;
33
- --color-gray-300: #959ba0;
34
- --color-gray-400: #686e70;
43
+ --color-gray-300: #a4a5a7;
44
+ --color-gray-400: #737576;
35
45
  --color-gray-500: #524e4f;
36
46
  --color-gray-600: #3f3c3d;
37
47
  --color-gray-700: #2a2728;
@@ -89,6 +99,15 @@
89
99
  --color-white-700: #ffffffb2;
90
100
  --color-white-800: #ffffffcc;
91
101
  --color-white-1000: #ffffff;
102
+ --color-k-green-100: #d3ffd3;
103
+ --color-k-green-200: #9aff9a;
104
+ --color-k-green-300: #00f000;
105
+ --color-k-green-400: #00c400;
106
+ --color-k-green-500: #00ad00;
107
+ --color-k-green-600: #007f00;
108
+ --color-k-green-700: #004600;
109
+ --color-k-green-800: #002600;
110
+ --color-k-green-900: #001800;
92
111
  --scale-0: 0px;
93
112
  --scale-25: 1px;
94
113
  --scale-50: 2px;
@@ -127,4 +146,14 @@
127
146
  --fonts-inter-weight-medium: 500;
128
147
  --fonts-inter-weight-semibold: 600;
129
148
  --fonts-inter-weight-bold: 700;
149
+ --fonts-ibm-plex-sans-style-ibm-plex-sans: IBM Plex Sans;
150
+ --fonts-ibm-plex-sans-weight-regular: 400;
151
+ --fonts-ibm-plex-sans-weight-medium: 500;
152
+ --fonts-ibm-plex-sans-weight-semibold: 600;
153
+ --fonts-ibm-plex-sans-weight-bold: 700;
154
+ --fonts-chivo-style-chivo: Chivo;
155
+ --fonts-chivo-weight-regular: 400;
156
+ --fonts-chivo-weight-medium: 500;
157
+ --fonts-chivo-weight-semibold: 600;
158
+ --fonts-chivo-weight-bold: 700;
130
159
  }
package/tokens/generated/responsive.css CHANGED
@@ -1,12 +1,6 @@
1
1
  /* Responsive tokens */
2
2
  :root {
3
3
  --device-width: 1440px;
4
- --adaptive-set-d96-t80-m32: 96px;
5
- --adaptive-set-d96-t48-m32: 96px;
6
- --adaptive-set-d48-t32-m24: 48px;
7
- --adaptive-set-d64-t80-m32: 64px;
8
- --adaptive-set-d80-t64-m48: 80px;
9
- --adaptive-set-d32-t80-m32: 32px;
10
4
  --heading-h1-text-size: 64px;
11
5
  --fonts-heading-h1-text-size: 64px;
12
6
  --heading-h1-paragraph-spacing: 72px;
@@ -79,18 +73,18 @@
79
73
  --fonts-body-medium-paragraph-spacing: 28px;
80
74
  --body-medium-line-height: 28px;
81
75
  --fonts-body-medium-line-height: 28px;
76
+ --adaptive-set-d96-t80-m32: 96px;
77
+ --adaptive-set-d96-t48-m32: 96px;
78
+ --adaptive-set-d48-t32-m24: 48px;
79
+ --adaptive-set-d64-t80-m32: 64px;
80
+ --adaptive-set-d80-t64-m48: 80px;
81
+ --adaptive-set-d32-t80-m32: 32px;
82
82
  --menu-width: 224px;
83
83
  }
84
84
 
85
85
  @media (max-width: 1024px) {
86
86
  :root {
87
87
  --device-width: 834px;
88
- --adaptive-set-d96-t80-m32: 80px;
89
- --adaptive-set-d96-t48-m32: 48px;
90
- --adaptive-set-d48-t32-m24: 32px;
91
- --adaptive-set-d64-t80-m32: 80px;
92
- --adaptive-set-d80-t64-m48: 64px;
93
- --adaptive-set-d32-t80-m32: 80px;
94
88
  --heading-h1-text-size: 60px;
95
89
  --fonts-heading-h1-text-size: 60px;
96
90
  --heading-h1-paragraph-spacing: 64px;
@@ -163,6 +157,12 @@
163
157
  --fonts-body-medium-paragraph-spacing: 28px;
164
158
  --body-medium-line-height: 28px;
165
159
  --fonts-body-medium-line-height: 28px;
160
+ --adaptive-set-d96-t80-m32: 80px;
161
+ --adaptive-set-d96-t48-m32: 48px;
162
+ --adaptive-set-d48-t32-m24: 32px;
163
+ --adaptive-set-d64-t80-m32: 80px;
164
+ --adaptive-set-d80-t64-m48: 64px;
165
+ --adaptive-set-d32-t80-m32: 80px;
166
166
  --menu-width: var(--device-width);
167
167
  }
168
168
  }
@@ -170,12 +170,6 @@
170
170
  @media (max-width: 768px) {
171
171
  :root {
172
172
  --device-width: 430px;
173
- --adaptive-set-d96-t80-m32: 32px;
174
- --adaptive-set-d96-t48-m32: 32px;
175
- --adaptive-set-d48-t32-m24: 24px;
176
- --adaptive-set-d64-t80-m32: 32px;
177
- --adaptive-set-d80-t64-m48: 48px;
178
- --adaptive-set-d32-t80-m32: 32px;
179
173
  --heading-h1-text-size: 48px;
180
174
  --fonts-heading-h1-text-size: 48px;
181
175
  --heading-h1-paragraph-spacing: 56px;
@@ -248,6 +242,12 @@
248
242
  --fonts-body-medium-paragraph-spacing: 28px;
249
243
  --body-medium-line-height: 28px;
250
244
  --fonts-body-medium-line-height: 28px;
245
+ --adaptive-set-d96-t80-m32: 32px;
246
+ --adaptive-set-d96-t48-m32: 32px;
247
+ --adaptive-set-d48-t32-m24: 24px;
248
+ --adaptive-set-d64-t80-m32: 32px;
249
+ --adaptive-set-d80-t64-m48: 48px;
250
+ --adaptive-set-d32-t80-m32: 32px;
251
251
  --menu-width: var(--device-width);
252
252
  }
253
253
  }
package/tokens/generated/semantic.css CHANGED
@@ -25,6 +25,15 @@
25
25
  --color-primary-700: var(--color-chromatic-700);
26
26
  --color-primary-800: var(--color-chromatic-800);
27
27
  --color-primary-900: var(--color-chromatic-900);
28
+ --color-neutral-50: var(--color-gray-50);
29
+ --color-neutral-100: var(--color-gray-100);
30
+ --color-neutral-200: var(--color-gray-200);
31
+ --color-neutral-300: var(--color-gray-300);
32
+ --color-neutral-500: var(--color-gray-500);
33
+ --color-neutral-600: var(--color-gray-600);
34
+ --color-neutral-700: var(--color-gray-700);
35
+ --color-neutral-800: var(--color-gray-800);
36
+ --color-neutral-900: var(--color-gray-900);
28
37
  }
29
38
 
30
39
  /* hue-sky */
@@ -52,6 +61,15 @@
52
61
  --color-primary-700: var(--color-blue-700);
53
62
  --color-primary-800: var(--color-blue-800);
54
63
  --color-primary-900: var(--color-blue-900);
64
+ --color-neutral-50: var(--color-gray-50);
65
+ --color-neutral-100: var(--color-gray-100);
66
+ --color-neutral-200: var(--color-gray-200);
67
+ --color-neutral-300: var(--color-gray-300);
68
+ --color-neutral-500: var(--color-gray-500);
69
+ --color-neutral-600: var(--color-gray-600);
70
+ --color-neutral-700: var(--color-gray-700);
71
+ --color-neutral-800: var(--color-gray-800);
72
+ --color-neutral-900: var(--color-gray-900);
55
73
  }
56
74
 
57
75
  /* hue-indigo */
@@ -79,20 +97,56 @@
79
97
  --color-primary-700: var(--color-purple-700);
80
98
  --color-primary-800: var(--color-purple-800);
81
99
  --color-primary-900: var(--color-purple-900);
82
- }
83
-
84
- /* Shared semantic tokens (same across all hues) */
85
- :root {
86
100
  --color-neutral-50: var(--color-gray-50);
87
101
  --color-neutral-100: var(--color-gray-100);
88
102
  --color-neutral-200: var(--color-gray-200);
89
103
  --color-neutral-300: var(--color-gray-300);
90
- --color-neutral-400: var(--color-gray-400);
91
104
  --color-neutral-500: var(--color-gray-500);
92
105
  --color-neutral-600: var(--color-gray-600);
93
106
  --color-neutral-700: var(--color-gray-700);
94
107
  --color-neutral-800: var(--color-gray-800);
95
108
  --color-neutral-900: var(--color-gray-900);
109
+ }
110
+
111
+ /* hue-kelly-green */
112
+ [data-hue="hue-kelly-green"] {
113
+ --font-primary: var(--fonts-chivo-style-chivo);
114
+ --font-secondary: var(--fonts-ibm-plex-sans-style-ibm-plex-sans);
115
+ --font-weight-primary-regular: var(--fonts-chivo-weight-regular);
116
+ --font-weight-primary-medium: var(--fonts-chivo-weight-medium);
117
+ --font-weight-primary-semibold: var(--fonts-chivo-weight-semibold);
118
+ --font-weight-primary-bold: var(--fonts-chivo-weight-bold);
119
+ --font-weight-secondary-regular: var(--fonts-ibm-plex-sans-weight-regular);
120
+ --font-weight-secondary-medium: var(--fonts-ibm-plex-sans-weight-medium);
121
+ --font-weight-secondary-semibold: var(--fonts-ibm-plex-sans-weight-semibold);
122
+ --font-weight-secondary-bold: var(--fonts-ibm-plex-sans-weight-bold);
123
+ --font-weight-regular: var(--font-weight-secondary-regular);
124
+ --font-weight-medium: var(--font-weight-secondary-medium);
125
+ --font-weight-semibold: var(--font-weight-secondary-semibold);
126
+ --font-weight-bold: var(--font-weight-secondary-bold);
127
+ --color-primary-100: var(--color-k-green-100);
128
+ --color-primary-200: var(--color-k-green-200);
129
+ --color-primary-300: var(--color-k-green-300);
130
+ --color-primary-400: var(--color-k-green-400);
131
+ --color-primary-500: var(--color-k-green-500);
132
+ --color-primary-600: var(--color-k-green-600);
133
+ --color-primary-700: var(--color-k-green-700);
134
+ --color-primary-800: var(--color-k-green-800);
135
+ --color-primary-900: var(--color-k-green-900);
136
+ --color-neutral-50: var(--color-dove-gray-50);
137
+ --color-neutral-100: var(--color-dove-gray-100);
138
+ --color-neutral-200: var(--color-dove-gray-200);
139
+ --color-neutral-300: var(--color-dove-gray-300);
140
+ --color-neutral-500: var(--color-dove-gray-500);
141
+ --color-neutral-600: var(--color-dove-gray-600);
142
+ --color-neutral-700: var(--color-dove-gray-700);
143
+ --color-neutral-800: var(--color-dove-gray-800);
144
+ --color-neutral-900: var(--color-dove-gray-900);
145
+ }
146
+
147
+ /* Shared semantic tokens (same across all hues) */
148
+ :root {
149
+ --color-neutral-400: var(--color-gray-400);
96
150
  --color-neutral-white: var(--color-white-1000);
97
151
  --color-neutral-black: var(--color-black-1000);
98
152
  --color-success-100: var(--color-green-100);
package/tokens/generated/typography.css CHANGED
@@ -50,14 +50,12 @@
50
50
  .text-heading-h4 {
51
51
  font-family: var(--font-secondary);
52
52
  font-weight: var(--font-weight-secondary-semibold);
53
- text-transform: capitalize;
54
53
  font-size: var(--fonts-heading-h4-text-size);
55
54
  line-height: var(--fonts-heading-h4-line-height);
56
55
  }
57
56
  .text-heading-h5 {
58
57
  font-family: var(--font-secondary);
59
58
  font-weight: var(--font-weight-secondary-semibold);
60
- text-transform: capitalize;
61
59
  font-size: var(--fonts-heading-h5-text-size);
62
60
  line-height: var(--fonts-heading-h5-line-height);
63
61
  }