@oxy.so/bloom 4.27.0 → 4.29.0

package/src/carousel/Carousel.tsx

@@ -40,6 +40,7 @@ import type { CarouselItemProps, CarouselProps } from './types';
  * prev/next buttons above and a position indicator below.
  *
  *   column     gap 16
+ *   header     optional leading content of the arrows row (a title)
  *   arrows     right-aligned row, gap 8, small secondary icon buttons
  *              (Bloom's pill `Button`, sized to a 32px square icon button)
  *   track      native horizontal scrolling that SNAPS to each slide — CSS
@@ -105,6 +106,7 @@ const DOT = '[data-bloom-carousel-dot]';
 const BLOOM_CAROUSEL_CSS = `
 ${TRACK} {
   scroll-snap-type: x mandatory;
+  scroll-padding-inline: var(--bloom-carousel-inset, 0px);
   overscroll-behavior-x: contain;
   scrollbar-width: none;
   outline: none;
@@ -266,10 +268,12 @@ interface SlideOffset {
 const CarouselComponent = function Carousel({
   children,
   accessibilityLabel,
+  header,
   showArrows = true,
   showDots = true,
   align = 'start',
   gap = 16,
+  inset = 0,
   onIndexChange,
   previousLabel = 'Previous slide',
   nextLabel = 'Next slide',
@@ -337,11 +341,11 @@ const CarouselComponent = function Carousel({
 
   const targetFor = useCallback(
     (item: SlideOffset) => {
-      const raw = align === 'center' ? item.x - (trackWidth - item.width) / 2 : item.x;
+      const raw = align === 'center' ? item.x - (trackWidth - item.width) / 2 : item.x - inset;
       const max = Math.max(0, scroll.current.contentWidth - trackWidth);
       return Math.min(Math.max(0, raw), max);
     },
-    [align, trackWidth],
+    [align, inset, trackWidth],
   );
 
   const recomputeSnaps = useCallback(() => {
@@ -392,6 +396,8 @@ const CarouselComponent = function Carousel({
     width: '100%',
     // The `:focus-visible` ring colour, read by the adopted sheet.
     '--bloom-carousel-ring': paint.ring,
+    // Where a start-aligned slide snaps to on web, matching `inset` on native.
+    '--bloom-carousel-inset': `${inset}px`,
   };
 
   return (
@@ -402,10 +408,15 @@ const CarouselComponent = function Carousel({
       style={[{ width: '100%', flexDirection: 'column', gap: 16 }, style]}
       testID={testID}
     >
-      {showArrows && count > 0 ? (
-        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 8 }}>
-          <Button size="sm" icon={RiArrowLeftSLine} accessibilityLabel={previousLabel} disabled={atStart} onPress={() => scrollToIndex(active - 1)} appearance="subtle" tone="neutral" />
-          <Button size="sm" icon={RiArrowRightSLine} accessibilityLabel={nextLabel} disabled={atEnd} onPress={() => scrollToIndex(active + 1)} appearance="subtle" tone="neutral" />
+      {header != null || (showArrows && count > 0) ? (
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, paddingHorizontal: inset }}>
+          <View style={{ flex: 1, minWidth: 0 }}>{header}</View>
+          {showArrows && count > 0 ? (
+            <>
+              <Button size="sm" icon={RiArrowLeftSLine} accessibilityLabel={previousLabel} disabled={atStart} onPress={() => scrollToIndex(active - 1)} appearance="subtle" tone="neutral" />
+              <Button size="sm" icon={RiArrowRightSLine} accessibilityLabel={nextLabel} disabled={atEnd} onPress={() => scrollToIndex(active + 1)} appearance="subtle" tone="neutral" />
+            </>
+          ) : null}
         </View>
       ) : null}
 
@@ -426,7 +437,7 @@ const CarouselComponent = function Carousel({
           decelerationRate={IS_WEB ? undefined : 'fast'}
           disableIntervalMomentum
           style={trackStyle}
-          contentContainerStyle={{ gap }}
+          contentContainerStyle={{ gap, paddingHorizontal: inset }}
         >
           {slides.map((child, index) => (
             <CarouselItemIndexContext.Provider key={child.key ?? index} value={index}>
@@ -437,7 +448,7 @@ const CarouselComponent = function Carousel({
       </CarouselContext.Provider>
 
       {showDots && count > 1 ? (
-        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6, paddingHorizontal: inset }}>
           {Array.from({ length: count }, (_, index) => (
             <CarouselDot
               key={index}

package/src/carousel/types.ts

@@ -9,6 +9,12 @@ export interface CarouselProps {
    * `aria-label`). The region announces itself as a "carousel".
    */
   accessibilityLabel: string;
+  /**
+   * Leading content of the row above the track — typically the section title
+   * and a "See all" link. It shares the row with the arrows (header at the
+   * start, arrows at the end), so a titled carousel costs one row, not two.
+   */
+  header?: ReactNode;
   /** Previous / next buttons above the track. Defaults to `true`. */
   showArrows?: boolean;
   /** Position indicator below the track. Defaults to `true`. */
@@ -17,6 +23,13 @@ export interface CarouselProps {
   align?: 'start' | 'center';
   /** Gap between slides, in px. Defaults to `16`. */
   gap?: number;
+  /**
+   * Horizontal inset, in px, of the header row, the dots and the first and
+   * last slide. Slides still scroll under it to the carousel's edges (it is
+   * padding INSIDE the track, not a margin around it), and a snapped slide
+   * rests at the inset, not flush. Defaults to `0`.
+   */
+  inset?: number;
   /** Called when the slide in view changes. */
   onIndexChange?: (index: number) => void;
   /** Accessible name of the previous button. Defaults to `'Previous slide'`. */

package/src/design-tokens/tokens.json

@@ -4445,64 +4445,66 @@
       }
     },
     "oxy": {
-      "$description": "Oxy purple, reserved for the Oxy account identity.",
+      "$description": "Oxy orchid with a magenta support and a terracotta action, reserved for the Oxy account identity.",
       "$extensions": {
         "so.oxy.bloom": {
           "seed": "#c46ede",
           "variant": "vivid",
           "displayName": "Oxy",
           "family": "brand",
-          "description": "Oxy purple, reserved for the Oxy account identity.",
-          "pairing": "derived",
+          "description": "Oxy orchid with a magenta support and a terracotta action, reserved for the Oxy account identity.",
+          "pairing": "curated",
           "featured": false,
+          "secondarySeed": "#8f3987",
+          "tertiarySeed": "#a0392b",
           "gate": "handle"
         }
       },
       "light": {
         "background": {
-          "$value": "#fee7ff"
+          "$value": "#f7ebf0"
         },
         "foreground": {
           "$value": "#2a1132"
         },
         "surface": {
-          "$value": "#fbd7ff"
+          "$value": "#f1dde9"
         },
         "surface-foreground": {
           "$value": "#2a1132"
         },
         "popover": {
-          "$value": "#f1cbf7"
+          "$value": "#edcee4"
         },
         "popover-foreground": {
           "$value": "#2a1132"
         },
         "primary": {
-          "$value": "#903daa"
+          "$value": "#9422ae"
         },
         "primary-foreground": {
-          "$value": "#ffffff"
+          "$value": "#ffeefc"
         },
         "secondary": {
-          "$value": "#00785e"
+          "$value": "#8f3987"
         },
         "secondary-foreground": {
-          "$value": "#ffffff"
+          "$value": "#ffeef8"
         },
         "tertiary": {
-          "$value": "#307900"
+          "$value": "#a0392b"
         },
         "tertiary-foreground": {
-          "$value": "#ffffff"
+          "$value": "#ffefed"
         },
         "muted": {
-          "$value": "#e6c0eb"
+          "$value": "#e7c1dd"
         },
         "muted-foreground": {
           "$value": "#593c60"
         },
         "accent": {
-          "$value": "#e6c0eb"
+          "$value": "#e7c1dd"
         },
         "accent-foreground": {
           "$value": "#593c60"
@@ -4517,13 +4519,13 @@
           "$value": "#c9a5cf"
         },
         "ring": {
-          "$value": "#9c00c8"
+          "$value": "#9422ae"
         },
         "sidebar": {
-          "$value": "#fbd7ff"
+          "$value": "#f1dde9"
         },
         "card": {
-          "$value": "#fff7fb"
+          "$value": "#fff7f9"
         },
         "card-foreground": {
           "$value": "#2a1132"
@@ -4550,22 +4552,22 @@
           "$value": "#2a1132"
         },
         "sidebar-primary": {
-          "$value": "#9c00c8"
+          "$value": "#9422ae"
         },
         "sidebar-primary-foreground": {
-          "$value": "#ffffff"
+          "$value": "#ffeefc"
         },
         "sidebar-accent": {
-          "$value": "#e6c0eb"
+          "$value": "#ffbdf1"
         },
         "sidebar-accent-foreground": {
-          "$value": "#593c60"
+          "$value": "#772371"
         },
         "sidebar-border": {
           "$value": "#c9a5cf"
         },
         "sidebar-ring": {
-          "$value": "#9c00c8"
+          "$value": "#9422ae"
         },
         "primary-text": {
           "$value": "#9c00c8"
@@ -4574,16 +4576,16 @@
           "$value": "#d556ff21"
         },
         "secondary-text": {
-          "$value": "#006b54"
+          "$value": "#96388e"
         },
         "secondary-subtle": {
-          "$value": "#00a48121"
+          "$value": "#ff05f821"
         },
         "tertiary-text": {
-          "$value": "#2a6c00"
+          "$value": "#a7392a"
         },
         "tertiary-subtle": {
-          "$value": "#44a50021"
+          "$value": "#ff554021"
         },
         "chart-1-active": {
           "$value": "#893ca2"
@@ -4675,49 +4677,49 @@
       },
       "dark": {
         "background": {
-          "$value": "#1c0324"
+          "$value": "#1f031d"
         },
         "foreground": {
           "$value": "#fee7ff"
         },
         "surface": {
-          "$value": "#2a1132"
+          "$value": "#2f0f2c"
         },
         "surface-foreground": {
           "$value": "#fee7ff"
         },
         "popover": {
-          "$value": "#33193b"
+          "$value": "#381835"
         },
         "popover-foreground": {
           "$value": "#fee7ff"
         },
         "primary": {
-          "$value": "#be69d8"
+          "$value": "#ec86ff"
         },
         "primary-foreground": {
           "$value": "#000000"
         },
         "secondary": {
-          "$value": "#00fdc8"
+          "$value": "#fd99ee"
         },
         "secondary-foreground": {
-          "$value": "#000000"
+          "$value": "#651161"
         },
         "tertiary": {
-          "$value": "#8ef956"
+          "$value": "#ff9381"
         },
         "tertiary-foreground": {
-          "$value": "#000000"
+          "$value": "#640d05"
         },
         "muted": {
-          "$value": "#3c2244"
+          "$value": "#42203d"
         },
         "muted-foreground": {
           "$value": "#e0bae6"
         },
         "accent": {
-          "$value": "#3c2244"
+          "$value": "#42203d"
         },
         "accent-foreground": {
           "$value": "#e0bae6"
@@ -4732,13 +4734,13 @@
           "$value": "#66486d"
         },
         "ring": {
-          "$value": "#f0b0ff"
+          "$value": "#ec86ff"
         },
         "sidebar": {
-          "$value": "#2a1132"
+          "$value": "#2f0f2c"
         },
         "card": {
-          "$value": "#462a4d"
+          "$value": "#4b2947"
         },
         "card-foreground": {
           "$value": "#fee7ff"
@@ -4765,22 +4767,22 @@
           "$value": "#fee7ff"
         },
         "sidebar-primary": {
-          "$value": "#f0b0ff"
+          "$value": "#ec86ff"
         },
         "sidebar-primary-foreground": {
-          "$value": "#54006d"
+          "$value": "#530065"
         },
         "sidebar-accent": {
-          "$value": "#3c2244"
+          "$value": "#762371"
         },
         "sidebar-accent-foreground": {
-          "$value": "#e0bae6"
+          "$value": "#ffbbf1"
         },
         "sidebar-border": {
           "$value": "#66486d"
         },
         "sidebar-ring": {
-          "$value": "#f0b0ff"
+          "$value": "#ec86ff"
         },
         "primary-text": {
           "$value": "#f0b0ff"
@@ -4789,16 +4791,16 @@
           "$value": "#d556ff3d"
         },
         "secondary-text": {
-          "$value": "#00e0b1"
+          "$value": "#ffabf0"
         },
         "secondary-subtle": {
-          "$value": "#00a4813d"
+          "$value": "#ff05f83d"
         },
         "tertiary-text": {
-          "$value": "#90d968"
+          "$value": "#ffb4a8"
         },
         "tertiary-subtle": {
-          "$value": "#44a5003d"
+          "$value": "#ff55403d"
         },
         "chart-1-active": {
           "$value": "#f0b0ff"

package/src/theme/color-presets.ts

@@ -51,6 +51,7 @@ interface ColorPresetSource {
   /** Force a white primary label even when preserving the seed would choose black. */
   label?: 'white';
   gate?: ColorPresetGate;
+  tokens?: PresetTokenOverrides;
 }
 
 /**
@@ -157,11 +158,63 @@ const COLOR_PRESET_SOURCES = [
     name: 'oxy',
     displayName: 'Oxy',
     family: 'brand',
-    description: 'Oxy purple, reserved for the Oxy account identity.',
+    description: 'Oxy orchid with a magenta support and a terracotta action, reserved for the Oxy account identity.',
     hex: '#c46ede',
+    secondaryHex: '#8f3987',
+    tertiaryHex: '#a0392b',
     variant: 'vivid',
-    pairing: 'derived',
+    pairing: 'curated',
     gate: 'handle',
+    // Hand-authored from the Oxy logo's own Material 3 scheme (plum page, pink
+    // surfaces, orchid/magenta/terracotta trio). The accent fills and their
+    // labels are that scheme's roles verbatim. The surface ladder keeps each
+    // role's hue and chroma (capped at Bloom's 28) but sits on Bloom's
+    // four-tone ramp, since the scheme's own two-tone steps fall below what the
+    // eye separates (`SURFACE_RAMP`, color-policy.ts). Text, borders and status
+    // stay derived: the policy is what holds them at AA on that deeper ladder.
+    tokens: {
+      light: {
+        '--background': '#f7ebf0',
+        '--surface': '#f1dde9',
+        '--popover': '#edcee4',
+        '--card': '#fff7f9',
+        '--muted': '#e7c1dd',
+        '--accent': '#e7c1dd',
+        '--primary': '#9422ae',
+        '--primary-foreground': '#ffeefc',
+        '--ring': '#9422ae',
+        '--secondary': '#8f3987',
+        '--secondary-foreground': '#ffeef8',
+        '--tertiary': '#a0392b',
+        '--tertiary-foreground': '#ffefed',
+        '--sidebar': '#f1dde9',
+        '--sidebar-primary': '#9422ae',
+        '--sidebar-primary-foreground': '#ffeefc',
+        '--sidebar-accent': '#ffbdf1',
+        '--sidebar-accent-foreground': '#772371',
+        '--sidebar-ring': '#9422ae',
+      },
+      dark: {
+        '--background': '#1f031d',
+        '--surface': '#2f0f2c',
+        '--popover': '#381835',
+        '--card': '#4b2947',
+        '--muted': '#42203d',
+        '--accent': '#42203d',
+        '--primary': '#ec86ff',
+        '--ring': '#ec86ff',
+        '--secondary': '#fd99ee',
+        '--secondary-foreground': '#651161',
+        '--tertiary': '#ff9381',
+        '--tertiary-foreground': '#640d05',
+        '--sidebar': '#2f0f2c',
+        '--sidebar-primary': '#ec86ff',
+        '--sidebar-primary-foreground': '#530065',
+        '--sidebar-accent': '#762371',
+        '--sidebar-accent-foreground': '#ffbbf1',
+        '--sidebar-ring': '#ec86ff',
+      },
+    },
   },
   {
     name: 'faircoin',
@@ -782,6 +835,8 @@ export interface AppColorPreset {
   tertiaryHex?: string;
   label?: 'white';
   gate?: ColorPresetGate;
+  /** Authored per-mode token values that win over the engine's derivation. */
+  tokens?: PresetTokenOverrides;
 }
 
 /** Enriched registry entry for a picker or colour playground. */
@@ -815,6 +870,7 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> =
       ...(preset.tertiaryHex !== undefined ? { tertiaryHex: preset.tertiaryHex } : {}),
       ...(preset.label !== undefined ? { label: preset.label } : {}),
       ...(preset.gate !== undefined ? { gate: preset.gate } : {}),
+      ...(preset.tokens !== undefined ? { tokens: preset.tokens } : {}),
     };
     return presets;
   }, {} as Record<AppColorName, AppColorPreset>);
@@ -857,6 +913,15 @@ export const COLOR_PRESET_GROUPS: Readonly<Record<ColorPresetFamily, ColorPreset
  */
 export type PresetTokens = Record<string, string>;
 
+/**
+ * A hand-authored brand scheme, per mode, as `#rrggbb` keyed by canonical token.
+ * Only for a brand that owns a drawn palette; every other preset stays derived.
+ */
+export interface PresetTokenOverrides {
+  light?: PresetTokens;
+  dark?: PresetTokens;
+}
+
 const namesGatedBy = (gate: ColorPresetGate | undefined): readonly AppColorName[] =>
   COLOR_PRESET_REGISTRY.filter((preset) => preset.gate === gate).map(({ name }) => name);
 

package/src/theme/preset-vars.ts

@@ -1,5 +1,5 @@
 import { APP_COLOR_PRESETS, type AppColorName, type PresetTokens } from './color-presets';
-import { generateRoleColors, type RoleColors } from './color-engine';
+import { argbFromHex, generateRoleColors, type RoleColors } from './color-engine';
 import { buildPolicyTokens } from './color-policy';
 
 /**
@@ -112,9 +112,30 @@ export function getPresetVars(
       secondary: accents?.secondaryHex ?? preset.secondaryHex,
       tertiary: accents?.tertiaryHex ?? preset.tertiaryHex,
     }),
+    ...authoredTokens(preset.tokens?.[mode], accents),
   };
 }
 
+/**
+ * A preset's hand-authored values, as the same `rgb(r g b)` form the engine
+ * emits. An app-wide accent override still wins over the authored accent it
+ * replaces, so the `secondary*`/`tertiary*` family is dropped when pinned.
+ */
+function authoredTokens(
+  authored: PresetTokens | undefined,
+  accents: ExplicitAccents | undefined,
+): PresetTokens {
+  if (authored === undefined) return {};
+  const out: PresetTokens = {};
+  for (const [token, hex] of Object.entries(authored)) {
+    if (accents?.secondaryHex !== undefined && token.startsWith('--secondary')) continue;
+    if (accents?.tertiaryHex !== undefined && token.startsWith('--tertiary')) continue;
+    const argb = argbFromHex(hex);
+    out[token] = `rgb(${(argb >> 16) & 255} ${(argb >> 8) & 255} ${argb & 255})`;
+  }
+  return out;
+}
+
 /**
  * Apply a preset's extended vars to `document.documentElement`. Web-only no-op
  * on native. `BloomThemeProvider` already writes the base preset vars on web;