beacon-ui 3.6.0 → 3.7.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 (5) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/package.json +1 -1
  3. package/tokens/generated/index.css +31 -19
  4. package/tokens/generated/primitives.css +9 -0
  5. package/tokens/generated/semantic.css +22 -19
package/CHANGELOG.md CHANGED
@@ -5,6 +5,32 @@ 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.0] - 2026-05-01
9
+
10
+ ### Added
11
+ - Ginger Orange hue variant (`hue-ginger-orange`) with Chivo as primary font and IBM Plex Sans as secondary font
12
+ - Ginger primitive color palette (`--color-ginger-100` through `--color-ginger-900`) added to token system
13
+ - `hue-ginger-orange` entry added to `HueVariant` TypeScript type
14
+
15
+ ### Fixed
16
+ - Ginger Orange uses Dove Gray neutral palette (warm-toned) matching its token definition, consistent with Chromatic Prime
17
+
18
+ ## [3.6.0] - 2026-04-30
19
+
20
+ ### Added
21
+ - Kelly Green hue variant (`hue-kelly-green`) with Chivo as primary font and IBM Plex Sans as secondary font
22
+ - Chivo and IBM Plex Sans loaded via `next/font/google` and registered as `--font-chivo` and `--font-ibm-plex-sans` CSS variables
23
+ - Chivo and IBM Plex Sans added to typography configuration and primitive token layer
24
+
25
+ ### Fixed
26
+ - Invalid CSS variable references across components: `--spacing-150` → `--spacing-200`, `--spacing-250` → `--spacing-300`, `--fg-primary-on-primary` → `--fg-on-action`, `--fg-brand-primary` → `--fg-primary`, `--fg-neutral-primary` → `--fg-neutral`
27
+ - Package tokens rebuilt to include K_Green primitive palette and new font variables
28
+ - Themes page documentation corrected: `--color-kellygreen-500` → `--color-k-green-500`
29
+
30
+ ### Changed
31
+ - Removed on-dark contrast pairings (on-primary dark, on-success dark, on-warning dark, on-critical dark) from colors page contrast section — these combinations are not intended for use together
32
+ - Typography documentation updated: Required Fonts table, Next.js and CSS setup code blocks, and Font Variables Reference table now include all six font families and the Kelly Green hue row
33
+
8
34
  ## [3.5.13] - 2026-02-05
9
35
 
10
36
  ### Fixed
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beacon-ui",
3
- "version": "3.6.0",
3
+ "version": "3.7.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
@@ -111,6 +111,15 @@
111
111
  --color-k-green-700: #004600;
112
112
  --color-k-green-800: #002600;
113
113
  --color-k-green-900: #001800;
114
+ --color-ginger-100: #f8e9dc;
115
+ --color-ginger-200: #f0d1b8;
116
+ --color-ginger-300: #e5b18c;
117
+ --color-ginger-400: #da8a5d;
118
+ --color-ginger-500: #d06635;
119
+ --color-ginger-600: #bb4f2c;
120
+ --color-ginger-700: #993c24;
121
+ --color-ginger-800: #7e2e1f;
122
+ --color-ginger-900: #471912;
114
123
  --scale-0: 0px;
115
124
  --scale-25: 1px;
116
125
  --scale-50: 2px;
@@ -188,15 +197,16 @@
188
197
  --color-primary-700: var(--color-chromatic-700);
189
198
  --color-primary-800: var(--color-chromatic-800);
190
199
  --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);
200
+ --color-neutral-50: var(--color-dove-gray-50);
201
+ --color-neutral-100: var(--color-dove-gray-100);
202
+ --color-neutral-200: var(--color-dove-gray-200);
203
+ --color-neutral-300: var(--color-dove-gray-300);
204
+ --color-neutral-400: var(--color-dove-gray-400);
205
+ --color-neutral-500: var(--color-dove-gray-500);
206
+ --color-neutral-600: var(--color-dove-gray-600);
207
+ --color-neutral-700: var(--color-dove-gray-700);
208
+ --color-neutral-800: var(--color-dove-gray-800);
209
+ --color-neutral-900: var(--color-dove-gray-900);
200
210
  }
201
211
 
202
212
  /* hue-sky */
@@ -228,6 +238,7 @@
228
238
  --color-neutral-100: var(--color-gray-100);
229
239
  --color-neutral-200: var(--color-gray-200);
230
240
  --color-neutral-300: var(--color-gray-300);
241
+ --color-neutral-400: var(--color-gray-400);
231
242
  --color-neutral-500: var(--color-gray-500);
232
243
  --color-neutral-600: var(--color-gray-600);
233
244
  --color-neutral-700: var(--color-gray-700);
@@ -264,6 +275,7 @@
264
275
  --color-neutral-100: var(--color-gray-100);
265
276
  --color-neutral-200: var(--color-gray-200);
266
277
  --color-neutral-300: var(--color-gray-300);
278
+ --color-neutral-400: var(--color-gray-400);
267
279
  --color-neutral-500: var(--color-gray-500);
268
280
  --color-neutral-600: var(--color-gray-600);
269
281
  --color-neutral-700: var(--color-gray-700);
@@ -296,20 +308,20 @@
296
308
  --color-primary-700: var(--color-k-green-700);
297
309
  --color-primary-800: var(--color-k-green-800);
298
310
  --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);
311
+ --color-neutral-50: var(--color-gray-50);
312
+ --color-neutral-100: var(--color-gray-100);
313
+ --color-neutral-200: var(--color-gray-200);
314
+ --color-neutral-300: var(--color-gray-300);
315
+ --color-neutral-400: var(--color-gray-400);
316
+ --color-neutral-500: var(--color-gray-500);
317
+ --color-neutral-600: var(--color-gray-600);
318
+ --color-neutral-700: var(--color-gray-700);
319
+ --color-neutral-800: var(--color-gray-800);
320
+ --color-neutral-900: var(--color-gray-900);
308
321
  }
309
322
 
310
323
  /* Shared semantic tokens (same across all hues) */
311
324
  :root {
312
- --color-neutral-400: var(--color-gray-400);
313
325
  --color-neutral-white: var(--color-white-1000);
314
326
  --color-neutral-black: var(--color-black-1000);
315
327
  --color-success-100: var(--color-green-100);
package/tokens/generated/primitives.css CHANGED
@@ -108,6 +108,15 @@
108
108
  --color-k-green-700: #004600;
109
109
  --color-k-green-800: #002600;
110
110
  --color-k-green-900: #001800;
111
+ --color-ginger-100: #f8e9dc;
112
+ --color-ginger-200: #f0d1b8;
113
+ --color-ginger-300: #e5b18c;
114
+ --color-ginger-400: #da8a5d;
115
+ --color-ginger-500: #d06635;
116
+ --color-ginger-600: #bb4f2c;
117
+ --color-ginger-700: #993c24;
118
+ --color-ginger-800: #7e2e1f;
119
+ --color-ginger-900: #471912;
111
120
  --scale-0: 0px;
112
121
  --scale-25: 1px;
113
122
  --scale-50: 2px;
package/tokens/generated/semantic.css CHANGED
@@ -25,15 +25,16 @@
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
+ --color-neutral-50: var(--color-dove-gray-50);
29
+ --color-neutral-100: var(--color-dove-gray-100);
30
+ --color-neutral-200: var(--color-dove-gray-200);
31
+ --color-neutral-300: var(--color-dove-gray-300);
32
+ --color-neutral-400: var(--color-dove-gray-400);
33
+ --color-neutral-500: var(--color-dove-gray-500);
34
+ --color-neutral-600: var(--color-dove-gray-600);
35
+ --color-neutral-700: var(--color-dove-gray-700);
36
+ --color-neutral-800: var(--color-dove-gray-800);
37
+ --color-neutral-900: var(--color-dove-gray-900);
37
38
  }
38
39
 
39
40
  /* hue-sky */
@@ -65,6 +66,7 @@
65
66
  --color-neutral-100: var(--color-gray-100);
66
67
  --color-neutral-200: var(--color-gray-200);
67
68
  --color-neutral-300: var(--color-gray-300);
69
+ --color-neutral-400: var(--color-gray-400);
68
70
  --color-neutral-500: var(--color-gray-500);
69
71
  --color-neutral-600: var(--color-gray-600);
70
72
  --color-neutral-700: var(--color-gray-700);
@@ -101,6 +103,7 @@
101
103
  --color-neutral-100: var(--color-gray-100);
102
104
  --color-neutral-200: var(--color-gray-200);
103
105
  --color-neutral-300: var(--color-gray-300);
106
+ --color-neutral-400: var(--color-gray-400);
104
107
  --color-neutral-500: var(--color-gray-500);
105
108
  --color-neutral-600: var(--color-gray-600);
106
109
  --color-neutral-700: var(--color-gray-700);
@@ -133,20 +136,20 @@
133
136
  --color-primary-700: var(--color-k-green-700);
134
137
  --color-primary-800: var(--color-k-green-800);
135
138
  --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);
139
+ --color-neutral-50: var(--color-gray-50);
140
+ --color-neutral-100: var(--color-gray-100);
141
+ --color-neutral-200: var(--color-gray-200);
142
+ --color-neutral-300: var(--color-gray-300);
143
+ --color-neutral-400: var(--color-gray-400);
144
+ --color-neutral-500: var(--color-gray-500);
145
+ --color-neutral-600: var(--color-gray-600);
146
+ --color-neutral-700: var(--color-gray-700);
147
+ --color-neutral-800: var(--color-gray-800);
148
+ --color-neutral-900: var(--color-gray-900);
145
149
  }
146
150
 
147
151
  /* Shared semantic tokens (same across all hues) */
148
152
  :root {
149
- --color-neutral-400: var(--color-gray-400);
150
153
  --color-neutral-white: var(--color-white-1000);
151
154
  --color-neutral-black: var(--color-black-1000);
152
155
  --color-success-100: var(--color-green-100);