@gemboss/ui 0.12.0 → 0.21.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 (43) hide show
  1. package/CHANGELOG.md +395 -1
  2. package/README.md +321 -6
  3. package/catalog/editor.html +611 -0
  4. package/catalog/index.html +3114 -13
  5. package/gemboss-ui.css +3 -4682
  6. package/package.json +16 -4
  7. package/src/app-shell.css +1 -256
  8. package/src/assistant.css +1 -558
  9. package/src/auth.css +1 -606
  10. package/src/board-move.ts +194 -0
  11. package/src/chat-composer.css +1 -110
  12. package/src/chat.css +1 -432
  13. package/src/collections.css +1 -0
  14. package/src/collections.tsx +543 -0
  15. package/src/editor/controls.tsx +206 -0
  16. package/src/editor/css-url.ts +11 -0
  17. package/src/editor/frame.tsx +242 -0
  18. package/src/editor/index.ts +43 -0
  19. package/src/editor/panel.tsx +188 -0
  20. package/src/editor/panes.tsx +44 -0
  21. package/src/editor/swatch.ts +45 -0
  22. package/src/editor-plain.js +1 -0
  23. package/src/editor.css +1 -1099
  24. package/src/gemboss-field.css +1 -112
  25. package/src/gemboss-tokens.css +1 -164
  26. package/src/icons.tsx +2 -0
  27. package/src/index-table.tsx +179 -0
  28. package/src/index.ts +19 -0
  29. package/src/kit-plain.css +1 -483
  30. package/src/kit-plain.js +1 -440
  31. package/src/menu-layer.ts +87 -0
  32. package/src/menu.tsx +28 -2
  33. package/src/portal.css +1 -139
  34. package/src/reactions-data.ts +59 -0
  35. package/src/reactions.css +1 -0
  36. package/src/reactions.tsx +139 -0
  37. package/src/resource-list-select.tsx +72 -0
  38. package/src/segmented-click.ts +20 -0
  39. package/src/segmented.tsx +98 -0
  40. package/src/selection.tsx +78 -0
  41. package/src/shell.css +1 -1079
  42. package/src/theme-dark.css +1 -66
  43. package/src/ui.css +1 -610
package/src/theme-dark.css CHANGED
@@ -1,66 +1 @@
1
- /* ═══ Dark palette — @gemboss/ui 0.7.2 ═══════════════════════════════════════════════════════════════
2
- Split out of portal.css (04/10/2026). `ThemeToggle` / `themeScript` set data-theme on <html>, and this
3
- file turns every --gemboss-* colour dark under it. It lives apart so that a surface which takes only
4
- the leaderboard (gemboss-tokens.css + portal.css) does not inherit it: GemCommunity sets
5
- data-theme="dark" for its own sign-in pages and remembers it, and the rule
6
- `:root[data-theme="dark"] body` here outranks its body rule, so a member who once picked dark there
7
- would get a dark page behind light cards. gemboss-ui.css still carries this file. */
8
- /* Dark palette. `ThemeToggle` / `themeScript` set data-theme on <html>; a surface without them stays
9
- light. Only colours change: the components above and every kit class read these tokens. */
10
- :root[data-theme="dark"] {
11
- color-scheme: dark;
12
- --gemboss-primary: #f2f3f5;
13
- --gemboss-primary-dark: #ffffff;
14
- --gemboss-primary-soft: #23242a;
15
- --gemboss-on-primary: #0d0d12;
16
- --gemboss-accent: #7c84ff;
17
- --gemboss-accent-strong: #a3a9ff;
18
- --gemboss-accent-soft: #1f2140;
19
- --gemboss-text-strong: #f2f3f5;
20
- --gemboss-text: #e3e4e8;
21
- --gemboss-text-muted: #9a9ca6;
22
- --gemboss-surface: #16171d;
23
- --gemboss-canvas: #0d0d12;
24
- --gemboss-app-bg: #0d0d12;
25
- --gemboss-rail-bg: #0d0d12;
26
- --gemboss-panel-bg: #16171d;
27
- --gemboss-topbar-bg: rgba(13, 13, 18, 0.96);
28
- --gemboss-nav-bg: #0d0d12;
29
- --gemboss-nav-hover: rgba(255, 255, 255, 0.06);
30
- --gemboss-divider: #2a2b33;
31
- --gemboss-divider-soft: #22232a;
32
- --gemboss-hover: #22232b;
33
- --gemboss-active-bg: #262833;
34
- --gemboss-active-fg: #f2f3f5;
35
- --gemboss-field-bg: #121318;
36
- --gemboss-field-bg-hover: #17181e;
37
- --gemboss-field-ink: #e3e4e8;
38
- --gemboss-field-placeholder: #8a8c96;
39
- --gemboss-field-line: #3a3c46;
40
- --gemboss-field-line-hover: #50525e;
41
- --gemboss-field-line-active: #c9cbd3;
42
- --gemboss-chip-ink: #d6d8de;
43
- --gemboss-chip-line: #3a3c46;
44
- --gemboss-chip-line-hover: #50525e;
45
- --gemboss-chip-bg-hover: #22232b;
46
- --gemboss-success: #34c38f;
47
- --gemboss-success-strong: #5fd6a8;
48
- --gemboss-success-soft: #13291f;
49
- --gemboss-success-border: #22533e;
50
- --gemboss-warning: #e0b341;
51
- --gemboss-warning-soft: #2b2412;
52
- --gemboss-warning-border: #5a4a1d;
53
- --gemboss-danger: #ff6b5a;
54
- --gemboss-danger-strong: #ff8a7c;
55
- --gemboss-danger-soft: #2e1714;
56
- --gemboss-danger-border: #5c2a24;
57
- --ui-accent-fg: #0d0d12;
58
- --ui-warning-fg: #e8c063;
59
- --ui-card-shadow: none; /* a dark drop under a dark card is noise */
60
- --gb-brand-ink: #f2f3f5;
61
- }
62
- /* Avatar initials in dark: the tone's light end, so the text clears 4.5:1 on its tinted disc. */
63
- :root[data-theme="dark"] .gb-avatar[data-tone] { background: color-mix(in srgb, var(--gb-tone) 30%, #16171d); color: color-mix(in srgb, var(--gb-tone) 35%, #ffffff); }
64
- :root[data-theme="dark"] body { background: var(--gemboss-app-bg); color: var(--gemboss-text); }
65
- :root[data-theme="dark"] .gb-leaderboard-row.is-first .gb-leaderboard-value,
66
- :root[data-theme="dark"] .gb-podium-slot--1 .gb-podium-value { color: #e0b341; }
1
+ :root[data-theme=dark]{color-scheme:dark;--gemboss-primary: #f2f3f5;--gemboss-primary-dark: #ffffff;--gemboss-primary-soft: #23242a;--gemboss-on-primary: #0d0d12;--gemboss-accent: #7c84ff;--gemboss-accent-strong: #a3a9ff;--gemboss-accent-soft: #1f2140;--gemboss-text-strong: #f2f3f5;--gemboss-text: #e3e4e8;--gemboss-text-muted: #9a9ca6;--gemboss-surface: #16171d;--gemboss-canvas: #0d0d12;--gemboss-app-bg: #0d0d12;--gemboss-rail-bg: #0d0d12;--gemboss-panel-bg: #16171d;--gemboss-topbar-bg: rgba(13, 13, 18, .96);--gemboss-nav-bg: #0d0d12;--gemboss-nav-hover: rgba(255, 255, 255, .06);--gemboss-divider: #2a2b33;--gemboss-divider-soft: #22232a;--gemboss-hover: #22232b;--gemboss-active-bg: #262833;--gemboss-active-fg: #f2f3f5;--gemboss-field-bg: #121318;--gemboss-field-bg-hover: #17181e;--gemboss-field-ink: #e3e4e8;--gemboss-field-placeholder: #8a8c96;--gemboss-field-line: #3a3c46;--gemboss-field-line-hover: #50525e;--gemboss-field-line-active: #c9cbd3;--gemboss-chip-ink: #d6d8de;--gemboss-chip-line: #3a3c46;--gemboss-chip-line-hover: #50525e;--gemboss-chip-bg-hover: #22232b;--gemboss-success: #34c38f;--gemboss-success-strong: #5fd6a8;--gemboss-success-soft: #13291f;--gemboss-success-border: #22533e;--gemboss-warning: #e0b341;--gemboss-warning-soft: #2b2412;--gemboss-warning-border: #5a4a1d;--gemboss-danger: #ff6b5a;--gemboss-danger-strong: #ff8a7c;--gemboss-danger-soft: #2e1714;--gemboss-danger-border: #5c2a24;--ui-accent-fg: #0d0d12;--ui-warning-fg: #e8c063;--ui-card-shadow: none;--gb-brand-ink: #f2f3f5}:root[data-theme=dark] .gb-avatar[data-tone]{background:color-mix(in srgb,var(--gb-tone) 30%,#16171d);color:color-mix(in srgb,var(--gb-tone) 35%,#ffffff)}:root[data-theme=dark] body{background:var(--gemboss-app-bg);color:var(--gemboss-text)}:root[data-theme=dark] .gb-leaderboard-row.is-first .gb-leaderboard-value,:root[data-theme=dark] .gb-podium-slot--1 .gb-podium-value{color:#e0b341}