@oxyhq/bloom 0.7.0 → 0.7.2

package/src/react-native-css.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Ambient declaration for `react-native-css/native-internal`.
+ *
+ * react-native-css is NOT a Bloom dependency — it arrives transitively via the
+ * host app's NativeWind install (NativeWind 5 is built on react-native-css@3).
+ * Bloom's `native-root-vars.native.ts` statically imports `rootVariables` from
+ * this subpath so Metro resolves the `import` export condition to the package's
+ * `module` build — the SAME family instance the react-native-css renderer
+ * (`varResolver`) subscribes to. A runtime `require()` would resolve the
+ * `require` condition to the separate `commonjs` build, whose `rootVariables`
+ * is a distinct, un-observed family instance (see the file-level comment in
+ * `native-root-vars.native.ts`).
+ *
+ * Because the package isn't installed in Bloom, `tsc` can't see its published
+ * types, so we declare the slice we use here — typed to match react-native-css
+ * @3.0.7's `dist/typescript/.../native-internal/root.d.ts` exactly (no `any`,
+ * no shims). This file is `.native`-only in spirit; the web fork never imports
+ * the subpath, so on web bundlers the static import is never reached.
+ */
+declare module 'react-native-css/native-internal' {
+  /**
+   * A leaf style value. Mirrors react-native-css's `compiler.types`
+   * `StyleDescriptor`. Bloom only ever writes string color values (raw HSL
+   * triples for the `--*` vars, sRGB `rgb(...)` for the resolved `--color-*`
+   * vars), but the family is typed against the full descriptor union.
+   */
+  type StyleDescriptor =
+    | string
+    | number
+    | boolean
+    | undefined
+    | StyleDescriptor[];
+
+  /**
+   * A media-conditioned predicate guarding a variable value. Bloom never emits
+   * conditioned values (its preset vars are unconditional), so the inner shape
+   * is intentionally opaque here — declaring the full recursive union would
+   * duplicate a large compiler type we never construct.
+   */
+  type MediaCondition = readonly unknown[];
+
+  /**
+   * A single variable value: a `[value]` tuple, optionally guarded by media
+   * conditions. Mirrors react-native-css's `VariableValue`. `rootVariables(...).set`
+   * takes a `VariableValue[]` (the variable's full ordered value list).
+   */
+  type VariableValue =
+    | readonly [StyleDescriptor]
+    | readonly [StyleDescriptor, readonly MediaCondition[]];
+
+  /**
+   * The reactive cell react-native-css renders from. `rootVariables(name)`
+   * returns one of these; `.set` replaces its value list and notifies the
+   * renderer's subscribed effects. Mirrors `Observable<StyleDescriptor, VariableValue[]>`.
+   */
+  interface Observable {
+    set: (value: readonly VariableValue[]) => void;
+  }
+
+  /**
+   * The GLOBAL root-variable family — `rootVariables(name)` returns the
+   * observable for the bare variable `name` (no leading `--`). This is the
+   * exact callable react-native-css's compiled `:root {}` / `@theme` vars are
+   * written through (`StyleCollection.inject` → `rootVariables(name).set(...)`).
+   */
+  export const rootVariables: ((name: string) => Observable) & {
+    delete(name: string): boolean;
+    clear(): void;
+  };
+}

package/src/theme/BloomThemeProvider.tsx

@@ -27,7 +27,8 @@ import { FontLoader } from '../fonts/FontLoader';
 import { applyDarkClass, applyColorPresetVars } from './apply-dark-class';
 import { buildTheme } from './build-theme';
 import { type AppColorName } from './color-presets';
-import { buildNativePresetStyle } from './color-scope/style-builder';
+import { buildScopeVars, getVariableContextProvider } from './color-scope/style-builder';
+import { applyNativeRootVars } from './native-root-vars';
 import {
   readPersistedTheme,
   readPersistedThemeSync,
@@ -295,6 +296,17 @@ export function BloomThemeProvider({
     applyColorPresetVars(colorPreset, resolved);
   }, [effectiveMode, resolved, colorPreset]);
 
+  // Native only: publish the preset vars into react-native-css's GLOBAL root
+  // variable family so they reach the ENTIRE app tree — navigator screens and
+  // every portal/modal/bottom-sheet that paints outside the provider's React
+  // subtree (and therefore never sees the `VariableContextProvider` vars below).
+  // Web writes the same vars to `document.documentElement` above, so this no-ops
+  // there. Runs before paint via `useIsomorphicLayoutEffect`, matching the
+  // sibling `applyColorPresetVars` side effect.
+  useIsomorphicLayoutEffect(() => {
+    applyNativeRootVars(colorPreset, resolved);
+  }, [colorPreset, resolved]);
+
   const contextValue = useMemo<BloomThemeContextValue>(
     () => ({
       theme: buildTheme(colorPreset, resolved, isAdaptive),
@@ -310,10 +322,15 @@ export function BloomThemeProvider({
   const shouldAwait = awaitHydration ?? Boolean(persistKey && storage);
   const isGated = shouldAwait && !hydrated;
 
-  const nativeVarsStyle = useMemo(
-    () => (Platform.OS === 'web' ? undefined : buildNativePresetStyle(colorPreset, resolved)),
+  // The full `--name -> value` record for the active preset. On native this is
+  // handed to `VariableContextProvider` so descendants resolve `var(--primary)`
+  // etc. through react-native-css's real VariableContext. Web writes these to
+  // `document.documentElement` via `applyColorPresetVars`, so it's unused there.
+  const nativeVars = useMemo(
+    () => (Platform.OS === 'web' ? null : buildScopeVars(colorPreset, resolved)),
     [colorPreset, resolved],
   );
+  const VariableProvider = getVariableContextProvider();
 
   const content = (
     <FontLoader enabled={fonts} fallback={onFontsLoading}>
@@ -321,12 +338,21 @@ export function BloomThemeProvider({
     </FontLoader>
   );
 
+  if (Platform.OS === 'web') {
+    return <BloomThemeContext.Provider value={contextValue}>{content}</BloomThemeContext.Provider>;
+  }
+
+  // The flex wrapper is still needed for layout; the preset vars now flow
+  // through `VariableContextProvider` rather than an (inert) inline-vars style.
+  // If NativeWind isn't installed the wrapper still renders so we never crash.
+  const nativeTree = <View style={[{ flex: 1 }, nativeWrapperStyle]}>{content}</View>;
+
   return (
     <BloomThemeContext.Provider value={contextValue}>
-      {Platform.OS === 'web' ? (
-        content
+      {VariableProvider && nativeVars ? (
+        <VariableProvider value={nativeVars}>{nativeTree}</VariableProvider>
       ) : (
-        <View style={[{ flex: 1 }, nativeVarsStyle, nativeWrapperStyle]}>{content}</View>
+        nativeTree
       )}
     </BloomThemeContext.Provider>
   );

package/src/theme/apply-dark-class.ts

@@ -13,10 +13,13 @@ export function applyDarkClass(resolved: 'light' | 'dark') {
  * No-op on native — only affects web.
  *
  * Writes both the raw HSL triples (e.g. `--primary: 185 100% 20%`) and the
- * resolved `--color-*` vars (`--color-primary: hsl(185 100% 20%)`) so both
+ * resolved `--color-*` vars (`--color-primary: rgb(0 94 102)`) so both
  * shadcn-style `hsl(var(--primary))` plumbing and Tailwind v4 `@theme`
- * utilities resolve consistently. Includes extended tokens (card, chart-*,
- * content-area, sidebar-*) so consumer apps don't need to synthesize them.
+ * utilities resolve consistently. The resolved vars are emitted as `rgb(...)`
+ * (not `hsl(...)`) so the alpha utilities (`bg-primary/10`) resolve on native —
+ * see `getPresetVars` / `hslTripletToRgb`. Includes extended tokens (card,
+ * chart-*, content-area, sidebar-*) so consumer apps don't need to synthesize
+ * them.
  */
 export function applyColorPresetVars(preset: AppColorName, resolved: 'light' | 'dark') {
   if (Platform.OS !== 'web' || typeof document === 'undefined') return;

package/src/theme/color-presets.ts

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