@bergetai/ui 0.9.0 → 0.10.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 (9) hide show
  1. package/README.md +1 -1
  2. package/dist/index.cjs +94 -73
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +2 -59
  5. package/dist/index.d.ts +2 -59
  6. package/dist/index.js +94 -72
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles/index.css +156 -20
  9. package/package.json +2 -1
package/dist/styles/index.css CHANGED
@@ -275,20 +275,81 @@
275
275
  /* ── Section component-scoped tokens ────────────────────────────── */
276
276
  --berget-section-muted-bg: var(--berget-surface-subtlest);
277
277
 
278
- /* ── Button component-scoped tokens ─────────────────────────────── */
279
- /* default (granite-50 bg, granite-950 text) */
280
- --berget-button-default-bg: var(--berget-brand-granite-50);
281
- --berget-button-default-fg: var(--berget-brand-granite-950);
282
- /* primary (moss-400 bg, granite-950 text) */
283
- --berget-button-primary-bg: var(--berget-brand-moss-400);
278
+ /* Button component-scoped tokens (Section B of styles/index.css).
279
+ `dark:` is NOT redefined for this package — it tracks prefers-color-scheme
280
+ (only the keycloak theme sets @custom-variant dark). All theme switching is
281
+ driven by the semantic --berget-* tokens, so variant classes stay free of
282
+ dark: overrides. */
283
+ /* Filled variants use the "tinted glass" model: the fill is the palette
284
+ colour at reduced opacity over the surface, the text is a light (dark
285
+ theme) / dark (light theme) step of the SAME palette. Contrast is
286
+ verified against the composited background (tint over bedrock / slate /
287
+ surface-02 in dark, peak / cloud / surface-01 in light) — see
288
+ Buttons glas ladder in the design notes. Filled buttons must sit on
289
+ standard surface tokens for the composite to be predictable.
290
+ Alpha ramps: rest 20% → hover 30% → active 40% (default is capped at
291
+ 28/32/36 — white-glass text fails AA at 40%). */
292
+ /* default (white glass on dark / ink glass on light) */
293
+ --berget-button-default-bg: var(--berget-brand-granite-800);
294
+ --berget-button-default-border: var(--berget-brand-granite-700);
295
+ --berget-button-default-fg: var(--berget-brand-granite-50);
296
+ --berget-button-default-hover: var(--berget-brand-granite-700);
297
+ --berget-button-default-active: var(--berget-brand-granite-800);
298
+ /* primary (granite fill) */
299
+ --berget-button-primary-bg: var(--berget-brand-granite-100);
284
300
  --berget-button-primary-fg: var(--berget-brand-granite-950);
285
- --berget-button-primary-hover: var(--berget-brand-moss-500);
286
-
287
- /* destructive (muscaria-400 bg, granite-950 text) */
288
- --berget-button-destructive-bg: var(--berget-brand-muscaria-400);
289
- --berget-button-destructive-fg: var(--berget-brand-granite-950);
301
+ --berget-button-primary-hover: var(--berget-brand-granite-50);
302
+ --berget-button-primary-active: var(--berget-brand-granite-100);
303
+
304
+ /* destructive (solid muscaria fill, muscaria-50 text) */
305
+ --berget-button-destructive-bg: var(--berget-brand-muscaria-500);
306
+ --berget-button-destructive-fg: var(--berget-brand-muscaria-50);
307
+ --berget-button-destructive-hover-fg: #ffffff; /* pure white, per design */
308
+ --berget-button-destructive-hover: var(--berget-brand-muscaria-400);
309
+ --berget-button-destructive-active: var(--berget-brand-muscaria-500);
290
310
  /* link */
291
311
  --berget-button-link-fg: var(--berget-brand-moss-400);
312
+ --berget-button-link-hover-fg: var(--berget-brand-moss-300);
313
+
314
+ /* Shared state tokens — theme-aware via --berget-foreground so they
315
+ invert correctly in light mode without per-theme overrides. */
316
+ /* Focus ring: moss-300 on dark, moss-600 on light (both ≥3:1 vs bg, WCAG 2.4.7) */
317
+ --berget-button-focus-ring: var(--berget-brand-moss-300);
318
+ /* Ghost/outline hover + active fills (5% / 10% of the theme foreground) */
319
+ --berget-button-ghost-hover: color-mix(in oklch, var(--berget-foreground) 5%, transparent);
320
+ --berget-button-ghost-active: color-mix(in oklch, var(--berget-foreground) 10%, transparent);
321
+ /* Outline border at rest / hover / active (20% → 35% → 50% foreground) */
322
+ --berget-button-outline-border: color-mix(in oklch, var(--berget-foreground) 25%, transparent);
323
+ --berget-button-outline-border-hover: color-mix(
324
+ in oklch,
325
+ var(--berget-foreground) 40%,
326
+ transparent
327
+ );
328
+ --berget-button-outline-border-active: color-mix(
329
+ in oklch,
330
+ var(--berget-foreground) 55%,
331
+ transparent
332
+ );
333
+ /* Outline text accent: neutral foreground (≥4.5:1 on bg in all states) */
334
+ --berget-button-outline-fg: var(--berget-foreground);
335
+ /* Disabled: variant fill at 8% + half-opacity neutral foreground (≥3:1,
336
+ exempt from AA text contrast per WCAG 1.4.3, still clearly "off") */
337
+ --berget-button-disabled-bg: color-mix(in oklch, var(--berget-foreground) 8%, transparent);
338
+ --berget-button-disabled-fg: color-mix(in oklch, var(--berget-foreground) 50%, transparent);
339
+ --berget-button-disabled-border: color-mix(in oklch, var(--berget-foreground) 15%, transparent);
340
+ /* Per-variant disabled fills keep a hint of the fill hue; neutral variants
341
+ (default, primary) use the shared neutral disabled fill. */
342
+ --berget-button-default-disabled-bg: color-mix(
343
+ in oklch,
344
+ var(--berget-brand-granite-50) 8%,
345
+ transparent
346
+ );
347
+ --berget-button-primary-disabled-bg: var(--berget-button-disabled-bg);
348
+ --berget-button-destructive-disabled-bg: color-mix(
349
+ in oklch,
350
+ var(--berget-brand-muscaria-400) 8%,
351
+ transparent
352
+ );
292
353
 
293
354
  /* ── Table component-scoped tokens ─────────────────────────────── */
294
355
  --berget-table-border: var(--berget-border);
@@ -553,16 +614,68 @@
553
614
  /* ── Section component-scoped tokens ────────────────────────────── */
554
615
  --berget-section-muted-bg: var(--berget-surface-subtlest);
555
616
 
556
- /* ── Button component-scoped tokens ─────────────────────────────── */
557
- --berget-button-default-bg: var(--berget-brand-granite-950);
558
- --berget-button-default-fg: var(--berget-brand-granite-50);
559
- --berget-button-primary-bg: var(--berget-brand-moss-400);
617
+ /* ── Button component-scoped tokens (light) ─────────────────────── */
618
+ /* Filled variants invert to ink glass on the light surface, with dark
619
+ same-palette text (moss-700 / muscaria-700 are the light-theme steps
620
+ that clear AA against the glass at every alpha in the ramp). */
621
+ --berget-button-default-bg: color-mix(in oklch, var(--berget-brand-granite-950) 28%, transparent);
622
+ --berget-button-default-border: var(--berget-brand-granite-700);
623
+ --berget-button-default-fg: var(--berget-brand-granite-950);
624
+ --berget-button-default-hover: color-mix(
625
+ in oklch,
626
+ var(--berget-brand-granite-950) 32%,
627
+ transparent
628
+ );
629
+ --berget-button-default-active: color-mix(
630
+ in oklch,
631
+ var(--berget-brand-granite-950) 28%,
632
+ transparent
633
+ );
634
+ --berget-button-primary-bg: var(--berget-brand-granite-100);
560
635
  --berget-button-primary-fg: var(--berget-brand-granite-950);
561
- --berget-button-primary-hover: var(--berget-brand-moss-500);
562
-
563
- --berget-button-destructive-bg: var(--berget-brand-muscaria-400);
564
- --berget-button-destructive-fg: var(--berget-brand-granite-950);
565
- --berget-button-link-fg: var(--berget-brand-moss-500);
636
+ --berget-button-primary-hover: var(--berget-brand-granite-50);
637
+ --berget-button-primary-active: var(--berget-brand-granite-100);
638
+
639
+ --berget-button-destructive-bg: var(--berget-brand-muscaria-500);
640
+ --berget-button-destructive-fg: var(--berget-brand-muscaria-50);
641
+ --berget-button-destructive-hover-fg: #ffffff; /* pure white, per design */
642
+ --berget-button-destructive-hover: var(--berget-brand-muscaria-400);
643
+ --berget-button-destructive-active: var(--berget-brand-muscaria-500);
644
+ --berget-button-link-fg: var(--berget-brand-moss-600);
645
+ --berget-button-link-hover-fg: var(--berget-brand-moss-700);
646
+
647
+ /* Shared state tokens — foreground-driven, so they follow the inverted
648
+ light palette automatically. Focus ring flips to moss-600 (≥3:1 on
649
+ light surfaces); outline text accent to moss-600 (≥4.5:1, AA). */
650
+ --berget-button-focus-ring: var(--berget-brand-moss-600);
651
+ --berget-button-ghost-hover: color-mix(in oklch, var(--berget-foreground) 5%, transparent);
652
+ --berget-button-ghost-active: color-mix(in oklch, var(--berget-foreground) 10%, transparent);
653
+ --berget-button-outline-border: color-mix(in oklch, var(--berget-foreground) 25%, transparent);
654
+ --berget-button-outline-border-hover: color-mix(
655
+ in oklch,
656
+ var(--berget-foreground) 40%,
657
+ transparent
658
+ );
659
+ --berget-button-outline-border-active: color-mix(
660
+ in oklch,
661
+ var(--berget-foreground) 55%,
662
+ transparent
663
+ );
664
+ --berget-button-outline-fg: var(--berget-foreground);
665
+ --berget-button-disabled-bg: color-mix(in oklch, var(--berget-foreground) 8%, transparent);
666
+ --berget-button-disabled-fg: color-mix(in oklch, var(--berget-foreground) 50%, transparent);
667
+ --berget-button-disabled-border: color-mix(in oklch, var(--berget-foreground) 15%, transparent);
668
+ --berget-button-default-disabled-bg: color-mix(
669
+ in oklch,
670
+ var(--berget-brand-granite-950) 8%,
671
+ transparent
672
+ );
673
+ --berget-button-primary-disabled-bg: var(--berget-button-disabled-bg);
674
+ --berget-button-destructive-disabled-bg: color-mix(
675
+ in oklch,
676
+ var(--berget-brand-muscaria-400) 8%,
677
+ transparent
678
+ );
566
679
 
567
680
  /* ── Table component-scoped tokens ─────────────────────────────── */
568
681
  --berget-table-border: var(--berget-border);
@@ -926,14 +1039,37 @@
926
1039
  Tailwind opacity modifiers (e.g. /90) work. Values are full colours from
927
1040
  Section B; the /90 modifier darkens the token via oklch mixing. */
928
1041
  --color-berget-button-default-bg: var(--berget-button-default-bg);
1042
+ --color-berget-button-default-border: var(--berget-button-default-border);
929
1043
  --color-berget-button-default-fg: var(--berget-button-default-fg);
1044
+ --color-berget-button-default-hover: var(--berget-button-default-hover);
1045
+ --color-berget-button-default-active: var(--berget-button-default-active);
1046
+ --color-berget-button-default-disabled-bg: var(--berget-button-default-disabled-bg);
930
1047
  --color-berget-button-primary-bg: var(--berget-button-primary-bg);
931
1048
  --color-berget-button-primary-fg: var(--berget-button-primary-fg);
932
1049
  --color-berget-button-primary-hover: var(--berget-button-primary-hover);
1050
+ --color-berget-button-primary-active: var(--berget-button-primary-active);
1051
+ --color-berget-button-primary-disabled-bg: var(--berget-button-primary-disabled-bg);
933
1052
 
934
1053
  --color-berget-button-destructive-bg: var(--berget-button-destructive-bg);
935
1054
  --color-berget-button-destructive-fg: var(--berget-button-destructive-fg);
1055
+ --color-berget-button-destructive-hover-fg: var(--berget-button-destructive-hover-fg);
1056
+ --color-berget-button-destructive-hover: var(--berget-button-destructive-hover);
1057
+ --color-berget-button-destructive-active: var(--berget-button-destructive-active);
1058
+ --color-berget-button-destructive-disabled-bg: var(--berget-button-destructive-disabled-bg);
936
1059
  --color-berget-button-link-fg: var(--berget-button-link-fg);
1060
+ --color-berget-button-link-hover-fg: var(--berget-button-link-hover-fg);
1061
+
1062
+ /* Shared button state aliases */
1063
+ --color-berget-button-focus-ring: var(--berget-button-focus-ring);
1064
+ --color-berget-button-ghost-hover: var(--berget-button-ghost-hover);
1065
+ --color-berget-button-ghost-active: var(--berget-button-ghost-active);
1066
+ --color-berget-button-outline-border: var(--berget-button-outline-border);
1067
+ --color-berget-button-outline-border-hover: var(--berget-button-outline-border-hover);
1068
+ --color-berget-button-outline-border-active: var(--berget-button-outline-border-active);
1069
+ --color-berget-button-outline-fg: var(--berget-button-outline-fg);
1070
+ --color-berget-button-disabled-bg: var(--berget-button-disabled-bg);
1071
+ --color-berget-button-disabled-fg: var(--berget-button-disabled-fg);
1072
+ --color-berget-button-disabled-border: var(--berget-button-disabled-border);
937
1073
 
938
1074
  /* Core surface + text aliases */
939
1075
  --color-berget-surface-01: var(--berget-surface-01);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bergetai/ui",
3
- "version": "0.9.0",
3
+ "version": "0.10.0",
4
4
  "description": "Berget Design System - Scandinavian-inspired design system with console aesthetic",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -72,6 +72,7 @@
72
72
  "@types/react": "^19.0.0",
73
73
  "@types/react-dom": "^19.0.0",
74
74
  "@types/three": "^0.184.1",
75
+ "storybook": "^10.4.6",
75
76
  "three": "^0.184.0",
76
77
  "tsup": "^8.3.0",
77
78
  "typescript": "^5.7.0"