@oxyhq/bloom 0.7.2 → 0.7.4

package/lib/typescript/module/theme/BloomThemeProvider.d.ts

@@ -17,6 +17,29 @@ export interface BloomThemeContextValue {
      */
     resetTheme: () => void;
 }
+declare global {
+    var __oxyhq_bloom_theme_context__: React.Context<BloomThemeContextValue | null> | undefined;
+}
+/**
+ * `BloomThemeContext` is a `globalThis`-guarded singleton so that every physical
+ * copy of this module returns the SAME React context object.
+ *
+ * Why this is required: `package.json`'s `exports["./theme"]` ships a
+ * `react-native` → `./src/...` condition alongside the `import` → `./lib/module/...`
+ * and `require` → `./lib/commonjs/...` forks, so up to three physical copies of the
+ * theme module can coexist in a single bundle. A bundler can resolve them through
+ * DIFFERENT conditions across import paths — e.g. an app importing `@oxyhq/bloom/theme`
+ * lands on the `src` copy while `@oxyhq/bloom/toast`'s `Toast.tsx` imports
+ * `../theme/use-theme` relatively and lands on a different physical copy. With a plain
+ * module-level `createContext(...)`, each copy creates its OWN context object: the
+ * mounted `<BloomThemeProvider>` writes into context A while `useTheme`/`useBloomTheme`/
+ * `Toast`/`Dialog` read context B, so `useContext` returns `null` and they throw
+ * "must be used within a <BloomThemeProvider>" even when correctly wrapped. This is the
+ * same src-vs-lib dual-instance class react-native-css guards its `StyleCollection`/
+ * root-variable families against. Anchoring the context on `globalThis` (keyed by the
+ * `__oxyhq_bloom_theme_context__` property) collapses all copies onto one object. The
+ * `??=` runs `createContext` at most once per process.
+ */
 export declare const BloomThemeContext: React.Context<BloomThemeContextValue | null>;
 export interface BloomThemeProviderProps {
     /** Controlled mode. Omit to use Bloom's internal state (with optional persistence). */

package/lib/typescript/module/theme/BloomThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,8CAAqD,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAErD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkJD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,WAA0B,EAC1B,kBAAmC,EACnC,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,QAAQ,GACT,EAAE,uBAAuB,2CAwFzB"}
+{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,6BAA6B,EAC7B,KAAK,CAAC,OAAO,CAAC,sBAAsB,GAAG,IAAI,CAAC,GAC5C,SAAS,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,sBAAsB,GAAG,IAAI,CAEpB,CAAC;AAExD,MAAM,WAAW,uBAAuB;IACtC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAErD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkJD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,WAA0B,EAC1B,kBAAmC,EACnC,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,QAAQ,GACT,EAAE,uBAAuB,2CAwFzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/portal/index.tsx

@@ -81,7 +81,32 @@ function createPortalGroup() {
   return { Provider, Outlet, Portal };
 }
 
-const DefaultPortal = createPortalGroup();
+type PortalGroup = ReturnType<typeof createPortalGroup>;
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __oxyhq_bloom_portal_group__: PortalGroup | undefined;
+}
+
+/**
+ * `DefaultPortal` is a `globalThis`-guarded singleton so that every physical copy of
+ * this module shares ONE portal group (one `Context`, one `Provider`/`Outlet`/`Portal`
+ * triple).
+ *
+ * Why this is required: like the theme module, `exports["./portal"]` ships a
+ * `react-native` → `./src/...` condition alongside the `lib/module` / `lib/commonjs`
+ * forks, and the `Portal` component is consumed cross-subpath from `./tooltip`,
+ * `./prompt-input`, `./dialog`, `./select`, `./menu`, `./context-menu`, and `./popover`
+ * while the `Provider`/`Outlet` are mounted once at the app root via `@oxyhq/bloom/portal`.
+ * A bundler can resolve those subpaths through different export conditions, so without a
+ * guard each physical copy runs its own `createPortalGroup()` and a `<Portal>` from copy
+ * A would register against the `Provider`'s map in copy B — its content would never reach
+ * the `Outlet`. Anchoring the group on `globalThis` (keyed by `__oxyhq_bloom_portal_group__`)
+ * collapses all copies onto one group. Same src-vs-lib dual-instance class as
+ * `BloomThemeContext`.
+ */
+const DefaultPortal: PortalGroup = (globalThis.__oxyhq_bloom_portal_group__ ??=
+  createPortalGroup());
 
 export const Provider = DefaultPortal.Provider;
 export const Outlet = memo(DefaultPortal.Outlet);

package/src/theme/BloomThemeProvider.tsx

@@ -58,7 +58,36 @@ export interface BloomThemeContextValue {
   resetTheme: () => void;
 }
 
-export const BloomThemeContext = createContext<BloomThemeContextValue | null>(null);
+declare global {
+  // eslint-disable-next-line no-var
+  var __oxyhq_bloom_theme_context__:
+    | React.Context<BloomThemeContextValue | null>
+    | undefined;
+}
+
+/**
+ * `BloomThemeContext` is a `globalThis`-guarded singleton so that every physical
+ * copy of this module returns the SAME React context object.
+ *
+ * Why this is required: `package.json`'s `exports["./theme"]` ships a
+ * `react-native` → `./src/...` condition alongside the `import` → `./lib/module/...`
+ * and `require` → `./lib/commonjs/...` forks, so up to three physical copies of the
+ * theme module can coexist in a single bundle. A bundler can resolve them through
+ * DIFFERENT conditions across import paths — e.g. an app importing `@oxyhq/bloom/theme`
+ * lands on the `src` copy while `@oxyhq/bloom/toast`'s `Toast.tsx` imports
+ * `../theme/use-theme` relatively and lands on a different physical copy. With a plain
+ * module-level `createContext(...)`, each copy creates its OWN context object: the
+ * mounted `<BloomThemeProvider>` writes into context A while `useTheme`/`useBloomTheme`/
+ * `Toast`/`Dialog` read context B, so `useContext` returns `null` and they throw
+ * "must be used within a <BloomThemeProvider>" even when correctly wrapped. This is the
+ * same src-vs-lib dual-instance class react-native-css guards its `StyleCollection`/
+ * root-variable families against. Anchoring the context on `globalThis` (keyed by the
+ * `__oxyhq_bloom_theme_context__` property) collapses all copies onto one object. The
+ * `??=` runs `createContext` at most once per process.
+ */
+export const BloomThemeContext: React.Context<BloomThemeContextValue | null> =
+  (globalThis.__oxyhq_bloom_theme_context__ ??=
+    createContext<BloomThemeContextValue | null>(null));
 
 export interface BloomThemeProviderProps {
   /** Controlled mode. Omit to use Bloom's internal state (with optional persistence). */

package/src/theme/color-presets.ts

@@ -53,25 +53,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'teal',
     hex: '#005c67',
     light: {
-      '--background': '185 8% 99%',
+      '--background': '185 55% 96%',
       '--foreground': '0 0% 12%',
-      '--surface': '185 14% 97%',
+      '--surface': '185 58% 94%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '185 12% 99%',
+      '--popover': '185 55% 97%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '185 100% 20%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '185 12% 95%',
+      '--secondary': '185 55% 92%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '185 12% 95%',
+      '--muted': '185 55% 92%',
       '--muted-foreground': '185 5% 42%',
-      '--accent': '185 12% 95%',
+      '--accent': '185 55% 92%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '185 14% 88%',
-      '--input': '185 14% 88%',
+      '--border': '185 40% 87%',
+      '--input': '185 40% 87%',
       '--ring': '185 100% 20%',
-      '--sidebar': '185 14% 97%',
+      '--sidebar': '185 58% 94%',
     },
     dark: {
       '--background': '185 50% 5%',
@@ -100,25 +100,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'blue',
     hex: '#1D9BF0',
     light: {
-      '--background': '205 8% 99%',
+      '--background': '205 55% 96%',
       '--foreground': '0 0% 12%',
-      '--surface': '205 14% 97%',
+      '--surface': '205 58% 94%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '205 12% 99%',
+      '--popover': '205 55% 97%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '205 87% 53%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '205 12% 95%',
+      '--secondary': '205 55% 92%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '205 12% 95%',
+      '--muted': '205 55% 92%',
       '--muted-foreground': '205 5% 42%',
-      '--accent': '205 12% 95%',
+      '--accent': '205 55% 92%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '205 14% 88%',
-      '--input': '205 14% 88%',
+      '--border': '205 40% 87%',
+      '--input': '205 40% 87%',
       '--ring': '205 87% 53%',
-      '--sidebar': '205 14% 97%',
+      '--sidebar': '205 58% 94%',
     },
     dark: {
       '--background': '205 50% 5%',
@@ -147,25 +147,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'green',
     hex: '#10B981',
     light: {
-      '--background': '160 8% 99%',
+      '--background': '160 55% 96%',
       '--foreground': '0 0% 12%',
-      '--surface': '160 14% 97%',
+      '--surface': '160 58% 94%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '160 12% 99%',
+      '--popover': '160 55% 97%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '160 84% 39%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '160 12% 95%',
+      '--secondary': '160 55% 92%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '160 12% 95%',
+      '--muted': '160 55% 92%',
       '--muted-foreground': '160 5% 42%',
-      '--accent': '160 12% 95%',
+      '--accent': '160 55% 92%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '160 14% 88%',
-      '--input': '160 14% 88%',
+      '--border': '160 40% 87%',
+      '--input': '160 40% 87%',
       '--ring': '160 84% 39%',
-      '--sidebar': '160 14% 97%',
+      '--sidebar': '160 58% 94%',
     },
     dark: {
       '--background': '160 50% 5%',
@@ -194,25 +194,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'amber',
     hex: '#F59E0B',
     light: {
-      '--background': '38 8% 99%',
+      '--background': '38 55% 96%',
       '--foreground': '0 0% 12%',
-      '--surface': '38 14% 97%',
+      '--surface': '38 58% 94%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '38 12% 99%',
+      '--popover': '38 55% 97%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '38 92% 50%',
       '--primary-foreground': '0 0% 0%',
-      '--secondary': '38 12% 95%',
+      '--secondary': '38 55% 92%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '38 12% 95%',
+      '--muted': '38 55% 92%',
       '--muted-foreground': '38 5% 42%',
-      '--accent': '38 12% 95%',
+      '--accent': '38 55% 92%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '38 14% 88%',
-      '--input': '38 14% 88%',
+      '--border': '38 40% 87%',
+      '--input': '38 40% 87%',
       '--ring': '38 92% 50%',
-      '--sidebar': '38 14% 97%',
+      '--sidebar': '38 58% 94%',
     },
     dark: {
       '--background': '38 50% 5%',
@@ -241,25 +241,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'yellow',
     hex: '#ffc300',
     light: {
-      '--background': '46 8% 99%',
+      '--background': '46 55% 96%',
       '--foreground': '0 0% 12%',
-      '--surface': '46 14% 97%',
+      '--surface': '46 58% 94%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '46 12% 99%',
+      '--popover': '46 55% 97%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '46 100% 50%',
       '--primary-foreground': '0 0% 0%',
-      '--secondary': '46 12% 95%',
+      '--secondary': '46 55% 92%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '46 12% 95%',
+      '--muted': '46 55% 92%',
       '--muted-foreground': '46 5% 42%',
-      '--accent': '46 12% 95%',
+      '--accent': '46 55% 92%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '46 14% 88%',
-      '--input': '46 14% 88%',
+      '--border': '46 40% 87%',
+      '--input': '46 40% 87%',
       '--ring': '46 100% 50%',
-      '--sidebar': '46 14% 97%',
+      '--sidebar': '46 58% 94%',
     },
     dark: {
       '--background': '46 50% 5%',
@@ -288,25 +288,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'red',
     hex: '#EF4444',
     light: {
-      '--background': '0 8% 99%',
+      '--background': '0 55% 96%',
       '--foreground': '0 0% 12%',
-      '--surface': '0 14% 97%',
+      '--surface': '0 58% 94%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '0 12% 99%',
+      '--popover': '0 55% 97%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '0 84% 60%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '0 12% 95%',
+      '--secondary': '0 55% 92%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '0 12% 95%',
+      '--muted': '0 55% 92%',
       '--muted-foreground': '0 5% 42%',
-      '--accent': '0 12% 95%',
+      '--accent': '0 55% 92%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '0 14% 88%',
-      '--input': '0 14% 88%',
+      '--border': '0 40% 87%',
+      '--input': '0 40% 87%',
       '--ring': '0 84% 60%',
-      '--sidebar': '0 14% 97%',
+      '--sidebar': '0 58% 94%',
     },
     dark: {
       '--background': '0 50% 5%',
@@ -335,25 +335,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'purple',
     hex: '#8B5CF6',
     light: {
-      '--background': '258 8% 99%',
+      '--background': '258 55% 96%',
       '--foreground': '0 0% 12%',
-      '--surface': '258 14% 97%',
+      '--surface': '258 58% 94%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '258 12% 99%',
+      '--popover': '258 55% 97%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '258 90% 66%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '258 12% 95%',
+      '--secondary': '258 55% 92%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '258 12% 95%',
+      '--muted': '258 55% 92%',
       '--muted-foreground': '258 5% 42%',
-      '--accent': '258 12% 95%',
+      '--accent': '258 55% 92%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '258 14% 88%',
-      '--input': '258 14% 88%',
+      '--border': '258 40% 87%',
+      '--input': '258 40% 87%',
       '--ring': '258 90% 66%',
-      '--sidebar': '258 14% 97%',
+      '--sidebar': '258 58% 94%',
     },
     dark: {
       '--background': '258 50% 5%',
@@ -382,25 +382,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'pink',
     hex: '#EC4899',
     light: {
-      '--background': '330 8% 99%',
+      '--background': '330 55% 96%',
       '--foreground': '0 0% 12%',
-      '--surface': '330 14% 97%',
+      '--surface': '330 58% 94%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '330 12% 99%',
+      '--popover': '330 55% 97%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '330 81% 60%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '330 12% 95%',
+      '--secondary': '330 55% 92%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '330 12% 95%',
+      '--muted': '330 55% 92%',
       '--muted-foreground': '330 5% 42%',
-      '--accent': '330 12% 95%',
+      '--accent': '330 55% 92%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '330 14% 88%',
-      '--input': '330 14% 88%',
+      '--border': '330 40% 87%',
+      '--input': '330 40% 87%',
       '--ring': '330 81% 60%',
-      '--sidebar': '330 14% 97%',
+      '--sidebar': '330 58% 94%',
     },
     dark: {
       '--background': '330 50% 5%',
@@ -429,25 +429,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'sky',
     hex: '#0EA5E9',
     light: {
-      '--background': '199 8% 99%',
+      '--background': '199 55% 96%',
       '--foreground': '0 0% 12%',
-      '--surface': '199 14% 97%',
+      '--surface': '199 58% 94%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '199 12% 99%',
+      '--popover': '199 55% 97%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '199 89% 48%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '199 12% 95%',
+      '--secondary': '199 55% 92%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '199 12% 95%',
+      '--muted': '199 55% 92%',
       '--muted-foreground': '199 5% 42%',
-      '--accent': '199 12% 95%',
+      '--accent': '199 55% 92%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '199 14% 88%',
-      '--input': '199 14% 88%',
+      '--border': '199 40% 87%',
+      '--input': '199 40% 87%',
       '--ring': '199 89% 48%',
-      '--sidebar': '199 14% 97%',
+      '--sidebar': '199 58% 94%',
     },
     dark: {
       '--background': '199 50% 5%',
@@ -476,25 +476,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'orange',
     hex: '#F97316',
     light: {
-      '--background': '25 8% 99%',
+      '--background': '25 55% 96%',
       '--foreground': '0 0% 12%',
-      '--surface': '25 14% 97%',
+      '--surface': '25 58% 94%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '25 12% 99%',
+      '--popover': '25 55% 97%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '25 95% 53%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '25 12% 95%',
+      '--secondary': '25 55% 92%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '25 12% 95%',
+      '--muted': '25 55% 92%',
       '--muted-foreground': '25 5% 42%',
-      '--accent': '25 12% 95%',
+      '--accent': '25 55% 92%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '25 14% 88%',
-      '--input': '25 14% 88%',
+      '--border': '25 40% 87%',
+      '--input': '25 40% 87%',
       '--ring': '25 95% 53%',
-      '--sidebar': '25 14% 97%',
+      '--sidebar': '25 58% 94%',
     },
     dark: {
       '--background': '25 50% 5%',
@@ -523,25 +523,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'mint',
     hex: '#14B8A6',
     light: {
-      '--background': '173 8% 99%',
+      '--background': '173 55% 96%',
       '--foreground': '0 0% 12%',
-      '--surface': '173 14% 97%',
+      '--surface': '173 58% 94%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '173 12% 99%',
+      '--popover': '173 55% 97%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '173 80% 40%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '173 12% 95%',
+      '--secondary': '173 55% 92%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '173 12% 95%',
+      '--muted': '173 55% 92%',
       '--muted-foreground': '173 5% 42%',
-      '--accent': '173 12% 95%',
+      '--accent': '173 55% 92%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '173 14% 88%',
-      '--input': '173 14% 88%',
+      '--border': '173 40% 87%',
+      '--input': '173 40% 87%',
       '--ring': '173 80% 40%',
-      '--sidebar': '173 14% 97%',
+      '--sidebar': '173 58% 94%',
     },
     dark: {
       '--background': '173 50% 5%',
@@ -570,25 +570,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'oxy',
     hex: '#c46ede',
     light: {
-      '--background': '277 8% 99%',
+      '--background': '277 55% 96%',
       '--foreground': '0 0% 12%',
-      '--surface': '277 14% 97%',
+      '--surface': '277 58% 94%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '277 12% 99%',
+      '--popover': '277 55% 97%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '277 66% 56%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '277 12% 95%',
+      '--secondary': '277 55% 92%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '277 12% 95%',
+      '--muted': '277 55% 92%',
       '--muted-foreground': '277 5% 42%',
-      '--accent': '277 12% 95%',
+      '--accent': '277 55% 92%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '277 14% 88%',
-      '--input': '277 14% 88%',
+      '--border': '277 40% 87%',
+      '--input': '277 40% 87%',
       '--ring': '277 66% 56%',
-      '--sidebar': '277 14% 97%',
+      '--sidebar': '277 58% 94%',
     },
     dark: {
       '--background': '277 50% 5%',
@@ -616,25 +616,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'faircoin',
     hex: '#9ffb50',
     light: {
-      '--background': '92 8% 99%',
+      '--background': '92 55% 96%',
       '--foreground': '0 0% 12%',
-      '--surface': '92 16% 95%',
+      '--surface': '92 58% 94%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '92 12% 99%',
+      '--popover': '92 55% 97%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '92 90% 25%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '92 14% 92%',
+      '--secondary': '92 55% 92%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '92 12% 93%',
+      '--muted': '92 55% 92%',
       '--muted-foreground': '92 5% 40%',
-      '--accent': '92 14% 92%',
+      '--accent': '92 55% 92%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '92 12% 85%',
-      '--input': '92 12% 85%',
+      '--border': '92 40% 87%',
+      '--input': '92 40% 87%',
       '--ring': '92 90% 25%',
-      '--sidebar': '92 16% 95%',
+      '--sidebar': '92 58% 94%',
     },
     dark: {
       '--background': '69 54% 8%',

package/src/theme/preset-vars.ts

@@ -148,10 +148,10 @@ export function getPresetVars(
 
   const extended: PresetTokens = {
     ...base,
-    // Light cards carry the same faint preset tint as `--popover` (H 12% 99%)
+    // Light cards carry the same bold preset tint as `--popover` (H 55% 97%)
     // so they read as part of the preset family rather than a pure-white slab —
     // mirroring how dark cards (H 30% 10%) carry the accent hue into near-black.
-    '--card': isDark ? `${hue} 30% 10%` : `${hue} 12% 99%`,
+    '--card': isDark ? `${hue} 30% 10%` : `${hue} 55% 97%`,
     '--card-foreground': foreground,
     '--chart-1': `${hue} ${sat}% 85%`,
     '--chart-2': `${hue} ${sat}% 75%`,