kaleido-ui 0.1.122 → 0.1.129

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 (22) hide show
  1. package/README.md +58 -7
  2. package/brand/kaleidoswap-fullogo-horizontal-on-light.svg +25 -0
  3. package/brand/kaleidoswap-fullogo-horizontal.svg +25 -0
  4. package/brand/kaleidoswap-fullogo-vertical-on-light.svg +18 -0
  5. package/brand/kaleidoswap-fullogo-vertical.svg +18 -0
  6. package/brand/kaleidoswap-pictogram.svg +7 -0
  7. package/dist/css/brand.css +32 -0
  8. package/dist/css/kaleido-ui.css +197 -1
  9. package/dist/native/index.cjs +74 -2
  10. package/dist/native/index.js +74 -2
  11. package/dist/tailwind/index.cjs +480 -0
  12. package/dist/tailwind/index.d.ts +185 -0
  13. package/dist/tailwind/index.js +456 -0
  14. package/dist/tokens/index.cjs +143 -0
  15. package/dist/tokens/index.d.cts +175 -5
  16. package/dist/tokens/index.d.ts +175 -5
  17. package/dist/tokens/index.js +132 -0
  18. package/dist/web/index.cjs +10006 -6917
  19. package/dist/web/index.d.cts +1243 -26
  20. package/dist/web/index.d.ts +1243 -26
  21. package/dist/web/index.js +9951 -6941
  22. package/package.json +35 -7
package/README.md CHANGED
@@ -15,11 +15,19 @@ npm install kaleido-ui
15
15
  | `kaleido-ui` | Web components (Tailwind CSS + Radix UI) |
16
16
  | `kaleido-ui/tokens` | Platform-agnostic design tokens (zero deps) |
17
17
  | `kaleido-ui/native` | React Native components (WDK + custom) |
18
- | `kaleido-ui/css` | Tailwind v4 `@theme` tokens, CSS variables, keyframes, utilities, Material Symbols |
19
-
20
- > **Tailwind v4 only.** `kaleido-ui/css` ships the full theme as Tailwind v4
21
- > `@theme` blocks, so there is no separate Tailwind preset to configure —
22
- > importing the CSS registers every token and generates the utilities.
18
+ | `kaleido-ui/css` | CSS variables (light + dark), keyframes, utilities, and the Tailwind v4 `@theme` tokens |
19
+ | `kaleido-ui/css/brand` | Opt-in brand theme: AA-safe light primary, lifted dark danger/info, coloured page wash (import after `kaleido-ui/css`) |
20
+ | `kaleido-ui/tailwind` | Tailwind **v3** preset built from the tokens |
21
+ | `kaleido-ui/brand/*.svg` | Logo files: `kaleidoswap-pictogram.svg`, `kaleidoswap-fullogo-{horizontal,vertical}.svg` (white wordmark) and `-on-light.svg` variants |
22
+
23
+ > **Tailwind v4 and v3 are both supported.** The library is built with v4.
24
+ > On v4, `kaleido-ui/css` carries the whole theme as `@theme` blocks — no
25
+ > preset. On v3, which ignores `@theme` and only generates the opacity steps in
26
+ > its own scale, use the `kaleido-ui/tailwind` preset *and* import
27
+ > `kaleido-ui/css` for the variables it points at. Either way, scan the
28
+ > package's `dist` so the components' classes are generated.
29
+ > `tests/tailwind-v3-preset.test.tsx` compiles the components with both and
30
+ > fails if v3 misses a class v4 generates.
23
31
 
24
32
  ## Quick Start — Web (Tailwind v4)
25
33
 
@@ -28,12 +36,36 @@ npm install kaleido-ui
28
36
  ```css
29
37
  /* styles.css */
30
38
  @import "tailwindcss";
39
+ @import "tw-animate-css"; /* Dialog/Select/Toast enter-exit classes */
31
40
  @import "kaleido-ui/css";
32
41
 
33
- /* Tell Tailwind which files to scan for classes */
42
+ /* Tell Tailwind which files to scan for classes: yours and the components' */
34
43
  @source "./src/**/*.{ts,tsx}";
44
+ @source "../node_modules/kaleido-ui/dist/web";
45
+ ```
46
+
47
+ ### Tailwind v3
48
+
49
+ ```js
50
+ // tailwind.config.js
51
+ module.exports = {
52
+ presets: [require('kaleido-ui/tailwind')],
53
+ content: ['./src/**/*.{ts,tsx}', './node_modules/kaleido-ui/dist/web/*.js'],
54
+ plugins: [require('tailwindcss-animate')],
55
+ }
56
+ ```
57
+
58
+ ```css
59
+ /* index.css — kaleido-ui/css first: the preset's colours are its variables */
60
+ @import 'kaleido-ui/css';
61
+ @tailwind base;
62
+ @tailwind components;
63
+ @tailwind utilities;
35
64
  ```
36
65
 
66
+ The preset's colours are the theme's custom properties (opacity modifiers work
67
+ through `color-mix`), so light and dark switch at runtime exactly as on v4.
68
+
37
69
  ```ts
38
70
  // main.tsx
39
71
  import './styles.css'
@@ -138,6 +170,9 @@ console.log(typeScale.body) // ['15px', '22px']
138
170
  | `SectionLabel` | Uppercase section heading |
139
171
  | `AlertBanner` | Alert box (error, warning, info, success variants) |
140
172
  | `ErrorBoundary` | React error boundary with retry UI |
173
+ | `KaleidoswapLogo` | Full logo, `orientation="horizontal" \| "vertical"`. Wordmark uses `currentColor`; size with `h-* w-auto` |
174
+ | `KaleidoswapMark` | The K pictogram on its own; size with `size-*` |
175
+ | `HaloBackdrop` | Decorative drifting brand-colour blobs behind a screen (parent needs `relative isolate`) |
141
176
 
142
177
  ### Hooks
143
178
 
@@ -150,7 +185,20 @@ console.log(typeScale.body) // ['15px', '22px']
150
185
 
151
186
  | Export | Description |
152
187
  |--------|-------------|
153
- | `cn()` | `clsx` + `tailwind-merge` utility |
188
+ | `cn()` | `clsx` + `tailwind-merge`, configured with kaleido-ui's custom scales (`text-title`, `text-icon-md`, `rounded-card`, `shadow-glow-*`, `tracking-eyebrow`) so they are not mistaken for colours and dropped. Use it instead of a local `twMerge`. |
189
+
190
+ ### Brand utilities (from `kaleido-ui/css`)
191
+
192
+ Additive, per-theme (light by default, `.dark` switches):
193
+
194
+ | Utility | Use |
195
+ |---------|-----|
196
+ | `text-brand`, `text-accent-send-fg`, `text-accent-recv-fg` | Brand / send / receive foregrounds that clear WCAG AA in both themes |
197
+ | `text-{success,warning,danger,info}-fg` | Status text (the plain `text-warning` etc. are dark-theme values) |
198
+ | `text-network-{bitcoin,lightning,liquid,arkade,spark,rgb,taproot}-fg` | Network-hued text |
199
+ | `bg-page-brand` | Coloured page wash (mint, violet, sky) |
200
+ | `text-gradient-brand` | Brand gradient text, display sizes only |
201
+ | `shadow-glow-send`, `shadow-glow-recv`, `shadow-glow-card` | Accent glows for send / receive panels and the hero card |
154
202
 
155
203
  ## Native Components
156
204
 
@@ -173,6 +221,9 @@ StatusBadge, NetworkBadge, AlertBanner, SectionLabel
173
221
  | `radius` | sm (8px) through full (9999px) |
174
222
  | `shadow` | glow, glowStrong, glowSubtle, glowAccent |
175
223
  | `transition` | fast (150ms), default (200ms), slow (300ms) |
224
+ | `brandMark` | The logo's three fills (violet, green, mint): paint, never text |
225
+ | `themedForeground` | Per-theme AA foregrounds (`brand`, `accent-*-fg`, status and network `-fg`) |
226
+ | `brandDepth` | Per-theme page wash, brand gradient and glows |
176
227
 
177
228
  ## Development
178
229
 
package/brand/kaleidoswap-fullogo-horizontal-on-light.svg ADDED
@@ -0,0 +1,25 @@
1
+ <svg width="831" height="208" viewBox="0 0 831 208" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_2288_2)">
3
+ <path d="M69.342 208H0L34.6843 173.368L69.342 208Z" fill="#6F32FF"/>
4
+ <path d="M0 0H69.342L34.6578 34.6311L0 0Z" fill="#6F32FF"/>
5
+ <path d="M69.2625 138.658H138.605L207.92 208H138.578L69.2625 138.658Z" fill="#17B581"/>
6
+ <path d="M69.2626 138.658L34.658 104L69.2891 69.342L138.605 69.3951L103.92 104.053L138.605 138.658H69.2626Z" fill="#15E99A"/>
7
+ <path d="M138.617 0.0529785H207.96L138.644 69.3953H69.3018L138.617 0.0529785Z" fill="#17B581"/>
8
+ <path d="M238.443 76.6909V101.773H238.683L258.598 76.6909H270.554L250.338 102.283L276.561 131.03H263.104L238.473 104.356V131.03H227.959V76.6909H238.473H238.443Z" fill="#12131E"/>
9
+ <path d="M317.606 76.6909H306.883L284.474 131.03H295.468L300.725 117.813L303.909 109.823L312.29 88.3157L321.451 109.823L324.876 117.813L330.523 131.03H341.607L317.606 76.6909Z" fill="#12131E"/>
10
+ <path d="M362.395 76.6909V122.83H388.769V131.03H351.912V76.6909H362.425H362.395Z" fill="#12131E"/>
11
+ <path d="M434.189 76.6909V84.8913H409.557V99.1595H433.137V107.36H409.557V122.8H434.729V131H399.074V76.6609H434.189V76.6909Z" fill="#12131E"/>
12
+ <path d="M457.939 76.6909V131.03H447.426V76.6909H457.939Z" fill="#12131E"/>
13
+ <path d="M493.404 76.6909C499.051 76.6909 504.098 77.8324 508.483 80.1453C512.899 82.4582 516.323 85.7024 518.756 89.8777C521.19 94.053 522.421 98.7389 522.421 103.966C522.421 109.192 521.19 113.998 518.756 118.114C516.323 122.229 512.839 125.413 508.303 127.666C503.797 129.919 498.631 131.06 492.773 131.06H470.635V76.721H493.374L493.404 76.6909ZM492.323 122.83C498.12 122.83 502.806 121.087 506.321 117.603C509.835 114.118 511.577 109.553 511.577 103.905C511.577 98.2583 509.805 93.4222 506.261 90.0279C502.716 86.6335 497.97 84.9214 491.962 84.9214H481.149V122.83H492.293H492.323Z" fill="#12131E"/>
14
+ <path d="M560.343 76C565.96 76 571.036 77.1715 575.542 79.4844C580.048 81.7974 583.622 85.1616 586.296 89.5172C588.969 93.8727 590.291 98.6788 590.291 103.875C590.291 109.072 588.999 113.668 586.386 118.023C583.772 122.379 580.198 125.743 575.662 128.146C571.096 130.549 565.99 131.751 560.283 131.751C554.575 131.751 549.529 130.519 544.933 128.086C540.337 125.653 536.733 122.289 534.179 118.023C531.626 113.758 530.334 109.042 530.334 103.875C530.334 98.7089 531.626 94.2332 534.179 89.8476C536.733 85.462 540.277 82.0677 544.813 79.6346C549.319 77.2015 554.515 76 560.373 76H560.343ZM541.178 103.875C541.178 107.48 541.989 110.724 543.641 113.608C545.293 116.491 547.546 118.714 550.46 120.306C553.374 121.898 556.678 122.679 560.343 122.679C565.93 122.679 570.495 120.937 574.1 117.423C577.705 113.908 579.477 109.402 579.477 103.875C579.477 100.271 578.666 97.0267 577.044 94.1431C575.422 91.2594 573.139 89.0065 570.195 87.4445C567.251 85.8525 563.947 85.0715 560.252 85.0715C556.558 85.0715 553.254 85.8525 550.31 87.4746C547.366 89.0967 545.113 91.2894 543.521 94.1731C541.929 97.0267 541.148 100.301 541.148 103.905L541.178 103.875Z" fill="#12131E"/>
15
+ <path d="M616.768 76C622.054 76 627.161 77.3217 632.057 79.965V89.3069C626.44 85.9126 621.424 84.2004 617.068 84.2004C614.425 84.2004 612.352 84.7111 610.88 85.7324C609.378 86.7537 608.627 88.1354 608.627 89.8476C608.627 91.8902 610.009 93.7826 612.803 95.5248C613.584 96.0355 616.587 97.5073 621.784 99.8804C626.23 101.983 629.444 104.326 631.426 106.879C633.409 109.432 634.37 112.526 634.37 116.131C634.37 120.787 632.688 124.572 629.324 127.425C625.959 130.279 621.604 131.721 616.287 131.721C612.803 131.721 609.829 131.33 607.336 130.579C604.843 129.828 602.019 128.507 598.925 126.644V116.311C604.722 121.147 610.189 123.55 615.326 123.55C617.879 123.55 619.952 122.98 621.544 121.868C623.136 120.757 623.917 119.285 623.917 117.423C623.917 114.899 622.535 112.857 619.802 111.265C617.519 110.033 614.575 108.531 610.97 106.789C606.705 104.837 603.491 102.584 601.388 99.9705C599.285 97.3872 598.204 94.3834 598.204 90.959C598.204 86.3932 599.916 82.7586 603.311 80.0552C606.705 77.3517 611.181 76 616.768 76Z" fill="#12131E"/>
16
+ <path d="M653.218 76.6909L666.735 110.214L680.973 76.6909H689.834L704.132 110.334L717.619 76.6909H728.343L705.965 131.721H702.42L685.298 91.4397L668.117 131.721H664.692L642.284 76.6909H653.127H653.218Z" fill="#12131E"/>
17
+ <path d="M811.502 76.6909C816.579 76.6909 820.724 78.1628 823.878 81.1065C827.032 84.0503 828.654 87.8351 828.654 92.491C828.654 97.1469 827.032 100.992 823.818 103.875C820.604 106.759 816.368 108.231 811.112 108.231H800.989V131.03H790.476V76.6909H811.472H811.502ZM808.889 100.031C811.683 100.031 813.875 99.3998 815.437 98.1081C816.999 96.8165 817.78 94.9241 817.78 92.4009C817.78 87.3845 814.566 84.8913 808.138 84.8913H800.989V100.031H808.889Z" fill="#12131E"/>
18
+ <path d="M756.475 76.6909H745.751L723.343 131.03H734.337L739.594 117.813L742.778 109.823L751.158 88.3157L760.32 109.823C760.32 109.823 762.408 114.692 763.744 117.813C765.953 122.973 769.392 131.03 769.392 131.03H780.476L756.475 76.6909Z" fill="#12131E"/>
19
+ </g>
20
+ <defs>
21
+ <clipPath id="clip0_2288_2">
22
+ <rect width="831" height="208" fill="white"/>
23
+ </clipPath>
24
+ </defs>
25
+ </svg>
package/brand/kaleidoswap-fullogo-horizontal.svg ADDED
@@ -0,0 +1,25 @@
1
+ <svg width="831" height="208" viewBox="0 0 831 208" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_2288_2)">
3
+ <path d="M69.342 208H0L34.6843 173.368L69.342 208Z" fill="#6F32FF"/>
4
+ <path d="M0 0H69.342L34.6578 34.6311L0 0Z" fill="#6F32FF"/>
5
+ <path d="M69.2625 138.658H138.605L207.92 208H138.578L69.2625 138.658Z" fill="#17B581"/>
6
+ <path d="M69.2626 138.658L34.658 104L69.2891 69.342L138.605 69.3951L103.92 104.053L138.605 138.658H69.2626Z" fill="#15E99A"/>
7
+ <path d="M138.617 0.0529785H207.96L138.644 69.3953H69.3018L138.617 0.0529785Z" fill="#17B581"/>
8
+ <path d="M238.443 76.6909V101.773H238.683L258.598 76.6909H270.554L250.338 102.283L276.561 131.03H263.104L238.473 104.356V131.03H227.959V76.6909H238.473H238.443Z" fill="white"/>
9
+ <path d="M317.606 76.6909H306.883L284.474 131.03H295.468L300.725 117.813L303.909 109.823L312.29 88.3157L321.451 109.823L324.876 117.813L330.523 131.03H341.607L317.606 76.6909Z" fill="white"/>
10
+ <path d="M362.395 76.6909V122.83H388.769V131.03H351.912V76.6909H362.425H362.395Z" fill="white"/>
11
+ <path d="M434.189 76.6909V84.8913H409.557V99.1595H433.137V107.36H409.557V122.8H434.729V131H399.074V76.6609H434.189V76.6909Z" fill="white"/>
12
+ <path d="M457.939 76.6909V131.03H447.426V76.6909H457.939Z" fill="white"/>
13
+ <path d="M493.404 76.6909C499.051 76.6909 504.098 77.8324 508.483 80.1453C512.899 82.4582 516.323 85.7024 518.756 89.8777C521.19 94.053 522.421 98.7389 522.421 103.966C522.421 109.192 521.19 113.998 518.756 118.114C516.323 122.229 512.839 125.413 508.303 127.666C503.797 129.919 498.631 131.06 492.773 131.06H470.635V76.721H493.374L493.404 76.6909ZM492.323 122.83C498.12 122.83 502.806 121.087 506.321 117.603C509.835 114.118 511.577 109.553 511.577 103.905C511.577 98.2583 509.805 93.4222 506.261 90.0279C502.716 86.6335 497.97 84.9214 491.962 84.9214H481.149V122.83H492.293H492.323Z" fill="white"/>
14
+ <path d="M560.343 76C565.96 76 571.036 77.1715 575.542 79.4844C580.048 81.7974 583.622 85.1616 586.296 89.5172C588.969 93.8727 590.291 98.6788 590.291 103.875C590.291 109.072 588.999 113.668 586.386 118.023C583.772 122.379 580.198 125.743 575.662 128.146C571.096 130.549 565.99 131.751 560.283 131.751C554.575 131.751 549.529 130.519 544.933 128.086C540.337 125.653 536.733 122.289 534.179 118.023C531.626 113.758 530.334 109.042 530.334 103.875C530.334 98.7089 531.626 94.2332 534.179 89.8476C536.733 85.462 540.277 82.0677 544.813 79.6346C549.319 77.2015 554.515 76 560.373 76H560.343ZM541.178 103.875C541.178 107.48 541.989 110.724 543.641 113.608C545.293 116.491 547.546 118.714 550.46 120.306C553.374 121.898 556.678 122.679 560.343 122.679C565.93 122.679 570.495 120.937 574.1 117.423C577.705 113.908 579.477 109.402 579.477 103.875C579.477 100.271 578.666 97.0267 577.044 94.1431C575.422 91.2594 573.139 89.0065 570.195 87.4445C567.251 85.8525 563.947 85.0715 560.252 85.0715C556.558 85.0715 553.254 85.8525 550.31 87.4746C547.366 89.0967 545.113 91.2894 543.521 94.1731C541.929 97.0267 541.148 100.301 541.148 103.905L541.178 103.875Z" fill="white"/>
15
+ <path d="M616.768 76C622.054 76 627.161 77.3217 632.057 79.965V89.3069C626.44 85.9126 621.424 84.2004 617.068 84.2004C614.425 84.2004 612.352 84.7111 610.88 85.7324C609.378 86.7537 608.627 88.1354 608.627 89.8476C608.627 91.8902 610.009 93.7826 612.803 95.5248C613.584 96.0355 616.587 97.5073 621.784 99.8804C626.23 101.983 629.444 104.326 631.426 106.879C633.409 109.432 634.37 112.526 634.37 116.131C634.37 120.787 632.688 124.572 629.324 127.425C625.959 130.279 621.604 131.721 616.287 131.721C612.803 131.721 609.829 131.33 607.336 130.579C604.843 129.828 602.019 128.507 598.925 126.644V116.311C604.722 121.147 610.189 123.55 615.326 123.55C617.879 123.55 619.952 122.98 621.544 121.868C623.136 120.757 623.917 119.285 623.917 117.423C623.917 114.899 622.535 112.857 619.802 111.265C617.519 110.033 614.575 108.531 610.97 106.789C606.705 104.837 603.491 102.584 601.388 99.9705C599.285 97.3872 598.204 94.3834 598.204 90.959C598.204 86.3932 599.916 82.7586 603.311 80.0552C606.705 77.3517 611.181 76 616.768 76Z" fill="white"/>
16
+ <path d="M653.218 76.6909L666.735 110.214L680.973 76.6909H689.834L704.132 110.334L717.619 76.6909H728.343L705.965 131.721H702.42L685.298 91.4397L668.117 131.721H664.692L642.284 76.6909H653.127H653.218Z" fill="white"/>
17
+ <path d="M811.502 76.6909C816.579 76.6909 820.724 78.1628 823.878 81.1065C827.032 84.0503 828.654 87.8351 828.654 92.491C828.654 97.1469 827.032 100.992 823.818 103.875C820.604 106.759 816.368 108.231 811.112 108.231H800.989V131.03H790.476V76.6909H811.472H811.502ZM808.889 100.031C811.683 100.031 813.875 99.3998 815.437 98.1081C816.999 96.8165 817.78 94.9241 817.78 92.4009C817.78 87.3845 814.566 84.8913 808.138 84.8913H800.989V100.031H808.889Z" fill="white"/>
18
+ <path d="M756.475 76.6909H745.751L723.343 131.03H734.337L739.594 117.813L742.778 109.823L751.158 88.3157L760.32 109.823C760.32 109.823 762.408 114.692 763.744 117.813C765.953 122.973 769.392 131.03 769.392 131.03H780.476L756.475 76.6909Z" fill="white"/>
19
+ </g>
20
+ <defs>
21
+ <clipPath id="clip0_2288_2">
22
+ <rect width="831" height="208" fill="white"/>
23
+ </clipPath>
24
+ </defs>
25
+ </svg>
package/brand/kaleidoswap-fullogo-vertical-on-light.svg ADDED
@@ -0,0 +1,18 @@
1
+ <svg width="1049" height="648" viewBox="0 0 1049 648" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M455.645 411.865H318.339L387.018 343.29L455.645 411.865Z" fill="#6F32FF"/>
3
+ <path d="M318.339 0H455.645L386.966 68.574L318.339 0Z" fill="#6F32FF"/>
4
+ <path d="M455.487 274.559H592.794L730.047 411.866H592.74L455.487 274.559Z" fill="#17B581"/>
5
+ <path d="M455.488 274.559L386.966 205.933L455.54 137.306L592.794 137.411L524.115 206.038L592.795 274.559H455.488Z" fill="#15E99A"/>
6
+ <path d="M592.818 0.104797H730.125L592.871 137.411H455.565L592.818 0.104797Z" fill="#17B581"/>
7
+ <path d="M18.2371 552.068V595.701H18.6551L53.3003 552.068H74.0979L38.9301 596.59L84.549 646.598H61.1386L18.2893 600.195V646.598H0V552.068H18.2893H18.2371Z" fill="#12131E"/>
8
+ <path d="M155.952 552.068H137.297L98.3142 646.598H117.44L126.584 623.606L132.123 609.706L146.703 572.291L162.64 609.706L168.597 623.606L178.421 646.598H197.704L155.952 552.068Z" fill="#12131E"/>
9
+ <path d="M233.868 552.068V632.332H279.748V646.598H215.631V552.068H233.92H233.868Z" fill="#12131E"/>
10
+ <path d="M358.761 552.068V566.334H315.912V591.155H356.932V605.421H315.912V632.28H359.702V646.545H297.675V552.016H358.761V552.068Z" fill="#12131E"/>
11
+ <path d="M400.078 552.068V646.598H381.789V552.068H400.078Z" fill="#12131E"/>
12
+ <path d="M461.775 552.068C471.599 552.068 480.378 554.054 488.007 558.077C495.689 562.101 501.646 567.745 505.878 575.008C510.111 582.272 512.254 590.423 512.254 599.516C512.254 608.608 510.111 616.969 505.878 624.128C501.646 631.287 495.584 636.826 487.694 640.745C479.855 644.664 470.867 646.65 460.678 646.65H422.166V552.12H461.723L461.775 552.068ZM459.894 632.332C469.979 632.332 478.131 629.301 484.245 623.24C490.359 617.178 493.389 609.235 493.389 599.411C493.389 589.587 490.306 581.174 484.14 575.269C477.974 569.365 469.718 566.386 459.267 566.386H440.455V632.332H459.842H459.894Z" fill="#12131E"/>
13
+ <path d="M578.223 550.866C587.994 550.866 596.826 552.904 604.664 556.927C612.502 560.951 618.721 566.804 623.371 574.381C628.022 581.958 630.321 590.319 630.321 599.359C630.321 608.399 628.074 616.394 623.528 623.971C618.982 631.548 612.763 637.401 604.873 641.581C596.93 645.761 588.047 647.852 578.118 647.852C568.19 647.852 559.411 645.709 551.416 641.476C543.421 637.244 537.15 631.391 532.708 623.971C528.267 616.551 526.02 608.347 526.02 599.359C526.02 590.371 528.267 582.585 532.708 574.956C537.15 567.326 543.316 561.421 551.207 557.189C559.045 552.956 568.085 550.866 578.275 550.866H578.223ZM544.884 599.359C544.884 605.629 546.295 611.273 549.169 616.289C552.043 621.306 555.962 625.173 561.031 627.942C566.1 630.712 571.848 632.07 578.223 632.07C587.942 632.07 595.885 629.04 602.156 622.926C608.426 616.812 611.509 608.974 611.509 599.359C611.509 593.088 610.098 587.445 607.277 582.428C604.455 577.412 600.484 573.492 595.363 570.775C590.241 568.006 584.493 566.647 578.066 566.647C571.639 566.647 565.89 568.006 560.769 570.827C555.648 573.649 551.729 577.464 548.96 582.48C546.19 587.445 544.832 593.14 544.832 599.411L544.884 599.359Z" fill="#12131E"/>
14
+ <path d="M676.381 550.866C685.578 550.866 694.461 553.165 702.979 557.764V574.015C693.207 568.11 684.481 565.132 676.904 565.132C672.305 565.132 668.7 566.02 666.139 567.797C663.526 569.573 662.22 571.977 662.22 574.956C662.22 578.509 664.624 581.801 669.483 584.832C670.842 585.72 676.068 588.281 685.108 592.409C692.842 596.067 698.433 600.143 701.882 604.584C705.331 609.026 707.003 614.408 707.003 620.679C707.003 628.778 704.076 635.363 698.224 640.327C692.371 645.291 684.794 647.799 675.545 647.799C669.483 647.799 664.31 647.12 659.973 645.814C655.636 644.507 650.724 642.208 645.342 638.968V620.992C655.427 629.405 664.937 633.586 673.873 633.586C678.315 633.586 681.92 632.593 684.69 630.66C687.459 628.726 688.818 626.166 688.818 622.926C688.818 618.536 686.414 614.983 681.659 612.213C677.688 610.071 672.567 607.458 666.296 604.427C658.876 601.031 653.284 597.112 649.626 592.566C645.969 588.072 644.087 582.846 644.087 576.889C644.087 568.946 647.066 562.623 652.971 557.92C658.876 553.217 666.662 550.866 676.381 550.866Z" fill="#12131E"/>
15
+ <path d="M739.79 552.068L763.305 610.385L788.074 552.068H803.489L828.363 610.594L851.825 552.068H870.481L831.55 647.8H825.384L795.599 577.725L765.709 647.8H759.752L720.769 552.068H739.633H739.79Z" fill="#12131E"/>
16
+ <path d="M1018.63 552.068C1027.46 552.068 1034.67 554.629 1040.16 559.75C1045.64 564.871 1048.46 571.455 1048.46 579.554C1048.46 587.654 1045.64 594.343 1040.05 599.359C1034.46 604.376 1027.09 606.936 1017.95 606.936H1000.34V646.598H982.048V552.068H1018.57H1018.63ZM1014.08 592.67C1018.94 592.67 1022.75 591.573 1025.47 589.326C1028.19 587.079 1029.55 583.787 1029.55 579.398C1029.55 570.671 1023.96 566.334 1012.77 566.334H1000.34V592.67H1014.08Z" fill="#12131E"/>
17
+ <path d="M922.9 552.068H904.245L865.262 646.598H884.388L893.532 623.606L899.071 609.706L913.65 572.291L929.588 609.706C929.588 609.706 933.221 618.176 935.545 623.606C939.388 632.582 945.369 646.598 945.369 646.598H964.652L922.9 552.068Z" fill="#12131E"/>
18
+ </svg>
package/brand/kaleidoswap-fullogo-vertical.svg ADDED
@@ -0,0 +1,18 @@
1
+ <svg width="1049" height="648" viewBox="0 0 1049 648" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M455.645 411.865H318.339L387.018 343.29L455.645 411.865Z" fill="#6F32FF"/>
3
+ <path d="M318.339 0H455.645L386.966 68.574L318.339 0Z" fill="#6F32FF"/>
4
+ <path d="M455.487 274.559H592.794L730.047 411.866H592.74L455.487 274.559Z" fill="#17B581"/>
5
+ <path d="M455.488 274.559L386.966 205.933L455.54 137.306L592.794 137.411L524.115 206.038L592.795 274.559H455.488Z" fill="#15E99A"/>
6
+ <path d="M592.818 0.104797H730.125L592.871 137.411H455.565L592.818 0.104797Z" fill="#17B581"/>
7
+ <path d="M18.2371 552.068V595.701H18.6551L53.3003 552.068H74.0979L38.9301 596.59L84.549 646.598H61.1386L18.2893 600.195V646.598H0V552.068H18.2893H18.2371Z" fill="white"/>
8
+ <path d="M155.952 552.068H137.297L98.3142 646.598H117.44L126.584 623.606L132.123 609.706L146.703 572.291L162.64 609.706L168.597 623.606L178.421 646.598H197.704L155.952 552.068Z" fill="white"/>
9
+ <path d="M233.868 552.068V632.332H279.748V646.598H215.631V552.068H233.92H233.868Z" fill="white"/>
10
+ <path d="M358.761 552.068V566.334H315.912V591.155H356.932V605.421H315.912V632.28H359.702V646.545H297.675V552.016H358.761V552.068Z" fill="white"/>
11
+ <path d="M400.078 552.068V646.598H381.789V552.068H400.078Z" fill="white"/>
12
+ <path d="M461.775 552.068C471.599 552.068 480.378 554.054 488.007 558.077C495.689 562.101 501.646 567.745 505.878 575.008C510.111 582.272 512.254 590.423 512.254 599.516C512.254 608.608 510.111 616.969 505.878 624.128C501.646 631.287 495.584 636.826 487.694 640.745C479.855 644.664 470.867 646.65 460.678 646.65H422.166V552.12H461.723L461.775 552.068ZM459.894 632.332C469.979 632.332 478.131 629.301 484.245 623.24C490.359 617.178 493.389 609.235 493.389 599.411C493.389 589.587 490.306 581.174 484.14 575.269C477.974 569.365 469.718 566.386 459.267 566.386H440.455V632.332H459.842H459.894Z" fill="white"/>
13
+ <path d="M578.223 550.866C587.994 550.866 596.826 552.904 604.664 556.927C612.502 560.951 618.721 566.804 623.371 574.381C628.022 581.958 630.321 590.319 630.321 599.359C630.321 608.399 628.074 616.394 623.528 623.971C618.982 631.548 612.763 637.401 604.873 641.581C596.93 645.761 588.047 647.852 578.118 647.852C568.19 647.852 559.411 645.709 551.416 641.476C543.421 637.244 537.15 631.391 532.708 623.971C528.267 616.551 526.02 608.347 526.02 599.359C526.02 590.371 528.267 582.585 532.708 574.956C537.15 567.326 543.316 561.421 551.207 557.189C559.045 552.956 568.085 550.866 578.275 550.866H578.223ZM544.884 599.359C544.884 605.629 546.295 611.273 549.169 616.289C552.043 621.306 555.962 625.173 561.031 627.942C566.1 630.712 571.848 632.07 578.223 632.07C587.942 632.07 595.885 629.04 602.156 622.926C608.426 616.812 611.509 608.974 611.509 599.359C611.509 593.088 610.098 587.445 607.277 582.428C604.455 577.412 600.484 573.492 595.363 570.775C590.241 568.006 584.493 566.647 578.066 566.647C571.639 566.647 565.89 568.006 560.769 570.827C555.648 573.649 551.729 577.464 548.96 582.48C546.19 587.445 544.832 593.14 544.832 599.411L544.884 599.359Z" fill="white"/>
14
+ <path d="M676.381 550.866C685.578 550.866 694.461 553.165 702.979 557.764V574.015C693.207 568.11 684.481 565.132 676.904 565.132C672.305 565.132 668.7 566.02 666.139 567.797C663.526 569.573 662.22 571.977 662.22 574.956C662.22 578.509 664.624 581.801 669.483 584.832C670.842 585.72 676.068 588.281 685.108 592.409C692.842 596.067 698.433 600.143 701.882 604.584C705.331 609.026 707.003 614.408 707.003 620.679C707.003 628.778 704.076 635.363 698.224 640.327C692.371 645.291 684.794 647.799 675.545 647.799C669.483 647.799 664.31 647.12 659.973 645.814C655.636 644.507 650.724 642.208 645.342 638.968V620.992C655.427 629.405 664.937 633.586 673.873 633.586C678.315 633.586 681.92 632.593 684.69 630.66C687.459 628.726 688.818 626.166 688.818 622.926C688.818 618.536 686.414 614.983 681.659 612.213C677.688 610.071 672.567 607.458 666.296 604.427C658.876 601.031 653.284 597.112 649.626 592.566C645.969 588.072 644.087 582.846 644.087 576.889C644.087 568.946 647.066 562.623 652.971 557.92C658.876 553.217 666.662 550.866 676.381 550.866Z" fill="white"/>
15
+ <path d="M739.79 552.068L763.305 610.385L788.074 552.068H803.489L828.363 610.594L851.825 552.068H870.481L831.55 647.8H825.384L795.599 577.725L765.709 647.8H759.752L720.769 552.068H739.633H739.79Z" fill="white"/>
16
+ <path d="M1018.63 552.068C1027.46 552.068 1034.67 554.629 1040.16 559.75C1045.64 564.871 1048.46 571.455 1048.46 579.554C1048.46 587.654 1045.64 594.343 1040.05 599.359C1034.46 604.376 1027.09 606.936 1017.95 606.936H1000.34V646.598H982.048V552.068H1018.57H1018.63ZM1014.08 592.67C1018.94 592.67 1022.75 591.573 1025.47 589.326C1028.19 587.079 1029.55 583.787 1029.55 579.398C1029.55 570.671 1023.96 566.334 1012.77 566.334H1000.34V592.67H1014.08Z" fill="white"/>
17
+ <path d="M922.9 552.068H904.245L865.262 646.598H884.388L893.532 623.606L899.071 609.706L913.65 572.291L929.588 609.706C929.588 609.706 933.221 618.176 935.545 623.606C939.388 632.582 945.369 646.598 945.369 646.598H964.652L922.9 552.068Z" fill="white"/>
18
+ </svg>
package/brand/kaleidoswap-pictogram.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg width="412" height="412" viewBox="0 0 412 412" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M137.306 411.865H0.000244141L68.6795 343.29L137.306 411.865Z" fill="#6F32FF"/>
3
+ <path d="M0 0H137.306L68.6267 68.574L0 0Z" fill="#6F32FF"/>
4
+ <path d="M137.148 274.559H274.455L411.708 411.866H274.401L137.148 274.559Z" fill="#17B581"/>
5
+ <path d="M137.149 274.559L68.6274 205.933L137.201 137.306L274.455 137.411L205.776 206.038L274.456 274.559H137.149Z" fill="#15E99A"/>
6
+ <path d="M274.479 0.104797H411.786L274.533 137.411H137.226L274.479 0.104797Z" fill="#17B581"/>
7
+ </svg>
package/dist/css/brand.css ADDED
@@ -0,0 +1,32 @@
1
+ /* AUTO-GENERATED — do not edit by hand.
2
+ * Source: scripts/generate-css.ts ← src/tokens/brand.ts
3
+ * Regenerate: npm run generate:css
4
+ *
5
+ * kaleido-ui brand theme (opt-in). Import after kaleido-ui/css:
6
+ * @import "kaleido-ui/css";
7
+ * @import "kaleido-ui/css/brand";
8
+ *
9
+ * - Light: the primary (#17B581, 2.1 to 2.6:1 on the light ramp) becomes the
10
+ * AA-safe brand green, so text-primary, links, ghost buttons and rings read.
11
+ * - Dark: danger and info are lifted to clear 4.5:1 on every dark surface.
12
+ * - Both: bg-page-radial draws the coloured brand wash instead of the haze.
13
+ */
14
+ :root:not(.dark),
15
+ .light {
16
+ --primary: #086E46;
17
+ --ring: #086E46;
18
+ }
19
+
20
+ .light {
21
+ --app-primary: 8 110 70;
22
+ --app-border-strong: 8 110 70;
23
+ }
24
+
25
+ .dark {
26
+ --color-danger: #FF9999;
27
+ --color-info: #8BBDFF;
28
+ }
29
+
30
+ :root {
31
+ --gradient-page: var(--gradient-page-brand);
32
+ }
package/dist/css/kaleido-ui.css CHANGED
@@ -3,7 +3,11 @@
3
3
  * Regenerate: npm run generate:css
4
4
  */
5
5
 
6
- /* ── Material Symbols ──────────────────────────────────────────────────── */
6
+ /* ── Material Symbols (opt-in) ────────────────────────────────────────────
7
+ No kaleido-ui component renders this class: every glyph is an inline SVG
8
+ (the Icon primitive), and tests/no-font-ligatures.test.tsx keeps it so.
9
+ These rules serve a consumer that self-hosts the Material Symbols font and
10
+ writes its own ligature spans. */
7
11
  .material-symbols-outlined {
8
12
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
9
13
  /*
@@ -49,6 +53,13 @@
49
53
  --chart-3: #F7931A;
50
54
  --chart-4: #7C3AED;
51
55
  --chart-5: #DD352E;
56
+ /* Chart series, in slot order — from src/tokens/chart.ts */
57
+ --series-1: #0b764d;
58
+ --series-2: #4e40a0;
59
+ --series-3: #0f9cd0;
60
+ --series-4: #dea805;
61
+ --series-5: #c34189;
62
+ --series-6: #fe904d;
52
63
  }
53
64
 
54
65
  /* ── Semantic colors (dark mode) — from src/tokens/colors.ts ───────────── */
@@ -76,6 +87,13 @@
76
87
  --chart-3: #F7931A;
77
88
  --chart-4: #7C3AED;
78
89
  --chart-5: #DD352E;
90
+ /* Chart series, in slot order — from src/tokens/chart.ts */
91
+ --series-1: #098356;
92
+ --series-2: #7061db;
93
+ --series-3: #179fd4;
94
+ --series-4: #b3880f;
95
+ --series-5: #db589e;
96
+ --series-6: #de6907;
79
97
  }
80
98
 
81
99
  /* ── App semantic colors (slate identity) — from src/tokens/app-semantic.ts ─
@@ -135,6 +153,56 @@
135
153
  --app-divider: 200 203 224;
136
154
  }
137
155
 
156
+ /* ── Brand layer — from src/tokens/brand.ts ─────────────────────────────
157
+ Per-theme foregrounds that clear WCAG AA (text-brand, text-danger-fg,
158
+ text-network-lightning-fg, …), the coloured page wash, the brand gradient
159
+ and the accent glows. Purely additive: no existing token changes.
160
+ Light is the default (like --primary / --card above); .dark switches. ── */
161
+ :root,
162
+ .light {
163
+ --brand: #086E46;
164
+ --accent-send-fg: #6428F0;
165
+ --accent-recv-fg: #086E46;
166
+ --success-fg: #076A43;
167
+ --warning-fg: #92400E;
168
+ --danger-fg: #991B1B;
169
+ --info-fg: #1E40AF;
170
+ --network-bitcoin-fg: #92400E;
171
+ --network-lightning-fg: #854D0E;
172
+ --network-liquid-fg: #115E59;
173
+ --network-arkade-fg: #5B21B6;
174
+ --network-spark-fg: #9A3412;
175
+ --network-rgb-fg: #991B1B;
176
+ --network-taproot-fg: #464A69;
177
+ --gradient-page-brand: radial-gradient(ellipse 70% 45% at 50% -5%, rgba(21, 233, 154, 0.16) 0%, transparent 70%), radial-gradient(ellipse 50% 32% at 0% 68%, rgba(124, 58, 237, 0.12) 0%, transparent 70%);
178
+ --brand-gradient: linear-gradient(90deg, #086E46 0%, #0369A1 55%, #6D28D9 100%);
179
+ --glow-send: 0 0 0 1px rgba(100, 40, 240, 0.22), 0 12px 32px -14px rgba(100, 40, 240, 0.4);
180
+ --glow-recv: 0 0 0 1px rgba(8, 110, 70, 0.2), 0 12px 32px -14px rgba(8, 110, 70, 0.35);
181
+ --glow-card: 0 0 0 1px rgba(20, 20, 60, 0.06), 0 30px 80px -40px rgba(100, 40, 240, 0.28);
182
+ }
183
+
184
+ .dark {
185
+ --brand: #15E99A;
186
+ --accent-send-fg: #AD94FB;
187
+ --accent-recv-fg: #15E99A;
188
+ --success-fg: #15E99A;
189
+ --warning-fg: #FACC15;
190
+ --danger-fg: #FF9999;
191
+ --info-fg: #8BBDFF;
192
+ --network-bitcoin-fg: #F2B063;
193
+ --network-lightning-fg: #E4D56F;
194
+ --network-liquid-fg: #5DE5D6;
195
+ --network-arkade-fg: #B49CF5;
196
+ --network-spark-fg: #F2A163;
197
+ --network-rgb-fg: #F09490;
198
+ --network-taproot-fg: #C4CACD;
199
+ --gradient-page-brand: radial-gradient(ellipse 70% 45% at 50% -5%, rgba(21, 233, 154, 0.13) 0%, transparent 70%), radial-gradient(ellipse 50% 32% at 0% 68%, rgba(124, 58, 237, 0.16) 0%, transparent 70%), radial-gradient(ellipse 45% 40% at 100% 50%, rgba(56, 189, 248, 0.07) 0%, transparent 70%);
200
+ --brand-gradient: linear-gradient(90deg, #15E99A 0%, #38BDF8 55%, #A78BFA 100%);
201
+ --glow-send: 0 0 0 1px rgba(167, 139, 250, 0.28), 0 12px 40px -12px rgba(124, 58, 237, 0.55);
202
+ --glow-recv: 0 0 0 1px rgba(21, 233, 154, 0.22), 0 12px 40px -12px rgba(21, 233, 154, 0.35);
203
+ --glow-card: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 40px 100px -40px rgba(124, 58, 237, 0.35), 0 -20px 80px -50px rgba(21, 233, 154, 0.3);
204
+ }
205
+
138
206
  /* ─────────────────────────────────────────────────────────────────────────
139
207
  Tailwind v4 @theme
140
208
  @theme inline — semantic colors: utilities reference CSS vars so dark mode works at runtime.
@@ -166,6 +234,12 @@
166
234
  --color-chart-3: var(--chart-3);
167
235
  --color-chart-4: var(--chart-4);
168
236
  --color-chart-5: var(--chart-5);
237
+ --color-series-1: var(--series-1);
238
+ --color-series-2: var(--series-2);
239
+ --color-series-3: var(--series-3);
240
+ --color-series-4: var(--series-4);
241
+ --color-series-5: var(--series-5);
242
+ --color-series-6: var(--series-6);
169
243
 
170
244
  /* App semantic colors (slate identity) — channel-backed via the --app-* vars.
171
245
  These intentionally override the shadcn-style --color-primary / --color-secondary
@@ -198,6 +272,25 @@
198
272
  --color-status-danger-subtle: rgb(var(--app-status-danger) / 0.15);
199
273
  --color-status-warning-subtle: rgb(var(--app-status-warning) / 0.15);
200
274
  --color-status-info-subtle: rgb(var(--app-status-info) / 0.15);
275
+
276
+ /* Brand layer — per-theme foregrounds and glows (see the blocks above) */
277
+ --color-brand: var(--brand);
278
+ --color-accent-send-fg: var(--accent-send-fg);
279
+ --color-accent-recv-fg: var(--accent-recv-fg);
280
+ --color-success-fg: var(--success-fg);
281
+ --color-warning-fg: var(--warning-fg);
282
+ --color-danger-fg: var(--danger-fg);
283
+ --color-info-fg: var(--info-fg);
284
+ --color-network-bitcoin-fg: var(--network-bitcoin-fg);
285
+ --color-network-lightning-fg: var(--network-lightning-fg);
286
+ --color-network-liquid-fg: var(--network-liquid-fg);
287
+ --color-network-arkade-fg: var(--network-arkade-fg);
288
+ --color-network-spark-fg: var(--network-spark-fg);
289
+ --color-network-rgb-fg: var(--network-rgb-fg);
290
+ --color-network-taproot-fg: var(--network-taproot-fg);
291
+ --shadow-glow-send: var(--glow-send);
292
+ --shadow-glow-recv: var(--glow-recv);
293
+ --shadow-glow-card: var(--glow-card);
201
294
  }
202
295
 
203
296
  @theme {
@@ -375,6 +468,9 @@
375
468
  --animate-accordion-down: accordion-down 0.2s ease-out;
376
469
  --animate-accordion-up: accordion-up 0.2s ease-out;
377
470
  --animate-fade-in: fade-in 0.3s ease-out;
471
+ --animate-fade-out: fade-out 0.2s ease-in;
472
+ --animate-drawer-in-left: drawer-in-left 0.3s ease-in-out;
473
+ --animate-drawer-out-left: drawer-out-left 0.2s ease-in;
378
474
  --animate-slide-up: slide-up 0.3s ease-out;
379
475
  --animate-slide-in-from-bottom: slide-in-from-bottom 0.4s ease-out;
380
476
  --animate-stagger-up: stagger-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
@@ -410,6 +506,33 @@
410
506
  }
411
507
  }
412
508
 
509
+ @keyframes fade-out {
510
+ from {
511
+ opacity: 1;
512
+ }
513
+ to {
514
+ opacity: 0;
515
+ }
516
+ }
517
+
518
+ @keyframes drawer-in-left {
519
+ from {
520
+ transform: translateX(-100%);
521
+ }
522
+ to {
523
+ transform: translateX(0);
524
+ }
525
+ }
526
+
527
+ @keyframes drawer-out-left {
528
+ from {
529
+ transform: translateX(0);
530
+ }
531
+ to {
532
+ transform: translateX(-100%);
533
+ }
534
+ }
535
+
413
536
  @keyframes slide-up {
414
537
  from {
415
538
  opacity: 0;
@@ -475,6 +598,79 @@
475
598
  .bg-gradient-headline {
476
599
  background-image: var(--gradient-headline);
477
600
  }
601
+ /* Coloured, per-theme page wash (mint, violet, sky). The static
602
+ bg-page-radial above is the older neutral haze and is unchanged. */
603
+ .bg-page-brand {
604
+ background-image: var(--gradient-page-brand);
605
+ }
606
+ /* Brand gradient text, for large display type only (the dark stops clear
607
+ 3:1, not 4.5:1). */
608
+ .text-gradient-brand {
609
+ background-image: var(--brand-gradient);
610
+ -webkit-background-clip: text;
611
+ background-clip: text;
612
+ color: transparent;
613
+ }
614
+ /* Halo backdrop, rendered by <HaloBackdrop />: three heavily blurred blobs
615
+ drifting slowly behind a screen. Colours: --halo-primary / --halo-secondary. */
616
+ .kui-halo {
617
+ --halo-primary: #2BEE79;
618
+ --halo-secondary: #6F32FF;
619
+ }
620
+ .kui-halo-blob {
621
+ position: absolute;
622
+ aspect-ratio: 1;
623
+ border-radius: 9999px;
624
+ filter: blur(110px);
625
+ will-change: transform;
626
+ }
627
+ .kui-halo-blob-a {
628
+ width: 55%;
629
+ top: -8%;
630
+ left: -12%;
631
+ background: var(--halo-primary);
632
+ opacity: 0.14;
633
+ animation: kui-halo-drift-a 26s ease-in-out infinite alternate;
634
+ }
635
+ .kui-halo-blob-b {
636
+ width: 60%;
637
+ top: 28%;
638
+ right: -18%;
639
+ background: var(--halo-secondary);
640
+ opacity: 0.16;
641
+ animation: kui-halo-drift-b 34s ease-in-out infinite alternate;
642
+ }
643
+ .kui-halo-blob-c {
644
+ width: 45%;
645
+ bottom: -12%;
646
+ left: 12%;
647
+ background: var(--halo-primary);
648
+ opacity: 0.12;
649
+ animation: kui-halo-drift-c 22s ease-in-out infinite alternate;
650
+ }
651
+ .kui-halo[data-animated='false'] .kui-halo-blob {
652
+ animation: none;
653
+ }
654
+ @media (prefers-reduced-motion: reduce) {
655
+ .kui-halo-blob {
656
+ animation: none;
657
+ }
658
+ }
659
+ @keyframes kui-halo-drift-a {
660
+ from { transform: translate3d(0, 22%, 0) scale(0.92); }
661
+ 50% { transform: translate3d(9%, -6%, 0) scale(1.05); }
662
+ to { transform: translate3d(-5%, -30%, 0) scale(1.14); }
663
+ }
664
+ @keyframes kui-halo-drift-b {
665
+ from { transform: translate3d(0, -28%, 0) scale(1.12); }
666
+ 50% { transform: translate3d(-7%, -2%, 0) scale(1); }
667
+ to { transform: translate3d(6%, 20%, 0) scale(0.92); }
668
+ }
669
+ @keyframes kui-halo-drift-c {
670
+ from { transform: translate3d(0, 18%, 0) scale(1); }
671
+ 50% { transform: translate3d(-5%, -5%, 0) scale(1.08); }
672
+ to { transform: translate3d(7%, -26%, 0) scale(0.95); }
673
+ }
478
674
  /* Legacy app scroll region. Prefer the ScrollArea component for visible overlay scrollbars. */
479
675
  .app-scrollbar {
480
676
  -ms-overflow-style: none;
package/dist/native/index.cjs CHANGED
@@ -733,6 +733,10 @@ function KText({
733
733
  // src/native/components/k-screen.tsx
734
734
  var import_react_native7 = require("react-native");
735
735
  var import_jsx_runtime9 = require("react/jsx-runtime");
736
+ var legacyAndroidStatusBar = {
737
+ backgroundColor: "transparent",
738
+ translucent: true
739
+ };
736
740
  function KScreen({ elevated = false, style, children, ...rest }) {
737
741
  const { theme, mode } = useKaleidoTheme();
738
742
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
@@ -745,8 +749,7 @@ function KScreen({ elevated = false, style, children, ...rest }) {
745
749
  import_react_native7.StatusBar,
746
750
  {
747
751
  barStyle: mode === "dark" ? "light-content" : "dark-content",
748
- backgroundColor: "transparent",
749
- translucent: true
752
+ ...legacyAndroidStatusBar
750
753
  }
751
754
  ),
752
755
  children
@@ -1354,12 +1357,81 @@ var shadow = {
1354
1357
  toast: "0 0 30px rgba(0, 0, 0, 0.3)"
1355
1358
  };
1356
1359
 
1360
+ // src/tokens/brand.ts
1361
+ var brandMark = {
1362
+ violet: "#6F32FF",
1363
+ green: "#17B581",
1364
+ mint: "#15E99A"
1365
+ };
1366
+ var themedForeground = {
1367
+ light: {
1368
+ // Brand green darkened in the mint's own hue until it reads on white.
1369
+ brand: "#086E46",
1370
+ "accent-send-fg": "#6428F0",
1371
+ "accent-recv-fg": "#086E46",
1372
+ "success-fg": "#076A43",
1373
+ // a shade under brand: it also sits on a 14% mint tint
1374
+ // Tailwind -800 shades: -700 measured only 3.7 to 4.3:1 on the light ramp.
1375
+ "warning-fg": "#92400E",
1376
+ "danger-fg": "#991B1B",
1377
+ "info-fg": "#1E40AF",
1378
+ "network-bitcoin-fg": "#92400E",
1379
+ "network-lightning-fg": "#854D0E",
1380
+ "network-liquid-fg": "#115E59",
1381
+ "network-arkade-fg": "#5B21B6",
1382
+ "network-spark-fg": "#9A3412",
1383
+ "network-rgb-fg": "#991B1B",
1384
+ "network-taproot-fg": "#464A69"
1385
+ },
1386
+ dark: {
1387
+ brand: colors.primary,
1388
+ "accent-send-fg": "#AD94FB",
1389
+ "accent-recv-fg": colors.primary,
1390
+ "success-fg": colors.success,
1391
+ "warning-fg": colors.warning,
1392
+ // danger #F94040 and info #4290FF are 3.0:1 and 3.2:1 on the elevated
1393
+ // surface. Same hues, lifted until they clear 4.5:1.
1394
+ "danger-fg": "#FF9999",
1395
+ "info-fg": "#8BBDFF",
1396
+ "network-bitcoin-fg": colors.networkText.bitcoin,
1397
+ "network-lightning-fg": colors.networkText.lightning,
1398
+ "network-liquid-fg": colors.networkText.liquid,
1399
+ // The rgb and arkade *-text tokens dip under 4.5:1 on the elevated
1400
+ // surface (3.9 and 4.1), so their -fg twins are lifted a step.
1401
+ "network-arkade-fg": "#B49CF5",
1402
+ "network-spark-fg": colors.networkText.spark,
1403
+ "network-rgb-fg": "#F09490",
1404
+ "network-taproot-fg": colors.networkText.taproot
1405
+ }
1406
+ };
1407
+ var themedForegroundOrder = Object.keys(themedForeground.light);
1408
+ var halo = {
1409
+ primary: colors.tx.receive,
1410
+ secondary: brandMark.violet,
1411
+ blur: "110px"
1412
+ };
1413
+ var brandTheme = {
1414
+ /** AA-safe light primary: white on it is 6.3:1, it is 5.1:1 on the light ramp. */
1415
+ lightPrimary: themedForeground.light.brand,
1416
+ /** Lifted dark status colours (see `themedForeground.dark`). */
1417
+ darkDanger: themedForeground.dark["danger-fg"],
1418
+ darkInfo: themedForeground.dark["info-fg"]
1419
+ };
1420
+
1357
1421
  // src/tokens/transitions.ts
1358
1422
  var transition = {
1359
1423
  fast: "150ms ease-out",
1360
1424
  default: "200ms ease-out",
1361
1425
  slow: "300ms ease-out"
1362
1426
  };
1427
+
1428
+ // src/tokens/chart.ts
1429
+ var chartSeries = {
1430
+ /** green, violet, azzurro, then yellow, magenta, orange */
1431
+ dark: ["#098356", "#7061db", "#179fd4", "#b3880f", "#db589e", "#de6907"],
1432
+ light: ["#0b764d", "#4e40a0", "#0f9cd0", "#dea805", "#c34189", "#fe904d"]
1433
+ };
1434
+ var chartSeriesLimit = chartSeries.dark.length;
1363
1435
  // Annotate the CommonJS export names for ESM import in node:
1364
1436
  0 && (module.exports = {
1365
1437
  ActionButton,