@oxyhq/bloom 0.87.1 → 0.89.0

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -11,6 +11,7 @@ import {
     type StyleProp,
 } from 'react-native';
 import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture-handler';
+import { adoptStyleSheet, dropStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { Z_INDEX } from '../styles/z-index';
 import Animated, {
@@ -921,15 +922,7 @@ const styles = StyleSheet.create({
 
 // Create web scrollbar styles dynamically based on theme
 const createWebScrollbarStyle = (borderColor: string) => {
-    if (Platform.OS !== 'web' || typeof document === 'undefined') return;
-
-    let styleElement = document.getElementById(SCROLLBAR_STYLE_ID) as HTMLStyleElement | null;
-
-    if (!styleElement) {
-        styleElement = document.createElement('style');
-        styleElement.id = SCROLLBAR_STYLE_ID;
-        document.head.appendChild(styleElement);
-    }
+    if (Platform.OS !== 'web') return;
 
     // Derive a slightly darker scrollbar hover color from the border color
     const scrollbarColor = borderColor;
@@ -937,7 +930,9 @@ const createWebScrollbarStyle = (borderColor: string) => {
         ? borderColor.replace(/\)$/, ' / 0.7)')  // add alpha for hover
         : '#888';
 
-    styleElement.textContent = `
+    adoptStyleSheet(
+        SCROLLBAR_STYLE_ID,
+        `
         .bottom-sheet-scrollview::-webkit-scrollbar {
             width: 6px;
         }
@@ -952,13 +947,14 @@ const createWebScrollbarStyle = (borderColor: string) => {
         .bottom-sheet-scrollview::-webkit-scrollbar-thumb:hover {
             background: ${scrollbarHoverColor};
         }
-    `;
+    `,
+    );
 };
 
 const SCROLLBAR_STYLE_ID = 'bottom-sheet-scrollbar-style';
 
-/** Remove the injected scrollbar <style> tag on unmount. */
+/** Detach the scrollbar rules on unmount. */
 const removeWebScrollbarStyle = () => {
-    if (Platform.OS !== 'web' || typeof document === 'undefined') return;
-    document.getElementById(SCROLLBAR_STYLE_ID)?.remove();
+    if (Platform.OS !== 'web') return;
+    dropStyleSheet(SCROLLBAR_STYLE_ID);
 };

package/src/button/Button.tsx

@@ -334,7 +334,12 @@ const ButtonComponent: React.FC<ButtonProps> = ({
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
       accessibilityRole="button"
-      accessibilityState={loading ? { disabled: isInteractionBlocked, busy: true } : { disabled: isInteractionBlocked }}
+      // `aria-busy` matches what `Button.web.tsx` emits, so a loading button
+      // announces the same thing whichever fork a bundler resolves.
+      // react-native-web never reads `accessibilityState`; React Native folds
+      // `aria-busy` back into it. The disabled half travels on the `disabled`
+      // prop above, which both platforms map.
+      aria-busy={loading || undefined}
       testID={testID}
     >
       {loading ? (

package/src/button/Button.web.tsx

@@ -12,6 +12,7 @@ import React, {
 import { useTheme } from '../theme/use-theme';
 import type { Theme } from '../theme/types';
 import { SpinnerIcon } from '../loading/SpinnerIcon.web';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { flattenWebStyle } from '../styles/flatten-web-style';
 import type { ButtonProps, ButtonSize, ButtonVariant } from './types';
 
@@ -128,12 +129,7 @@ const BLOOM_BUTTON_CSS = `
 
 function useButtonCss(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(STYLE_ID)) return;
-    const style = document.createElement('style');
-    style.id = STYLE_ID;
-    style.textContent = BLOOM_BUTTON_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(STYLE_ID, BLOOM_BUTTON_CSS);
   }, []);
 }
 

package/src/checkbox/Checkbox.tsx

@@ -106,7 +106,14 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
       onPressOut={onPressOut}
       disabled={disabled}
       accessibilityRole="checkbox"
-      accessibilityState={{ checked: indeterminate ? 'mixed' : checked, disabled }}
+      // `aria-checked`, not `accessibilityState`: react-native-web's
+      // `createDOMProps` never reads `accessibilityState`, so a checkbox that
+      // set only that announced no state at all on web — the box was drawn
+      // checked while assistive tech saw an unchecked control. React Native's
+      // `Pressable` folds `aria-checked` back into `accessibilityState`, so
+      // this one prop is the spelling both platforms honour. `disabled`
+      // travels on the `disabled` prop above, which both platforms map.
+      aria-checked={indeterminate ? 'mixed' : checked}
       accessibilityLabel={accessibilityLabel ?? label}
       hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
       testID={testID}

package/src/chip/Chip.tsx

@@ -121,7 +121,15 @@ const ChipComponent: React.FC<ChipProps> = ({
           disabled={disabled}
           accessibilityLabel={accessibilityLabel}
           accessibilityRole="button"
+          // Both spellings, because neither platform reads the other's and
+          // there is no single prop that serves both here: react-native-web
+          // ignores `accessibilityState`, while React Native has no
+          // `aria-pressed` at all (its `AccessibilityState` is
+          // disabled/selected/checked/busy/expanded). `aria-pressed` is also
+          // the state ARIA defines for a toggle with `role="button"` —
+          // `aria-selected` would be invalid on that role.
           accessibilityState={{ disabled, selected }}
+          aria-pressed={selected}
           testID={testID}
         >
           {content}

package/src/collapsible/Collapsible.tsx

@@ -58,7 +58,9 @@ const CollapsibleComponent: React.FC<CollapsibleProps> = ({
         onPress={handleToggle}
         activeOpacity={0.7}
         accessibilityRole="button"
-        accessibilityState={{ expanded: isOpen }}
+        // See `Accordion`: react-native-web reads `aria-expanded`, never
+        // `accessibilityState`; React Native folds it back into that state.
+        aria-expanded={isOpen}
         style={styles.trigger}
       >
         {chevronIcon ?? (

package/src/composition-bar/CompositionBar.tsx

@@ -75,7 +75,11 @@ const CompositionBarComponent: React.FC<CompositionBarProps> = ({
               onPress={() => onSelect(category.key)}
               accessibilityRole="button"
               accessibilityLabel={category.name}
+              // See `Chip`: `accessibilityState` carries this on native (which
+              // has no `aria-pressed`), `aria-pressed` on web (where
+              // react-native-web never reads `accessibilityState`).
               accessibilityState={{ selected: category.key === selectedKey }}
+              aria-pressed={category.key === selectedKey}
               style={[
                 styles.segment,
                 {

package/src/connection-dots/ConnectionDots.web.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useEffect, useState } from 'react';
 import { View, type ViewStyle } from 'react-native';
 
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import { ConnectionDotsBase } from './ConnectionDotsBase';
@@ -31,12 +32,7 @@ export const BLOOM_CONNECTION_DOTS_CSS = `
 
 function useKeyframes(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(KEYFRAMES_ID)) return;
-    const style = document.createElement('style');
-    style.id = KEYFRAMES_ID;
-    style.textContent = BLOOM_CONNECTION_DOTS_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(KEYFRAMES_ID, BLOOM_CONNECTION_DOTS_CSS);
   }, []);
 }
 

package/src/design-tokens/index.ts

@@ -27,6 +27,22 @@ export type {
 
 export { bloomThemeCss, bloomThemeBlock } from './theme-css';
 
+/* The same tokens as a data structure rather than a stylesheet, for a consumer
+ * that is not a browser (`@oxyhq/bloom/design-tokens/tokens.json` is the
+ * generated artifact; these rebuild it in memory). Both come from the colour
+ * engine, so the JSON and the CSS cannot disagree. */
+export {
+  bloomDesignTokens,
+  renderBloomTokensJson,
+  resolvedColorToHex,
+} from './tokens-json';
+export type {
+  BloomDesignTokens,
+  DesignToken,
+  PresetExtensions,
+  PresetGroup,
+} from './tokens-json';
+
 /* The resolved counterpart of `bloomThemeCss()`. That emits the alias layer
  * (`--color-x: var(--x)`); these resolve `--x` itself, so a build script can
  * write a static `:root` / `.dark` block and a prerendered page paints the real

package/src/design-tokens/tokens-json.ts

@@ -0,0 +1,214 @@
+/**
+ * The machine-readable form of every Bloom design token, in W3C Design Tokens
+ * (DTCG) format.
+ *
+ * The CSS artifacts next to this file (`theme.css`, `bloomThemeCss()`) are the
+ * ALIAS layer and only make sense to a browser. A consumer that is not a
+ * browser — Astro codegens `SkColor` tables for Chromium's native UI so the
+ * toolbar and the WebUI pages cannot disagree about what "primary" is — needs
+ * the RESOLVED values, for every preset and both schemes, in a format it can
+ * read without running Bloom's colour engine. That is this file.
+ *
+ * Same single source as everything else: `getResolvedTokens`, i.e. the colour
+ * engine. `tokens.json` is generated from it by
+ * `scripts/generate-design-tokens-json.ts`, and
+ * `src/__tests__/design-tokens-json.test.ts` fails if the checked-in file is
+ * not byte-identical to a fresh render — so the JSON, the CSS and the runtime
+ * palette cannot drift from each other.
+ */
+
+import {
+  APP_COLOR_NAMES,
+  APP_COLOR_PRESETS,
+  type AppColorName,
+} from '../theme/color-presets';
+import { getResolvedTokens } from '../theme/token-registry';
+import {
+  BORDER_WIDTH,
+  RADIUS,
+  SPACING,
+  TYPOGRAPHY,
+  type TypeRoleName,
+} from './scales';
+
+/** One DTCG token. `$type` is inherited from the nearest group that declares it. */
+export interface DesignToken {
+  $value: string | number;
+  $type?: string;
+  $description?: string;
+}
+
+/** Bloom-specific metadata on a preset group, namespaced per the DTCG `$extensions` rule. */
+export interface PresetExtensions {
+  'so.oxy.bloom': {
+    /** The brand seed the engine derived the whole palette from. */
+    seed: string;
+    /** The tonal scheme variant used with that seed. */
+    variant: string;
+    /** Who may pick the preset; absent means everyone. */
+    gate?: string;
+    /** Present when the preset forces a white label in both schemes. */
+    label?: string;
+  };
+}
+
+export interface PresetGroup {
+  $description: string;
+  $extensions: PresetExtensions;
+  light: Record<string, DesignToken>;
+  dark: Record<string, DesignToken>;
+}
+
+export interface BloomDesignTokens {
+  $description: string;
+  color: { $type: 'color'; $description: string } & Record<string, unknown>;
+  spacing: { $type: 'dimension'; $description: string } & Record<string, unknown>;
+  radius: { $type: 'dimension'; $description: string } & Record<string, unknown>;
+  borderWidth: { $type: 'dimension'; $description: string } & Record<string, unknown>;
+  typography: { $description: string } & Record<string, unknown>;
+}
+
+const FILE_DESCRIPTION = [
+  'Bloom design tokens, resolved. W3C Design Tokens Community Group format.',
+  'SHAPE CONTRACT (consumers codegen against this — additions are additive, existing paths do not move):',
+  'color.<preset>.<scheme>.<token> — <preset> is a Bloom AppColorName, <scheme> is "light" or "dark",',
+  'and <token> is the CSS custom property Bloom writes on the document root with its leading "--" removed,',
+  'so color.oxy.dark.card carries the value of --card under the oxy preset in dark.',
+  'Every colour $value is an sRGB hex string: "#rrggbb", or "#rrggbbaa" when the token carries alpha',
+  '(the -subtle family does). spacing/radius/borderWidth are DTCG dimensions with a px unit in the string.',
+  'typography.<role> is a group of fontSize (dimension), lineHeight (dimension) and fontWeight (number);',
+  'font FAMILIES are deliberately absent — they resolve to CSS variables a non-browser consumer cannot use.',
+  'Shadows are absent for the same reason: Bloom ships them as a platform-forked style object (bloomShadowStyle),',
+  'not as a value.',
+  'AUTO-GENERATED by scripts/generate-design-tokens-json.ts from Bloom’s colour engine — do not edit.',
+].join(' ');
+
+/**
+ * Turn one resolved token value into an sRGB hex string.
+ *
+ * The engine emits exactly two forms — `rgb(r g b)` for opaque tokens and
+ * `rgba(r, g, b, a)` for the translucent `-subtle` family. Anything else is a
+ * change in the engine's output that this file has not been taught about, and
+ * throwing at generation time is the only way that surfaces: a silently
+ * passed-through CSS string would end up in a C++ colour table as garbage.
+ */
+export function resolvedColorToHex(value: string): string {
+  const channels = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[,/]\s*([\d.]+%?)\s*)?\)$/.exec(
+    value,
+  );
+  if (!channels) {
+    throw new Error(
+      `Bloom token value is not an rgb()/rgba() colour: ${JSON.stringify(value)}`,
+    );
+  }
+
+  const [, red = '0', green = '0', blue = '0', alpha] = channels;
+  const byte = (channel: string): string =>
+    Math.round(Number(channel)).toString(16).padStart(2, '0');
+  const hex = `#${byte(red)}${byte(green)}${byte(blue)}`;
+
+  if (alpha === undefined) return hex;
+  const fraction = alpha.endsWith('%')
+    ? Number(alpha.slice(0, -1)) / 100
+    : Number(alpha);
+  if (fraction >= 1) return hex;
+  return `${hex}${byte(String(fraction * 255))}`;
+}
+
+function schemeTokens(
+  preset: AppColorName,
+  scheme: 'light' | 'dark',
+): Record<string, DesignToken> {
+  const tokens: Record<string, DesignToken> = {};
+  for (const [property, value] of Object.entries(getResolvedTokens(preset, scheme))) {
+    tokens[property.replace(/^--/, '')] = { $value: resolvedColorToHex(value) };
+  }
+  return tokens;
+}
+
+function colorGroup(): BloomDesignTokens['color'] {
+  const group: Record<string, unknown> = {
+    $type: 'color',
+    $description:
+      'One group per Bloom colour preset, each with a light and a dark scheme. Token names match the CSS custom properties without the leading "--".',
+  };
+
+  for (const name of APP_COLOR_NAMES) {
+    const preset = APP_COLOR_PRESETS[name];
+    const extensions: PresetExtensions = {
+      'so.oxy.bloom': { seed: preset.hex, variant: preset.variant },
+    };
+    if (preset.gate) extensions['so.oxy.bloom'].gate = preset.gate;
+    if (preset.label) extensions['so.oxy.bloom'].label = preset.label;
+
+    group[name] = {
+      $description: `Derived by Bloom’s colour engine from seed ${preset.hex} (${preset.variant}).`,
+      $extensions: extensions,
+      light: schemeTokens(name, 'light'),
+      dark: schemeTokens(name, 'dark'),
+    } satisfies PresetGroup;
+  }
+
+  return group as BloomDesignTokens['color'];
+}
+
+function dimensionGroup(
+  description: string,
+  scale: Record<string, number>,
+): BloomDesignTokens['spacing'] {
+  const group: Record<string, unknown> = {
+    $type: 'dimension',
+    $description: description,
+  };
+  for (const [key, value] of Object.entries(scale)) {
+    group[key] = { $value: `${value}px` } satisfies DesignToken;
+  }
+  return group as BloomDesignTokens['spacing'];
+}
+
+function typographyGroup(): BloomDesignTokens['typography'] {
+  const group: Record<string, unknown> = {
+    $description:
+      'One group per type role. Sizes and line-heights are px dimensions; weights are DTCG numeric font weights.',
+  };
+  for (const name of Object.keys(TYPOGRAPHY) as TypeRoleName[]) {
+    const role = TYPOGRAPHY[name];
+    group[name] = {
+      fontSize: { $type: 'dimension', $value: `${role.size}px` },
+      lineHeight: { $type: 'dimension', $value: `${role.lineHeight}px` },
+      fontWeight: { $type: 'fontWeight', $value: Number(role.weight) },
+    };
+  }
+  return group as BloomDesignTokens['typography'];
+}
+
+/** The whole token file, as a plain object. */
+export function bloomDesignTokens(): BloomDesignTokens {
+  return {
+    $description: FILE_DESCRIPTION,
+    color: colorGroup(),
+    spacing: dimensionGroup(
+      'The Oxy spacing scale. Same keys as the Tailwind/NativeWind utilities (p-space-8, gap-space-20, px-screen-margin).',
+      SPACING,
+    ),
+    radius: dimensionGroup(
+      'The corner-radius scale. Same keys as the rounded-radius-* utilities; radius-max is the pill/circle sentinel.',
+      RADIUS,
+    ),
+    borderWidth: dimensionGroup(
+      'Border widths. hairline is the 0.5px rule that pairs with the border-image colour role.',
+      BORDER_WIDTH,
+    ),
+    typography: typographyGroup(),
+  };
+}
+
+/**
+ * The exact bytes of `design-tokens/tokens.json`.
+ *
+ * Both the generator script and the drift test call this, so neither can be
+ * right about the file while the other is wrong.
+ */
+export function renderBloomTokensJson(): string {
+  return `${JSON.stringify(bloomDesignTokens(), null, 2)}\n`;
+}