@oxyhq/bloom 1.0.2 → 1.0.3

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 (28) hide show
  1. package/docs/button.mdx +19 -17
  2. package/docs/design-tokens.mdx +12 -10
  3. package/lib/commonjs/design-tokens/tokens.json +11040 -0
  4. package/lib/commonjs/theme/color-policy.js +1 -1
  5. package/lib/commonjs/theme/color-presets.js +331 -1
  6. package/lib/commonjs/theme/color-presets.js.map +1 -1
  7. package/lib/commonjs/theme/glass-colors.js +22 -19
  8. package/lib/commonjs/theme/glass-colors.js.map +1 -1
  9. package/lib/module/design-tokens/tokens.json +11040 -0
  10. package/lib/module/theme/color-policy.js +1 -1
  11. package/lib/module/theme/color-presets.js +331 -1
  12. package/lib/module/theme/color-presets.js.map +1 -1
  13. package/lib/module/theme/glass-colors.js +22 -19
  14. package/lib/module/theme/glass-colors.js.map +1 -1
  15. package/lib/typescript/commonjs/theme/color-presets.d.ts +331 -1
  16. package/lib/typescript/commonjs/theme/color-presets.d.ts.map +1 -1
  17. package/lib/typescript/commonjs/theme/glass-colors.d.ts +22 -19
  18. package/lib/typescript/commonjs/theme/glass-colors.d.ts.map +1 -1
  19. package/lib/typescript/module/theme/color-presets.d.ts +331 -1
  20. package/lib/typescript/module/theme/color-presets.d.ts.map +1 -1
  21. package/lib/typescript/module/theme/glass-colors.d.ts +22 -19
  22. package/lib/typescript/module/theme/glass-colors.d.ts.map +1 -1
  23. package/package.json +1 -1
  24. package/src/design-tokens/tokens.json +11040 -0
  25. package/src/theme/__tests__/__fixtures__/golden-resolved-tokens.json +3600 -0
  26. package/src/theme/color-policy.ts +1 -1
  27. package/src/theme/color-presets.ts +361 -1
  28. package/src/theme/glass-colors.ts +22 -19
package/docs/button.mdx CHANGED
@@ -35,13 +35,13 @@ import { Button } from '@oxyhq/bloom';
35
35
 
36
36
  The glass is the sheen, not the wash. What reads as glass is the rim, the vertical gradient and the hairline; the 15% of the backdrop that shows through is a hint of depth, not the effect itself.
37
37
 
38
- **One measured cost, stated because it is real.** The 15% bleed moves the pane toward the surface under it, which in light mode means lighter — the one direction a white label cannot afford. Of `primary`'s 340 preset × mode × surface combinations, **38 fall below WCAG AA**, in the band 4.17–4.49, all in light mode, on `blue`, `faircoin`, `green`, `lagoon`, `lavender`, `mint`, `olive`, `orange`, `pine`, `plum`, `pumpkin`, `rose`, `sky` and `yellow`. Both solid Button fills pass all 680 rows; glass `destructive` is also unaffected (0/340, worst 5.32). The alpha at which the failures reach zero is 0.89.
38
+ **One measured cost, stated because it is real.** The 15% bleed moves the pane toward the surface under it, which in light mode means lighter — the one direction a white label cannot afford. Of `primary`'s 640 preset × mode × surface combinations, **73 fall below WCAG AA**, in the band 4.17–4.50, all in light mode, on `acid-canopy`, `arctic-signal`, `blue`, `bronze-neon`, `clay-current`, `copper-field`, `electric-tide`, `faircoin`, `green`, `lagoon`, `lavender`, `malachite-rush`, `midnight-citrus`, `mint`, `olive`, `orange`, `pacific-flare`, `pine`, `plum`, `pumpkin`, `reef-pulse`, `rose`, `saffron-depth`, `sky`, `solar-flux`, `viridian-orbit` and `yellow`. Both solid Button fills pass all 1,280 rows; glass `destructive` is also unaffected (0/640, worst 5.32). The alpha at which the failures reach zero remains 0.89.
39
39
 
40
- The previous 18-preset oracle was exactly 30/180. Those same rows and nine IDs remain unchanged; all eight added failures come from the new recipes. A browser helper briefly printed 45 because it parsed the structured `GLASS_SHEEN.bottom` channel object as CSS. That was drift in the measurement script, not Bloom's shipped baseline and not a threshold relaxed from 45 to 38.
40
+ The 1.0.1 catalog remains exactly 38/340, including the original 18-preset oracle at 30/180. The 30 new three-seed combinations contribute 35/300 and do not lower the existing 4.17 floor. These cohorts are asserted independently, so an unchanged total cannot hide a regression moving from one into the other.
41
41
 
42
- If your app runs one of those fourteen presets in light mode and needs AA on its primary button, use `variant="inverse"` for that call site, or raise `GLASS_FILL_ALPHA`.
42
+ If your app runs one of those 27 presets in light mode and needs AA on its primary button, use `variant="inverse"` for that call site, or raise `GLASS_FILL_ALPHA`.
43
43
 
44
- Over a retained black/mid-grey/white media sample, **25 of 204** preset × mode × backdrop rows fall below AA, worst 3.61 (`destructive`: 0). That is a sample rather than a promise about arbitrary pixels. If a CTA must be legible over an image, `variant="inverse"` is opaque and backdrop-independent:
44
+ Over a retained black/mid-grey/white media sample, **50 of 384** preset × mode × backdrop rows fall below AA, worst 3.61 (`destructive`: 0). The 1.0.1 catalog remains 25/204; the additions contribute 25/180, worst 4.17. That is a sample rather than a promise about arbitrary pixels. If a CTA must be legible over an image, `variant="inverse"` is opaque and backdrop-independent:
45
45
 
46
46
  ```tsx
47
47
  <Button variant="inverse">Comprar</Button>
@@ -83,23 +83,25 @@ bun run storybook # the DEV server; the script reads the theme through
83
83
  node scripts/measure-glass-alpha.mjs --url http://localhost:6006 --image docs/glass-alpha-sweep.png
84
84
  ```
85
85
 
86
- ![The same button at eleven fill alphas, over a flat page, a photograph and a hard stripe pattern](./glass-alpha-sweep.png)
86
+ ![The same button at thirteen fill alphas, over a flat page, a photograph and a hard stripe pattern](./glass-alpha-sweep.png)
87
87
 
88
88
  Measured in Chrome off painted pixels, with the label removed from the measurement clones so a white glyph cannot be mistaken for backdrop:
89
89
 
90
90
  | alpha | backdrop response | blur delta over a photo (max/mean) | blur delta on a flat page | `primary` rows < AA | `destructive` rows < AA |
91
91
  | --- | --- | --- | --- | --- | --- |
92
- | 0.89 | 28.0 | 13 / 3.5 | 1 | 0 / 340 | 0 / 340 |
93
- | 0.88 | 31.0 | 15 / 3.8 | 1 | 5 / 340 | 0 / 340 |
94
- | 0.87 | 33.0 | 16 / 4.0 | 1 | 14 / 340 | 0 / 340 |
95
- | 0.86 | 36.0 | 17 / 4.4 | 1 | 25 / 340 | 0 / 340 |
96
- | **0.85** (shipped) | 38.0 | 18 / 4.7 | 1 | 38 / 340 | 0 / 340 |
97
- | 0.75 | 63.7 | 31 / 7.8 | 1 | 216 / 340 | 68 / 340 |
98
- | 0.65 | 88.7 | 43 / 10.9 | 1 | 252 / 340 | 340 / 340 |
99
- | 0.55 | 114.7 | 55 / 14.2 | 1 | 272 / 340 | 340 / 340 |
100
- | 0.45 | 139.3 | 67 / 17.4 | 0 | 301 / 340 | 340 / 340 |
101
- | 0.35 | 165.3 | 79 / 20.6 | 1 | 335 / 340 | 340 / 340 |
102
- | 0.25 | 190.3 | 91 / 23.8 | 1 | 335 / 340 | 340 / 340 |
92
+ | 0.91 | 23.0 | 11 / 2.9 | 1 | 0 / 640 | 0 / 640 |
93
+ | 0.90 | 25.0 | 12 / 3.1 | 1 | 0 / 640 | 0 / 640 |
94
+ | 0.89 | 28.0 | 13 / 3.5 | 1 | 0 / 640 | 0 / 640 |
95
+ | 0.88 | 31.0 | 15 / 3.8 | 1 | 8 / 640 | 0 / 640 |
96
+ | 0.87 | 33.0 | 16 / 4.0 | 1 | 26 / 640 | 0 / 640 |
97
+ | 0.86 | 36.0 | 17 / 4.4 | 1 | 49 / 640 | 0 / 640 |
98
+ | **0.85** (shipped) | 38.0 | 18 / 4.7 | 1 | 73 / 640 | 0 / 640 |
99
+ | 0.75 | 63.7 | 31 / 7.8 | 1 | 431 / 640 | 128 / 640 |
100
+ | 0.65 | 88.7 | 43 / 10.9 | 1 | 492 / 640 | 640 / 640 |
101
+ | 0.55 | 114.7 | 55 / 14.2 | 1 | 531 / 640 | 640 / 640 |
102
+ | 0.45 | 139.3 | 67 / 17.4 | 0 | 580 / 640 | 640 / 640 |
103
+ | 0.35 | 165.3 | 79 / 20.6 | 1 | 635 / 640 | 640 / 640 |
104
+ | 0.25 | 190.3 | 91 / 23.8 | 1 | 635 / 640 | 640 / 640 |
103
105
 
104
106
  Everything is out of 255. Backdrop response is how far the painted pane moves between a white and a black backdrop — linear in `1 - alpha`, at 25.4 ± 0.7 per 0.10 of alpha. Blur delta is how much the picture changes when the blur is switched off, which is the honest form of "can you see the blur".
105
107
 
@@ -107,7 +109,7 @@ Three things the table settles:
107
109
 
108
110
  - **On a flat page the blur is worth ~1/255 at every alpha, including 0.25.** There is nothing behind the pane to blur, so lowering the alpha does not make a flat page glassy — it only makes the button paler. That is the whole of the "it doesn't look glassy" complaint, and no alpha fixes it.
109
111
  - **Over a photograph the blur is already visible at 0.85** (18/255 peak). Where there is something to see, the shipped material is doing the thing.
110
- - **Legibility falls off a cliff immediately below 0.85.** One step down takes `primary` from 38 to 216 failures and `destructive` from 0 to 68; two steps down puts every one of `destructive`'s 340 rows under AA.
112
+ - **Legibility falls off a cliff immediately below 0.85.** One step down takes `primary` from 73 to 431 failures and `destructive` from 0 to 128; two steps down puts every one of `destructive`'s 640 rows under AA.
111
113
 
112
114
  So there is no single alpha that both matches the reference and reads as glass on a flat surface. That is a property of the material — a blur needs a backdrop — not a constant nobody has tuned yet. To make a specific surface read as glass, put something behind it.
113
115
 
@@ -18,7 +18,7 @@ working.
18
18
 
19
19
  ## Preset recipes and runtime colour
20
20
 
21
- Bloom ships **34 named recipes**, authored once in the type-checked
21
+ Bloom ships **64 named recipes**, authored once in the type-checked
22
22
  `COLOR_PRESET_REGISTRY`. A recipe is not a frozen light/dark token table: it is
23
23
  an identity seed, a scheme variant and optionally explicit secondary/tertiary
24
24
  seeds. `BloomThemeProvider`, `getResolvedTokens()` and `BloomColorScope` run
@@ -43,14 +43,16 @@ COLOR_PRESET_FAMILY_REGISTRY[0].displayName; // stable family copy and order
43
43
  COLOR_PRESET_GROUPS.ocean.presets; // ordered recipes for a picker
44
44
  ```
45
45
 
46
- The 16 `pairing: 'curated'` recipes pin a complementary `tertiaryHex`. The
47
- identity remains `--primary`; the standout action is `--tertiary`, which is the
48
- role used by FABs and compose actions. The other 18 recipes derive their accent
49
- families dynamically. Every recipe exposes `displayName`, `description`,
50
- `family`, `pairing` and `featured` metadata, so consumer pickers do not need a
51
- second name/category map. Historical `APP_COLOR_PRESETS`, name arrays, hex
52
- lookup and access-gate arrays are derived from this registry and retain their
53
- existing public shapes.
46
+ The 46 `pairing: 'curated'` recipes pin an intentional action seed. The first 16
47
+ pin `tertiaryHex`; the newest 30 are complete three-seed combinations and pin
48
+ both `secondaryHex` support and `tertiaryHex` action. Identity remains
49
+ `--primary`, support resolves through `--secondary`, and the standout action is
50
+ `--tertiary`, which is the role used by FABs and compose actions. The other 18
51
+ recipes derive both accent families dynamically. Every recipe exposes
52
+ `displayName`, `description`, `family`, `pairing` and `featured` metadata, so
53
+ consumer pickers do not need a second name/category map. Historical
54
+ `APP_COLOR_PRESETS`, name arrays, hex lookup and access-gate arrays are derived
55
+ from this registry and retain their existing public shapes.
54
56
 
55
57
  For visual review, run Storybook and open **Theme / Color System Playground**
56
58
  (`src/theme/ColorSystemLab.stories.tsx`). It keeps signed-in and public Mention
@@ -214,7 +216,7 @@ track, a selected `Item`, the solid `TabBar`, a plain `Card` on a panel, the
214
216
  Those tones are owned by `SURFACE_RAMP` in `theme/color-policy.ts` rather than
215
217
  taken from Material 3's container roles. M3's ramp steps by 2 tones, which at
216
218
  these lightnesses is about **1.2 ΔE00** — below the just-noticeable difference for
217
- two large flat patches. Measured across all 34 presets, **4 tones (~2.4 ΔE00)** is
219
+ two large flat patches. Measured across all 64 presets, **4 tones (~2.4 ΔE00)** is
218
220
  the first spacing at which every pair separates.
219
221
 
220
222
  `--background` is deliberately not part of the ramp: the page tone is every