@hyvnt/hyvui 0.2.0 → 0.4.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 (181) hide show
  1. package/README.md +294 -253
  2. package/dist/components/ambient/ArcaneVein.svelte +151 -0
  3. package/dist/components/ambient/ArcaneVein.svelte.d.ts +31 -0
  4. package/dist/components/ambient/BrassFiligree.svelte +109 -0
  5. package/dist/components/ambient/BrassFiligree.svelte.d.ts +20 -0
  6. package/dist/components/ambient/CornerBrackets.svelte +91 -87
  7. package/dist/components/ambient/CornerBrackets.svelte.d.ts +8 -0
  8. package/dist/components/ambient/CrystalShard.svelte +151 -0
  9. package/dist/components/ambient/CrystalShard.svelte.d.ts +19 -0
  10. package/dist/components/ambient/DataStream.svelte +117 -94
  11. package/dist/components/ambient/DataStream.svelte.d.ts +6 -0
  12. package/dist/components/ambient/EnergyArc.svelte +189 -0
  13. package/dist/components/ambient/EnergyArc.svelte.d.ts +32 -0
  14. package/dist/components/ambient/GlyphMark.svelte +75 -69
  15. package/dist/components/ambient/GlyphMark.svelte.d.ts +6 -0
  16. package/dist/components/ambient/GridOverlay.svelte +34 -28
  17. package/dist/components/ambient/GridOverlay.svelte.d.ts +8 -0
  18. package/dist/components/ambient/HexGrid.svelte +119 -0
  19. package/dist/components/ambient/HexGrid.svelte.d.ts +21 -0
  20. package/dist/components/ambient/ParallaxLayer.svelte +45 -41
  21. package/dist/components/ambient/ParallaxLayer.svelte.d.ts +7 -0
  22. package/dist/components/ambient/ScanBand.svelte +103 -91
  23. package/dist/components/ambient/ScanBand.svelte.d.ts +8 -0
  24. package/dist/components/ambient/ShimmerCloud.svelte +180 -0
  25. package/dist/components/ambient/ShimmerCloud.svelte.d.ts +21 -0
  26. package/dist/components/ambient/SignalRing.svelte +106 -100
  27. package/dist/components/ambient/SignalRing.svelte.d.ts +6 -0
  28. package/dist/components/ambient/ThreadLine.svelte +78 -78
  29. package/dist/components/ambient/ThreadLine.svelte.d.ts +7 -0
  30. package/dist/components/ambient/Vignette.svelte +30 -26
  31. package/dist/components/ambient/Vignette.svelte.d.ts +6 -0
  32. package/dist/components/depth/DepthLayer.svelte +30 -27
  33. package/dist/components/depth/DepthLayer.svelte.d.ts +8 -0
  34. package/dist/components/depth/DepthStage.svelte +67 -62
  35. package/dist/components/depth/DepthStage.svelte.d.ts +8 -0
  36. package/dist/components/depth/FloatCard.svelte +129 -104
  37. package/dist/components/depth/FloatCard.svelte.d.ts +8 -0
  38. package/dist/components/depth/HorizonGrid.svelte +241 -160
  39. package/dist/components/depth/HorizonGrid.svelte.d.ts +9 -0
  40. package/dist/components/depth/Plinth.svelte +62 -57
  41. package/dist/components/depth/Plinth.svelte.d.ts +10 -0
  42. package/dist/components/display/Avatar.svelte +69 -69
  43. package/dist/components/display/Avatar.svelte.d.ts +5 -0
  44. package/dist/components/display/Badge.svelte +75 -63
  45. package/dist/components/display/Badge.svelte.d.ts +6 -0
  46. package/dist/components/display/Blockquote.svelte +35 -34
  47. package/dist/components/display/Blockquote.svelte.d.ts +4 -0
  48. package/dist/components/display/CodeBlock.svelte +76 -76
  49. package/dist/components/display/CodeBlock.svelte.d.ts +5 -0
  50. package/dist/components/display/MetricCard.svelte +100 -83
  51. package/dist/components/display/MetricCard.svelte.d.ts +6 -0
  52. package/dist/components/display/Table.svelte +106 -104
  53. package/dist/components/display/Table.svelte.d.ts +7 -0
  54. package/dist/components/feedback/Alert.svelte +95 -76
  55. package/dist/components/feedback/Alert.svelte.d.ts +6 -0
  56. package/dist/components/feedback/EmptyState.svelte +75 -68
  57. package/dist/components/feedback/EmptyState.svelte.d.ts +7 -0
  58. package/dist/components/feedback/ErrorState.svelte +78 -73
  59. package/dist/components/feedback/ErrorState.svelte.d.ts +5 -0
  60. package/dist/components/feedback/Skeleton.svelte +58 -52
  61. package/dist/components/feedback/Skeleton.svelte.d.ts +6 -0
  62. package/dist/components/feedback/StatusDot.svelte +84 -54
  63. package/dist/components/feedback/StatusDot.svelte.d.ts +6 -0
  64. package/dist/components/feedback/StatusLine.svelte +128 -122
  65. package/dist/components/feedback/StatusLine.svelte.d.ts +6 -0
  66. package/dist/components/feedback/Toast.svelte +144 -136
  67. package/dist/components/feedback/Toast.svelte.d.ts +10 -0
  68. package/dist/components/inputs/Button.svelte +310 -237
  69. package/dist/components/inputs/Button.svelte.d.ts +8 -0
  70. package/dist/components/inputs/Checkbox.svelte +109 -105
  71. package/dist/components/inputs/Checkbox.svelte.d.ts +5 -0
  72. package/dist/components/inputs/FileUpload.svelte +170 -163
  73. package/dist/components/inputs/FileUpload.svelte.d.ts +5 -0
  74. package/dist/components/inputs/Input.svelte +153 -147
  75. package/dist/components/inputs/Input.svelte.d.ts +7 -0
  76. package/dist/components/inputs/Select.svelte +164 -150
  77. package/dist/components/inputs/Select.svelte.d.ts +8 -0
  78. package/dist/components/inputs/Textarea.svelte +160 -154
  79. package/dist/components/inputs/Textarea.svelte.d.ts +6 -0
  80. package/dist/components/inputs/Toggle.svelte +125 -120
  81. package/dist/components/inputs/Toggle.svelte.d.ts +5 -0
  82. package/dist/components/layout/Card.svelte +81 -76
  83. package/dist/components/layout/Card.svelte.d.ts +11 -0
  84. package/dist/components/layout/Drawer.svelte +140 -109
  85. package/dist/components/layout/Drawer.svelte.d.ts +6 -0
  86. package/dist/components/layout/Grid.svelte +128 -43
  87. package/dist/components/layout/Grid.svelte.d.ts +18 -2
  88. package/dist/components/layout/Modal.svelte +191 -159
  89. package/dist/components/layout/Modal.svelte.d.ts +10 -0
  90. package/dist/components/layout/Panel.svelte +58 -54
  91. package/dist/components/layout/Panel.svelte.d.ts +9 -0
  92. package/dist/components/layout/Popover.svelte +188 -67
  93. package/dist/components/layout/Popover.svelte.d.ts +19 -1
  94. package/dist/components/layout/Stack.svelte +65 -53
  95. package/dist/components/layout/Stack.svelte.d.ts +12 -0
  96. package/dist/components/navigation/Breadcrumb.svelte +78 -73
  97. package/dist/components/navigation/Breadcrumb.svelte.d.ts +8 -0
  98. package/dist/components/navigation/DropdownMenu.svelte +179 -124
  99. package/dist/components/navigation/DropdownMenu.svelte.d.ts +24 -2
  100. package/dist/components/navigation/SidebarNav.svelte +96 -90
  101. package/dist/components/navigation/SidebarNav.svelte.d.ts +9 -0
  102. package/dist/components/navigation/Tabs.svelte +106 -86
  103. package/dist/components/navigation/Tabs.svelte.d.ts +8 -0
  104. package/dist/components/navigation/Topbar.svelte +94 -85
  105. package/dist/components/navigation/Topbar.svelte.d.ts +9 -0
  106. package/dist/components/patterns/ActionBar.svelte +82 -76
  107. package/dist/components/patterns/ActionBar.svelte.d.ts +10 -0
  108. package/dist/components/patterns/ChapterMark.svelte +152 -0
  109. package/dist/components/patterns/ChapterMark.svelte.d.ts +19 -0
  110. package/dist/components/patterns/ConfirmDialog.svelte +75 -64
  111. package/dist/components/patterns/ConfirmDialog.svelte.d.ts +12 -0
  112. package/dist/components/patterns/DepthPortal.svelte +123 -0
  113. package/dist/components/patterns/DepthPortal.svelte.d.ts +24 -0
  114. package/dist/components/patterns/Manifesto.svelte +171 -0
  115. package/dist/components/patterns/Manifesto.svelte.d.ts +25 -0
  116. package/dist/components/patterns/PageHeader.svelte +117 -114
  117. package/dist/components/patterns/PageHeader.svelte.d.ts +8 -0
  118. package/dist/components/patterns/PullQuote.svelte +145 -0
  119. package/dist/components/patterns/PullQuote.svelte.d.ts +23 -0
  120. package/dist/components/patterns/RegisterSwitcher.svelte +132 -0
  121. package/dist/components/patterns/RegisterSwitcher.svelte.d.ts +21 -0
  122. package/dist/components/patterns/SearchBar.svelte +59 -59
  123. package/dist/components/patterns/SearchBar.svelte.d.ts +5 -0
  124. package/dist/components/patterns/ShowcaseFrame.svelte +117 -0
  125. package/dist/components/patterns/ShowcaseFrame.svelte.d.ts +28 -0
  126. package/dist/components/patterns/TerminalBoot.svelte +118 -104
  127. package/dist/components/patterns/TerminalBoot.svelte.d.ts +12 -0
  128. package/dist/components/primitives/Divider.svelte +56 -29
  129. package/dist/components/primitives/Divider.svelte.d.ts +5 -0
  130. package/dist/components/primitives/Icon.svelte +53 -49
  131. package/dist/components/primitives/Icon.svelte.d.ts +9 -0
  132. package/dist/components/primitives/Label.svelte +45 -44
  133. package/dist/components/primitives/Label.svelte.d.ts +6 -0
  134. package/dist/components/primitives/Surface.svelte +154 -87
  135. package/dist/components/primitives/Surface.svelte.d.ts +7 -0
  136. package/dist/components/primitives/Text.svelte +130 -98
  137. package/dist/components/primitives/Text.svelte.d.ts +7 -0
  138. package/dist/components/scenes/ArchiveScene.svelte +102 -95
  139. package/dist/components/scenes/ArchiveScene.svelte.d.ts +17 -1
  140. package/dist/components/scenes/DepthScene.svelte +128 -0
  141. package/dist/components/scenes/DepthScene.svelte.d.ts +36 -0
  142. package/dist/components/scenes/LogScene.svelte +86 -77
  143. package/dist/components/scenes/LogScene.svelte.d.ts +14 -0
  144. package/dist/components/scenes/NarrativeScene.svelte +100 -92
  145. package/dist/components/scenes/NarrativeScene.svelte.d.ts +9 -0
  146. package/dist/components/scenes/ReadoutScene.svelte +131 -107
  147. package/dist/components/scenes/ReadoutScene.svelte.d.ts +14 -1
  148. package/dist/components/scenes/StageScene.svelte +111 -104
  149. package/dist/components/scenes/StageScene.svelte.d.ts +14 -0
  150. package/dist/components/system/AppShell.svelte +62 -0
  151. package/dist/components/system/AppShell.svelte.d.ts +32 -0
  152. package/dist/examples/ArcaneShard.svelte +364 -0
  153. package/dist/examples/ArcaneShard.svelte.d.ts +3 -0
  154. package/dist/examples/FieldReport.svelte +226 -223
  155. package/dist/examples/HextechForge.svelte +324 -0
  156. package/dist/examples/HextechForge.svelte.d.ts +3 -0
  157. package/dist/examples/ObservationDeck.svelte +333 -317
  158. package/dist/examples/SignalLost.svelte +191 -191
  159. package/dist/index.d.ts +15 -1
  160. package/dist/index.js +16 -1
  161. package/dist/styles.css +115 -0
  162. package/dist/system/actions/echo.js +21 -12
  163. package/dist/system/actions/resolve.js +28 -14
  164. package/dist/system/actions/reveal.js +2 -2
  165. package/dist/system/actions/surface.js +12 -2
  166. package/dist/system/depth/depth.css +49 -49
  167. package/dist/system/depth/depth.js +1 -1
  168. package/dist/system/expressions.css +80 -80
  169. package/dist/system/override-template.css +72 -72
  170. package/dist/system/register.css +74 -74
  171. package/dist/system/register.d.ts +1 -1
  172. package/dist/system/register.js +5 -1
  173. package/dist/system/scroll-lock.d.ts +6 -0
  174. package/dist/system/scroll-lock.js +23 -0
  175. package/dist/tokens/arcane.css +96 -0
  176. package/dist/tokens/hextech.css +96 -0
  177. package/dist/tokens/tokens.css +102 -86
  178. package/dist/tokens/tokens.d.ts +41 -0
  179. package/dist/tokens/tokens.js +44 -3
  180. package/dist/utils/motion.js +1 -1
  181. package/package.json +71 -60
package/dist/system/register.css CHANGED
@@ -1,74 +1,74 @@
1
- /* ── register system ──────────────────────────────────────────────────── */
2
- /* registers shift the weight distribution of the design. no new colors */
3
- /* or fonts — the same gold, teal, ET Book, and IBM Plex Mono, but their */
4
- /* relative presence changes. */
5
- /* */
6
- /* apply: <body data-register="field-notebook"> */
7
- /* or: applyRegister('field-notebook') */
8
-
9
- /* ── base fallbacks (no register declared) ───────────────────────────── */
10
- :root {
11
- --reg-font-primary: var(--font-body);
12
- --reg-font-ui: var(--font-mono);
13
- --reg-heading-tracking: -0.04em;
14
- --reg-heading-lh: 0.94;
15
- --reg-body-size: 1rem;
16
- --reg-label-size: 0.68rem;
17
- --reg-label-tracking: 0.14em;
18
- --reg-surface-opacity: 0.8;
19
- --reg-ornament-opacity: 0.14;
20
- --reg-accent-weight: 1;
21
- --reg-signal-weight: 1;
22
- --reg-spacing-scale: 1;
23
- }
24
-
25
- /* ── register: field-notebook ────────────────────────────────────────── */
26
- /* editorial, warm, serif-forward. for portfolios, narrative pages, about */
27
- [data-register='field-notebook'] {
28
- --reg-font-primary: var(--font-body);
29
- --reg-font-ui: var(--font-mono);
30
- --reg-heading-tracking: -0.05em;
31
- --reg-heading-lh: 0.92;
32
- --reg-body-size: 1.18rem;
33
- --reg-label-size: 0.7rem;
34
- --reg-label-tracking: 0.14em;
35
- --reg-surface-opacity: 0.72;
36
- --reg-ornament-opacity: 0.18;
37
- --reg-accent-weight: 1;
38
- --reg-signal-weight: 0.6;
39
- --reg-spacing-scale: 1.15;
40
- }
41
-
42
- /* ── register: mission-control ───────────────────────────────────────── */
43
- /* dense, precise, mono-forward. for dashboards, tools, data interfaces */
44
- [data-register='mission-control'] {
45
- --reg-font-primary: var(--font-mono);
46
- --reg-font-ui: var(--font-mono);
47
- --reg-heading-tracking: -0.02em;
48
- --reg-heading-lh: 1;
49
- --reg-body-size: 0.9rem;
50
- --reg-label-size: 0.65rem;
51
- --reg-label-tracking: 0.18em;
52
- --reg-surface-opacity: 0.92;
53
- --reg-ornament-opacity: 0.08;
54
- --reg-accent-weight: 0.7;
55
- --reg-signal-weight: 1;
56
- --reg-spacing-scale: 0.9;
57
- }
58
-
59
- /* ── register: archive ───────────────────────────────────────────────── */
60
- /* cool, ordered, muted. for galleries, indexes, reference collections */
61
- [data-register='archive'] {
62
- --reg-font-primary: var(--font-body);
63
- --reg-font-ui: var(--font-mono);
64
- --reg-heading-tracking: -0.03em;
65
- --reg-heading-lh: 0.96;
66
- --reg-body-size: 1rem;
67
- --reg-label-size: 0.66rem;
68
- --reg-label-tracking: 0.16em;
69
- --reg-surface-opacity: 0.55;
70
- --reg-ornament-opacity: 0.04;
71
- --reg-accent-weight: 0.4;
72
- --reg-signal-weight: 0.4;
73
- --reg-spacing-scale: 1.3;
74
- }
1
+ /* ── register system ──────────────────────────────────────────────────── */
2
+ /* registers shift the weight distribution of the design. no new colors */
3
+ /* or fonts — the same gold, teal, ET Book, and IBM Plex Mono, but their */
4
+ /* relative presence changes. */
5
+ /* */
6
+ /* apply: <body data-register="field-notebook"> */
7
+ /* or: applyRegister('field-notebook') */
8
+
9
+ /* ── base fallbacks (no register declared) ───────────────────────────── */
10
+ :root {
11
+ --reg-font-primary: var(--font-body);
12
+ --reg-font-ui: var(--font-mono);
13
+ --reg-heading-tracking: -0.04em;
14
+ --reg-heading-lh: 0.94;
15
+ --reg-body-size: 1rem;
16
+ --reg-label-size: 0.68rem;
17
+ --reg-label-tracking: 0.14em;
18
+ --reg-surface-opacity: 0.8;
19
+ --reg-ornament-opacity: 0.14;
20
+ --reg-accent-weight: 1;
21
+ --reg-signal-weight: 1;
22
+ --reg-spacing-scale: 1;
23
+ }
24
+
25
+ /* ── register: field-notebook ────────────────────────────────────────── */
26
+ /* editorial, warm, serif-forward. for portfolios, narrative pages, about */
27
+ [data-register='field-notebook'] {
28
+ --reg-font-primary: var(--font-body);
29
+ --reg-font-ui: var(--font-mono);
30
+ --reg-heading-tracking: -0.05em;
31
+ --reg-heading-lh: 0.92;
32
+ --reg-body-size: 1.18rem;
33
+ --reg-label-size: 0.7rem;
34
+ --reg-label-tracking: 0.14em;
35
+ --reg-surface-opacity: 0.72;
36
+ --reg-ornament-opacity: 0.18;
37
+ --reg-accent-weight: 1;
38
+ --reg-signal-weight: 0.6;
39
+ --reg-spacing-scale: 1.15;
40
+ }
41
+
42
+ /* ── register: mission-control ───────────────────────────────────────── */
43
+ /* dense, precise, mono-forward. for dashboards, tools, data interfaces */
44
+ [data-register='mission-control'] {
45
+ --reg-font-primary: var(--font-mono);
46
+ --reg-font-ui: var(--font-mono);
47
+ --reg-heading-tracking: -0.02em;
48
+ --reg-heading-lh: 1;
49
+ --reg-body-size: 0.9rem;
50
+ --reg-label-size: 0.65rem;
51
+ --reg-label-tracking: 0.18em;
52
+ --reg-surface-opacity: 0.92;
53
+ --reg-ornament-opacity: 0.08;
54
+ --reg-accent-weight: 0.7;
55
+ --reg-signal-weight: 1;
56
+ --reg-spacing-scale: 0.9;
57
+ }
58
+
59
+ /* ── register: archive ───────────────────────────────────────────────── */
60
+ /* cool, ordered, muted. for galleries, indexes, reference collections */
61
+ [data-register='archive'] {
62
+ --reg-font-primary: var(--font-body);
63
+ --reg-font-ui: var(--font-mono);
64
+ --reg-heading-tracking: -0.03em;
65
+ --reg-heading-lh: 0.96;
66
+ --reg-body-size: 1rem;
67
+ --reg-label-size: 0.66rem;
68
+ --reg-label-tracking: 0.16em;
69
+ --reg-surface-opacity: 0.55;
70
+ --reg-ornament-opacity: 0.04;
71
+ --reg-accent-weight: 0.4;
72
+ --reg-signal-weight: 0.4;
73
+ --reg-spacing-scale: 1.3;
74
+ }
package/dist/system/register.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type Register = 'field-notebook' | 'mission-control' | 'archive';
1
+ export type Register = 'field-notebook' | 'mission-control' | 'archive' | 'hextech' | 'arcane';
2
2
  /**
3
3
  * Applies a register to an element by setting data-register.
4
4
  * Call with a DOM element reference or 'body' to set globally.
package/dist/system/register.js CHANGED
@@ -3,6 +3,8 @@
3
3
  * Call with a DOM element reference or 'body' to set globally.
4
4
  */
5
5
  export function applyRegister(register, target = 'body') {
6
+ if (typeof document === 'undefined')
7
+ return;
6
8
  const el = target === 'body' ? document.body : target;
7
9
  el.dataset.register = register;
8
10
  }
@@ -10,7 +12,9 @@ export function applyRegister(register, target = 'body') {
10
12
  * Removes the register from an element, restoring default behavior.
11
13
  */
12
14
  export function clearRegister(target = 'body') {
15
+ if (typeof document === 'undefined')
16
+ return;
13
17
  const el = target === 'body' ? document.body : target;
14
18
  delete el.dataset.register;
15
19
  }
16
- export const registers = ['field-notebook', 'mission-control', 'archive'];
20
+ export const registers = ['field-notebook', 'mission-control', 'archive', 'hextech', 'arcane'];
package/dist/system/scroll-lock.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Locks document scrolling (ref-counted).
3
+ *
4
+ * Returns an unlock function. Safe to call in SSR (no-op).
5
+ */
6
+ export declare function lockScroll(): () => void;
package/dist/system/scroll-lock.js ADDED
@@ -0,0 +1,23 @@
1
+ let lockCount = 0;
2
+ let prevOverflow = null;
3
+ /**
4
+ * Locks document scrolling (ref-counted).
5
+ *
6
+ * Returns an unlock function. Safe to call in SSR (no-op).
7
+ */
8
+ export function lockScroll() {
9
+ if (typeof document === 'undefined')
10
+ return () => { };
11
+ lockCount += 1;
12
+ if (lockCount === 1) {
13
+ prevOverflow = document.documentElement.style.overflow;
14
+ document.documentElement.style.overflow = 'hidden';
15
+ }
16
+ return () => {
17
+ lockCount = Math.max(0, lockCount - 1);
18
+ if (lockCount !== 0)
19
+ return;
20
+ document.documentElement.style.overflow = prevOverflow ?? '';
21
+ prevOverflow = null;
22
+ };
23
+ }
package/dist/tokens/arcane.css ADDED
@@ -0,0 +1,96 @@
1
+ /* ── arcane register tokens ───────────────────────────────────────────── */
2
+ /* Zaun-unstable. Raw crystal + smoke + organic glow. */
3
+ /* Applied under [data-register='arcane']. */
4
+
5
+ [data-register='arcane'] {
6
+ /* palette — new raw values */
7
+ --arc-void: #0e0818;
8
+ --arc-violet-deep: #2a0e3b;
9
+ --arc-violet: #7b2d8e;
10
+ --arc-magenta: #b845c9;
11
+ --arc-shimmer: #e94cbc;
12
+ --arc-pink-hot: #ff6b9d;
13
+ --arc-tox-green: #7fb069;
14
+ --arc-smoke: #3a3a4e;
15
+ --arc-vein-glow: rgba(184, 69, 201, 0.55);
16
+ --arc-crackle: rgba(233, 76, 188, 0.7);
17
+ --arc-particle: rgba(255, 107, 157, 0.6);
18
+
19
+ /* remap semantic tokens → arcane palette */
20
+ --bg: #0a0614;
21
+ --bg-elev: #130920;
22
+ --bg-elev-soft: #0f071a;
23
+
24
+ --accent: #b845c9;
25
+ --accent-strong: #e94cbc;
26
+ --signal: #7fb069;
27
+
28
+ --line: rgba(184, 69, 201, 0.18);
29
+ --line-strong: rgba(233, 76, 188, 0.3);
30
+
31
+ --status-ok: #7fb069;
32
+ --status-pend: #5a4a6e;
33
+ --status-warn: #e94cbc;
34
+ --status-fail: #ff4060;
35
+
36
+ --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(184, 69, 201, 0.08);
37
+ --shadow-veil: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 80px rgba(184, 69, 201, 0.06);
38
+
39
+ --focus-ring: 0 0 0 1px rgba(233, 76, 188, 0.5), 0 0 0 4px rgba(184, 69, 201, 0.1);
40
+
41
+ --surface-card:
42
+ linear-gradient(135deg, rgba(184, 69, 201, 0.08), transparent 44%),
43
+ linear-gradient(225deg, rgba(233, 76, 188, 0.04), transparent 32%), #0a0614;
44
+ --surface-panel:
45
+ linear-gradient(180deg, rgba(184, 69, 201, 0.1), transparent 22%),
46
+ linear-gradient(135deg, rgba(233, 76, 188, 0.06), #0a0614 44%),
47
+ #07040f;
48
+ --surface-soft:
49
+ linear-gradient(180deg, rgba(184, 69, 201, 0.03), transparent 38%),
50
+ linear-gradient(135deg, rgba(233, 76, 188, 0.04), transparent 50%),
51
+ rgba(10, 6, 20, 0.9);
52
+ --surface-stroke: inset 0 1px 0 rgba(233, 76, 188, 0.07);
53
+
54
+ /* motif tokens */
55
+ --orn-hex-density: 0;
56
+ --orn-vein-intensity: 1;
57
+ --orn-shimmer-rate: 2.4s;
58
+ --orn-pulse-rhythm: cubic-bezier(0.6, 0, 0.4, 1);
59
+ --orn-glow-radius: 20px;
60
+ --orn-glow-color: rgba(184, 69, 201, 0.45);
61
+
62
+ /* register weight distribution */
63
+ --reg-font-primary: var(--font-body);
64
+ --reg-font-ui: var(--font-mono);
65
+ --reg-heading-tracking: -0.04em;
66
+ --reg-heading-lh: 0.94;
67
+ --reg-body-size: 1.12rem;
68
+ --reg-label-size: 0.68rem;
69
+ --reg-label-tracking: 0.13em;
70
+ --reg-surface-opacity: 0.82;
71
+ --reg-ornament-opacity: 0.28;
72
+ --reg-accent-weight: 1.1;
73
+ --reg-signal-weight: 0.7;
74
+ --reg-spacing-scale: 1.08;
75
+
76
+ /* motion — organic, breathing */
77
+ --transition-smooth: 0.42s cubic-bezier(0.6, 0, 0.4, 1);
78
+ --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
79
+ --ease-smooth: cubic-bezier(0.6, 0, 0.4, 1);
80
+ }
81
+
82
+ /* atmospheric background override */
83
+ [data-register='arcane'] body::before,
84
+ body[data-register='arcane']::before {
85
+ background:
86
+ radial-gradient(circle at top, rgba(184, 69, 201, 0.07), transparent 28%),
87
+ radial-gradient(circle at 80% 60%, rgba(233, 76, 188, 0.04), transparent 32%),
88
+ linear-gradient(180deg, #0a0614 0%, #07040f 40%, #050310 100%);
89
+ }
90
+
91
+ /* selection color */
92
+ [data-register='arcane'] ::selection,
93
+ body[data-register='arcane'] ::selection {
94
+ background-color: rgba(184, 69, 201, 0.28);
95
+ color: var(--text);
96
+ }
package/dist/tokens/hextech.css ADDED
@@ -0,0 +1,96 @@
1
+ /* ── hextech register tokens ──────────────────────────────────────────── */
2
+ /* Piltover-refined. Brass + etched glass + blue crystal energy. */
3
+ /* Applied under [data-register='hextech']. */
4
+
5
+ [data-register='hextech'] {
6
+ /* palette — new raw values */
7
+ --htx-cobalt-deep: #0f1f3b;
8
+ --htx-cobalt: #1b3a6e;
9
+ --htx-cobalt-mid: #264f94;
10
+ --htx-cyan-glow: #5dd9f0;
11
+ --htx-cyan-soft: #b8e6f2;
12
+ --htx-cyan-dim: rgba(93, 217, 240, 0.18);
13
+ --htx-brass: #b87333;
14
+ --htx-brass-bright: #d4a574;
15
+ --htx-gold-warm: #f4d77c;
16
+ --htx-glass-edge: rgba(184, 230, 242, 0.18);
17
+ --htx-hex-grid: rgba(93, 217, 240, 0.07);
18
+
19
+ /* remap semantic tokens → hextech palette */
20
+ --bg: #080f1c;
21
+ --bg-elev: #0f1f3b;
22
+ --bg-elev-soft: #0c1828;
23
+
24
+ --accent: #b87333;
25
+ --accent-strong: #d4a574;
26
+ --signal: #5dd9f0;
27
+
28
+ --line: rgba(93, 217, 240, 0.14);
29
+ --line-strong: rgba(93, 217, 240, 0.26);
30
+
31
+ --status-ok: #5dd9f0;
32
+ --status-pend: #6b7a8a;
33
+ --status-warn: #d4a574;
34
+ --status-fail: #c05040;
35
+
36
+ --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(93, 217, 240, 0.06);
37
+ --shadow-veil: 0 40px 120px rgba(0, 0, 0, 0.55), 0 0 60px rgba(93, 217, 240, 0.04);
38
+
39
+ --focus-ring: 0 0 0 1px rgba(93, 217, 240, 0.4), 0 0 0 4px rgba(93, 217, 240, 0.08);
40
+
41
+ --surface-card:
42
+ linear-gradient(135deg, rgba(93, 217, 240, 0.06), transparent 44%),
43
+ linear-gradient(180deg, rgba(184, 115, 51, 0.06), transparent 30%), #080f1c;
44
+ --surface-panel:
45
+ linear-gradient(180deg, rgba(93, 217, 240, 0.09), transparent 22%),
46
+ linear-gradient(135deg, rgba(184, 115, 51, 0.07), #080f1c 44%),
47
+ #060d18;
48
+ --surface-soft:
49
+ linear-gradient(180deg, rgba(93, 217, 240, 0.025), transparent 38%),
50
+ linear-gradient(135deg, rgba(184, 115, 51, 0.04), transparent 50%),
51
+ rgba(8, 15, 28, 0.9);
52
+ --surface-stroke: inset 0 1px 0 rgba(93, 217, 240, 0.06);
53
+
54
+ /* motif tokens */
55
+ --orn-hex-density: 1;
56
+ --orn-vein-intensity: 0;
57
+ --orn-shimmer-rate: 4s;
58
+ --orn-pulse-rhythm: cubic-bezier(0.16, 1, 0.3, 1);
59
+ --orn-glow-radius: 12px;
60
+ --orn-glow-color: rgba(93, 217, 240, 0.35);
61
+
62
+ /* register weight distribution */
63
+ --reg-font-primary: var(--font-body);
64
+ --reg-font-ui: var(--font-mono);
65
+ --reg-heading-tracking: -0.05em;
66
+ --reg-heading-lh: 0.93;
67
+ --reg-body-size: 1.08rem;
68
+ --reg-label-size: 0.67rem;
69
+ --reg-label-tracking: 0.16em;
70
+ --reg-surface-opacity: 0.88;
71
+ --reg-ornament-opacity: 0.22;
72
+ --reg-accent-weight: 0.8;
73
+ --reg-signal-weight: 1.2;
74
+ --reg-spacing-scale: 1.05;
75
+
76
+ /* motion — mechanical, precise */
77
+ --transition-smooth: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
78
+ --transition-fast: 0.14s cubic-bezier(0.4, 0, 0.2, 1);
79
+ --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
80
+ }
81
+
82
+ /* atmospheric background override */
83
+ [data-register='hextech'] body::before,
84
+ body[data-register='hextech']::before {
85
+ background:
86
+ radial-gradient(circle at top, rgba(93, 217, 240, 0.05), transparent 28%),
87
+ radial-gradient(circle at 20% 20%, rgba(184, 115, 51, 0.04), transparent 24%),
88
+ linear-gradient(180deg, #080f1c 0%, #060c18 35%, #040810 100%);
89
+ }
90
+
91
+ /* selection color */
92
+ [data-register='hextech'] ::selection,
93
+ body[data-register='hextech'] ::selection {
94
+ background-color: rgba(93, 217, 240, 0.2);
95
+ color: var(--text);
96
+ }
package/dist/tokens/tokens.css CHANGED
@@ -1,86 +1,102 @@
1
- :root {
2
- /* ── backgrounds ─────────────────────────────── */
3
- --bg: #08090b;
4
- --bg-elev: #12151a;
5
- --bg-elev-soft: #0d1014;
6
-
7
- /* ── text ────────────────────────────────────── */
8
- --text: #f0e8da;
9
- --text-soft: #d8cdb9;
10
- --muted: #a79d8b;
11
- --muted-strong: #7e7568;
12
-
13
- /* ── accent ──────────────────────────────────── */
14
- --accent: #c79c57;
15
- --accent-strong: #e2ba74;
16
- --signal: #79a6a3;
17
-
18
- /* ── lines ───────────────────────────────────── */
19
- --line: rgba(186, 157, 108, 0.16);
20
- --line-strong: rgba(198, 166, 112, 0.28);
21
-
22
- /* ── status ──────────────────────────────────── */
23
- --status-ok: #79a6a3;
24
- --status-pend: #8b8476;
25
- --status-warn: #c79c57;
26
- --status-fail: #b66a48;
27
-
28
- /* ── shadow ──────────────────────────────────── */
29
- --shadow-veil: 0 40px 120px rgba(0, 0, 0, 0.45);
30
- --shadow-card: 0 28px 72px rgba(0, 0, 0, 0.34);
31
- --focus-ring: 0 0 0 1px rgba(226, 186, 116, 0.3), 0 0 0 4px rgba(199, 156, 87, 0.08);
32
-
33
- /* ── motion ──────────────────────────────────── */
34
- --transition-smooth: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
35
- --transition-fast: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
36
-
37
- /* ── fonts ───────────────────────────────────── */
38
- --font-body: 'ET Book', 'Iowan Old Style', 'Palatino Linotype', serif;
39
- --font-mono: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
40
-
41
- /* ── spacing (fluid) ─────────────────────────── */
42
- --space-2xs: 0.25rem;
43
- --space-xs: 0.5rem;
44
- --space-sm: 0.75rem;
45
- --space-md: 1rem;
46
- --space-lg: 1.5rem;
47
- --space-xl: 2rem;
48
- --space-2xl: 3rem;
49
- --space-3xl: clamp(3rem, 6vw, 5rem);
50
- --space-scene: clamp(2.25rem, 7vw, 6rem);
51
- --space-card: clamp(1.1rem, 2vw, 1.6rem);
52
- --space-inline: 1rem;
53
- --shell-max: 72rem;
54
- --shell-pad: clamp(1.1rem, 3vw, 2rem);
55
- --section-gap: clamp(1.5rem, 3vw, 2.5rem);
56
-
57
- /* ── radius ──────────────────────────────────── */
58
- --radius-sm: 2px;
59
- --radius-md: 4px;
60
- --radius-lg: 6px;
61
-
62
- /* ── controls ────────────────────────────────── */
63
- --control-height-sm: 2.25rem;
64
- --control-height-md: 2.75rem;
65
- --control-pad-x: 0.9rem;
66
- --control-pad-y: 0.7rem;
67
- --control-gap: 0.5rem;
68
-
69
- /* ── surface gradients ───────────────────────── */
70
- --surface-card: linear-gradient(135deg, rgba(199, 156, 87, 0.08), transparent 44%),
71
- rgba(10, 12, 14, 0.8);
72
- --surface-panel: linear-gradient(180deg, rgba(121, 166, 163, 0.08), transparent 18%),
73
- linear-gradient(135deg, rgba(199, 156, 87, 0.08), rgba(10, 12, 14, 0.82) 42%),
74
- rgba(9, 11, 13, 0.74);
75
- --surface-soft: linear-gradient(180deg, rgba(240, 232, 218, 0.015), transparent 38%),
76
- linear-gradient(135deg, rgba(199, 156, 87, 0.05), transparent 48%),
77
- rgba(11, 13, 16, 0.9);
78
- --surface-stroke: inset 0 1px 0 rgba(240, 232, 218, 0.03);
79
-
80
- /* ── z-index ─────────────────────────────────── */
81
- --z-base: 0;
82
- --z-raised: 10;
83
- --z-overlay: 100;
84
- --z-modal: 200;
85
- --z-toast: 300;
86
- }
1
+ :root {
2
+ /* ── backgrounds ─────────────────────────────── */
3
+ --bg: #08090b;
4
+ --bg-elev: #12151a;
5
+ --bg-elev-soft: #0d1014;
6
+
7
+ /* ── text ────────────────────────────────────── */
8
+ --text: #f0e8da;
9
+ --text-soft: #d8cdb9;
10
+ --muted: #a79d8b;
11
+ --muted-strong: #7e7568;
12
+
13
+ /* ── accent ──────────────────────────────────── */
14
+ --accent: #c79c57;
15
+ --accent-strong: #e2ba74;
16
+ --signal: #79a6a3;
17
+
18
+ /* ── lines ───────────────────────────────────── */
19
+ --line: rgba(186, 157, 108, 0.16);
20
+ --line-strong: rgba(198, 166, 112, 0.28);
21
+
22
+ /* ── status ──────────────────────────────────── */
23
+ --status-ok: #79a6a3;
24
+ --status-pend: #8b8476;
25
+ --status-warn: #c79c57;
26
+ --status-fail: #b66a48;
27
+
28
+ /* ── shadow ──────────────────────────────────── */
29
+ --shadow-veil: 0 40px 120px rgba(0, 0, 0, 0.45);
30
+ --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5);
31
+ --focus-ring: 0 0 0 1px rgba(226, 186, 116, 0.3), 0 0 0 4px rgba(199, 156, 87, 0.08);
32
+
33
+ /* ── motion ──────────────────────────────────── */
34
+ --transition-smooth: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
35
+ --transition-fast: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
36
+ --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
37
+ --ease-fast: cubic-bezier(0.4, 0, 0.2, 1);
38
+
39
+ /* ── fonts ───────────────────────────────────── */
40
+ --font-body: 'ET Book', 'Iowan Old Style', 'Palatino Linotype', serif;
41
+ --font-mono: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
42
+
43
+ /* ── spacing (fluid) ─────────────────────────── */
44
+ --space-2xs: 0.25rem;
45
+ --space-xs: 0.5rem;
46
+ --space-sm: 0.75rem;
47
+ --space-md: 1rem;
48
+ --space-lg: 1.5rem;
49
+ --space-xl: 2rem;
50
+ --space-2xl: 3rem;
51
+ --space-3xl: clamp(3rem, 6vw, 5rem);
52
+ --space-scene: clamp(2.25rem, 7vw, 6rem);
53
+ --space-card: clamp(1.1rem, 2vw, 1.6rem);
54
+ --space-inline: 1rem;
55
+ --shell-max: 72rem;
56
+ --shell-pad: clamp(1.1rem, 3vw, 2rem);
57
+ --section-gap: clamp(1.5rem, 3vw, 2.5rem);
58
+
59
+ /* ── radius ──────────────────────────────────── */
60
+ --radius-sm: 2px;
61
+ --radius-md: 4px;
62
+ --radius-lg: 6px;
63
+
64
+ /* ── controls ────────────────────────────────── */
65
+ --control-height-sm: 2.25rem;
66
+ --control-height-md: 2.75rem;
67
+ --control-pad-x: 0.9rem;
68
+ --control-pad-y: 0.7rem;
69
+ --control-gap: 0.5rem;
70
+
71
+ /* ── surface gradients ───────────────────────── */
72
+ --surface-card:
73
+ linear-gradient(135deg, rgba(199, 156, 87, 0.08), transparent 44%), #0a0c0e;
74
+ --surface-panel:
75
+ linear-gradient(180deg, rgba(121, 166, 163, 0.08), transparent 18%),
76
+ linear-gradient(135deg, rgba(199, 156, 87, 0.08), #0a0c0e 42%),
77
+ #09090d;
78
+ --surface-soft:
79
+ linear-gradient(180deg, rgba(240, 232, 218, 0.015), transparent 38%),
80
+ linear-gradient(135deg, rgba(199, 156, 87, 0.05), transparent 48%), rgba(11, 13, 16, 0.9);
81
+ --surface-stroke: inset 0 1px 0 rgba(240, 232, 218, 0.03);
82
+
83
+ /* ── z-index ─────────────────────────────────── */
84
+ --z-base: 0;
85
+ --z-raised: 10;
86
+ --z-overlay: 100;
87
+ --z-modal: 200;
88
+ --z-toast: 300;
89
+
90
+ /* ── container query thresholds ───────────────── */
91
+ /* Used by components via @container rules. Keep these in rem so they scale
92
+ with user font sizing preferences. */
93
+ --cq-sm: 32rem; /* ~512px */
94
+ --cq-md: 48rem; /* ~768px */
95
+ --cq-lg: 64rem; /* ~1024px */
96
+
97
+ /* ── safe-area convenience ────────────────────── */
98
+ --safe-top: env(safe-area-inset-top);
99
+ --safe-right: env(safe-area-inset-right);
100
+ --safe-bottom: env(safe-area-inset-bottom);
101
+ --safe-left: env(safe-area-inset-left);
102
+ }
package/dist/tokens/tokens.d.ts CHANGED
@@ -23,3 +23,44 @@ export declare const tokens: {
23
23
  readonly fast: "0.16s cubic-bezier(0.4, 0, 0.2, 1)";
24
24
  };
25
25
  };
26
+ /**
27
+ * Typed Tailwind class names for all hyvui token colors.
28
+ * Use these instead of writing class strings by hand to get full IDE autocomplete.
29
+ *
30
+ * @example
31
+ * import { themeClasses } from '@hyvnt/hyvui';
32
+ * // themeClasses.text.accent → 'text-accent'
33
+ * // themeClasses.bg.elevated → 'bg-bg-elev'
34
+ */
35
+ export declare const themeClasses: {
36
+ readonly bg: {
37
+ readonly base: "bg-bg";
38
+ readonly elevated: "bg-bg-elev";
39
+ };
40
+ readonly text: {
41
+ readonly primary: "text-text";
42
+ readonly soft: "text-text-soft";
43
+ readonly muted: "text-muted";
44
+ readonly mutedStrong: "text-muted-strong";
45
+ readonly accent: "text-accent";
46
+ readonly accentStrong: "text-accent-strong";
47
+ readonly signal: "text-signal";
48
+ };
49
+ readonly border: {
50
+ readonly default: "border-line";
51
+ readonly strong: "border-line-strong";
52
+ };
53
+ readonly font: {
54
+ readonly body: "font-body";
55
+ readonly mono: "font-mono";
56
+ };
57
+ readonly shadow: {
58
+ readonly veil: "shadow-veil";
59
+ };
60
+ readonly status: {
61
+ readonly ok: "text-status-ok";
62
+ readonly pend: "text-status-pend";
63
+ readonly warn: "text-status-warn";
64
+ readonly fail: "text-status-fail";
65
+ };
66
+ };