kaleido-ui 0.1.123 → 0.1.130

package/README.md

@@ -15,13 +15,19 @@ npm install kaleido-ui
 | `kaleido-ui` | Web components (Tailwind CSS + Radix UI) |
 | `kaleido-ui/tokens` | Platform-agnostic design tokens (zero deps) |
 | `kaleido-ui/native` | React Native components (WDK + custom) |
-| `kaleido-ui/css` | Tailwind v4 `@theme` tokens, CSS variables, keyframes, utilities, Material Symbols |
+| `kaleido-ui/css` | CSS variables (light + dark), keyframes, utilities, and the Tailwind v4 `@theme` tokens |
 | `kaleido-ui/css/brand` | Opt-in brand theme: AA-safe light primary, lifted dark danger/info, coloured page wash (import after `kaleido-ui/css`) |
+| `kaleido-ui/tailwind` | Tailwind **v3** preset built from the tokens |
 | `kaleido-ui/brand/*.svg` | Logo files: `kaleidoswap-pictogram.svg`, `kaleidoswap-fullogo-{horizontal,vertical}.svg` (white wordmark) and `-on-light.svg` variants |
 
-> **Tailwind v4 only.** `kaleido-ui/css` ships the full theme as Tailwind v4
-> `@theme` blocks, so there is no separate Tailwind preset to configure —
-> importing the CSS registers every token and generates the utilities.
+> **Tailwind v4 and v3 are both supported.** The library is built with v4.
+> On v4, `kaleido-ui/css` carries the whole theme as `@theme` blocks — no
+> preset. On v3, which ignores `@theme` and only generates the opacity steps in
+> its own scale, use the `kaleido-ui/tailwind` preset *and* import
+> `kaleido-ui/css` for the variables it points at. Either way, scan the
+> package's `dist` so the components' classes are generated.
+> `tests/tailwind-v3-preset.test.tsx` compiles the components with both and
+> fails if v3 misses a class v4 generates.
 
 ## Quick Start — Web (Tailwind v4)
 
@@ -30,12 +36,36 @@ npm install kaleido-ui
 ```css
 /* styles.css */
 @import "tailwindcss";
+@import "tw-animate-css";   /* Dialog/Select/Toast enter-exit classes */
 @import "kaleido-ui/css";
 
-/* Tell Tailwind which files to scan for classes */
+/* Tell Tailwind which files to scan for classes: yours and the components' */
 @source "./src/**/*.{ts,tsx}";
+@source "../node_modules/kaleido-ui/dist/web";
 ```
 
+### Tailwind v3
+
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [require('kaleido-ui/tailwind')],
+  content: ['./src/**/*.{ts,tsx}', './node_modules/kaleido-ui/dist/web/*.js'],
+  plugins: [require('tailwindcss-animate')],
+}
+```
+
+```css
+/* index.css — kaleido-ui/css first: the preset's colours are its variables */
+@import 'kaleido-ui/css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+The preset's colours are the theme's custom properties (opacity modifiers work
+through `color-mix`), so light and dark switch at runtime exactly as on v4.
+
 ```ts
 // main.tsx
 import './styles.css'
@@ -168,7 +198,6 @@ Additive, per-theme (light by default, `.dark` switches):
 | `text-network-{bitcoin,lightning,liquid,arkade,spark,rgb,taproot}-fg` | Network-hued text |
 | `bg-page-brand` | Coloured page wash (mint, violet, sky) |
 | `text-gradient-brand` | Brand gradient text, display sizes only |
-| `shadow-glow-send`, `shadow-glow-recv`, `shadow-glow-card` | Accent glows for send / receive panels and the hero card |
 
 ## Native Components
 

package/dist/css/brand.css

@@ -13,13 +13,19 @@
  */
 :root:not(.dark),
 .light {
-  --primary: #086E46;
-  --ring: #086E46;
+  --primary: #097B4E;
+  /* The deep brand green takes white text (5.3:1); the default light green takes dark ink. */
+  --primary-foreground: #FFFFFF;
+  /* …and its button gradient runs through the deep greens under that white text,
+     lightening toward the bottom-right like the default light fills. */
+  --gradient-primary: linear-gradient(135deg, #076A43 0%, #097B4E 50%, #0E8F5C 100%);
+  --ring: #097B4E;
 }
 
 .light {
-  --app-primary: 8 110 70;
-  --app-border-strong: 8 110 70;
+  --app-primary: 9 123 78;
+  --app-primary-foreground: 255 255 255;
+  --app-border-strong: 9 123 78;
 }
 
 .dark {