@oxyhq/bloom 0.29.2 → 0.29.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 (5) hide show
  1. package/lib/commonjs/design-tokens/theme.css +81 -0
  2. package/lib/module/design-tokens/theme.css +81 -0
  3. package/package.json +4 -2
  4. package/src/__tests__/design-tokens.test.ts +23 -0
  5. package/src/design-tokens/theme.css +81 -0
package/lib/commonjs/design-tokens/theme.css ADDED
@@ -0,0 +1,81 @@
1
+ /*
2
+ * AUTO-GENERATED by scripts/generate-theme-css.ts — DO NOT EDIT.
3
+ * Source of truth: bloomThemeCss() in src/design-tokens/theme-css.ts.
4
+ * Re-run `bun run generate:theme-css` (or any `bun run build`) after
5
+ * changing any design token.
6
+ */
7
+
8
+ @theme {
9
+ --color-bg: var(--background);
10
+ --color-fill: var(--card);
11
+ --color-fill-secondary: var(--muted);
12
+ --color-fill-hover: var(--accent);
13
+ --color-fill-brand: var(--primary);
14
+ --color-fill-brand-hover: var(--ring);
15
+ --color-fill-inverse: var(--foreground);
16
+ --color-fill-inverse-hover: var(--muted-foreground);
17
+ --color-fill-placeholder: var(--muted);
18
+ --color-text: var(--foreground);
19
+ --color-text-secondary: var(--muted-foreground);
20
+ --color-text-tertiary: var(--muted-foreground);
21
+ --color-text-inverse: var(--primary-foreground);
22
+ --color-text-fixed-light: var(--primary-foreground);
23
+ --color-text-placeholder: var(--muted-foreground);
24
+ --color-border: var(--border);
25
+ --color-border-image: var(--border);
26
+ --color-border-secondary: var(--input);
27
+ --color-border-input: var(--input);
28
+ --color-border-input-active: var(--ring);
29
+ --spacing-space-2: 2px;
30
+ --spacing-space-4: 4px;
31
+ --spacing-space-8: 8px;
32
+ --spacing-space-12: 12px;
33
+ --spacing-space-16: 16px;
34
+ --spacing-space-20: 20px;
35
+ --spacing-space-24: 24px;
36
+ --spacing-space-32: 32px;
37
+ --spacing-screen-margin: 20px;
38
+ --radius-radius-8: 8px;
39
+ --radius-radius-12: 12px;
40
+ --radius-radius-20: 20px;
41
+ --radius-radius-28: 28px;
42
+ --radius-radius-max: 9999px;
43
+ --border-width-hairline: 0.5px;
44
+ --text-caption: 11px;
45
+ --text-caption--line-height: 14px;
46
+ --text-caption--font-weight: 400;
47
+ --font-caption: var(--bloom-font-sans);
48
+ --text-bodySmall: 13px;
49
+ --text-bodySmall--line-height: 18px;
50
+ --text-bodySmall--font-weight: 400;
51
+ --font-bodySmall: var(--bloom-font-sans);
52
+ --text-bodyTitleSmall: 13px;
53
+ --text-bodyTitleSmall--line-height: 18px;
54
+ --text-bodyTitleSmall--font-weight: 600;
55
+ --font-bodyTitleSmall: var(--bloom-font-sans);
56
+ --text-body: 15px;
57
+ --text-body--line-height: 22px;
58
+ --text-body--font-weight: 400;
59
+ --font-body: var(--bloom-font-sans);
60
+ --text-subtitle: 17px;
61
+ --text-subtitle--line-height: 24px;
62
+ --text-subtitle--font-weight: 500;
63
+ --font-subtitle: var(--bloom-font-sans);
64
+ --text-sectionTitle: 20px;
65
+ --text-sectionTitle--line-height: 26px;
66
+ --text-sectionTitle--font-weight: 600;
67
+ --font-sectionTitle: var(--bloom-font-sans);
68
+ --text-headerBold: 28px;
69
+ --text-headerBold--line-height: 34px;
70
+ --text-headerBold--font-weight: 700;
71
+ --font-headerBold: var(--bloom-font-display);
72
+ --text-buttonLarge: 17px;
73
+ --text-buttonLarge--line-height: 22px;
74
+ --text-buttonLarge--font-weight: 600;
75
+ --font-buttonLarge: var(--bloom-font-sans);
76
+ --font-bloom-sans: var(--bloom-font-sans);
77
+ --font-bloom-display: var(--bloom-font-display);
78
+ --font-bloom-mono: var(--bloom-font-mono);
79
+ --shadow-s: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.10);
80
+ --shadow-m: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12);
81
+ }
package/lib/module/design-tokens/theme.css ADDED
@@ -0,0 +1,81 @@
1
+ /*
2
+ * AUTO-GENERATED by scripts/generate-theme-css.ts — DO NOT EDIT.
3
+ * Source of truth: bloomThemeCss() in src/design-tokens/theme-css.ts.
4
+ * Re-run `bun run generate:theme-css` (or any `bun run build`) after
5
+ * changing any design token.
6
+ */
7
+
8
+ @theme {
9
+ --color-bg: var(--background);
10
+ --color-fill: var(--card);
11
+ --color-fill-secondary: var(--muted);
12
+ --color-fill-hover: var(--accent);
13
+ --color-fill-brand: var(--primary);
14
+ --color-fill-brand-hover: var(--ring);
15
+ --color-fill-inverse: var(--foreground);
16
+ --color-fill-inverse-hover: var(--muted-foreground);
17
+ --color-fill-placeholder: var(--muted);
18
+ --color-text: var(--foreground);
19
+ --color-text-secondary: var(--muted-foreground);
20
+ --color-text-tertiary: var(--muted-foreground);
21
+ --color-text-inverse: var(--primary-foreground);
22
+ --color-text-fixed-light: var(--primary-foreground);
23
+ --color-text-placeholder: var(--muted-foreground);
24
+ --color-border: var(--border);
25
+ --color-border-image: var(--border);
26
+ --color-border-secondary: var(--input);
27
+ --color-border-input: var(--input);
28
+ --color-border-input-active: var(--ring);
29
+ --spacing-space-2: 2px;
30
+ --spacing-space-4: 4px;
31
+ --spacing-space-8: 8px;
32
+ --spacing-space-12: 12px;
33
+ --spacing-space-16: 16px;
34
+ --spacing-space-20: 20px;
35
+ --spacing-space-24: 24px;
36
+ --spacing-space-32: 32px;
37
+ --spacing-screen-margin: 20px;
38
+ --radius-radius-8: 8px;
39
+ --radius-radius-12: 12px;
40
+ --radius-radius-20: 20px;
41
+ --radius-radius-28: 28px;
42
+ --radius-radius-max: 9999px;
43
+ --border-width-hairline: 0.5px;
44
+ --text-caption: 11px;
45
+ --text-caption--line-height: 14px;
46
+ --text-caption--font-weight: 400;
47
+ --font-caption: var(--bloom-font-sans);
48
+ --text-bodySmall: 13px;
49
+ --text-bodySmall--line-height: 18px;
50
+ --text-bodySmall--font-weight: 400;
51
+ --font-bodySmall: var(--bloom-font-sans);
52
+ --text-bodyTitleSmall: 13px;
53
+ --text-bodyTitleSmall--line-height: 18px;
54
+ --text-bodyTitleSmall--font-weight: 600;
55
+ --font-bodyTitleSmall: var(--bloom-font-sans);
56
+ --text-body: 15px;
57
+ --text-body--line-height: 22px;
58
+ --text-body--font-weight: 400;
59
+ --font-body: var(--bloom-font-sans);
60
+ --text-subtitle: 17px;
61
+ --text-subtitle--line-height: 24px;
62
+ --text-subtitle--font-weight: 500;
63
+ --font-subtitle: var(--bloom-font-sans);
64
+ --text-sectionTitle: 20px;
65
+ --text-sectionTitle--line-height: 26px;
66
+ --text-sectionTitle--font-weight: 600;
67
+ --font-sectionTitle: var(--bloom-font-sans);
68
+ --text-headerBold: 28px;
69
+ --text-headerBold--line-height: 34px;
70
+ --text-headerBold--font-weight: 700;
71
+ --font-headerBold: var(--bloom-font-display);
72
+ --text-buttonLarge: 17px;
73
+ --text-buttonLarge--line-height: 22px;
74
+ --text-buttonLarge--font-weight: 600;
75
+ --font-buttonLarge: var(--bloom-font-sans);
76
+ --font-bloom-sans: var(--bloom-font-sans);
77
+ --font-bloom-display: var(--bloom-font-display);
78
+ --font-bloom-mono: var(--bloom-font-mono);
79
+ --shadow-s: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.10);
80
+ --shadow-m: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12);
81
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oxyhq/bloom",
3
- "version": "0.29.2",
3
+ "version": "0.29.3",
4
4
  "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "module": "lib/module/index.js",
@@ -887,6 +887,7 @@
887
887
  "default": "./lib/commonjs/list/index.js"
888
888
  }
889
889
  },
890
+ "./design-tokens/theme.css": "./src/design-tokens/theme.css",
890
891
  "./package.json": "./package.json"
891
892
  },
892
893
  "files": [
@@ -954,7 +955,8 @@
954
955
  "scripts": {
955
956
  "generate:exports": "node scripts/generate-platform-exports.mjs",
956
957
  "generate:font-data": "node scripts/generate-font-data.mjs",
957
- "prebuild": "node scripts/generate-platform-exports.mjs && node scripts/generate-font-data.mjs",
958
+ "generate:theme-css": "bun scripts/generate-theme-css.ts",
959
+ "prebuild": "node scripts/generate-platform-exports.mjs && node scripts/generate-font-data.mjs && bun scripts/generate-theme-css.ts",
958
960
  "build": "bob build",
959
961
  "test": "jest",
960
962
  "pretest": "node scripts/generate-font-data.mjs",
package/src/__tests__/design-tokens.test.ts CHANGED
@@ -1,3 +1,6 @@
1
+ import { readFileSync } from 'node:fs';
2
+ import { join } from 'node:path';
3
+
1
4
  import {
2
5
  bloomTailwindPreset,
3
6
  bloomThemeCss,
@@ -161,6 +164,26 @@ describe('design-tokens v4 @theme css', () => {
161
164
  });
162
165
  });
163
166
 
167
+ describe('design-tokens shipped theme.css', () => {
168
+ // The static artifact consumers `@import`. Generated by
169
+ // scripts/generate-theme-css.ts from the SAME source as bloomThemeCss(),
170
+ // so this guards against JS/CSS drift.
171
+ const themeCss = readFileSync(
172
+ join(__dirname, '..', 'design-tokens', 'theme.css'),
173
+ 'utf8',
174
+ );
175
+
176
+ it('the @theme block equals bloomThemeBlock() (no drift)', () => {
177
+ const block = themeCss.slice(themeCss.indexOf('@theme')).trimEnd();
178
+ expect(block).toBe(bloomThemeBlock());
179
+ });
180
+
181
+ it('carries the auto-generated / do-not-edit header', () => {
182
+ expect(themeCss).toContain('AUTO-GENERATED');
183
+ expect(themeCss).toContain('bun run generate:theme-css');
184
+ });
185
+ });
186
+
164
187
  describe('design-tokens shadow style (web default)', () => {
165
188
  it('returns a boxShadow style on the web/default fork', () => {
166
189
  const style = bloomShadowStyle('m');
package/src/design-tokens/theme.css ADDED
@@ -0,0 +1,81 @@
1
+ /*
2
+ * AUTO-GENERATED by scripts/generate-theme-css.ts — DO NOT EDIT.
3
+ * Source of truth: bloomThemeCss() in src/design-tokens/theme-css.ts.
4
+ * Re-run `bun run generate:theme-css` (or any `bun run build`) after
5
+ * changing any design token.
6
+ */
7
+
8
+ @theme {
9
+ --color-bg: var(--background);
10
+ --color-fill: var(--card);
11
+ --color-fill-secondary: var(--muted);
12
+ --color-fill-hover: var(--accent);
13
+ --color-fill-brand: var(--primary);
14
+ --color-fill-brand-hover: var(--ring);
15
+ --color-fill-inverse: var(--foreground);
16
+ --color-fill-inverse-hover: var(--muted-foreground);
17
+ --color-fill-placeholder: var(--muted);
18
+ --color-text: var(--foreground);
19
+ --color-text-secondary: var(--muted-foreground);
20
+ --color-text-tertiary: var(--muted-foreground);
21
+ --color-text-inverse: var(--primary-foreground);
22
+ --color-text-fixed-light: var(--primary-foreground);
23
+ --color-text-placeholder: var(--muted-foreground);
24
+ --color-border: var(--border);
25
+ --color-border-image: var(--border);
26
+ --color-border-secondary: var(--input);
27
+ --color-border-input: var(--input);
28
+ --color-border-input-active: var(--ring);
29
+ --spacing-space-2: 2px;
30
+ --spacing-space-4: 4px;
31
+ --spacing-space-8: 8px;
32
+ --spacing-space-12: 12px;
33
+ --spacing-space-16: 16px;
34
+ --spacing-space-20: 20px;
35
+ --spacing-space-24: 24px;
36
+ --spacing-space-32: 32px;
37
+ --spacing-screen-margin: 20px;
38
+ --radius-radius-8: 8px;
39
+ --radius-radius-12: 12px;
40
+ --radius-radius-20: 20px;
41
+ --radius-radius-28: 28px;
42
+ --radius-radius-max: 9999px;
43
+ --border-width-hairline: 0.5px;
44
+ --text-caption: 11px;
45
+ --text-caption--line-height: 14px;
46
+ --text-caption--font-weight: 400;
47
+ --font-caption: var(--bloom-font-sans);
48
+ --text-bodySmall: 13px;
49
+ --text-bodySmall--line-height: 18px;
50
+ --text-bodySmall--font-weight: 400;
51
+ --font-bodySmall: var(--bloom-font-sans);
52
+ --text-bodyTitleSmall: 13px;
53
+ --text-bodyTitleSmall--line-height: 18px;
54
+ --text-bodyTitleSmall--font-weight: 600;
55
+ --font-bodyTitleSmall: var(--bloom-font-sans);
56
+ --text-body: 15px;
57
+ --text-body--line-height: 22px;
58
+ --text-body--font-weight: 400;
59
+ --font-body: var(--bloom-font-sans);
60
+ --text-subtitle: 17px;
61
+ --text-subtitle--line-height: 24px;
62
+ --text-subtitle--font-weight: 500;
63
+ --font-subtitle: var(--bloom-font-sans);
64
+ --text-sectionTitle: 20px;
65
+ --text-sectionTitle--line-height: 26px;
66
+ --text-sectionTitle--font-weight: 600;
67
+ --font-sectionTitle: var(--bloom-font-sans);
68
+ --text-headerBold: 28px;
69
+ --text-headerBold--line-height: 34px;
70
+ --text-headerBold--font-weight: 700;
71
+ --font-headerBold: var(--bloom-font-display);
72
+ --text-buttonLarge: 17px;
73
+ --text-buttonLarge--line-height: 22px;
74
+ --text-buttonLarge--font-weight: 600;
75
+ --font-buttonLarge: var(--bloom-font-sans);
76
+ --font-bloom-sans: var(--bloom-font-sans);
77
+ --font-bloom-display: var(--bloom-font-display);
78
+ --font-bloom-mono: var(--bloom-font-mono);
79
+ --shadow-s: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.10);
80
+ --shadow-m: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12);
81
+ }