@nexa-stack/framework 1.0.0 → 1.1.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 (133) hide show
  1. package/README.md +15 -3
  2. package/package.json +22 -5
  3. package/packages/server/src/router.ts +36 -12
  4. package/public/assets/blog-CGOdzgkO.js +1 -0
  5. package/public/assets/blog-ML7LFtff.js +1 -0
  6. package/public/assets/components-B_D1ccvJ.js +50 -0
  7. package/public/assets/components-C67m2tNE.js +1 -0
  8. package/public/assets/components-DCNIrNdJ.js +50 -0
  9. package/public/assets/components-DZ9oc9zI.js +1 -0
  10. package/public/assets/contact-CAfovn36.js +1 -0
  11. package/public/assets/contact-bMUqmce3.js +1 -0
  12. package/public/assets/docs-B92Otuxs.js +20 -0
  13. package/public/assets/docs-BGOHuCe3.js +20 -0
  14. package/public/assets/docs-BUkg7Pd2.css +1 -0
  15. package/public/assets/echarts-mount-DdBiYEc1.js +19 -0
  16. package/public/assets/echarts-mount-kJrXh_za.js +19 -0
  17. package/public/assets/echarts-nexa-BsAEVjT0.js +1 -0
  18. package/public/assets/integration-BNpFB3SL.js +1 -0
  19. package/public/assets/integration-Br6tmvWh.js +1 -0
  20. package/public/assets/integration-D7vdPco_.js +1 -0
  21. package/public/assets/main-BBkehs0N.js +1 -0
  22. package/public/assets/main-Cx_-Fq0O.css +1 -0
  23. package/public/assets/main-ny0uOGg1.js +1 -0
  24. package/public/assets/src-B4_Kaae6.css +1 -0
  25. package/public/assets/src-BfdoaLcc.js +1 -0
  26. package/public/assets/src-D__MdyFu.js +1 -0
  27. package/public/cards/README.md +17 -0
  28. package/public/cards/bloom.jpg +0 -0
  29. package/public/favicon.svg +11 -0
  30. package/public/nexa-hero-sculpture-1280.png +0 -0
  31. package/public/nexa-hero-sculpture-640.png +0 -0
  32. package/public/nexa-hero-sculpture-960.png +0 -0
  33. package/public/nexa-hero-sculpture.png +0 -0
  34. package/public/nexa-hero-sculpture.webp +0 -0
  35. package/public/nexa-mark-24.png +0 -0
  36. package/public/nexa-mark-256.png +0 -0
  37. package/public/nexa-mark-32.png +0 -0
  38. package/public/nexa-mark-40.png +0 -0
  39. package/public/nexa-mark-48.png +0 -0
  40. package/public/nexa-mark-512.png +0 -0
  41. package/public/nexa-mark-64.png +0 -0
  42. package/public/nexa-mark-96.png +0 -0
  43. package/public/nexa-mark-apple.png +0 -0
  44. package/public/nexa-mark-product-256.png +0 -0
  45. package/public/nexa-mark-product.png +0 -0
  46. package/public/nexa-mark-source.png +0 -0
  47. package/public/nexa-mark-trim.png +0 -0
  48. package/public/nexa-mark.png +0 -0
  49. package/public/nexa-mark.webp +0 -0
  50. package/public/nexa-palette-vision.png +0 -0
  51. package/public/nexa-wordmark.png +0 -0
  52. package/public/nexa-wordmark.webp +0 -0
  53. package/public/og.png +0 -0
  54. package/public/site/about.html +101 -0
  55. package/public/site/blog.html +87 -0
  56. package/public/site/components.html +251 -0
  57. package/public/site/contact.html +72 -0
  58. package/public/site/docs/buttons.html +157 -0
  59. package/public/site/docs/cards.html +159 -0
  60. package/public/site/docs/colors.html +216 -0
  61. package/public/site/docs/commands.html +170 -0
  62. package/public/site/docs/data.html +122 -0
  63. package/public/site/docs/feedback.html +111 -0
  64. package/public/site/docs/forms.html +117 -0
  65. package/public/site/docs/icons.html +125 -0
  66. package/public/site/docs/index.html +82 -0
  67. package/public/site/docs/installation.html +83 -0
  68. package/public/site/docs/layout.html +116 -0
  69. package/public/site/docs/media.html +96 -0
  70. package/public/site/docs/navigation.html +122 -0
  71. package/public/site/docs/overlays.html +95 -0
  72. package/public/site/docs/pickers.html +126 -0
  73. package/public/site/docs/sections.html +111 -0
  74. package/public/site/docs/typography.html +97 -0
  75. package/public/site/docs/usage.html +76 -0
  76. package/public/site/features.html +107 -0
  77. package/public/site/index.html +117 -0
  78. package/public/site/integration.html +43 -0
  79. package/public/site/pricing.html +87 -0
  80. package/ui/cards/README.md +17 -0
  81. package/ui/cards/bloom.jpg +0 -0
  82. package/ui/echarts-mount-DWNKcqeo.js +22945 -0
  83. package/ui/echarts-nexa-BY8eW9ug.js +456 -0
  84. package/ui/favicon.svg +11 -0
  85. package/ui/nexa-hero-sculpture-1280.png +0 -0
  86. package/ui/nexa-hero-sculpture-640.png +0 -0
  87. package/ui/nexa-hero-sculpture-960.png +0 -0
  88. package/ui/nexa-hero-sculpture.png +0 -0
  89. package/ui/nexa-hero-sculpture.webp +0 -0
  90. package/ui/nexa-mark-24.png +0 -0
  91. package/ui/nexa-mark-256.png +0 -0
  92. package/ui/nexa-mark-32.png +0 -0
  93. package/ui/nexa-mark-40.png +0 -0
  94. package/ui/nexa-mark-48.png +0 -0
  95. package/ui/nexa-mark-512.png +0 -0
  96. package/ui/nexa-mark-64.png +0 -0
  97. package/ui/nexa-mark-96.png +0 -0
  98. package/ui/nexa-mark-apple.png +0 -0
  99. package/ui/nexa-mark-product-256.png +0 -0
  100. package/ui/nexa-mark-product.png +0 -0
  101. package/ui/nexa-mark-source.png +0 -0
  102. package/ui/nexa-mark-trim.png +0 -0
  103. package/ui/nexa-mark.png +0 -0
  104. package/ui/nexa-mark.webp +0 -0
  105. package/ui/nexa-palette-vision.png +0 -0
  106. package/ui/nexa-wordmark.png +0 -0
  107. package/ui/nexa-wordmark.webp +0 -0
  108. package/ui/nexa.css +2 -0
  109. package/ui/nexa.js +2971 -0
  110. package/ui/nexa.umd.js +80 -0
  111. package/ui/og.png +0 -0
  112. package/ui/types/components/art.d.ts +11 -0
  113. package/ui/types/components/card-layouts.d.ts +11 -0
  114. package/ui/types/components/card.d.ts +11 -0
  115. package/ui/types/components/charts.d.ts +7 -0
  116. package/ui/types/components/extra.d.ts +2 -0
  117. package/ui/types/components/helpers.d.ts +18 -0
  118. package/ui/types/components/icons.d.ts +24 -0
  119. package/ui/types/components/index.d.ts +2 -0
  120. package/ui/types/components/pickers.d.ts +8 -0
  121. package/ui/types/components/structure.d.ts +2 -0
  122. package/ui/types/core/behaviors.d.ts +2 -0
  123. package/ui/types/core/brand-assets.d.ts +44 -0
  124. package/ui/types/core/colormap.d.ts +49 -0
  125. package/ui/types/core/echarts-mount.d.ts +5 -0
  126. package/ui/types/core/echarts-nexa.d.ts +71 -0
  127. package/ui/types/core/parser.d.ts +11 -0
  128. package/ui/types/core/registry.d.ts +13 -0
  129. package/ui/types/core/renderer.d.ts +14 -0
  130. package/ui/types/core/schema.d.ts +8 -0
  131. package/ui/types/core/toast.d.ts +11 -0
  132. package/ui/types/core/validate.d.ts +1 -0
  133. package/ui/types/index.d.ts +50 -0
package/public/site/docs/buttons.html ADDED
@@ -0,0 +1,157 @@
1
+ <!doctype html>
2
+ <html lang="en" dir="ltr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>Buttons - Nexa Docs</title>
7
+ <link rel="icon" href="/favicon.svg" type="image/svg+xml">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ /* Inline boot: hide chrome until docs.ts adds .doc-ready (stops HTML flicker) */
13
+ html:not(.doc-ready) body.doc-body > .doc-shell,
14
+ html:not(.doc-ready) body.doc-body > .nexa-host { opacity: 0; }
15
+ html { background: #F7F9FC; }
16
+ </style>
17
+ <script type="module" crossorigin src="/assets/components-B_D1ccvJ.js"></script>
18
+ <script type="module" crossorigin src="/assets/docs-BGOHuCe3.js"></script>
19
+ <link rel="stylesheet" crossorigin href="/assets/docs-BUkg7Pd2.css">
20
+ </head>
21
+ <body class="doc-body" nexa="luxury light brand font-inter essential">
22
+
23
+ <header
24
+ nexa="header vision dock"
25
+ logo-href="/site/index.html"
26
+ links="Docs|/site/docs/index.html,Home|/site/index.html,Components|/site/components.html,Features|/site/features.html,Pricing|/site/pricing.html,About|/site/about.html,Blog|/site/blog.html,Contact|/site/contact.html"
27
+ cta="Start free"
28
+ cta-href="/site/pricing.html"></header>
29
+
30
+ <div class="doc-progress" data-doc-progress></div>
31
+ <div class="doc-shell">
32
+ <button class="doc-menu-toggle" type="button" data-doc-menu aria-expanded="false" aria-controls="doc-side">Browse docs <span>⌄</span></button>
33
+ <aside class="doc-side" id="doc-side" data-doc-side></aside>
34
+ <main class="doc-main">
35
+ <div class="doc-crumb"><a href="/site/docs/index.html">Documentation</a><span>/</span><span>Buttons</span></div>
36
+ <div class="doc-page-head">
37
+ <div><h1>Buttons</h1><p class="doc-lead"><code>btn</code> / <code>button</code>, groups, dropdown, close, and badge.</p></div>
38
+ <button type="button" class="doc-search" data-doc-search aria-label="Search documentation"><span>Search docs</span><kbd>⌘ K</kbd></button>
39
+ </div>
40
+
41
+
42
+ <h3>Variants</h3>
43
+ <p>Primary actions and quieter alternatives.</p>
44
+ <div class="doc-example">
45
+ <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>button</code></span><span class="doc-opt-tag"><code>btn</code></span><span class="doc-opt is-mod">primary</span><span class="doc-opt is-mod">secondary</span><span class="doc-opt is-mod">outline</span><span class="doc-opt is-mod">ghost</span><span class="doc-opt is-mod">danger</span><span class="doc-opt is-mod">blue</span><span class="doc-opt is-mod">purple</span><span class="doc-opt is-mod">gold</span><span class="doc-opt is-mod">green</span><span class="doc-opt is-mod">orange</span><span class="doc-opt is-mod">black</span><span class="doc-opt is-mod">glass</span><span class="doc-opt is-mod">small</span><span class="doc-opt is-mod">medium</span><span class="doc-opt is-mod">large</span><span class="doc-opt is-mod">compact</span><span class="doc-opt is-mod">sm</span><span class="doc-opt is-mod">block</span><span class="doc-opt is-mod">disabled</span><span class="doc-opt is-mod">loading</span><span class="doc-opt is-mod">round</span><span class="doc-opt is-mod">rounded</span><span class="doc-opt is-mod">pill</span><span class="doc-opt is-mod">sharp</span><span class="doc-opt is-mod">shadow</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">strong</span><span class="doc-opt is-mod">s</span><span class="doc-opt is-more">+1 · <a href="/site/docs/commands.html">all →</a></span></div></div>
46
+ <div class="doc-preview">
47
+ <div class="doc-demo"><span class="doc-demo-label">primary</span><button nexa="btn primary">Primary</button></div>
48
+ <div class="doc-demo"><span class="doc-demo-label">outline</span><button nexa="btn outline">Outline</button></div>
49
+ <div class="doc-demo"><span class="doc-demo-label">ghost</span><button nexa="btn ghost">Ghost</button></div>
50
+ <div class="doc-demo"><span class="doc-demo-label">danger</span><button nexa="btn danger">Danger</button></div>
51
+ </div>
52
+ <div class="doc-code">
53
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="btn-tones">Copy</button></div>
54
+ <pre><code id="btn-tones">&lt;button nexa="btn primary"&gt;Primary&lt;/button&gt;
55
+ &lt;button nexa="btn outline"&gt;Outline&lt;/button&gt;
56
+ &lt;button nexa="btn ghost"&gt;Ghost&lt;/button&gt;
57
+ &lt;button nexa="btn danger"&gt;Danger&lt;/button&gt;</code></pre>
58
+ </div>
59
+ </div>
60
+
61
+ <h3>Brand colors</h3>
62
+ <p>Color modifiers on buttons.</p>
63
+ <div class="doc-example">
64
+ <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>button</code></span><span class="doc-opt-tag"><code>btn</code></span><span class="doc-opt is-mod">primary</span><span class="doc-opt is-mod">secondary</span><span class="doc-opt is-mod">outline</span><span class="doc-opt is-mod">ghost</span><span class="doc-opt is-mod">danger</span><span class="doc-opt is-mod">blue</span><span class="doc-opt is-mod">purple</span><span class="doc-opt is-mod">gold</span><span class="doc-opt is-mod">green</span><span class="doc-opt is-mod">orange</span><span class="doc-opt is-mod">black</span><span class="doc-opt is-mod">glass</span><span class="doc-opt is-mod">small</span><span class="doc-opt is-mod">medium</span><span class="doc-opt is-mod">large</span><span class="doc-opt is-mod">compact</span><span class="doc-opt is-mod">sm</span><span class="doc-opt is-mod">block</span><span class="doc-opt is-mod">disabled</span><span class="doc-opt is-mod">loading</span><span class="doc-opt is-mod">round</span><span class="doc-opt is-mod">rounded</span><span class="doc-opt is-mod">pill</span><span class="doc-opt is-mod">sharp</span><span class="doc-opt is-mod">shadow</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">strong</span><span class="doc-opt is-mod">s</span><span class="doc-opt is-more">+1 · <a href="/site/docs/commands.html">all →</a></span></div></div>
65
+ <div class="doc-preview">
66
+ <div class="doc-demo"><span class="doc-demo-label">blue</span><button nexa="btn blue">Blue</button></div>
67
+ <div class="doc-demo"><span class="doc-demo-label">purple</span><button nexa="btn purple">Purple</button></div>
68
+ <div class="doc-demo"><span class="doc-demo-label">gold</span><button nexa="btn gold">Gold</button></div>
69
+ <div class="doc-demo"><span class="doc-demo-label">green</span><button nexa="btn green">Green</button></div>
70
+ <div class="doc-demo"><span class="doc-demo-label">orange</span><button nexa="btn orange">Orange</button></div>
71
+ <div class="doc-demo"><span class="doc-demo-label">black</span><button nexa="btn black">Black</button></div>
72
+ </div>
73
+ <div class="doc-code">
74
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="btn-colors">Copy</button></div>
75
+ <pre><code id="btn-colors">&lt;button nexa="btn blue"&gt;Blue&lt;/button&gt;
76
+ &lt;button nexa="btn purple"&gt;Purple&lt;/button&gt;
77
+ &lt;button nexa="btn gold"&gt;Gold&lt;/button&gt;
78
+ &lt;button nexa="btn green"&gt;Green&lt;/button&gt;
79
+ &lt;button nexa="btn orange"&gt;Orange&lt;/button&gt;
80
+ &lt;button nexa="btn black"&gt;Black&lt;/button&gt;</code></pre>
81
+ </div>
82
+ </div>
83
+
84
+ <h3>Shape & size</h3>
85
+
86
+ <div class="doc-example">
87
+ <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>button</code></span><span class="doc-opt-tag"><code>btn</code></span><span class="doc-opt is-mod">primary</span><span class="doc-opt is-mod">secondary</span><span class="doc-opt is-mod">outline</span><span class="doc-opt is-mod">ghost</span><span class="doc-opt is-mod">danger</span><span class="doc-opt is-mod">blue</span><span class="doc-opt is-mod">purple</span><span class="doc-opt is-mod">gold</span><span class="doc-opt is-mod">green</span><span class="doc-opt is-mod">orange</span><span class="doc-opt is-mod">black</span><span class="doc-opt is-mod">glass</span><span class="doc-opt is-mod">small</span><span class="doc-opt is-mod">medium</span><span class="doc-opt is-mod">large</span><span class="doc-opt is-mod">compact</span><span class="doc-opt is-mod">sm</span><span class="doc-opt is-mod">block</span><span class="doc-opt is-mod">disabled</span><span class="doc-opt is-mod">loading</span><span class="doc-opt is-mod">round</span><span class="doc-opt is-mod">rounded</span><span class="doc-opt is-mod">pill</span><span class="doc-opt is-mod">sharp</span><span class="doc-opt is-mod">shadow</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">strong</span><span class="doc-opt is-mod">s</span><span class="doc-opt is-more">+1 · <a href="/site/docs/commands.html">all →</a></span></div></div>
88
+ <div class="doc-preview">
89
+ <div class="doc-demo"><span class="doc-demo-label">pill</span><button nexa="btn primary pill">Start free</button></div>
90
+ <div class="doc-demo"><span class="doc-demo-label">sm</span><button nexa="btn primary sm">Small</button></div>
91
+ <div class="doc-demo"><span class="doc-demo-label">large</span><button nexa="btn primary large">Large</button></div>
92
+ <div class="doc-demo"><span class="doc-demo-label">block</span><button nexa="btn primary block" style="min-width:160px">Block</button></div>
93
+ </div>
94
+ <div class="doc-code">
95
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="btn-shape">Copy</button></div>
96
+ <pre><code id="btn-shape">&lt;button nexa="btn primary pill"&gt;Start free&lt;/button&gt;
97
+ &lt;button nexa="btn primary sm"&gt;Small&lt;/button&gt;
98
+ &lt;button nexa="btn primary large"&gt;Large&lt;/button&gt;
99
+ &lt;button nexa="btn primary block"&gt;Block&lt;/button&gt;</code></pre>
100
+ </div>
101
+ </div>
102
+
103
+ <h3>Button group</h3>
104
+
105
+ <div class="doc-example">
106
+ <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>button-group</code></span><span class="doc-opt-tag"><code>btn-group</code></span><span class="doc-opt is-mod">primary</span><span class="doc-opt is-mod">secondary</span><span class="doc-opt is-mod">outline</span><span class="doc-opt is-mod">ghost</span><span class="doc-opt is-mod">danger</span><span class="doc-opt is-mod">vertical</span></div></div>
107
+ <div class="doc-preview">
108
+ <div class="doc-demo"><span class="doc-demo-label">horizontal</span><div nexa="button-group" buttons="Save,Cancel,Delete"></div></div>
109
+ <div class="doc-demo"><span class="doc-demo-label">vertical</span><div nexa="button-group vertical" buttons="Draft,Publish" variants="outline,primary"></div></div>
110
+ </div>
111
+ <div class="doc-code">
112
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="btn-group">Copy</button></div>
113
+ <pre><code id="btn-group">&lt;div nexa="button-group" buttons="Save,Cancel,Delete"&gt;&lt;/div&gt;
114
+ &lt;div nexa="button-group vertical" buttons="Draft,Publish" variants="outline,primary"&gt;&lt;/div&gt;</code></pre>
115
+ </div>
116
+ </div>
117
+
118
+ <h3>Dropdown</h3>
119
+
120
+ <div class="doc-example">
121
+ <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>dropdown</code></span><span class="doc-opt-tag"><code>drop</code></span><span class="doc-opt is-mod">primary</span><span class="doc-opt is-mod">ghost</span><span class="doc-opt is-mod">open</span><span class="doc-opt is-mod">end</span></div></div>
122
+ <div class="doc-preview">
123
+ <div class="doc-demo"><span class="doc-demo-label">default</span><div nexa="dropdown" label="Menu" items="Profile,Settings,Log out"></div></div>
124
+ <div class="doc-demo"><span class="doc-demo-label">primary end</span><div nexa="dropdown primary end" label="Account" items="Billing|/billing,Team|/team,—,Sign out||danger"></div></div>
125
+ </div>
126
+ <div class="doc-code">
127
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="btn-drop">Copy</button></div>
128
+ <pre><code id="btn-drop">&lt;div nexa="dropdown" label="Menu" items="Profile,Settings,Log out"&gt;&lt;/div&gt;
129
+ &lt;div nexa="dropdown primary end" label="Account" items="Billing|/billing,Team|/team,—,Sign out||danger"&gt;&lt;/div&gt;</code></pre>
130
+ </div>
131
+ </div>
132
+
133
+ <h3>Close & badge</h3>
134
+
135
+ <div class="doc-example">
136
+ <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>close</code></span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>badge</code></span><span class="doc-opt is-mod">primary</span><span class="doc-opt is-mod">secondary</span><span class="doc-opt is-mod">outline</span><span class="doc-opt is-mod">ghost</span><span class="doc-opt is-mod">danger</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">pill</span><span class="doc-opt is-mod">dot</span></div></div>
137
+ <div class="doc-preview">
138
+ <div class="doc-demo"><span class="doc-demo-label">close</span><button nexa="close"></button></div>
139
+ <div class="doc-demo"><span class="doc-demo-label">badge</span><span nexa="badge">NEW</span></div>
140
+ <div class="doc-demo"><span class="doc-demo-label">badge</span><span nexa="badge">Pro</span></div>
141
+ </div>
142
+ <div class="doc-code">
143
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="btn-misc">Copy</button></div>
144
+ <pre><code id="btn-misc">&lt;button nexa="close"&gt;&lt;/button&gt;
145
+ &lt;span nexa="badge"&gt;NEW&lt;/span&gt;
146
+ &lt;span nexa="badge"&gt;Pro&lt;/span&gt;</code></pre>
147
+ </div>
148
+ </div>
149
+ </main>
150
+ <aside class="doc-outline" data-doc-outline aria-label="On this page"></aside>
151
+ </div>
152
+ <dialog class="doc-search-dialog" data-doc-dialog aria-label="Search documentation">
153
+ <div class="doc-search-box"><span aria-hidden="true">⌕</span><input data-doc-search-input type="search" placeholder="Search pages and components" autocomplete="off"><kbd>Esc</kbd></div>
154
+ <div class="doc-search-results" data-doc-search-results></div>
155
+ </dialog>
156
+ </body>
157
+ </html>
package/public/site/docs/cards.html ADDED
@@ -0,0 +1,159 @@
1
+ <!doctype html>
2
+ <html lang="en" dir="ltr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>Cards - Nexa Docs</title>
7
+ <link rel="icon" href="/favicon.svg" type="image/svg+xml">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ /* Inline boot: hide chrome until docs.ts adds .doc-ready (stops HTML flicker) */
13
+ html:not(.doc-ready) body.doc-body > .doc-shell,
14
+ html:not(.doc-ready) body.doc-body > .nexa-host { opacity: 0; }
15
+ html { background: #F7F9FC; }
16
+ </style>
17
+ <script type="module" crossorigin src="/assets/components-B_D1ccvJ.js"></script>
18
+ <script type="module" crossorigin src="/assets/docs-BGOHuCe3.js"></script>
19
+ <link rel="stylesheet" crossorigin href="/assets/docs-BUkg7Pd2.css">
20
+ </head>
21
+ <body class="doc-body" nexa="luxury light brand font-inter essential">
22
+
23
+ <header
24
+ nexa="header vision dock"
25
+ logo-href="/site/index.html"
26
+ links="Docs|/site/docs/index.html,Home|/site/index.html,Components|/site/components.html,Features|/site/features.html,Pricing|/site/pricing.html,About|/site/about.html,Blog|/site/blog.html,Contact|/site/contact.html"
27
+ cta="Start free"
28
+ cta-href="/site/pricing.html"></header>
29
+
30
+ <div class="doc-progress" data-doc-progress></div>
31
+ <div class="doc-shell">
32
+ <button class="doc-menu-toggle" type="button" data-doc-menu aria-expanded="false" aria-controls="doc-side">Browse docs <span>⌄</span></button>
33
+ <aside class="doc-side" id="doc-side" data-doc-side></aside>
34
+ <main class="doc-main">
35
+ <div class="doc-crumb"><a href="/site/docs/index.html">Documentation</a><span>/</span><span>Cards</span></div>
36
+ <div class="doc-page-head">
37
+ <div><h1>Cards</h1><p class="doc-lead">All card layout variants — preview row on top, dark code below.</p></div>
38
+ <button type="button" class="doc-search" data-doc-search aria-label="Search documentation"><span>Search docs</span><kbd>⌘ K</kbd></button>
39
+ </div>
40
+
41
+ <h2>Layouts</h2>
42
+ <p>Each row is one preview with variants side by side — matching HTML underneath.</p>
43
+ <h3>plain, bordered, elevated, glass</h3>
44
+
45
+ <div class="doc-example">
46
+ <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>card</code></span><span class="doc-opt-tag"><code>c</code></span><span class="doc-opt is-mod">plain</span><span class="doc-opt is-mod">bordered</span><span class="doc-opt is-mod">elevated</span><span class="doc-opt is-mod">glass</span><span class="doc-opt is-mod">horizontal</span><span class="doc-opt is-mod">square</span><span class="doc-opt is-mod">interactive</span><span class="doc-opt is-mod">media</span><span class="doc-opt is-mod">icon</span><span class="doc-opt is-mod">metric</span><span class="doc-opt is-mod">profile</span><span class="doc-opt is-mod">cover</span><span class="doc-opt is-mod">product</span><span class="doc-opt is-mod">video</span><span class="doc-opt is-mod">event</span><span class="doc-opt is-mod">promo</span><span class="doc-opt is-mod">pricing</span><span class="doc-opt is-mod">analytics</span><span class="doc-opt is-mod">quote</span><span class="doc-opt is-mod">tasks</span><span class="doc-opt is-mod">feature</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">fade</span><span class="doc-opt is-mod">slide</span><span class="doc-opt is-mod">zoom</span><span class="doc-opt is-mod">bounce</span><span class="doc-opt is-mod">float</span><span class="doc-opt is-mod">glow</span><span class="doc-opt is-more">+9 · <a href="/site/docs/commands.html">all →</a></span></div></div>
47
+ <div class="doc-preview">
48
+ <div class="doc-demo"><span class="doc-demo-label">plain</span><article nexa="card plain" title="Plain" text="Minimal surface." style="width:200px"></article></div>
49
+ <div class="doc-demo"><span class="doc-demo-label">bordered</span><article nexa="card bordered" title="Bordered" text="Clear edge." style="width:200px"></article></div>
50
+ <div class="doc-demo"><span class="doc-demo-label">elevated</span><article nexa="card elevated" title="Elevated" text="Soft depth." style="width:200px"></article></div>
51
+ <div class="doc-demo"><span class="doc-demo-label">glass</span><article nexa="card glass" title="Glass" text="Frosted panel." style="width:200px"></article></div>
52
+ </div>
53
+ <div class="doc-code">
54
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="cards-g0">Copy</button></div>
55
+ <pre><code id="cards-g0">&lt;article nexa="card plain" title="Plain" text="Minimal surface."&gt;&lt;/article&gt;
56
+ &lt;article nexa="card bordered" title="Bordered" text="Clear edge."&gt;&lt;/article&gt;
57
+ &lt;article nexa="card elevated" title="Elevated" text="Soft depth."&gt;&lt;/article&gt;
58
+ &lt;article nexa="card glass" title="Glass" text="Frosted panel."&gt;&lt;/article&gt;</code></pre>
59
+ </div>
60
+ </div>
61
+ <h3>media, icon, metric, profile</h3>
62
+
63
+ <div class="doc-example">
64
+ <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>card</code></span><span class="doc-opt-tag"><code>c</code></span><span class="doc-opt is-mod">plain</span><span class="doc-opt is-mod">bordered</span><span class="doc-opt is-mod">elevated</span><span class="doc-opt is-mod">glass</span><span class="doc-opt is-mod">horizontal</span><span class="doc-opt is-mod">square</span><span class="doc-opt is-mod">interactive</span><span class="doc-opt is-mod">media</span><span class="doc-opt is-mod">icon</span><span class="doc-opt is-mod">metric</span><span class="doc-opt is-mod">profile</span><span class="doc-opt is-mod">cover</span><span class="doc-opt is-mod">product</span><span class="doc-opt is-mod">video</span><span class="doc-opt is-mod">event</span><span class="doc-opt is-mod">promo</span><span class="doc-opt is-mod">pricing</span><span class="doc-opt is-mod">analytics</span><span class="doc-opt is-mod">quote</span><span class="doc-opt is-mod">tasks</span><span class="doc-opt is-mod">feature</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">fade</span><span class="doc-opt is-mod">slide</span><span class="doc-opt is-mod">zoom</span><span class="doc-opt is-mod">bounce</span><span class="doc-opt is-mod">float</span><span class="doc-opt is-mod">glow</span><span class="doc-opt is-more">+9 · <a href="/site/docs/commands.html">all →</a></span></div></div>
65
+ <div class="doc-preview">
66
+ <div class="doc-demo"><span class="doc-demo-label">media</span><article nexa="card media" title="Media" text="Image-led." image="/cards/bloom.jpg" style="width:200px"></article></div>
67
+ <div class="doc-demo"><span class="doc-demo-label">icon</span><article nexa="card icon" title="Icon" text="With glyph." icon="sparkles" style="width:200px"></article></div>
68
+ <div class="doc-demo"><span class="doc-demo-label">metric</span><article nexa="card metric" title="12.4k" text="Metric card." badge="+12%" style="width:200px"></article></div>
69
+ <div class="doc-demo"><span class="doc-demo-label">profile</span><article nexa="card profile" title="Alex Rivera" text="Product designer." image="/cards/bloom.jpg" style="width:200px"></article></div>
70
+ </div>
71
+ <div class="doc-code">
72
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="cards-g1">Copy</button></div>
73
+ <pre><code id="cards-g1">&lt;article nexa="card media" title="Media" text="Image-led." image="/cards/bloom.jpg"&gt;&lt;/article&gt;
74
+ &lt;article nexa="card icon" title="Icon" text="With glyph." icon="sparkles"&gt;&lt;/article&gt;
75
+ &lt;article nexa="card metric" title="12.4k" text="Metric card." badge="+12%"&gt;&lt;/article&gt;
76
+ &lt;article nexa="card profile" title="Alex Rivera" text="Product designer." image="/cards/bloom.jpg"&gt;&lt;/article&gt;</code></pre>
77
+ </div>
78
+ </div>
79
+ <h3>cover, product, video, event</h3>
80
+
81
+ <div class="doc-example">
82
+ <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>card</code></span><span class="doc-opt-tag"><code>c</code></span><span class="doc-opt is-mod">plain</span><span class="doc-opt is-mod">bordered</span><span class="doc-opt is-mod">elevated</span><span class="doc-opt is-mod">glass</span><span class="doc-opt is-mod">horizontal</span><span class="doc-opt is-mod">square</span><span class="doc-opt is-mod">interactive</span><span class="doc-opt is-mod">media</span><span class="doc-opt is-mod">icon</span><span class="doc-opt is-mod">metric</span><span class="doc-opt is-mod">profile</span><span class="doc-opt is-mod">cover</span><span class="doc-opt is-mod">product</span><span class="doc-opt is-mod">video</span><span class="doc-opt is-mod">event</span><span class="doc-opt is-mod">promo</span><span class="doc-opt is-mod">pricing</span><span class="doc-opt is-mod">analytics</span><span class="doc-opt is-mod">quote</span><span class="doc-opt is-mod">tasks</span><span class="doc-opt is-mod">feature</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">fade</span><span class="doc-opt is-mod">slide</span><span class="doc-opt is-mod">zoom</span><span class="doc-opt is-mod">bounce</span><span class="doc-opt is-mod">float</span><span class="doc-opt is-mod">glow</span><span class="doc-opt is-more">+9 · <a href="/site/docs/commands.html">all →</a></span></div></div>
83
+ <div class="doc-preview">
84
+ <div class="doc-demo"><span class="doc-demo-label">cover</span><article nexa="card cover" title="Cover" text="Full bleed." image="/cards/bloom.jpg" style="width:200px"></article></div>
85
+ <div class="doc-demo"><span class="doc-demo-label">product</span><article nexa="card product" title="Bloom kit" text="$49" image="/cards/bloom.jpg" cta="Buy" style="width:200px"></article></div>
86
+ <div class="doc-demo"><span class="doc-demo-label">video</span><article nexa="card video" title="Watch" text="Video layout." image="/cards/bloom.jpg" style="width:200px"></article></div>
87
+ <div class="doc-demo"><span class="doc-demo-label">event</span><article nexa="card event" title="Meetup" text="Fri · 6pm" image="/cards/bloom.jpg" style="width:200px"></article></div>
88
+ </div>
89
+ <div class="doc-code">
90
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="cards-g2">Copy</button></div>
91
+ <pre><code id="cards-g2">&lt;article nexa="card cover" title="Cover" text="Full bleed." image="/cards/bloom.jpg"&gt;&lt;/article&gt;
92
+ &lt;article nexa="card product" title="Bloom kit" text="$49" image="/cards/bloom.jpg" cta="Buy"&gt;&lt;/article&gt;
93
+ &lt;article nexa="card video" title="Watch" text="Video layout." image="/cards/bloom.jpg"&gt;&lt;/article&gt;
94
+ &lt;article nexa="card event" title="Meetup" text="Fri · 6pm" image="/cards/bloom.jpg"&gt;&lt;/article&gt;</code></pre>
95
+ </div>
96
+ </div>
97
+ <h3>promo, pricing, quote, feature</h3>
98
+
99
+ <div class="doc-example">
100
+ <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>card</code></span><span class="doc-opt-tag"><code>c</code></span><span class="doc-opt is-mod">plain</span><span class="doc-opt is-mod">bordered</span><span class="doc-opt is-mod">elevated</span><span class="doc-opt is-mod">glass</span><span class="doc-opt is-mod">horizontal</span><span class="doc-opt is-mod">square</span><span class="doc-opt is-mod">interactive</span><span class="doc-opt is-mod">media</span><span class="doc-opt is-mod">icon</span><span class="doc-opt is-mod">metric</span><span class="doc-opt is-mod">profile</span><span class="doc-opt is-mod">cover</span><span class="doc-opt is-mod">product</span><span class="doc-opt is-mod">video</span><span class="doc-opt is-mod">event</span><span class="doc-opt is-mod">promo</span><span class="doc-opt is-mod">pricing</span><span class="doc-opt is-mod">analytics</span><span class="doc-opt is-mod">quote</span><span class="doc-opt is-mod">tasks</span><span class="doc-opt is-mod">feature</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">fade</span><span class="doc-opt is-mod">slide</span><span class="doc-opt is-mod">zoom</span><span class="doc-opt is-mod">bounce</span><span class="doc-opt is-mod">float</span><span class="doc-opt is-mod">glow</span><span class="doc-opt is-more">+9 · <a href="/site/docs/commands.html">all →</a></span></div></div>
101
+ <div class="doc-preview">
102
+ <div class="doc-demo"><span class="doc-demo-label">promo</span><article nexa="card promo" title="Launch week" text="Save 20%." badge="Sale" cta="Claim" style="width:200px"></article></div>
103
+ <div class="doc-demo"><span class="doc-demo-label">pricing</span><article nexa="card pricing" title="Pro" text="$29/mo" cta="Upgrade" style="width:200px"></article></div>
104
+ <div class="doc-demo"><span class="doc-demo-label">quote</span><article nexa="card quote" title="Alex" text="Nexa handled the polish." style="width:200px"></article></div>
105
+ <div class="doc-demo"><span class="doc-demo-label">feature</span><article nexa="card feature" title="Fast" text="Ship UI in minutes." icon="zap" style="width:200px"></article></div>
106
+ </div>
107
+ <div class="doc-code">
108
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="cards-g3">Copy</button></div>
109
+ <pre><code id="cards-g3">&lt;article nexa="card promo" title="Launch week" text="Save 20%." badge="Sale" cta="Claim"&gt;&lt;/article&gt;
110
+ &lt;article nexa="card pricing" title="Pro" text="$29/mo" cta="Upgrade"&gt;&lt;/article&gt;
111
+ &lt;article nexa="card quote" title="Alex" text="Nexa handled the polish."&gt;&lt;/article&gt;
112
+ &lt;article nexa="card feature" title="Fast" text="Ship UI in minutes." icon="zap"&gt;&lt;/article&gt;</code></pre>
113
+ </div>
114
+ </div>
115
+ <h3>analytics, tasks, horizontal, interactive</h3>
116
+
117
+ <div class="doc-example">
118
+ <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>card</code></span><span class="doc-opt-tag"><code>c</code></span><span class="doc-opt is-mod">plain</span><span class="doc-opt is-mod">bordered</span><span class="doc-opt is-mod">elevated</span><span class="doc-opt is-mod">glass</span><span class="doc-opt is-mod">horizontal</span><span class="doc-opt is-mod">square</span><span class="doc-opt is-mod">interactive</span><span class="doc-opt is-mod">media</span><span class="doc-opt is-mod">icon</span><span class="doc-opt is-mod">metric</span><span class="doc-opt is-mod">profile</span><span class="doc-opt is-mod">cover</span><span class="doc-opt is-mod">product</span><span class="doc-opt is-mod">video</span><span class="doc-opt is-mod">event</span><span class="doc-opt is-mod">promo</span><span class="doc-opt is-mod">pricing</span><span class="doc-opt is-mod">analytics</span><span class="doc-opt is-mod">quote</span><span class="doc-opt is-mod">tasks</span><span class="doc-opt is-mod">feature</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">fade</span><span class="doc-opt is-mod">slide</span><span class="doc-opt is-mod">zoom</span><span class="doc-opt is-mod">bounce</span><span class="doc-opt is-mod">float</span><span class="doc-opt is-mod">glow</span><span class="doc-opt is-more">+9 · <a href="/site/docs/commands.html">all →</a></span></div></div>
119
+ <div class="doc-preview">
120
+ <div class="doc-demo"><span class="doc-demo-label">analytics</span><article nexa="card analytics" title="Traffic" text="+18% WoW" style="width:200px"></article></div>
121
+ <div class="doc-demo"><span class="doc-demo-label">tasks</span><article nexa="card tasks" title="Today" text="3 of 5 done" style="width:200px"></article></div>
122
+ <div class="doc-demo"><span class="doc-demo-label">horizontal</span><article nexa="card horizontal" title="Horizontal" text="Side media." image="/cards/bloom.jpg" style="width:200px"></article></div>
123
+ <div class="doc-demo"><span class="doc-demo-label">interactive</span><article nexa="card interactive" title="Interactive" text="Hover me." style="width:200px"></article></div>
124
+ </div>
125
+ <div class="doc-code">
126
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="cards-g4">Copy</button></div>
127
+ <pre><code id="cards-g4">&lt;article nexa="card analytics" title="Traffic" text="+18% WoW"&gt;&lt;/article&gt;
128
+ &lt;article nexa="card tasks" title="Today" text="3 of 5 done"&gt;&lt;/article&gt;
129
+ &lt;article nexa="card horizontal" title="Horizontal" text="Side media." image="/cards/bloom.jpg"&gt;&lt;/article&gt;
130
+ &lt;article nexa="card interactive" title="Interactive" text="Hover me."&gt;&lt;/article&gt;</code></pre>
131
+ </div>
132
+ </div>
133
+ <h3>Motion states</h3>
134
+ <p>Add soft / lift / glow / reveal on any card layout.</p>
135
+ <div class="doc-example">
136
+ <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>card</code></span><span class="doc-opt-tag"><code>c</code></span><span class="doc-opt is-mod">plain</span><span class="doc-opt is-mod">bordered</span><span class="doc-opt is-mod">elevated</span><span class="doc-opt is-mod">glass</span><span class="doc-opt is-mod">horizontal</span><span class="doc-opt is-mod">square</span><span class="doc-opt is-mod">interactive</span><span class="doc-opt is-mod">media</span><span class="doc-opt is-mod">icon</span><span class="doc-opt is-mod">metric</span><span class="doc-opt is-mod">profile</span><span class="doc-opt is-mod">cover</span><span class="doc-opt is-mod">product</span><span class="doc-opt is-mod">video</span><span class="doc-opt is-mod">event</span><span class="doc-opt is-mod">promo</span><span class="doc-opt is-mod">pricing</span><span class="doc-opt is-mod">analytics</span><span class="doc-opt is-mod">quote</span><span class="doc-opt is-mod">tasks</span><span class="doc-opt is-mod">feature</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">fade</span><span class="doc-opt is-mod">slide</span><span class="doc-opt is-mod">zoom</span><span class="doc-opt is-mod">bounce</span><span class="doc-opt is-mod">float</span><span class="doc-opt is-mod">glow</span><span class="doc-opt is-more">+9 · <a href="/site/docs/commands.html">all →</a></span></div></div>
137
+ <div class="doc-preview">
138
+ <div class="doc-demo"><span class="doc-demo-label">soft</span><article nexa="card elevated soft" title="Soft" text="Gentle." style="width:180px"></article></div>
139
+ <div class="doc-demo"><span class="doc-demo-label">lift</span><article nexa="card elevated lift" title="Lift" text="Hover lift." style="width:180px"></article></div>
140
+ <div class="doc-demo"><span class="doc-demo-label">glow</span><article nexa="card elevated glow" title="Glow" text="Accent glow." style="width:180px"></article></div>
141
+ <div class="doc-demo"><span class="doc-demo-label">reveal</span><article nexa="card elevated reveal" title="Reveal" text="Enter motion." style="width:180px"></article></div>
142
+ </div>
143
+ <div class="doc-code">
144
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="cards-motion">Copy</button></div>
145
+ <pre><code id="cards-motion">&lt;article nexa="card elevated soft" title="Soft"&gt;&lt;/article&gt;
146
+ &lt;article nexa="card elevated lift" title="Lift"&gt;&lt;/article&gt;
147
+ &lt;article nexa="card elevated glow" title="Glow"&gt;&lt;/article&gt;
148
+ &lt;article nexa="card elevated reveal" title="Reveal"&gt;&lt;/article&gt;</code></pre>
149
+ </div>
150
+ </div>
151
+ </main>
152
+ <aside class="doc-outline" data-doc-outline aria-label="On this page"></aside>
153
+ </div>
154
+ <dialog class="doc-search-dialog" data-doc-dialog aria-label="Search documentation">
155
+ <div class="doc-search-box"><span aria-hidden="true">⌕</span><input data-doc-search-input type="search" placeholder="Search pages and components" autocomplete="off"><kbd>Esc</kbd></div>
156
+ <div class="doc-search-results" data-doc-search-results></div>
157
+ </dialog>
158
+ </body>
159
+ </html>
package/public/site/docs/colors.html ADDED
@@ -0,0 +1,216 @@
1
+ <!doctype html>
2
+ <html lang="en" dir="ltr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>Colors & maps - Nexa Docs</title>
7
+ <link rel="icon" href="/favicon.svg" type="image/svg+xml">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ /* Inline boot: hide chrome until docs.ts adds .doc-ready (stops HTML flicker) */
13
+ html:not(.doc-ready) body.doc-body > .doc-shell,
14
+ html:not(.doc-ready) body.doc-body > .nexa-host { opacity: 0; }
15
+ html { background: #F7F9FC; }
16
+ </style>
17
+ <script type="module" crossorigin src="/assets/components-B_D1ccvJ.js"></script>
18
+ <script type="module" crossorigin src="/assets/docs-BGOHuCe3.js"></script>
19
+ <link rel="stylesheet" crossorigin href="/assets/docs-BUkg7Pd2.css">
20
+ </head>
21
+ <body class="doc-body" nexa="luxury light brand font-inter essential">
22
+
23
+ <header
24
+ nexa="header vision dock"
25
+ logo-href="/site/index.html"
26
+ links="Docs|/site/docs/index.html,Home|/site/index.html,Components|/site/components.html,Features|/site/features.html,Pricing|/site/pricing.html,About|/site/about.html,Blog|/site/blog.html,Contact|/site/contact.html"
27
+ cta="Start free"
28
+ cta-href="/site/pricing.html"></header>
29
+
30
+ <div class="doc-progress" data-doc-progress></div>
31
+ <div class="doc-shell">
32
+ <button class="doc-menu-toggle" type="button" data-doc-menu aria-expanded="false" aria-controls="doc-side">Browse docs <span>⌄</span></button>
33
+ <aside class="doc-side" id="doc-side" data-doc-side></aside>
34
+ <main class="doc-main">
35
+ <div class="doc-crumb"><a href="/site/docs/index.html">Documentation</a><span>/</span><span>Colors & maps</span></div>
36
+ <div class="doc-page-head">
37
+ <div><h1>Colors & maps</h1><p class="doc-lead">Nexa Color Map builds a full brand scale from one seed — presets, hue families, or <code>map #hex</code> / <code>map:my-brand</code>.</p></div>
38
+ <button type="button" class="doc-search" data-doc-search aria-label="Search documentation"><span>Search docs</span><kbd>⌘ K</kbd></button>
39
+ </div>
40
+
41
+
42
+ <h2>Vision tokens</h2>
43
+ <p>Default brand used across the marketing site and these docs.</p>
44
+ <div class="doc-example">
45
+ <div class="doc-preview is-stack" data-doc-maps></div>
46
+ <div class="doc-code">
47
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="col-vision">Copy</button></div>
48
+ <pre><code id="col-vision">/* Vision defaults */
49
+ --nexa-cyan: #00C6FF;
50
+ --nexa-sky: #2E9EFF;
51
+ --nexa-violet: #7C5CFC;
52
+ --nexa-navy: #0B1220;
53
+ --nexa-grad: linear-gradient(135deg, #00C6FF, #2E9EFF, #7C5CFC);</code></pre>
54
+ </div>
55
+ </div>
56
+
57
+
58
+ <h2>Brand scale</h2>
59
+ <p>Semantic UI reads from <code>--nexa-brand-50…900</code> → primary / soft / strong.</p>
60
+ <div class="doc-example">
61
+ <div class="doc-preview is-stack" data-doc-brand-scale></div>
62
+ <div class="doc-code">
63
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="col-scale">Copy</button></div>
64
+ <pre><code id="col-scale">body nexa="luxury light brand …"
65
+ /* → --nexa-primary = --nexa-brand-500
66
+ → --nexa-primary-soft = --nexa-brand-100
67
+ → --nexa-primary-strong = --nexa-brand-700 */</code></pre>
68
+ </div>
69
+ </div>
70
+
71
+
72
+ <h2>Hue families</h2>
73
+ <p>Switch the whole UI family with a body modifier.</p>
74
+
75
+ <h3>Named families</h3>
76
+ <p>Add <code>violet</code>, <code>azure</code>, <code>gold</code>, <code>emerald</code>, or <code>coral</code> (aliases: purple, blue, green, orange).</p>
77
+ <div class="doc-example">
78
+
79
+ <div class="doc-preview">
80
+ <div class="doc-demo"><span class="doc-demo-label">violet</span><div class="nexa-violet" style="padding:12px 16px;border-radius:10px;background:var(--nexa-brand-100);color:var(--nexa-brand-700);font-weight:650">Violet</div></div>
81
+ <div class="doc-demo"><span class="doc-demo-label">azure</span><div class="nexa-azure" style="padding:12px 16px;border-radius:10px;background:var(--nexa-brand-100);color:var(--nexa-brand-700);font-weight:650">Azure</div></div>
82
+ <div class="doc-demo"><span class="doc-demo-label">gold</span><div class="nexa-gold" style="padding:12px 16px;border-radius:10px;background:var(--nexa-brand-100);color:var(--nexa-brand-700);font-weight:650">Gold</div></div>
83
+ <div class="doc-demo"><span class="doc-demo-label">emerald</span><div class="nexa-emerald" style="padding:12px 16px;border-radius:10px;background:var(--nexa-brand-100);color:var(--nexa-brand-700);font-weight:650">Emerald</div></div>
84
+ </div>
85
+ <div class="doc-code">
86
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="col-hues">Copy</button></div>
87
+ <pre><code id="col-hues">&lt;body nexa="luxury light brand violet font-inter"&gt;
88
+ &lt;body nexa="luxury light brand azure font-inter"&gt;
89
+ &lt;body nexa="luxury light brand gold font-inter"&gt;
90
+ &lt;body nexa="luxury light brand emerald font-inter"&gt;</code></pre>
91
+ </div>
92
+ </div>
93
+
94
+
95
+ <h2>Map from a seed</h2>
96
+ <p>Generate a custom scale with <code>map</code>.</p>
97
+
98
+ <h3>map command</h3>
99
+ <p>Use a preset name, raw hex, or a saved map id.</p>
100
+ <div class="doc-example">
101
+
102
+ <div class="doc-preview is-stack">
103
+ <div class="doc-swatch-row" data-doc-presets></div>
104
+ <p style="margin:.75rem 0 0;color:#5B6478;font-size:.9rem;width:100%">Presets: pink, rose, violet, azure, gold, emerald, coral</p>
105
+ </div>
106
+ <div class="doc-code">
107
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="col-map">Copy</button></div>
108
+ <pre><code id="col-map">&lt;!-- Preset seed --&gt;
109
+ &lt;body nexa="luxury light brand map pink font-inter"&gt;
110
+
111
+ &lt;!-- Raw hex seed --&gt;
112
+ &lt;body nexa="luxury light brand map #ec4899 font-inter"&gt;
113
+
114
+ &lt;!-- Saved map (localStorage via saveBrandMap) --&gt;
115
+ &lt;body nexa="luxury light brand map:my-brand font-inter"&gt;</code></pre>
116
+ </div>
117
+ </div>
118
+
119
+ <table class="doc-table">
120
+ <thead><tr><th>Command</th><th>What it does</th></tr></thead>
121
+ <tbody>
122
+ <tr><td><code>map pink</code></td><td>Builds brand-50…900 from preset <code>#ec4899</code></td></tr>
123
+ <tr><td><code>map #2E9EFF</code></td><td>Builds the scale from any hex</td></tr>
124
+ <tr><td><code>map:my-brand</code></td><td>Loads a seed saved with <code>saveBrandMap('my-brand', '#…')</code></td></tr>
125
+ <tr><td><code>violet</code> / <code>azure</code> / …</td><td>Swaps to a locked hue family (no generation)</td></tr>
126
+ </tbody>
127
+ </table>
128
+ <p>API: <code>src/core/colormap.ts</code> — <code>resolveMapSeed</code>, <code>saveBrandMap</code>, <code>getSavedMaps</code>.</p>
129
+
130
+
131
+ <h2>How the generator works</h2>
132
+ <p>One seed → a full brand scale. No Sass, no 10 hand-written variables.</p>
133
+ <p>When you write <code>map #ec4899</code> (or a preset like <code>map pink</code>), the engine calls <code>generateBrandScale(seed)</code>: it keeps your seed as <code>--nexa-brand-500</code> and derives the lighter/darker steps (50, 100, 200, 300, 400, 600, 700, 800, 900) by walking lightness in HSL while keeping hue and a sane saturation curve. Every component reads from <code>--nexa-brand-*</code>, so the whole UI recolors from a single hex.</p>
134
+ <ol>
135
+ <li><code>resolveMapSeed(modifiers)</code> — reads <code>map #hex</code>, <code>map pink</code>, or <code>map:my-brand</code> from the command.</li>
136
+ <li><code>generateBrandScale(seed)</code> — returns <code>{50…900}</code> keyed by step.</li>
137
+ <li><code>applyBrandColor(el, seed)</code> — generates + writes the CSS variables onto the element (and clears any saved map/hue).</li>
138
+ <li>Semantic tokens are patched automatically: <code>--nexa-primary</code> = brand-500, <code>--nexa-primary-soft</code> = brand-100, <code>--nexa-primary-strong</code> = brand-700, plus glow/hover/accent.</li>
139
+ </ol>
140
+
141
+
142
+ <h3>Generate a scale in JS</h3>
143
+ <p>Same function the <code>map</code> command uses — call it directly from your app.</p>
144
+ <div class="doc-example">
145
+
146
+ <div class="doc-preview is-stack">
147
+ <div class="doc-swatch-row" data-doc-presets></div>
148
+ <p style="margin:.5rem 0 0;color:#5B6478;font-size:.88rem;width:100%">Presets shown here are exactly what <code>generateBrandScale(presetHex)</code> expands to.</p>
149
+ </div>
150
+ <div class="doc-code">
151
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="col-generate">Copy</button></div>
152
+ <pre><code id="col-generate">import { generateBrandScale, applyBrandColor, exportBrandScaleCss } from 'src/core/colormap';
153
+
154
+ // 1) build the scale object
155
+ const scale = generateBrandScale('#ec4899');
156
+ // → { 50:'#fdf2f8', 100:'#fce7f3', … 500:'#ec4899', … 900:'#831843' }
157
+
158
+ // 2) apply straight onto an element (what `map #hex` does internally)
159
+ applyBrandColor(document.body, '#ec4899');
160
+
161
+ // 3) or export ready-to-paste CSS for :root (set once, every Nexa follows)
162
+ const css = exportBrandScaleCss(scale);
163
+ // :root {
164
+ // --nexa-brand-50: #fdf2f8;
165
+ // --nexa-brand-100: #fce7f3;
166
+ // …
167
+ // --nexa-primary: var(--nexa-brand-500);
168
+ // --nexa-primary-soft: var(--nexa-brand-100);
169
+ // --nexa-primary-strong: var(--nexa-brand-700);
170
+ // }</code></pre>
171
+ </div>
172
+ </div>
173
+
174
+
175
+ <h2>Presets (named seeds)</h2>
176
+ <p>Shortcut names map to a known hex so you don’t need to remember one.</p>
177
+ <div class="doc-example">
178
+ <div class="doc-preview is-stack">
179
+ <div class="doc-swatch-row" data-doc-presets></div>
180
+ </div>
181
+ <div class="doc-code">
182
+ <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="col-presets">Copy</button></div>
183
+ <pre><code id="col-presets">pink #ec4899
184
+ rose #f43f5e
185
+ violet #7c5cfc
186
+ azure #3b82f6
187
+ gold #b08d45
188
+ emerald #10b981
189
+ coral #f97316</code></pre>
190
+ </div>
191
+ </div>
192
+
193
+
194
+ <h2>Saved maps</h2>
195
+ <p>Persist a brand once, reuse it by id across pages.</p>
196
+ <p><code>saveBrandMap('my-brand', '#…')</code> stores the seed in <code>localStorage</code> (key <code>nexa-saved-maps</code>). Then <code>map:my-brand</code> re-applies it anywhere. Helpers: <code>getSavedMaps()</code>, <code>listSavedMapNames()</code>, <code>deleteSavedMap(name)</code>.</p>
197
+ <table class="doc-table">
198
+ <thead><tr><th>Function</th><th>Purpose</th></tr></thead>
199
+ <tbody>
200
+ <tr><td><code>generateBrandScale(seed)</code></td><td>hex → <code>{50…900}</code> brand scale</td></tr>
201
+ <tr><td><code>applyBrandColor(el, seed)</code></td><td>generate + write variables onto an element</td></tr>
202
+ <tr><td><code>exportBrandScaleCss(scale, selector?)</code></td><td>emit paste-ready <code>:root</code> CSS</td></tr>
203
+ <tr><td><code>applyColorMap(el, name)</code></td><td>apply a locked hue family (violet/azure/gold/emerald/coral)</td></tr>
204
+ <tr><td><code>saveBrandMap / getSavedMaps / deleteSavedMap</code></td><td>persist + recall saved seeds</td></tr>
205
+ <tr><td><code>resolveMapSeed(modifiers)</code></td><td>parse <code>map #hex</code> / <code>map pink</code> / <code>map:my-brand</code></td></tr>
206
+ </tbody>
207
+ </table>
208
+ </main>
209
+ <aside class="doc-outline" data-doc-outline aria-label="On this page"></aside>
210
+ </div>
211
+ <dialog class="doc-search-dialog" data-doc-dialog aria-label="Search documentation">
212
+ <div class="doc-search-box"><span aria-hidden="true">⌕</span><input data-doc-search-input type="search" placeholder="Search pages and components" autocomplete="off"><kbd>Esc</kbd></div>
213
+ <div class="doc-search-results" data-doc-search-results></div>
214
+ </dialog>
215
+ </body>
216
+ </html>