@oxyhq/bloom 0.19.0 → 0.20.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.
- package/lib/commonjs/benefit-list/index.js +119 -0
- package/lib/commonjs/benefit-list/index.js.map +1 -0
- package/lib/commonjs/benefit-list/types.js +6 -0
- package/lib/commonjs/benefit-list/types.js.map +1 -0
- package/lib/commonjs/button/Button.web.js +1 -1
- package/lib/commonjs/connection-dots/ConnectionDots.js +112 -0
- package/lib/commonjs/connection-dots/ConnectionDots.js.map +1 -0
- package/lib/commonjs/connection-dots/ConnectionDots.web.js +116 -0
- package/lib/commonjs/connection-dots/ConnectionDots.web.js.map +1 -0
- package/lib/commonjs/connection-dots/ConnectionDotsBase.js +55 -0
- package/lib/commonjs/connection-dots/ConnectionDotsBase.js.map +1 -0
- package/lib/commonjs/connection-dots/index.js +13 -0
- package/lib/commonjs/connection-dots/index.js.map +1 -0
- package/lib/commonjs/connection-dots/index.web.js +13 -0
- package/lib/commonjs/connection-dots/index.web.js.map +1 -0
- package/lib/commonjs/connection-dots/types.js +6 -0
- package/lib/commonjs/connection-dots/types.js.map +1 -0
- package/lib/commonjs/design-tokens/color-roles.js +112 -0
- package/lib/commonjs/design-tokens/color-roles.js.map +1 -0
- package/lib/commonjs/design-tokens/index.js +89 -0
- package/lib/commonjs/design-tokens/index.js.map +1 -0
- package/lib/commonjs/design-tokens/scales.js +168 -0
- package/lib/commonjs/design-tokens/scales.js.map +1 -0
- package/lib/commonjs/design-tokens/shadows.js +48 -0
- package/lib/commonjs/design-tokens/shadows.js.map +1 -0
- package/lib/commonjs/design-tokens/shadows.native.js +53 -0
- package/lib/commonjs/design-tokens/shadows.native.js.map +1 -0
- package/lib/commonjs/design-tokens/tailwind-preset.js +139 -0
- package/lib/commonjs/design-tokens/tailwind-preset.js.map +1 -0
- package/lib/commonjs/design-tokens/theme-css.js +98 -0
- package/lib/commonjs/design-tokens/theme-css.js.map +1 -0
- package/lib/commonjs/index.js +208 -93
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/index.web.js +223 -108
- package/lib/commonjs/index.web.js.map +1 -1
- package/lib/commonjs/text-field/index.js +156 -0
- package/lib/commonjs/text-field/index.js.map +1 -1
- package/lib/module/benefit-list/index.js +114 -0
- package/lib/module/benefit-list/index.js.map +1 -0
- package/lib/module/benefit-list/types.js +4 -0
- package/lib/module/benefit-list/types.js.map +1 -0
- package/lib/module/button/Button.web.js +1 -1
- package/lib/module/connection-dots/ConnectionDots.js +107 -0
- package/lib/module/connection-dots/ConnectionDots.js.map +1 -0
- package/lib/module/connection-dots/ConnectionDots.web.js +111 -0
- package/lib/module/connection-dots/ConnectionDots.web.js.map +1 -0
- package/lib/module/connection-dots/ConnectionDotsBase.js +50 -0
- package/lib/module/connection-dots/ConnectionDotsBase.js.map +1 -0
- package/lib/module/connection-dots/index.js +4 -0
- package/lib/module/connection-dots/index.js.map +1 -0
- package/lib/module/connection-dots/index.web.js +4 -0
- package/lib/module/connection-dots/index.web.js.map +1 -0
- package/lib/module/connection-dots/types.js +4 -0
- package/lib/module/connection-dots/types.js.map +1 -0
- package/lib/module/design-tokens/color-roles.js +108 -0
- package/lib/module/design-tokens/color-roles.js.map +1 -0
- package/lib/module/design-tokens/index.js +27 -0
- package/lib/module/design-tokens/index.js.map +1 -0
- package/lib/module/design-tokens/scales.js +164 -0
- package/lib/module/design-tokens/scales.js.map +1 -0
- package/lib/module/design-tokens/shadows.js +43 -0
- package/lib/module/design-tokens/shadows.js.map +1 -0
- package/lib/module/design-tokens/shadows.native.js +48 -0
- package/lib/module/design-tokens/shadows.native.js.map +1 -0
- package/lib/module/design-tokens/tailwind-preset.js +136 -0
- package/lib/module/design-tokens/tailwind-preset.js.map +1 -0
- package/lib/module/design-tokens/theme-css.js +94 -0
- package/lib/module/design-tokens/theme-css.js.map +1 -0
- package/lib/module/index.js +6 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/index.web.js +6 -1
- package/lib/module/index.web.js.map +1 -1
- package/lib/module/text-field/index.js +158 -2
- package/lib/module/text-field/index.js.map +1 -1
- package/lib/typescript/commonjs/benefit-list/index.d.ts +6 -0
- package/lib/typescript/commonjs/benefit-list/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/benefit-list/types.d.ts +35 -0
- package/lib/typescript/commonjs/benefit-list/types.d.ts.map +1 -0
- package/lib/typescript/commonjs/connection-dots/ConnectionDots.d.ts +4 -0
- package/lib/typescript/commonjs/connection-dots/ConnectionDots.d.ts.map +1 -0
- package/lib/typescript/commonjs/connection-dots/ConnectionDots.web.d.ts +14 -0
- package/lib/typescript/commonjs/connection-dots/ConnectionDots.web.d.ts.map +1 -0
- package/lib/typescript/commonjs/connection-dots/ConnectionDotsBase.d.ts +18 -0
- package/lib/typescript/commonjs/connection-dots/ConnectionDotsBase.d.ts.map +1 -0
- package/lib/typescript/commonjs/connection-dots/index.d.ts +3 -0
- package/lib/typescript/commonjs/connection-dots/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/connection-dots/index.web.d.ts +3 -0
- package/lib/typescript/commonjs/connection-dots/index.web.d.ts.map +1 -0
- package/lib/typescript/commonjs/connection-dots/types.d.ts +41 -0
- package/lib/typescript/commonjs/connection-dots/types.d.ts.map +1 -0
- package/lib/typescript/commonjs/design-tokens/color-roles.d.ts +102 -0
- package/lib/typescript/commonjs/design-tokens/color-roles.d.ts.map +1 -0
- package/lib/typescript/commonjs/design-tokens/index.d.ts +28 -0
- package/lib/typescript/commonjs/design-tokens/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/design-tokens/scales.d.ts +152 -0
- package/lib/typescript/commonjs/design-tokens/scales.d.ts.map +1 -0
- package/lib/typescript/commonjs/design-tokens/shadows.d.ts +34 -0
- package/lib/typescript/commonjs/design-tokens/shadows.d.ts.map +1 -0
- package/lib/typescript/commonjs/design-tokens/shadows.native.d.ts +19 -0
- package/lib/typescript/commonjs/design-tokens/shadows.native.d.ts.map +1 -0
- package/lib/typescript/commonjs/design-tokens/tailwind-preset.d.ts +59 -0
- package/lib/typescript/commonjs/design-tokens/tailwind-preset.d.ts.map +1 -0
- package/lib/typescript/commonjs/design-tokens/theme-css.d.ts +39 -0
- package/lib/typescript/commonjs/design-tokens/theme-css.d.ts.map +1 -0
- package/lib/typescript/commonjs/index.d.ts +6 -0
- package/lib/typescript/commonjs/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/index.web.d.ts +6 -0
- package/lib/typescript/commonjs/index.web.d.ts.map +1 -1
- package/lib/typescript/commonjs/text-field/index.d.ts +14 -1
- package/lib/typescript/commonjs/text-field/index.d.ts.map +1 -1
- package/lib/typescript/module/benefit-list/index.d.ts +6 -0
- package/lib/typescript/module/benefit-list/index.d.ts.map +1 -0
- package/lib/typescript/module/benefit-list/types.d.ts +35 -0
- package/lib/typescript/module/benefit-list/types.d.ts.map +1 -0
- package/lib/typescript/module/connection-dots/ConnectionDots.d.ts +4 -0
- package/lib/typescript/module/connection-dots/ConnectionDots.d.ts.map +1 -0
- package/lib/typescript/module/connection-dots/ConnectionDots.web.d.ts +14 -0
- package/lib/typescript/module/connection-dots/ConnectionDots.web.d.ts.map +1 -0
- package/lib/typescript/module/connection-dots/ConnectionDotsBase.d.ts +18 -0
- package/lib/typescript/module/connection-dots/ConnectionDotsBase.d.ts.map +1 -0
- package/lib/typescript/module/connection-dots/index.d.ts +3 -0
- package/lib/typescript/module/connection-dots/index.d.ts.map +1 -0
- package/lib/typescript/module/connection-dots/index.web.d.ts +3 -0
- package/lib/typescript/module/connection-dots/index.web.d.ts.map +1 -0
- package/lib/typescript/module/connection-dots/types.d.ts +41 -0
- package/lib/typescript/module/connection-dots/types.d.ts.map +1 -0
- package/lib/typescript/module/design-tokens/color-roles.d.ts +102 -0
- package/lib/typescript/module/design-tokens/color-roles.d.ts.map +1 -0
- package/lib/typescript/module/design-tokens/index.d.ts +28 -0
- package/lib/typescript/module/design-tokens/index.d.ts.map +1 -0
- package/lib/typescript/module/design-tokens/scales.d.ts +152 -0
- package/lib/typescript/module/design-tokens/scales.d.ts.map +1 -0
- package/lib/typescript/module/design-tokens/shadows.d.ts +34 -0
- package/lib/typescript/module/design-tokens/shadows.d.ts.map +1 -0
- package/lib/typescript/module/design-tokens/shadows.native.d.ts +19 -0
- package/lib/typescript/module/design-tokens/shadows.native.d.ts.map +1 -0
- package/lib/typescript/module/design-tokens/tailwind-preset.d.ts +59 -0
- package/lib/typescript/module/design-tokens/tailwind-preset.d.ts.map +1 -0
- package/lib/typescript/module/design-tokens/theme-css.d.ts +39 -0
- package/lib/typescript/module/design-tokens/theme-css.d.ts.map +1 -0
- package/lib/typescript/module/index.d.ts +6 -0
- package/lib/typescript/module/index.d.ts.map +1 -1
- package/lib/typescript/module/index.web.d.ts +6 -0
- package/lib/typescript/module/index.web.d.ts.map +1 -1
- package/lib/typescript/module/text-field/index.d.ts +14 -1
- package/lib/typescript/module/text-field/index.d.ts.map +1 -1
- package/package.json +50 -1
- package/src/__tests__/BenefitList.test.tsx +108 -0
- package/src/__tests__/ConnectionDots.test.tsx +86 -0
- package/src/__tests__/TextFieldFloatingLabel.test.tsx +93 -0
- package/src/__tests__/design-tokens.test.ts +169 -0
- package/src/benefit-list/BenefitList.stories.tsx +50 -0
- package/src/benefit-list/index.tsx +133 -0
- package/src/benefit-list/types.ts +36 -0
- package/src/button/Button.web.tsx +1 -1
- package/src/connection-dots/ConnectionDots.stories.tsx +54 -0
- package/src/connection-dots/ConnectionDots.tsx +139 -0
- package/src/connection-dots/ConnectionDots.web.tsx +122 -0
- package/src/connection-dots/ConnectionDotsBase.tsx +62 -0
- package/src/connection-dots/index.ts +2 -0
- package/src/connection-dots/index.web.ts +2 -0
- package/src/connection-dots/types.ts +41 -0
- package/src/design-tokens/color-roles.ts +110 -0
- package/src/design-tokens/index.ts +45 -0
- package/src/design-tokens/scales.ts +134 -0
- package/src/design-tokens/shadows.native.ts +44 -0
- package/src/design-tokens/shadows.ts +42 -0
- package/src/design-tokens/tailwind-preset.ts +139 -0
- package/src/design-tokens/theme-css.ts +99 -0
- package/src/index.ts +33 -0
- package/src/index.web.ts +33 -0
- package/src/text-field/TextField.stories.tsx +46 -0
- package/src/text-field/index.tsx +212 -1
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { View } from 'react-native';
|
|
5
|
+
import { atoms as a, tokens } from "../styles/index.js";
|
|
6
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
+
/**
|
|
8
|
+
* Shared layout + accessibility chrome for {@link ConnectionDots}:
|
|
9
|
+
*
|
|
10
|
+
* leftSlot · (animated ellipsis dots) · rightSlot
|
|
11
|
+
*
|
|
12
|
+
* The dots themselves are supplied by the platform fork (`ConnectionDots.tsx`
|
|
13
|
+
* native / `ConnectionDots.web.tsx` web) because the shimmer animation impl
|
|
14
|
+
* differs (Reanimated vs CSS). This base owns the row layout, the slot wrappers,
|
|
15
|
+
* and the single accessibility label that stands in for the decorative dots.
|
|
16
|
+
*/
|
|
17
|
+
export function ConnectionDotsBase({
|
|
18
|
+
left,
|
|
19
|
+
right,
|
|
20
|
+
dots,
|
|
21
|
+
accessibilityLabel = 'Connecting',
|
|
22
|
+
className,
|
|
23
|
+
style
|
|
24
|
+
}) {
|
|
25
|
+
const rowStyle = [a.flex_row, a.align_center, a.justify_center, {
|
|
26
|
+
gap: tokens.space.md
|
|
27
|
+
}, style];
|
|
28
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
29
|
+
...(className ? {
|
|
30
|
+
className
|
|
31
|
+
} : {}),
|
|
32
|
+
style: rowStyle,
|
|
33
|
+
children: [/*#__PURE__*/_jsx(View, {
|
|
34
|
+
style: [a.align_center, a.justify_center],
|
|
35
|
+
children: left
|
|
36
|
+
}), /*#__PURE__*/_jsx(View, {
|
|
37
|
+
accessibilityRole: "image",
|
|
38
|
+
accessibilityLabel: accessibilityLabel,
|
|
39
|
+
"aria-label": accessibilityLabel,
|
|
40
|
+
style: [a.flex_row, a.align_center, {
|
|
41
|
+
gap: tokens.space.xs
|
|
42
|
+
}],
|
|
43
|
+
children: dots
|
|
44
|
+
}), /*#__PURE__*/_jsx(View, {
|
|
45
|
+
style: [a.align_center, a.justify_center],
|
|
46
|
+
children: right
|
|
47
|
+
})]
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
//# sourceMappingURL=ConnectionDotsBase.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","View","atoms","a","tokens","jsx","_jsx","jsxs","_jsxs","ConnectionDotsBase","left","right","dots","accessibilityLabel","className","style","rowStyle","flex_row","align_center","justify_center","gap","space","md","children","accessibilityRole","xs"],"sourceRoot":"../../../src","sources":["connection-dots/ConnectionDotsBase.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwC,cAAc;AAEnE,SAASC,KAAK,IAAIC,CAAC,EAAEC,MAAM,QAAQ,oBAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAY/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAAC;EACjCC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,kBAAkB,GAAG,YAAY;EACjCC,SAAS;EACTC;AACuB,CAAC,EAAE;EAC1B,MAAMC,QAA8B,GAAG,CACrCb,CAAC,CAACc,QAAQ,EACVd,CAAC,CAACe,YAAY,EACdf,CAAC,CAACgB,cAAc,EAChB;IAAEC,GAAG,EAAEhB,MAAM,CAACiB,KAAK,CAACC;EAAG,CAAC,EACxBP,KAAK,CACN;EAED,oBACEP,KAAA,CAACP,IAAI;IAAA,IACEa,SAAS,GAAI;MAAEA;IAAU,CAAC,GAA8B,CAAC,CAAC;IAC/DC,KAAK,EAAEC,QAAS;IAAAO,QAAA,gBAChBjB,IAAA,CAACL,IAAI;MAACc,KAAK,EAAE,CAACZ,CAAC,CAACe,YAAY,EAAEf,CAAC,CAACgB,cAAc,CAAE;MAAAI,QAAA,EAAEb;IAAI,CAAO,CAAC,eAK9DJ,IAAA,CAACL,IAAI;MACHuB,iBAAiB,EAAC,OAAO;MACzBX,kBAAkB,EAAEA,kBAAmB;MACvC,cAAYA,kBAAmB;MAC/BE,KAAK,EAAE,CAACZ,CAAC,CAACc,QAAQ,EAAEd,CAAC,CAACe,YAAY,EAAE;QAAEE,GAAG,EAAEhB,MAAM,CAACiB,KAAK,CAACI;MAAG,CAAC,CAAE;MAAAF,QAAA,EAC7DX;IAAI,CACD,CAAC,eAEPN,IAAA,CAACL,IAAI;MAACc,KAAK,EAAE,CAACZ,CAAC,CAACe,YAAY,EAAEf,CAAC,CAACgB,cAAc,CAAE;MAAAI,QAAA,EAAEZ;IAAK,CAAO,CAAC;EAAA,CAC3D,CAAC;AAEX","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["ConnectionDots"],"sourceRoot":"../../../src","sources":["connection-dots/index.ts"],"mappings":";;AAAA,SAASA,cAAc,QAAQ,kBAAkB","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["ConnectionDots"],"sourceRoot":"../../../src","sources":["connection-dots/index.web.ts"],"mappings":";;AAAA,SAASA,cAAc,QAAQ,yBAAsB","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["connection-dots/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Semantic color-role vocabulary for the Oxy Unified Design Language.
|
|
5
|
+
*
|
|
6
|
+
* Every role is an ALIAS onto one of Bloom's existing canonical theme tokens
|
|
7
|
+
* (`--background`, `--surface`, `--primary`, …) — the SINGLE source of resolved
|
|
8
|
+
* color values produced by `getResolvedTokens` and written to the document root
|
|
9
|
+
* (web) / `rootVariables` (native) by `BloomThemeProvider`. No color VALUE is
|
|
10
|
+
* invented here: a role's value is the `var(--canonical)` reference, so it stays
|
|
11
|
+
* driven by the active light/dark mode and color preset automatically.
|
|
12
|
+
*
|
|
13
|
+
* The maps are consumed by the Bloom Tailwind preset (`tailwind-preset.ts`),
|
|
14
|
+
* which slots them into `theme.extend.{backgroundColor,textColor,borderColor}`.
|
|
15
|
+
* Because the values are `var(--x)` strings, the SAME class names resolve on
|
|
16
|
+
* Tailwind (web) and NativeWind (native): web reads the CSS custom property from
|
|
17
|
+
* `document.documentElement`; native reads it from react-native-css's
|
|
18
|
+
* `rootVariables` family — both populated by Bloom from one pipeline.
|
|
19
|
+
*
|
|
20
|
+
* Web CSS-var contract (see Bloom AGENTS.md): base `--x` tokens already resolve
|
|
21
|
+
* to a FULL `rgb(...)` color at runtime, so the role values reference them with
|
|
22
|
+
* `var(--x)` directly — NEVER `hsl(var(--x))`.
|
|
23
|
+
*
|
|
24
|
+
* ADDITIVE: these are NEW utility names (`bg-fill`, `text-text-tertiary`,
|
|
25
|
+
* `border-border-image`, …). They do not touch the existing app-defined color
|
|
26
|
+
* utilities (`bg-background`, `text-muted-foreground`, …), which keep working.
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
/** A `var(--canonical-token)` reference string. */
|
|
30
|
+
|
|
31
|
+
const ref = token => `var(--${token})`;
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Surface / fill roles → background-color utilities (`bg-<role>`).
|
|
35
|
+
*
|
|
36
|
+
* | role | utility | canonical token | rationale |
|
|
37
|
+
* | ----------------- | ------------------ | ----------------- | ------------------------------------------- |
|
|
38
|
+
* | bg | bg-bg | --background | the page background |
|
|
39
|
+
* | fill | bg-fill | --card | default raised surface (cards/sheets) |
|
|
40
|
+
* | fill-secondary | bg-fill-secondary | --muted | muted/secondary fill |
|
|
41
|
+
* | fill-hover | bg-fill-hover | --accent | hover state of a secondary fill |
|
|
42
|
+
* | fill-brand | bg-fill-brand | --primary | brand-colored fill |
|
|
43
|
+
* | fill-brand-hover | bg-fill-brand-hover| --ring | hover of brand fill (ring == primary hue) |
|
|
44
|
+
* | fill-inverse | bg-fill-inverse | --foreground | inverse (high-contrast) fill |
|
|
45
|
+
* | fill-inverse-hover| bg-fill-inverse-hov| --muted-foreground| hover of inverse fill |
|
|
46
|
+
* | fill-placeholder | bg-fill-placeholder| --muted | disabled/placeholder surface |
|
|
47
|
+
*/
|
|
48
|
+
export const FILL_ROLES = {
|
|
49
|
+
bg: ref('background'),
|
|
50
|
+
fill: ref('card'),
|
|
51
|
+
'fill-secondary': ref('muted'),
|
|
52
|
+
'fill-hover': ref('accent'),
|
|
53
|
+
'fill-brand': ref('primary'),
|
|
54
|
+
'fill-brand-hover': ref('ring'),
|
|
55
|
+
'fill-inverse': ref('foreground'),
|
|
56
|
+
'fill-inverse-hover': ref('muted-foreground'),
|
|
57
|
+
'fill-placeholder': ref('muted')
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Text roles → text-color utilities (`text-<role>`).
|
|
62
|
+
*
|
|
63
|
+
* Tailwind prefixes text-color utilities with `text-`, so a role literally
|
|
64
|
+
* named `text` becomes the utility `text-text`, `text-secondary` → the utility
|
|
65
|
+
* `text-text-secondary`, etc. (matches the namespaced spec).
|
|
66
|
+
*
|
|
67
|
+
* | role | utility | canonical token | rationale |
|
|
68
|
+
* | ---------------- | --------------------- | --------------------- | ---------------------------------- |
|
|
69
|
+
* | text | text-text | --foreground | primary text |
|
|
70
|
+
* | text-secondary | text-text-secondary | --muted-foreground | secondary text |
|
|
71
|
+
* | text-tertiary | text-text-tertiary | --muted-foreground | tertiary/least-emphasis text |
|
|
72
|
+
* | text-inverse | text-text-inverse | --primary-foreground | text on a brand fill |
|
|
73
|
+
* | text-fixed-light | text-text-fixed-light | --primary-foreground | always-light text (on brand) |
|
|
74
|
+
* | text-placeholder | text-text-placeholder | --muted-foreground | placeholder/input hint |
|
|
75
|
+
*/
|
|
76
|
+
export const TEXT_ROLES = {
|
|
77
|
+
text: ref('foreground'),
|
|
78
|
+
'text-secondary': ref('muted-foreground'),
|
|
79
|
+
'text-tertiary': ref('muted-foreground'),
|
|
80
|
+
'text-inverse': ref('primary-foreground'),
|
|
81
|
+
'text-fixed-light': ref('primary-foreground'),
|
|
82
|
+
'text-placeholder': ref('muted-foreground')
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Border roles → border-color utilities (`border-<role>`).
|
|
87
|
+
*
|
|
88
|
+
* | role | utility | canonical token | rationale |
|
|
89
|
+
* | ------------------ | ----------------------- | --------------- | ------------------------------------------ |
|
|
90
|
+
* | border | border-border | --border | default border |
|
|
91
|
+
* | border-image | border-border-image | --border | hairline border color (0.5px width helper) |
|
|
92
|
+
* | border-secondary | border-border-secondary | --input | secondary/softer border |
|
|
93
|
+
* | border-input | border-border-input | --input | input field border |
|
|
94
|
+
* | border-input-active| border-border-input-active | --ring | focused input border (== primary) |
|
|
95
|
+
*
|
|
96
|
+
* NOTE: the hairline 0.5px WIDTH for `border-image` is shipped as a separate
|
|
97
|
+
* `borderWidth` scale entry (`border-hairline`) in the preset; the color role
|
|
98
|
+
* above only provides the matching color. Consumers compose them:
|
|
99
|
+
* `border-hairline border-border-image`.
|
|
100
|
+
*/
|
|
101
|
+
export const BORDER_ROLES = {
|
|
102
|
+
border: ref('border'),
|
|
103
|
+
'border-image': ref('border'),
|
|
104
|
+
'border-secondary': ref('input'),
|
|
105
|
+
'border-input': ref('input'),
|
|
106
|
+
'border-input-active': ref('ring')
|
|
107
|
+
};
|
|
108
|
+
//# sourceMappingURL=color-roles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["ref","token","FILL_ROLES","bg","fill","TEXT_ROLES","text","BORDER_ROLES","border"],"sourceRoot":"../../../src","sources":["design-tokens/color-roles.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAGA,MAAMA,GAAG,GAAIC,KAAa,IAAe,SAASA,KAAK,GAAG;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAG;EACxBC,EAAE,EAAEH,GAAG,CAAC,YAAY,CAAC;EACrBI,IAAI,EAAEJ,GAAG,CAAC,MAAM,CAAC;EACjB,gBAAgB,EAAEA,GAAG,CAAC,OAAO,CAAC;EAC9B,YAAY,EAAEA,GAAG,CAAC,QAAQ,CAAC;EAC3B,YAAY,EAAEA,GAAG,CAAC,SAAS,CAAC;EAC5B,kBAAkB,EAAEA,GAAG,CAAC,MAAM,CAAC;EAC/B,cAAc,EAAEA,GAAG,CAAC,YAAY,CAAC;EACjC,oBAAoB,EAAEA,GAAG,CAAC,kBAAkB,CAAC;EAC7C,kBAAkB,EAAEA,GAAG,CAAC,OAAO;AACjC,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,UAAU,GAAG;EACxBC,IAAI,EAAEN,GAAG,CAAC,YAAY,CAAC;EACvB,gBAAgB,EAAEA,GAAG,CAAC,kBAAkB,CAAC;EACzC,eAAe,EAAEA,GAAG,CAAC,kBAAkB,CAAC;EACxC,cAAc,EAAEA,GAAG,CAAC,oBAAoB,CAAC;EACzC,kBAAkB,EAAEA,GAAG,CAAC,oBAAoB,CAAC;EAC7C,kBAAkB,EAAEA,GAAG,CAAC,kBAAkB;AAC5C,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMO,YAAY,GAAG;EAC1BC,MAAM,EAAER,GAAG,CAAC,QAAQ,CAAC;EACrB,cAAc,EAAEA,GAAG,CAAC,QAAQ,CAAC;EAC7B,kBAAkB,EAAEA,GAAG,CAAC,OAAO,CAAC;EAChC,cAAc,EAAEA,GAAG,CAAC,OAAO,CAAC;EAC5B,qBAAqB,EAAEA,GAAG,CAAC,MAAM;AACnC,CAAU","ignoreList":[]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* `@oxyhq/bloom/design-tokens` — the centralized, semantic design-token
|
|
5
|
+
* vocabulary for the Oxy Unified Design Language.
|
|
6
|
+
*
|
|
7
|
+
* Exposes:
|
|
8
|
+
* - `bloomTailwindPreset` — the Tailwind/NativeWind preset (web + native) that
|
|
9
|
+
* adds the semantic utility classes (`bg-fill`, `text-text-tertiary`,
|
|
10
|
+
* `p-space-8`, `rounded-radius-20`, `text-body`, `font-body`, `shadow-s`).
|
|
11
|
+
* - `bloomThemeCss` / `bloomThemeBlock` — the Tailwind v4 `@theme` equivalent
|
|
12
|
+
* for CSS-configured web apps.
|
|
13
|
+
* - The raw token maps (`FILL_ROLES`, `TEXT_ROLES`, `BORDER_ROLES`, `SPACING`,
|
|
14
|
+
* `RADIUS`, `TYPOGRAPHY`, `SHADOW_BOX`) for direct programmatic use.
|
|
15
|
+
* - `bloomShadowStyle` — platform-correct shadow style object (web box-shadow /
|
|
16
|
+
* native elevation) so a consumer writes one call for both platforms.
|
|
17
|
+
*
|
|
18
|
+
* Additive and non-breaking: every export here is NEW. It does not change any
|
|
19
|
+
* existing Bloom token, theme value, or utility class.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
export { bloomTailwindPreset } from "./tailwind-preset.js";
|
|
23
|
+
export { bloomThemeCss, bloomThemeBlock } from "./theme-css.js";
|
|
24
|
+
export { FILL_ROLES, TEXT_ROLES, BORDER_ROLES } from "./color-roles.js";
|
|
25
|
+
export { SPACING, RADIUS, BORDER_WIDTH, TYPOGRAPHY, FONT_FAMILY_VARS } from "./scales.js";
|
|
26
|
+
export { SHADOW_BOX, bloomShadowStyle } from './shadows';
|
|
27
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["bloomTailwindPreset","bloomThemeCss","bloomThemeBlock","FILL_ROLES","TEXT_ROLES","BORDER_ROLES","SPACING","RADIUS","BORDER_WIDTH","TYPOGRAPHY","FONT_FAMILY_VARS","SHADOW_BOX","bloomShadowStyle"],"sourceRoot":"../../../src","sources":["design-tokens/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,mBAAmB,QAAQ,sBAAmB;AAMvD,SAASC,aAAa,EAAEC,eAAe,QAAQ,gBAAa;AAE5D,SACEC,UAAU,EACVC,UAAU,EACVC,YAAY,QACP,kBAAe;AAGtB,SACEC,OAAO,EACPC,MAAM,EACNC,YAAY,EACZC,UAAU,EACVC,gBAAgB,QACX,aAAU;AAGjB,SAASC,UAAU,EAAEC,gBAAgB,QAAQ,WAAW","ignoreList":[]}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Numeric design-token scales for the Oxy Unified Design Language.
|
|
5
|
+
*
|
|
6
|
+
* These are platform-agnostic plain numbers / CSS strings consumed by the Bloom
|
|
7
|
+
* Tailwind preset (`tailwind-preset.ts`). The SAME keys produce the SAME utility
|
|
8
|
+
* class names on Tailwind (web) and NativeWind (native):
|
|
9
|
+
* - spacing → `p-space-8`, `gap-space-20`, `px-screen-margin`, `m-space-16`
|
|
10
|
+
* - radius → `rounded-radius-20`
|
|
11
|
+
* - type → `font-body` (family/weight) + `text-body` (size/lineHeight)
|
|
12
|
+
* - shadow → `shadow-s`, `shadow-m`
|
|
13
|
+
*
|
|
14
|
+
* ADDITIVE: every key is namespaced (`space-*`, `radius-*`, the typography role
|
|
15
|
+
* names, `shadow-s/m`) and does not collide with Tailwind's built-in numeric
|
|
16
|
+
* scale (`p-4`, `rounded-lg`, `text-sm`) — those keep working unchanged.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
/* -------------------------------------------------------------------------- */
|
|
20
|
+
/* Spacing */
|
|
21
|
+
/* -------------------------------------------------------------------------- */
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Spacing scale (px). Consumed via every Tailwind spacing utility:
|
|
25
|
+
* `p-space-8`, `px-space-16`, `gap-space-20`, `m-space-24`, `py-space-12`, …
|
|
26
|
+
*
|
|
27
|
+
* `screen-margin` is the standard page gutter (left/right inset). Default 20px —
|
|
28
|
+
* matches Bloom's existing `space.xl` and the `Dialog` default `contentPadding`.
|
|
29
|
+
*/
|
|
30
|
+
export const SPACING = {
|
|
31
|
+
'space-2': 2,
|
|
32
|
+
'space-4': 4,
|
|
33
|
+
'space-8': 8,
|
|
34
|
+
'space-12': 12,
|
|
35
|
+
'space-16': 16,
|
|
36
|
+
'space-20': 20,
|
|
37
|
+
'space-24': 24,
|
|
38
|
+
'space-32': 32,
|
|
39
|
+
'screen-margin': 20
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
/* -------------------------------------------------------------------------- */
|
|
43
|
+
/* Radius */
|
|
44
|
+
/* -------------------------------------------------------------------------- */
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Corner-radius scale (px). Consumed via `rounded-radius-*`:
|
|
48
|
+
* `rounded-radius-8`, `rounded-radius-12`, `rounded-radius-20`,
|
|
49
|
+
* `rounded-radius-28`, `rounded-radius-max` (pill / circle).
|
|
50
|
+
*/
|
|
51
|
+
export const RADIUS = {
|
|
52
|
+
'radius-8': 8,
|
|
53
|
+
'radius-12': 12,
|
|
54
|
+
'radius-20': 20,
|
|
55
|
+
'radius-28': 28,
|
|
56
|
+
'radius-max': 9999
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
/* -------------------------------------------------------------------------- */
|
|
60
|
+
/* Border width (hairline) */
|
|
61
|
+
/* -------------------------------------------------------------------------- */
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Border-width helpers. `border-hairline` is the 0.5px hairline that pairs with
|
|
65
|
+
* the `border-border-image` color role. (Tailwind's default `border` = 1px
|
|
66
|
+
* stays untouched.)
|
|
67
|
+
*/
|
|
68
|
+
export const BORDER_WIDTH = {
|
|
69
|
+
hairline: 0.5
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
/* -------------------------------------------------------------------------- */
|
|
73
|
+
/* Typography */
|
|
74
|
+
/* -------------------------------------------------------------------------- */
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* One typography role. `size`/`lineHeight` are px; `weight` is a CSS font-weight
|
|
78
|
+
* string; `family` selects the Bloom font CSS var (`sans` = body/UI,
|
|
79
|
+
* `display` = headings/serif).
|
|
80
|
+
*
|
|
81
|
+
* The Tailwind preset splits each role into TWO utilities so a consumer can
|
|
82
|
+
* apply the size/leading and the family/weight independently or together:
|
|
83
|
+
* - `text-<role>` → `fontSize` + `lineHeight` (via theme.fontSize)
|
|
84
|
+
* - `font-<role>` → `fontFamily` + `fontWeight` (via theme.fontFamily, which
|
|
85
|
+
* maps a key to a [family, { fontWeight }] tuple)
|
|
86
|
+
*/
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* The coherent Oxy type scale. Sizes climb 11 → 28; line-heights use a ~1.3–1.5
|
|
90
|
+
* leading for body roles and tighter leading for large titles.
|
|
91
|
+
*
|
|
92
|
+
* | role | size/line | weight | family | usage |
|
|
93
|
+
* | --------------- | --------- | ------ | ------- | ------------------------------ |
|
|
94
|
+
* | caption | 11 / 14 | 400 | sans | timestamps, meta, fine print |
|
|
95
|
+
* | bodySmall | 13 / 18 | 400 | sans | secondary body, captions |
|
|
96
|
+
* | bodyTitleSmall | 13 / 18 | 600 | sans | small emphasized labels |
|
|
97
|
+
* | body | 15 / 22 | 400 | sans | default body text |
|
|
98
|
+
* | subtitle | 17 / 24 | 500 | sans | list subtitles, lead-ins |
|
|
99
|
+
* | sectionTitle | 20 / 26 | 600 | sans | section headers |
|
|
100
|
+
* | headerBold | 28 / 34 | 700 | display | screen / page titles |
|
|
101
|
+
* | buttonLarge | 17 / 22 | 600 | sans | primary button label |
|
|
102
|
+
*/
|
|
103
|
+
export const TYPOGRAPHY = {
|
|
104
|
+
caption: {
|
|
105
|
+
size: 11,
|
|
106
|
+
lineHeight: 14,
|
|
107
|
+
weight: '400',
|
|
108
|
+
family: 'sans'
|
|
109
|
+
},
|
|
110
|
+
bodySmall: {
|
|
111
|
+
size: 13,
|
|
112
|
+
lineHeight: 18,
|
|
113
|
+
weight: '400',
|
|
114
|
+
family: 'sans'
|
|
115
|
+
},
|
|
116
|
+
bodyTitleSmall: {
|
|
117
|
+
size: 13,
|
|
118
|
+
lineHeight: 18,
|
|
119
|
+
weight: '600',
|
|
120
|
+
family: 'sans'
|
|
121
|
+
},
|
|
122
|
+
body: {
|
|
123
|
+
size: 15,
|
|
124
|
+
lineHeight: 22,
|
|
125
|
+
weight: '400',
|
|
126
|
+
family: 'sans'
|
|
127
|
+
},
|
|
128
|
+
subtitle: {
|
|
129
|
+
size: 17,
|
|
130
|
+
lineHeight: 24,
|
|
131
|
+
weight: '500',
|
|
132
|
+
family: 'sans'
|
|
133
|
+
},
|
|
134
|
+
sectionTitle: {
|
|
135
|
+
size: 20,
|
|
136
|
+
lineHeight: 26,
|
|
137
|
+
weight: '600',
|
|
138
|
+
family: 'sans'
|
|
139
|
+
},
|
|
140
|
+
headerBold: {
|
|
141
|
+
size: 28,
|
|
142
|
+
lineHeight: 34,
|
|
143
|
+
weight: '700',
|
|
144
|
+
family: 'display'
|
|
145
|
+
},
|
|
146
|
+
buttonLarge: {
|
|
147
|
+
size: 17,
|
|
148
|
+
lineHeight: 22,
|
|
149
|
+
weight: '600',
|
|
150
|
+
family: 'sans'
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
/**
|
|
154
|
+
* Bloom font-family CSS-var stacks, keyed by the `family` field above. Web reads
|
|
155
|
+
* `var(--bloom-font-*)` (set by `applyFontFaces`); the preset falls back to the
|
|
156
|
+
* literal stack so utilities still resolve before the vars are injected and on
|
|
157
|
+
* native (where NativeWind passes the family string straight through).
|
|
158
|
+
*/
|
|
159
|
+
export const FONT_FAMILY_VARS = {
|
|
160
|
+
sans: 'var(--bloom-font-sans)',
|
|
161
|
+
display: 'var(--bloom-font-display)',
|
|
162
|
+
mono: 'var(--bloom-font-mono)'
|
|
163
|
+
};
|
|
164
|
+
//# sourceMappingURL=scales.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["SPACING","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;AACA,OAAO,MAAMA,OAAO,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;AACA,OAAO,MAAMC,MAAM,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;AACA,OAAO,MAAMC,YAAY,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;AACA,OAAO,MAAMC,UAAU,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;AACA,OAAO,MAAMQ,gBAAgB,GAAG;EAC9BC,IAAI,EAAE,wBAAwB;EAC9BC,OAAO,EAAE,2BAA2B;EACpCC,IAAI,EAAE;AACR,CAAU","ignoreList":[]}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Elevation / shadow tokens for the Oxy Unified Design Language.
|
|
5
|
+
*
|
|
6
|
+
* Two roles: `shadow-s` (subtle raise — cards, chips) and `shadow-m` (overlays —
|
|
7
|
+
* menus, popovers, dialogs). Consumers write ONE class (`shadow-s` / `shadow-m`)
|
|
8
|
+
* and Bloom owns the platform split:
|
|
9
|
+
* - Web: the Bloom Tailwind preset registers `boxShadow.s` / `boxShadow.m`
|
|
10
|
+
* (the `SHADOW_BOX` strings below) → `shadow-s` / `shadow-m` utilities.
|
|
11
|
+
* - Native: NativeWind cannot translate a multi-layer web `box-shadow` to RN
|
|
12
|
+
* elevation reliably, so apps that need the shadow on a React Native surface
|
|
13
|
+
* apply the matching style object from `bloomShadowStyle('s' | 'm')` (this
|
|
14
|
+
* module is platform-forked: `.native.ts` returns RN `shadow*`/`elevation`).
|
|
15
|
+
*
|
|
16
|
+
* This default file is the WEB / consumer-tsc variant. Metro selects the sibling
|
|
17
|
+
* `shadows.native.ts` on iOS/Android. Web bundlers and a consumer's `tsc` see
|
|
18
|
+
* this file (the `box-shadow` CSS string path), matching Bloom's existing
|
|
19
|
+
* `.native`/`.web` split convention.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Web `box-shadow` strings. Subtle, brand-neutral elevation that reads on both
|
|
24
|
+
* light and dark surfaces. Registered by the Tailwind preset as `boxShadow.s/m`.
|
|
25
|
+
*/
|
|
26
|
+
export const SHADOW_BOX = {
|
|
27
|
+
s: '0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.10)',
|
|
28
|
+
m: '0 4px 12px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12)'
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Return the platform-appropriate shadow style for a role.
|
|
33
|
+
*
|
|
34
|
+
* On WEB this returns a `{ boxShadow }` style object (so it can also be applied
|
|
35
|
+
* inline without Tailwind). The `.native.ts` fork returns RN
|
|
36
|
+
* `shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`.
|
|
37
|
+
*/
|
|
38
|
+
export function bloomShadowStyle(role) {
|
|
39
|
+
return {
|
|
40
|
+
boxShadow: SHADOW_BOX[role]
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
//# sourceMappingURL=shadows.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["SHADOW_BOX","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;AACA,OAAO,MAAMA,UAAsC,GAAG;EACpDC,CAAC,EAAE,0DAA0D;EAC7DC,CAAC,EAAE;AACL,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAACC,IAAgB,EAAa;EAC5D,OAAO;IAAEC,SAAS,EAAEL,UAAU,CAACI,IAAI;EAAE,CAAC;AACxC","ignoreList":[]}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* NATIVE variant of the shadow tokens (see `shadows.ts` for the rationale and
|
|
5
|
+
* the web `box-shadow` path). Metro selects this file on iOS/Android.
|
|
6
|
+
*
|
|
7
|
+
* The `SHADOW_BOX` map is kept identical to the web file so any code that reads
|
|
8
|
+
* the raw string (e.g. to feed a NativeWind `boxShadow` utility on a host that
|
|
9
|
+
* supports it) stays in lockstep; the canonical native styling path is
|
|
10
|
+
* `bloomShadowStyle`, which returns RN elevation + shadow props tuned to match
|
|
11
|
+
* the web `shadow-s` / `shadow-m` visual weight.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
export const SHADOW_BOX = {
|
|
15
|
+
s: '0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.10)',
|
|
16
|
+
m: '0 4px 12px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12)'
|
|
17
|
+
};
|
|
18
|
+
const NATIVE_SHADOWS = {
|
|
19
|
+
s: {
|
|
20
|
+
shadowColor: '#000000',
|
|
21
|
+
shadowOffset: {
|
|
22
|
+
width: 0,
|
|
23
|
+
height: 1
|
|
24
|
+
},
|
|
25
|
+
shadowOpacity: 0.12,
|
|
26
|
+
shadowRadius: 3,
|
|
27
|
+
elevation: 2
|
|
28
|
+
},
|
|
29
|
+
m: {
|
|
30
|
+
shadowColor: '#000000',
|
|
31
|
+
shadowOffset: {
|
|
32
|
+
width: 0,
|
|
33
|
+
height: 4
|
|
34
|
+
},
|
|
35
|
+
shadowOpacity: 0.16,
|
|
36
|
+
shadowRadius: 12,
|
|
37
|
+
elevation: 6
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* RN shadow/elevation style matching the web `shadow-<role>` weight. Apply to a
|
|
43
|
+
* React Native `View`/surface: `style={bloomShadowStyle('m')}`.
|
|
44
|
+
*/
|
|
45
|
+
export function bloomShadowStyle(role) {
|
|
46
|
+
return NATIVE_SHADOWS[role];
|
|
47
|
+
}
|
|
48
|
+
//# sourceMappingURL=shadows.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["SHADOW_BOX","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;;AAIA,OAAO,MAAMA,UAAsC,GAAG;EACpDC,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;AACA,OAAO,SAASC,gBAAgBA,CAACC,IAAgB,EAAa;EAC5D,OAAOT,cAAc,CAACS,IAAI,CAAC;AAC7B","ignoreList":[]}
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* The Bloom Tailwind / NativeWind preset — the SINGLE opt-in that gives every
|
|
5
|
+
* Oxy app the same semantic design-token utility classes.
|
|
6
|
+
*
|
|
7
|
+
* Consumers add it to their Tailwind config:
|
|
8
|
+
*
|
|
9
|
+
* // tailwind.config.js (web Tailwind v3/v4 AND native NativeWind)
|
|
10
|
+
* const { bloomTailwindPreset } = require('@oxyhq/bloom/tailwind-preset');
|
|
11
|
+
* module.exports = {
|
|
12
|
+
* presets: [bloomTailwindPreset],
|
|
13
|
+
* content: [ ...existing globs ],
|
|
14
|
+
* theme: { extend: { ...existing app overrides } },
|
|
15
|
+
* };
|
|
16
|
+
*
|
|
17
|
+
* The preset only EXTENDS `theme` (everything lives under `theme.extend`), so it
|
|
18
|
+
* is purely additive: existing Tailwind built-ins (`p-4`, `rounded-lg`,
|
|
19
|
+
* `text-sm`) and the app's own `var(--x)`-backed color utilities keep working.
|
|
20
|
+
*
|
|
21
|
+
* Cross-platform: NativeWind reads the same `tailwind.config.js`, so the SAME
|
|
22
|
+
* class names (`bg-fill`, `text-text-tertiary`, `p-space-8`, `rounded-radius-20`,
|
|
23
|
+
* `text-body`, `font-body`, `shadow-s`) resolve on web (Tailwind → CSS) and
|
|
24
|
+
* native (NativeWind → react-native-css). Color roles are `var(--x)` references
|
|
25
|
+
* that Bloom's `BloomThemeProvider` populates at runtime on both platforms.
|
|
26
|
+
*
|
|
27
|
+
* Type: returned as a `TailwindPreset` (a structural subset of Tailwind's
|
|
28
|
+
* `Config`) so Bloom does not need to depend on `tailwindcss` types.
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
import { BORDER_ROLES, FILL_ROLES, TEXT_ROLES } from "./color-roles.js";
|
|
32
|
+
import { BORDER_WIDTH, FONT_FAMILY_VARS, RADIUS, SPACING, TYPOGRAPHY } from "./scales.js";
|
|
33
|
+
import { SHADOW_BOX } from './shadows';
|
|
34
|
+
|
|
35
|
+
/** A Tailwind `fontSize` value: `[size, { lineHeight }]`. */
|
|
36
|
+
|
|
37
|
+
/** A Tailwind `fontFamily` value: `[family, { fontWeight }]`. */
|
|
38
|
+
|
|
39
|
+
const px = n => `${n}px`;
|
|
40
|
+
|
|
41
|
+
/** `{ 'space-8': 8 }` → `{ 'space-8': '8px' }`. */
|
|
42
|
+
function toPxMap(scale) {
|
|
43
|
+
const out = {};
|
|
44
|
+
for (const [key, value] of Object.entries(scale)) {
|
|
45
|
+
// 9999 (radius-max) and large values are still valid px; pill shapes clamp.
|
|
46
|
+
out[key] = px(value);
|
|
47
|
+
}
|
|
48
|
+
return out;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/** Build the `fontSize` extension: `text-<role>` → `[size, { lineHeight }]`. */
|
|
52
|
+
function buildFontSize() {
|
|
53
|
+
const out = {};
|
|
54
|
+
for (const name of Object.keys(TYPOGRAPHY)) {
|
|
55
|
+
const role = TYPOGRAPHY[name];
|
|
56
|
+
out[name] = [px(role.size), {
|
|
57
|
+
lineHeight: px(role.lineHeight)
|
|
58
|
+
}];
|
|
59
|
+
}
|
|
60
|
+
return out;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/** Build the `fontFamily` extension: `font-<role>` → `[family, { fontWeight }]`. */
|
|
64
|
+
function buildFontFamily() {
|
|
65
|
+
const out = {};
|
|
66
|
+
for (const name of Object.keys(TYPOGRAPHY)) {
|
|
67
|
+
const role = TYPOGRAPHY[name];
|
|
68
|
+
out[name] = [FONT_FAMILY_VARS[role.family], {
|
|
69
|
+
fontWeight: role.weight
|
|
70
|
+
}];
|
|
71
|
+
}
|
|
72
|
+
// Also expose the raw Bloom families directly: `font-bloom-sans`, etc.
|
|
73
|
+
out['bloom-sans'] = [FONT_FAMILY_VARS.sans, {
|
|
74
|
+
fontWeight: '400'
|
|
75
|
+
}];
|
|
76
|
+
out['bloom-display'] = [FONT_FAMILY_VARS.display, {
|
|
77
|
+
fontWeight: '700'
|
|
78
|
+
}];
|
|
79
|
+
out['bloom-mono'] = [FONT_FAMILY_VARS.mono, {
|
|
80
|
+
fontWeight: '400'
|
|
81
|
+
}];
|
|
82
|
+
return out;
|
|
83
|
+
}
|
|
84
|
+
const SPACING_PX = toPxMap(SPACING);
|
|
85
|
+
const RADIUS_PX = toPxMap({
|
|
86
|
+
...RADIUS
|
|
87
|
+
});
|
|
88
|
+
const BORDER_WIDTH_PX = toPxMap(BORDER_WIDTH);
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Color roles are exposed via `colors` (so they reach `bg-*`, `text-*`,
|
|
92
|
+
* `border-*`, `ring-*`, `divide-*`, `fill-*` …) AND via the dedicated
|
|
93
|
+
* `backgroundColor` / `textColor` / `borderColor` maps (so the namespaced roles
|
|
94
|
+
* land on exactly the intended utility families even where the role name would
|
|
95
|
+
* otherwise be ambiguous). All values are `var(--canonical)` references.
|
|
96
|
+
*/
|
|
97
|
+
const COLOR_ROLES = {
|
|
98
|
+
...FILL_ROLES,
|
|
99
|
+
...TEXT_ROLES,
|
|
100
|
+
...BORDER_ROLES
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* The Bloom Tailwind/NativeWind preset. Frozen so accidental mutation by a
|
|
105
|
+
* consumer's config merge cannot corrupt the shared vocabulary.
|
|
106
|
+
*/
|
|
107
|
+
export const bloomTailwindPreset = Object.freeze({
|
|
108
|
+
theme: {
|
|
109
|
+
extend: {
|
|
110
|
+
// Generic color bucket — feeds every color utility family.
|
|
111
|
+
colors: {
|
|
112
|
+
...COLOR_ROLES
|
|
113
|
+
},
|
|
114
|
+
// Targeted buckets so the namespaced roles resolve on the right utility.
|
|
115
|
+
backgroundColor: {
|
|
116
|
+
...FILL_ROLES
|
|
117
|
+
},
|
|
118
|
+
textColor: {
|
|
119
|
+
...TEXT_ROLES
|
|
120
|
+
},
|
|
121
|
+
borderColor: {
|
|
122
|
+
...BORDER_ROLES
|
|
123
|
+
},
|
|
124
|
+
spacing: SPACING_PX,
|
|
125
|
+
borderRadius: RADIUS_PX,
|
|
126
|
+
borderWidth: BORDER_WIDTH_PX,
|
|
127
|
+
fontSize: buildFontSize(),
|
|
128
|
+
fontFamily: buildFontFamily(),
|
|
129
|
+
boxShadow: {
|
|
130
|
+
s: SHADOW_BOX.s,
|
|
131
|
+
m: SHADOW_BOX.m
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
//# sourceMappingURL=tailwind-preset.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["BORDER_ROLES","FILL_ROLES","TEXT_ROLES","BORDER_WIDTH","FONT_FAMILY_VARS","RADIUS","SPACING","TYPOGRAPHY","SHADOW_BOX","px","n","toPxMap","scale","out","key","value","Object","entries","buildFontSize","name","keys","role","size","lineHeight","buildFontFamily","family","fontWeight","weight","sans","display","mono","SPACING_PX","RADIUS_PX","BORDER_WIDTH_PX","COLOR_ROLES","bloomTailwindPreset","freeze","theme","extend","colors","backgroundColor","textColor","borderColor","spacing","borderRadius","borderWidth","fontSize","fontFamily","boxShadow","s","m"],"sourceRoot":"../../../src","sources":["design-tokens/tailwind-preset.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,YAAY,EAAEC,UAAU,EAAEC,UAAU,QAAQ,kBAAe;AACpE,SACEC,YAAY,EACZC,gBAAgB,EAChBC,MAAM,EACNC,OAAO,EACPC,UAAU,QAEL,aAAU;AACjB,SAASC,UAAU,QAAQ,WAAW;;AAEtC;;AAEA;;AAoBA,MAAMC,EAAE,GAAIC,CAAS,IAAa,GAAGA,CAAC,IAAI;;AAE1C;AACA,SAASC,OAAOA,CAACC,KAA6B,EAA0B;EACtE,MAAMC,GAA2B,GAAG,CAAC,CAAC;EACtC,KAAK,MAAM,CAACC,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACL,KAAK,CAAC,EAAE;IAChD;IACAC,GAAG,CAACC,GAAG,CAAC,GAAGL,EAAE,CAACM,KAAK,CAAC;EACtB;EACA,OAAOF,GAAG;AACZ;;AAEA;AACA,SAASK,aAAaA,CAAA,EAAkC;EACtD,MAAML,GAAkC,GAAG,CAAC,CAAC;EAC7C,KAAK,MAAMM,IAAI,IAAIH,MAAM,CAACI,IAAI,CAACb,UAAU,CAAC,EAAoB;IAC5D,MAAMc,IAAI,GAAGd,UAAU,CAACY,IAAI,CAAC;IAC7BN,GAAG,CAACM,IAAI,CAAC,GAAG,CAACV,EAAE,CAACY,IAAI,CAACC,IAAI,CAAC,EAAE;MAAEC,UAAU,EAAEd,EAAE,CAACY,IAAI,CAACE,UAAU;IAAE,CAAC,CAAC;EAClE;EACA,OAAOV,GAAG;AACZ;;AAEA;AACA,SAASW,eAAeA,CAAA,EAAoC;EAC1D,MAAMX,GAAoC,GAAG,CAAC,CAAC;EAC/C,KAAK,MAAMM,IAAI,IAAIH,MAAM,CAACI,IAAI,CAACb,UAAU,CAAC,EAAoB;IAC5D,MAAMc,IAAI,GAAGd,UAAU,CAACY,IAAI,CAAC;IAC7BN,GAAG,CAACM,IAAI,CAAC,GAAG,CAACf,gBAAgB,CAACiB,IAAI,CAACI,MAAM,CAAC,EAAE;MAAEC,UAAU,EAAEL,IAAI,CAACM;IAAO,CAAC,CAAC;EAC1E;EACA;EACAd,GAAG,CAAC,YAAY,CAAC,GAAG,CAACT,gBAAgB,CAACwB,IAAI,EAAE;IAAEF,UAAU,EAAE;EAAM,CAAC,CAAC;EAClEb,GAAG,CAAC,eAAe,CAAC,GAAG,CAACT,gBAAgB,CAACyB,OAAO,EAAE;IAAEH,UAAU,EAAE;EAAM,CAAC,CAAC;EACxEb,GAAG,CAAC,YAAY,CAAC,GAAG,CAACT,gBAAgB,CAAC0B,IAAI,EAAE;IAAEJ,UAAU,EAAE;EAAM,CAAC,CAAC;EAClE,OAAOb,GAAG;AACZ;AAEA,MAAMkB,UAAU,GAAGpB,OAAO,CAACL,OAAO,CAAC;AACnC,MAAM0B,SAAS,GAAGrB,OAAO,CAAC;EAAE,GAAGN;AAAO,CAAC,CAAC;AACxC,MAAM4B,eAAe,GAAGtB,OAAO,CAACR,YAAY,CAAC;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM+B,WAAmC,GAAG;EAC1C,GAAGjC,UAAU;EACb,GAAGC,UAAU;EACb,GAAGF;AACL,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,MAAMmC,mBAAmC,GAAGnB,MAAM,CAACoB,MAAM,CAAC;EAC/DC,KAAK,EAAE;IACLC,MAAM,EAAE;MACN;MACAC,MAAM,EAAE;QAAE,GAAGL;MAAY,CAAC;MAC1B;MACAM,eAAe,EAAE;QAAE,GAAGvC;MAAW,CAAC;MAClCwC,SAAS,EAAE;QAAE,GAAGvC;MAAW,CAAC;MAC5BwC,WAAW,EAAE;QAAE,GAAG1C;MAAa,CAAC;MAEhC2C,OAAO,EAAEZ,UAAU;MACnBa,YAAY,EAAEZ,SAAS;MACvBa,WAAW,EAAEZ,eAAe;MAE5Ba,QAAQ,EAAE5B,aAAa,CAAC,CAAC;MACzB6B,UAAU,EAAEvB,eAAe,CAAC,CAAC;MAE7BwB,SAAS,EAAE;QAAEC,CAAC,EAAEzC,UAAU,CAACyC,CAAC;QAAEC,CAAC,EAAE1C,UAAU,CAAC0C;MAAE;IAChD;EACF;AACF,CAAC,CAAC","ignoreList":[]}
|