@oxyhq/bloom 1.0.1 → 1.0.3

package/src/design-tokens/color-roles.ts

@@ -81,6 +81,26 @@ export const TEXT_ROLES = {
   'text-placeholder': ref('muted-foreground'),
 } as const;
 
+/**
+ * Decorative brand-accent text roles → text-color utilities.
+ *
+ * These are deliberately separate from the semantic status roles
+ * (`success-text`, `warning-text`, `info-text`, and `error-text`). Product
+ * copy, labels, and artwork captions can use the active palette's accent
+ * families without pretending that the text communicates a system state.
+ *
+ * | utility               | canonical token    |
+ * | --------------------- | ------------------ |
+ * | text-accent-primary   | --primary-text     |
+ * | text-accent-secondary | --secondary-text   |
+ * | text-accent-tertiary  | --tertiary-text    |
+ */
+export const ACCENT_TEXT_ROLES = {
+  'accent-primary': ref('primary-text'),
+  'accent-secondary': ref('secondary-text'),
+  'accent-tertiary': ref('tertiary-text'),
+} as const;
+
 /**
  * Border roles → border-color utilities (`border-<role>`).
  *
@@ -107,4 +127,5 @@ export const BORDER_ROLES = {
 
 export type FillRole = keyof typeof FILL_ROLES;
 export type TextRole = keyof typeof TEXT_ROLES;
+export type AccentTextRole = keyof typeof ACCENT_TEXT_ROLES;
 export type BorderRole = keyof typeof BORDER_ROLES;

package/src/design-tokens/index.ts

@@ -10,7 +10,7 @@
  *     for CSS-configured web apps.
  *   - `getPresetVars` / `buildSeedScopeVars` — the resolved token VALUES behind
  *     that alias layer, for a named preset or an arbitrary brand seed.
- *   - The raw token maps (`FILL_ROLES`, `TEXT_ROLES`, `BORDER_ROLES`, `SPACING`,
+ *   - The raw token maps (`FILL_ROLES`, `TEXT_ROLES`, `ACCENT_TEXT_ROLES`, `BORDER_ROLES`, `SPACING`,
  *     `RADIUS`, `TYPOGRAPHY`, `SHADOW_BOX`) for direct programmatic use.
  *   - `bloomShadowStyle` — platform-correct shadow style object (web box-shadow /
  *     native elevation) so a consumer writes one call for both platforms.
@@ -65,9 +65,10 @@ export type { SeedScopeOptions } from '../theme/color-scope/seed-scope';
 export {
   FILL_ROLES,
   TEXT_ROLES,
+  ACCENT_TEXT_ROLES,
   BORDER_ROLES,
 } from './color-roles';
-export type { FillRole, TextRole, BorderRole } from './color-roles';
+export type { FillRole, TextRole, AccentTextRole, BorderRole } from './color-roles';
 
 export {
   SPACING,

package/src/design-tokens/tailwind-preset.ts

@@ -26,7 +26,7 @@
  * `Config`) so Bloom does not need to depend on `tailwindcss` types.
  */
 
-import { BORDER_ROLES, FILL_ROLES, TEXT_ROLES } from './color-roles';
+import { ACCENT_TEXT_ROLES, BORDER_ROLES, FILL_ROLES, TEXT_ROLES } from './color-roles';
 import {
   BORDER_WIDTH,
   FONT_FAMILY_VARS,
@@ -109,6 +109,7 @@ const BORDER_WIDTH_PX = toPxMap(BORDER_WIDTH);
 const COLOR_ROLES: Record<string, string> = {
   ...FILL_ROLES,
   ...TEXT_ROLES,
+  ...ACCENT_TEXT_ROLES,
   ...BORDER_ROLES,
 };
 
@@ -123,7 +124,7 @@ export const bloomTailwindPreset: TailwindPreset = Object.freeze({
       colors: { ...COLOR_ROLES },
       // Targeted buckets so the namespaced roles resolve on the right utility.
       backgroundColor: { ...FILL_ROLES },
-      textColor: { ...TEXT_ROLES },
+      textColor: { ...TEXT_ROLES, ...ACCENT_TEXT_ROLES },
       borderColor: { ...BORDER_ROLES },
 
       spacing: SPACING_PX,

package/src/design-tokens/theme-css.ts

@@ -23,7 +23,7 @@
  * `bloomThemeCss()` directly into their `@theme { … }` — the values are stable.
  */
 
-import { BORDER_ROLES, FILL_ROLES, TEXT_ROLES } from './color-roles';
+import { ACCENT_TEXT_ROLES, BORDER_ROLES, FILL_ROLES, TEXT_ROLES } from './color-roles';
 import { CANONICAL_TOKENS } from '../theme/token-registry';
 import {
   BORDER_WIDTH,
@@ -53,6 +53,7 @@ export function bloomThemeCss(): string {
   for (const [role, value] of Object.entries({
     ...FILL_ROLES,
     ...TEXT_ROLES,
+    ...ACCENT_TEXT_ROLES,
     ...BORDER_ROLES,
   })) {
     lines.push(`  --color-${role}: ${value};`);

package/src/design-tokens/theme.css

@@ -21,6 +21,9 @@
   --color-text-inverse: var(--primary-foreground);
   --color-text-fixed-light: var(--primary-foreground);
   --color-text-placeholder: var(--muted-foreground);
+  --color-accent-primary: var(--primary-text);
+  --color-accent-secondary: var(--secondary-text);
+  --color-accent-tertiary: var(--tertiary-text);
   --color-border: var(--border);
   --color-border-image: var(--border);
   --color-border-secondary: var(--input);