@oxyhq/bloom 0.19.0 → 0.20.0

package/lib/commonjs/design-tokens/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BORDER_ROLES", {
+  enumerable: true,
+  get: function () {
+    return _colorRoles.BORDER_ROLES;
+  }
+});
+Object.defineProperty(exports, "BORDER_WIDTH", {
+  enumerable: true,
+  get: function () {
+    return _scales.BORDER_WIDTH;
+  }
+});
+Object.defineProperty(exports, "FILL_ROLES", {
+  enumerable: true,
+  get: function () {
+    return _colorRoles.FILL_ROLES;
+  }
+});
+Object.defineProperty(exports, "FONT_FAMILY_VARS", {
+  enumerable: true,
+  get: function () {
+    return _scales.FONT_FAMILY_VARS;
+  }
+});
+Object.defineProperty(exports, "RADIUS", {
+  enumerable: true,
+  get: function () {
+    return _scales.RADIUS;
+  }
+});
+Object.defineProperty(exports, "SHADOW_BOX", {
+  enumerable: true,
+  get: function () {
+    return _shadows.SHADOW_BOX;
+  }
+});
+Object.defineProperty(exports, "SPACING", {
+  enumerable: true,
+  get: function () {
+    return _scales.SPACING;
+  }
+});
+Object.defineProperty(exports, "TEXT_ROLES", {
+  enumerable: true,
+  get: function () {
+    return _colorRoles.TEXT_ROLES;
+  }
+});
+Object.defineProperty(exports, "TYPOGRAPHY", {
+  enumerable: true,
+  get: function () {
+    return _scales.TYPOGRAPHY;
+  }
+});
+Object.defineProperty(exports, "bloomShadowStyle", {
+  enumerable: true,
+  get: function () {
+    return _shadows.bloomShadowStyle;
+  }
+});
+Object.defineProperty(exports, "bloomTailwindPreset", {
+  enumerable: true,
+  get: function () {
+    return _tailwindPreset.bloomTailwindPreset;
+  }
+});
+Object.defineProperty(exports, "bloomThemeBlock", {
+  enumerable: true,
+  get: function () {
+    return _themeCss.bloomThemeBlock;
+  }
+});
+Object.defineProperty(exports, "bloomThemeCss", {
+  enumerable: true,
+  get: function () {
+    return _themeCss.bloomThemeCss;
+  }
+});
+var _tailwindPreset = require("./tailwind-preset.js");
+var _themeCss = require("./theme-css.js");
+var _colorRoles = require("./color-roles.js");
+var _scales = require("./scales.js");
+var _shadows = require("./shadows");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/design-tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_tailwindPreset","require","_themeCss","_colorRoles","_scales","_shadows"],"sourceRoot":"../../../src","sources":["design-tokens/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAAA,eAAA,GAAAC,OAAA;AAMA,IAAAC,SAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAF,OAAA;AAOA,IAAAG,OAAA,GAAAH,OAAA;AASA,IAAAI,QAAA,GAAAJ,OAAA","ignoreList":[]}

package/lib/commonjs/design-tokens/scales.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TYPOGRAPHY = exports.SPACING = exports.RADIUS = exports.FONT_FAMILY_VARS = exports.BORDER_WIDTH = void 0;
+/**
+ * Numeric design-token scales for the Oxy Unified Design Language.
+ *
+ * These are platform-agnostic plain numbers / CSS strings consumed by the Bloom
+ * Tailwind preset (`tailwind-preset.ts`). The SAME keys produce the SAME utility
+ * class names on Tailwind (web) and NativeWind (native):
+ *   - spacing  → `p-space-8`, `gap-space-20`, `px-screen-margin`, `m-space-16`
+ *   - radius   → `rounded-radius-20`
+ *   - type     → `font-body` (family/weight) + `text-body` (size/lineHeight)
+ *   - shadow   → `shadow-s`, `shadow-m`
+ *
+ * ADDITIVE: every key is namespaced (`space-*`, `radius-*`, the typography role
+ * names, `shadow-s/m`) and does not collide with Tailwind's built-in numeric
+ * scale (`p-4`, `rounded-lg`, `text-sm`) — those keep working unchanged.
+ */
+
+/* -------------------------------------------------------------------------- */
+/*  Spacing                                                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Spacing scale (px). Consumed via every Tailwind spacing utility:
+ * `p-space-8`, `px-space-16`, `gap-space-20`, `m-space-24`, `py-space-12`, …
+ *
+ * `screen-margin` is the standard page gutter (left/right inset). Default 20px —
+ * matches Bloom's existing `space.xl` and the `Dialog` default `contentPadding`.
+ */
+const SPACING = exports.SPACING = {
+  'space-2': 2,
+  'space-4': 4,
+  'space-8': 8,
+  'space-12': 12,
+  'space-16': 16,
+  'space-20': 20,
+  'space-24': 24,
+  'space-32': 32,
+  'screen-margin': 20
+};
+
+/* -------------------------------------------------------------------------- */
+/*  Radius                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Corner-radius scale (px). Consumed via `rounded-radius-*`:
+ * `rounded-radius-8`, `rounded-radius-12`, `rounded-radius-20`,
+ * `rounded-radius-28`, `rounded-radius-max` (pill / circle).
+ */
+const RADIUS = exports.RADIUS = {
+  'radius-8': 8,
+  'radius-12': 12,
+  'radius-20': 20,
+  'radius-28': 28,
+  'radius-max': 9999
+};
+
+/* -------------------------------------------------------------------------- */
+/*  Border width (hairline)                                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Border-width helpers. `border-hairline` is the 0.5px hairline that pairs with
+ * the `border-border-image` color role. (Tailwind's default `border` = 1px
+ * stays untouched.)
+ */
+const BORDER_WIDTH = exports.BORDER_WIDTH = {
+  hairline: 0.5
+};
+
+/* -------------------------------------------------------------------------- */
+/*  Typography                                                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * One typography role. `size`/`lineHeight` are px; `weight` is a CSS font-weight
+ * string; `family` selects the Bloom font CSS var (`sans` = body/UI,
+ * `display` = headings/serif).
+ *
+ * The Tailwind preset splits each role into TWO utilities so a consumer can
+ * apply the size/leading and the family/weight independently or together:
+ *   - `text-<role>`  → `fontSize` + `lineHeight`   (via theme.fontSize)
+ *   - `font-<role>`  → `fontFamily` + `fontWeight` (via theme.fontFamily, which
+ *                       maps a key to a [family, { fontWeight }] tuple)
+ */
+
+/**
+ * The coherent Oxy type scale. Sizes climb 11 → 28; line-heights use a ~1.3–1.5
+ * leading for body roles and tighter leading for large titles.
+ *
+ * | role            | size/line | weight | family  | usage                          |
+ * | --------------- | --------- | ------ | ------- | ------------------------------ |
+ * | caption         | 11 / 14   | 400    | sans    | timestamps, meta, fine print   |
+ * | bodySmall       | 13 / 18   | 400    | sans    | secondary body, captions       |
+ * | bodyTitleSmall  | 13 / 18   | 600    | sans    | small emphasized labels        |
+ * | body            | 15 / 22   | 400    | sans    | default body text              |
+ * | subtitle        | 17 / 24   | 500    | sans    | list subtitles, lead-ins       |
+ * | sectionTitle    | 20 / 26   | 600    | sans    | section headers                |
+ * | headerBold      | 28 / 34   | 700    | display | screen / page titles           |
+ * | buttonLarge     | 17 / 22   | 600    | sans    | primary button label           |
+ */
+const TYPOGRAPHY = exports.TYPOGRAPHY = {
+  caption: {
+    size: 11,
+    lineHeight: 14,
+    weight: '400',
+    family: 'sans'
+  },
+  bodySmall: {
+    size: 13,
+    lineHeight: 18,
+    weight: '400',
+    family: 'sans'
+  },
+  bodyTitleSmall: {
+    size: 13,
+    lineHeight: 18,
+    weight: '600',
+    family: 'sans'
+  },
+  body: {
+    size: 15,
+    lineHeight: 22,
+    weight: '400',
+    family: 'sans'
+  },
+  subtitle: {
+    size: 17,
+    lineHeight: 24,
+    weight: '500',
+    family: 'sans'
+  },
+  sectionTitle: {
+    size: 20,
+    lineHeight: 26,
+    weight: '600',
+    family: 'sans'
+  },
+  headerBold: {
+    size: 28,
+    lineHeight: 34,
+    weight: '700',
+    family: 'display'
+  },
+  buttonLarge: {
+    size: 17,
+    lineHeight: 22,
+    weight: '600',
+    family: 'sans'
+  }
+};
+/**
+ * Bloom font-family CSS-var stacks, keyed by the `family` field above. Web reads
+ * `var(--bloom-font-*)` (set by `applyFontFaces`); the preset falls back to the
+ * literal stack so utilities still resolve before the vars are injected and on
+ * native (where NativeWind passes the family string straight through).
+ */
+const FONT_FAMILY_VARS = exports.FONT_FAMILY_VARS = {
+  sans: 'var(--bloom-font-sans)',
+  display: 'var(--bloom-font-display)',
+  mono: 'var(--bloom-font-mono)'
+};
+//# sourceMappingURL=scales.js.map

package/lib/commonjs/design-tokens/scales.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SPACING","exports","RADIUS","BORDER_WIDTH","hairline","TYPOGRAPHY","caption","size","lineHeight","weight","family","bodySmall","bodyTitleSmall","body","subtitle","sectionTitle","headerBold","buttonLarge","FONT_FAMILY_VARS","sans","display","mono"],"sourceRoot":"../../../src","sources":["design-tokens/scales.ts"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG;EACrB,SAAS,EAAE,CAAC;EACZ,SAAS,EAAE,CAAC;EACZ,SAAS,EAAE,CAAC;EACZ,UAAU,EAAE,EAAE;EACd,UAAU,EAAE,EAAE;EACd,UAAU,EAAE,EAAE;EACd,UAAU,EAAE,EAAE;EACd,UAAU,EAAE,EAAE;EACd,eAAe,EAAE;AACnB,CAAU;;AAEV;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACO,MAAME,MAAM,GAAAD,OAAA,CAAAC,MAAA,GAAG;EACpB,UAAU,EAAE,CAAC;EACb,WAAW,EAAE,EAAE;EACf,WAAW,EAAE,EAAE;EACf,WAAW,EAAE,EAAE;EACf,YAAY,EAAE;AAChB,CAAU;;AAEV;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACO,MAAMC,YAAY,GAAAF,OAAA,CAAAE,YAAA,GAAG;EAC1BC,QAAQ,EAAE;AACZ,CAAU;;AAEV;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAAJ,OAAA,CAAAI,UAAA,GAAG;EACxBC,OAAO,EAAE;IAAEC,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAO,CAAC;EACpEC,SAAS,EAAE;IAAEJ,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAO,CAAC;EACtEE,cAAc,EAAE;IAAEL,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAO,CAAC;EAC3EG,IAAI,EAAE;IAAEN,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAO,CAAC;EACjEI,QAAQ,EAAE;IAAEP,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAO,CAAC;EACrEK,YAAY,EAAE;IAAER,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAO,CAAC;EACzEM,UAAU,EAAE;IAAET,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC1EO,WAAW,EAAE;IAAEV,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAO;AACzE,CAA6C;AAI7C;AACA;AACA;AACA;AACA;AACA;AACO,MAAMQ,gBAAgB,GAAAjB,OAAA,CAAAiB,gBAAA,GAAG;EAC9BC,IAAI,EAAE,wBAAwB;EAC9BC,OAAO,EAAE,2BAA2B;EACpCC,IAAI,EAAE;AACR,CAAU","ignoreList":[]}

package/lib/commonjs/design-tokens/shadows.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SHADOW_BOX = void 0;
+exports.bloomShadowStyle = bloomShadowStyle;
+/**
+ * Elevation / shadow tokens for the Oxy Unified Design Language.
+ *
+ * Two roles: `shadow-s` (subtle raise — cards, chips) and `shadow-m` (overlays —
+ * menus, popovers, dialogs). Consumers write ONE class (`shadow-s` / `shadow-m`)
+ * and Bloom owns the platform split:
+ *   - Web: the Bloom Tailwind preset registers `boxShadow.s` / `boxShadow.m`
+ *     (the `SHADOW_BOX` strings below) → `shadow-s` / `shadow-m` utilities.
+ *   - Native: NativeWind cannot translate a multi-layer web `box-shadow` to RN
+ *     elevation reliably, so apps that need the shadow on a React Native surface
+ *     apply the matching style object from `bloomShadowStyle('s' | 'm')` (this
+ *     module is platform-forked: `.native.ts` returns RN `shadow*`/`elevation`).
+ *
+ * This default file is the WEB / consumer-tsc variant. Metro selects the sibling
+ * `shadows.native.ts` on iOS/Android. Web bundlers and a consumer's `tsc` see
+ * this file (the `box-shadow` CSS string path), matching Bloom's existing
+ * `.native`/`.web` split convention.
+ */
+
+/**
+ * Web `box-shadow` strings. Subtle, brand-neutral elevation that reads on both
+ * light and dark surfaces. Registered by the Tailwind preset as `boxShadow.s/m`.
+ */
+const SHADOW_BOX = exports.SHADOW_BOX = {
+  s: '0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.10)',
+  m: '0 4px 12px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12)'
+};
+
+/**
+ * Return the platform-appropriate shadow style for a role.
+ *
+ * On WEB this returns a `{ boxShadow }` style object (so it can also be applied
+ * inline without Tailwind). The `.native.ts` fork returns RN
+ * `shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`.
+ */
+function bloomShadowStyle(role) {
+  return {
+    boxShadow: SHADOW_BOX[role]
+  };
+}
+//# sourceMappingURL=shadows.js.map

package/lib/commonjs/design-tokens/shadows.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SHADOW_BOX","exports","s","m","bloomShadowStyle","role","boxShadow"],"sourceRoot":"../../../src","sources":["design-tokens/shadows.ts"],"mappings":";;;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACO,MAAMA,UAAsC,GAAAC,OAAA,CAAAD,UAAA,GAAG;EACpDE,CAAC,EAAE,0DAA0D;EAC7DC,CAAC,EAAE;AACL,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,gBAAgBA,CAACC,IAAgB,EAAa;EAC5D,OAAO;IAAEC,SAAS,EAAEN,UAAU,CAACK,IAAI;EAAE,CAAC;AACxC","ignoreList":[]}

package/lib/commonjs/design-tokens/shadows.native.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SHADOW_BOX = void 0;
+exports.bloomShadowStyle = bloomShadowStyle;
+/**
+ * NATIVE variant of the shadow tokens (see `shadows.ts` for the rationale and
+ * the web `box-shadow` path). Metro selects this file on iOS/Android.
+ *
+ * The `SHADOW_BOX` map is kept identical to the web file so any code that reads
+ * the raw string (e.g. to feed a NativeWind `boxShadow` utility on a host that
+ * supports it) stays in lockstep; the canonical native styling path is
+ * `bloomShadowStyle`, which returns RN elevation + shadow props tuned to match
+ * the web `shadow-s` / `shadow-m` visual weight.
+ */
+
+const SHADOW_BOX = exports.SHADOW_BOX = {
+  s: '0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.10)',
+  m: '0 4px 12px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12)'
+};
+const NATIVE_SHADOWS = {
+  s: {
+    shadowColor: '#000000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.12,
+    shadowRadius: 3,
+    elevation: 2
+  },
+  m: {
+    shadowColor: '#000000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.16,
+    shadowRadius: 12,
+    elevation: 6
+  }
+};
+
+/**
+ * RN shadow/elevation style matching the web `shadow-<role>` weight. Apply to a
+ * React Native `View`/surface: `style={bloomShadowStyle('m')}`.
+ */
+function bloomShadowStyle(role) {
+  return NATIVE_SHADOWS[role];
+}
+//# sourceMappingURL=shadows.native.js.map

package/lib/commonjs/design-tokens/shadows.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SHADOW_BOX","exports","s","m","NATIVE_SHADOWS","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","bloomShadowStyle","role"],"sourceRoot":"../../../src","sources":["design-tokens/shadows.native.ts"],"mappings":";;;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIO,MAAMA,UAAsC,GAAAC,OAAA,CAAAD,UAAA,GAAG;EACpDE,CAAC,EAAE,0DAA0D;EAC7DC,CAAC,EAAE;AACL,CAAC;AAED,MAAMC,cAA6C,GAAG;EACpDF,CAAC,EAAE;IACDG,WAAW,EAAE,SAAS;IACtBC,YAAY,EAAE;MAAEC,KAAK,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAE,CAAC;IACrCC,aAAa,EAAE,IAAI;IACnBC,YAAY,EAAE,CAAC;IACfC,SAAS,EAAE;EACb,CAAC;EACDR,CAAC,EAAE;IACDE,WAAW,EAAE,SAAS;IACtBC,YAAY,EAAE;MAAEC,KAAK,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAE,CAAC;IACrCC,aAAa,EAAE,IAAI;IACnBC,YAAY,EAAE,EAAE;IAChBC,SAAS,EAAE;EACb;AACF,CAAC;;AAED;AACA;AACA;AACA;AACO,SAASC,gBAAgBA,CAACC,IAAgB,EAAa;EAC5D,OAAOT,cAAc,CAACS,IAAI,CAAC;AAC7B","ignoreList":[]}

package/lib/commonjs/design-tokens/tailwind-preset.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bloomTailwindPreset = void 0;
+var _colorRoles = require("./color-roles.js");
+var _scales = require("./scales.js");
+var _shadows = require("./shadows");
+/**
+ * The Bloom Tailwind / NativeWind preset — the SINGLE opt-in that gives every
+ * Oxy app the same semantic design-token utility classes.
+ *
+ * Consumers add it to their Tailwind config:
+ *
+ *   // tailwind.config.js  (web Tailwind v3/v4 AND native NativeWind)
+ *   const { bloomTailwindPreset } = require('@oxyhq/bloom/tailwind-preset');
+ *   module.exports = {
+ *     presets: [bloomTailwindPreset],
+ *     content: [ ...existing globs ],
+ *     theme: { extend: { ...existing app overrides } },
+ *   };
+ *
+ * The preset only EXTENDS `theme` (everything lives under `theme.extend`), so it
+ * is purely additive: existing Tailwind built-ins (`p-4`, `rounded-lg`,
+ * `text-sm`) and the app's own `var(--x)`-backed color utilities keep working.
+ *
+ * Cross-platform: NativeWind reads the same `tailwind.config.js`, so the SAME
+ * class names (`bg-fill`, `text-text-tertiary`, `p-space-8`, `rounded-radius-20`,
+ * `text-body`, `font-body`, `shadow-s`) resolve on web (Tailwind → CSS) and
+ * native (NativeWind → react-native-css). Color roles are `var(--x)` references
+ * that Bloom's `BloomThemeProvider` populates at runtime on both platforms.
+ *
+ * Type: returned as a `TailwindPreset` (a structural subset of Tailwind's
+ * `Config`) so Bloom does not need to depend on `tailwindcss` types.
+ */
+
+/** A Tailwind `fontSize` value: `[size, { lineHeight }]`. */
+
+/** A Tailwind `fontFamily` value: `[family, { fontWeight }]`. */
+
+const px = n => `${n}px`;
+
+/** `{ 'space-8': 8 }` → `{ 'space-8': '8px' }`. */
+function toPxMap(scale) {
+  const out = {};
+  for (const [key, value] of Object.entries(scale)) {
+    // 9999 (radius-max) and large values are still valid px; pill shapes clamp.
+    out[key] = px(value);
+  }
+  return out;
+}
+
+/** Build the `fontSize` extension: `text-<role>` → `[size, { lineHeight }]`. */
+function buildFontSize() {
+  const out = {};
+  for (const name of Object.keys(_scales.TYPOGRAPHY)) {
+    const role = _scales.TYPOGRAPHY[name];
+    out[name] = [px(role.size), {
+      lineHeight: px(role.lineHeight)
+    }];
+  }
+  return out;
+}
+
+/** Build the `fontFamily` extension: `font-<role>` → `[family, { fontWeight }]`. */
+function buildFontFamily() {
+  const out = {};
+  for (const name of Object.keys(_scales.TYPOGRAPHY)) {
+    const role = _scales.TYPOGRAPHY[name];
+    out[name] = [_scales.FONT_FAMILY_VARS[role.family], {
+      fontWeight: role.weight
+    }];
+  }
+  // Also expose the raw Bloom families directly: `font-bloom-sans`, etc.
+  out['bloom-sans'] = [_scales.FONT_FAMILY_VARS.sans, {
+    fontWeight: '400'
+  }];
+  out['bloom-display'] = [_scales.FONT_FAMILY_VARS.display, {
+    fontWeight: '700'
+  }];
+  out['bloom-mono'] = [_scales.FONT_FAMILY_VARS.mono, {
+    fontWeight: '400'
+  }];
+  return out;
+}
+const SPACING_PX = toPxMap(_scales.SPACING);
+const RADIUS_PX = toPxMap({
+  ..._scales.RADIUS
+});
+const BORDER_WIDTH_PX = toPxMap(_scales.BORDER_WIDTH);
+
+/**
+ * Color roles are exposed via `colors` (so they reach `bg-*`, `text-*`,
+ * `border-*`, `ring-*`, `divide-*`, `fill-*` …) AND via the dedicated
+ * `backgroundColor` / `textColor` / `borderColor` maps (so the namespaced roles
+ * land on exactly the intended utility families even where the role name would
+ * otherwise be ambiguous). All values are `var(--canonical)` references.
+ */
+const COLOR_ROLES = {
+  ..._colorRoles.FILL_ROLES,
+  ..._colorRoles.TEXT_ROLES,
+  ..._colorRoles.BORDER_ROLES
+};
+
+/**
+ * The Bloom Tailwind/NativeWind preset. Frozen so accidental mutation by a
+ * consumer's config merge cannot corrupt the shared vocabulary.
+ */
+const bloomTailwindPreset = exports.bloomTailwindPreset = Object.freeze({
+  theme: {
+    extend: {
+      // Generic color bucket — feeds every color utility family.
+      colors: {
+        ...COLOR_ROLES
+      },
+      // Targeted buckets so the namespaced roles resolve on the right utility.
+      backgroundColor: {
+        ..._colorRoles.FILL_ROLES
+      },
+      textColor: {
+        ..._colorRoles.TEXT_ROLES
+      },
+      borderColor: {
+        ..._colorRoles.BORDER_ROLES
+      },
+      spacing: SPACING_PX,
+      borderRadius: RADIUS_PX,
+      borderWidth: BORDER_WIDTH_PX,
+      fontSize: buildFontSize(),
+      fontFamily: buildFontFamily(),
+      boxShadow: {
+        s: _shadows.SHADOW_BOX.s,
+        m: _shadows.SHADOW_BOX.m
+      }
+    }
+  }
+});
+//# sourceMappingURL=tailwind-preset.js.map

package/lib/commonjs/design-tokens/tailwind-preset.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_colorRoles","require","_scales","_shadows","px","n","toPxMap","scale","out","key","value","Object","entries","buildFontSize","name","keys","TYPOGRAPHY","role","size","lineHeight","buildFontFamily","FONT_FAMILY_VARS","family","fontWeight","weight","sans","display","mono","SPACING_PX","SPACING","RADIUS_PX","RADIUS","BORDER_WIDTH_PX","BORDER_WIDTH","COLOR_ROLES","FILL_ROLES","TEXT_ROLES","BORDER_ROLES","bloomTailwindPreset","exports","freeze","theme","extend","colors","backgroundColor","textColor","borderColor","spacing","borderRadius","borderWidth","fontSize","fontFamily","boxShadow","s","SHADOW_BOX","m"],"sourceRoot":"../../../src","sources":["design-tokens/tailwind-preset.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/design-tokens/theme-css.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bloomThemeBlock = bloomThemeBlock;
+exports.bloomThemeCss = bloomThemeCss;
+var _colorRoles = require("./color-roles.js");
+var _scales = require("./scales.js");
+var _shadows = require("./shadows");
+/**
+ * Tailwind v4 `@theme` block generator for the Oxy Unified Design Language.
+ *
+ * Tailwind v4 web apps (auth, console, website) configure their design tokens in
+ * CSS via `@theme { --color-X: var(--X); … }` rather than a JS preset. This
+ * module produces the exact `@theme` body that mirrors `bloomTailwindPreset`, so
+ * a v4 app gets the SAME semantic utilities (`bg-fill`, `text-text-tertiary`,
+ * `p-space-8`, `rounded-radius-20`, `text-body`, `font-body`, `shadow-s`) as the
+ * NativeWind/Tailwind-v3 apps that consume the JS preset.
+ *
+ * Each color role is emitted as a `--color-<role>: var(--canonical)` alias.
+ * Per Bloom's web CSS-var contract, the canonical `--x` token already resolves
+ * to a full `rgb(...)` color at runtime, so the alias is a direct `var(--x)`
+ * reference — NEVER `hsl(var(--x))`.
+ *
+ * Usage (web Tailwind v4, in the app's global stylesheet):
+ *
+ *   import { bloomThemeCss } from '@oxyhq/bloom/design-tokens';
+ *   // build-time: write `@theme { ${bloomThemeCss()} }` into global.css, OR
+ *   // paste the generated block once (see docs/design-tokens.md).
+ *
+ * A consumer that prefers a static stylesheet can copy the output of
+ * `bloomThemeCss()` directly into their `@theme { … }` — the values are stable.
+ */
+
+/**
+ * Produce the BODY of a Tailwind v4 `@theme` block (no surrounding braces) that
+ * registers the full Bloom semantic vocabulary.
+ *
+ * - Colors → `--color-<role>: var(--canonical);`
+ * - Spacing → `--spacing-<key>: <px>;`
+ * - Radius  → `--radius-<key>: <px>;`
+ * - Type    → `--text-<role>: <size>; --text-<role>--line-height: <lh>;`
+ *             `--font-<role>: var(--bloom-font-*);` (+ weight via utility doc)
+ * - Shadow  → `--shadow-<s|m>: <box-shadow>;`
+ */
+function bloomThemeCss() {
+  const lines = [];
+
+  // Color roles.
+  for (const [role, value] of Object.entries({
+    ..._colorRoles.FILL_ROLES,
+    ..._colorRoles.TEXT_ROLES,
+    ..._colorRoles.BORDER_ROLES
+  })) {
+    lines.push(`  --color-${role}: ${value};`);
+  }
+
+  // Spacing.
+  for (const [key, value] of Object.entries(_scales.SPACING)) {
+    lines.push(`  --spacing-${key}: ${value}px;`);
+  }
+
+  // Radius.
+  for (const [key, value] of Object.entries(_scales.RADIUS)) {
+    lines.push(`  --radius-${key}: ${value}px;`);
+  }
+
+  // Hairline border width.
+  for (const [key, value] of Object.entries(_scales.BORDER_WIDTH)) {
+    lines.push(`  --border-width-${key}: ${value}px;`);
+  }
+
+  // Typography: size + line-height + family per role.
+  for (const name of Object.keys(_scales.TYPOGRAPHY)) {
+    const role = _scales.TYPOGRAPHY[name];
+    lines.push(`  --text-${name}: ${role.size}px;`);
+    lines.push(`  --text-${name}--line-height: ${role.lineHeight}px;`);
+    lines.push(`  --text-${name}--font-weight: ${role.weight};`);
+    lines.push(`  --font-${name}: ${_scales.FONT_FAMILY_VARS[role.family]};`);
+  }
+
+  // Bloom raw families.
+  lines.push(`  --font-bloom-sans: ${_scales.FONT_FAMILY_VARS.sans};`);
+  lines.push(`  --font-bloom-display: ${_scales.FONT_FAMILY_VARS.display};`);
+  lines.push(`  --font-bloom-mono: ${_scales.FONT_FAMILY_VARS.mono};`);
+
+  // Shadows.
+  lines.push(`  --shadow-s: ${_shadows.SHADOW_BOX.s};`);
+  lines.push(`  --shadow-m: ${_shadows.SHADOW_BOX.m};`);
+  return lines.join('\n');
+}
+
+/** The full `@theme { … }` block, ready to inject into a v4 stylesheet. */
+function bloomThemeBlock() {
+  return `@theme {\n${bloomThemeCss()}\n}`;
+}
+//# sourceMappingURL=theme-css.js.map

package/lib/commonjs/design-tokens/theme-css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_colorRoles","require","_scales","_shadows","bloomThemeCss","lines","role","value","Object","entries","FILL_ROLES","TEXT_ROLES","BORDER_ROLES","push","key","SPACING","RADIUS","BORDER_WIDTH","name","keys","TYPOGRAPHY","size","lineHeight","weight","FONT_FAMILY_VARS","family","sans","display","mono","SHADOW_BOX","s","m","join","bloomThemeBlock"],"sourceRoot":"../../../src","sources":["design-tokens/theme-css.ts"],"mappings":";;;;;;;AAyBA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAQA,IAAAE,QAAA,GAAAF,OAAA;AAlCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,aAAaA,CAAA,EAAW;EACtC,MAAMC,KAAe,GAAG,EAAE;;EAE1B;EACA,KAAK,MAAM,CAACC,IAAI,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAAC;IACzC,GAAGC,sBAAU;IACb,GAAGC,sBAAU;IACb,GAAGC;EACL,CAAC,CAAC,EAAE;IACFP,KAAK,CAACQ,IAAI,CAAC,aAAaP,IAAI,KAAKC,KAAK,GAAG,CAAC;EAC5C;;EAEA;EACA,KAAK,MAAM,CAACO,GAAG,EAAEP,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACM,eAAO,CAAC,EAAE;IAClDV,KAAK,CAACQ,IAAI,CAAC,eAAeC,GAAG,KAAKP,KAAK,KAAK,CAAC;EAC/C;;EAEA;EACA,KAAK,MAAM,CAACO,GAAG,EAAEP,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACO,cAAM,CAAC,EAAE;IACjDX,KAAK,CAACQ,IAAI,CAAC,cAAcC,GAAG,KAAKP,KAAK,KAAK,CAAC;EAC9C;;EAEA;EACA,KAAK,MAAM,CAACO,GAAG,EAAEP,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACQ,oBAAY,CAAC,EAAE;IACvDZ,KAAK,CAACQ,IAAI,CAAC,oBAAoBC,GAAG,KAAKP,KAAK,KAAK,CAAC;EACpD;;EAEA;EACA,KAAK,MAAMW,IAAI,IAAIV,MAAM,CAACW,IAAI,CAACC,kBAAU,CAAC,EAAoB;IAC5D,MAAMd,IAAI,GAAGc,kBAAU,CAACF,IAAI,CAAC;IAC7Bb,KAAK,CAACQ,IAAI,CAAC,YAAYK,IAAI,KAAKZ,IAAI,CAACe,IAAI,KAAK,CAAC;IAC/ChB,KAAK,CAACQ,IAAI,CAAC,YAAYK,IAAI,kBAAkBZ,IAAI,CAACgB,UAAU,KAAK,CAAC;IAClEjB,KAAK,CAACQ,IAAI,CAAC,YAAYK,IAAI,kBAAkBZ,IAAI,CAACiB,MAAM,GAAG,CAAC;IAC5DlB,KAAK,CAACQ,IAAI,CAAC,YAAYK,IAAI,KAAKM,wBAAgB,CAAClB,IAAI,CAACmB,MAAM,CAAC,GAAG,CAAC;EACnE;;EAEA;EACApB,KAAK,CAACQ,IAAI,CAAC,wBAAwBW,wBAAgB,CAACE,IAAI,GAAG,CAAC;EAC5DrB,KAAK,CAACQ,IAAI,CAAC,2BAA2BW,wBAAgB,CAACG,OAAO,GAAG,CAAC;EAClEtB,KAAK,CAACQ,IAAI,CAAC,wBAAwBW,wBAAgB,CAACI,IAAI,GAAG,CAAC;;EAE5D;EACAvB,KAAK,CAACQ,IAAI,CAAC,iBAAiBgB,mBAAU,CAACC,CAAC,GAAG,CAAC;EAC5CzB,KAAK,CAACQ,IAAI,CAAC,iBAAiBgB,mBAAU,CAACE,CAAC,GAAG,CAAC;EAE5C,OAAO1B,KAAK,CAAC2B,IAAI,CAAC,IAAI,CAAC;AACzB;;AAEA;AACO,SAASC,eAAeA,CAAA,EAAW;EACxC,OAAO,aAAa7B,aAAa,CAAC,CAAC,KAAK;AAC1C","ignoreList":[]}