Skip to content

fix: NativeWind color palette broken β€” colors.json never registered in tailwind.config.jsΒ #56

Description

@Josue19-08

πŸ”– Title

Fix NativeWind color system β€” `colors.json` imported but never spread into Tailwind theme


πŸ“„ Description

`tailwind.config.js` imports `./theme/colors.json` into `appColors` on line 2 but never uses it:

```js
const appColors = require('./theme/colors.json'); // imported...
module.exports = {
theme: {
extend: {
colors: {
'signin-orange': '#ff9a76', // ...but appColors never spread here
}
}
}
}
```

As a result, every semantic Tailwind class used throughout the app generates no style. Affected classes include: `bg-background`, `text-text`, `text-textMuted`, `text-textSubtle`, `text-textStrong`, `bg-successSoft`, `bg-successBadge`, `text-successDeep`, `bg-purpleSoft`, `text-purple`, `bg-amberSoft`, `text-amber`, `bg-cta`, `bg-ctaStrong`, `bg-primary`, `bg-errorSoft`, `bg-infoSoft`, `border-border`, and all others defined in `colors.json`. Every screen is visually broken β€” backgrounds are transparent and text falls back to default colors.

Additionally, three leftover Expo template files are never imported by anything in the app and should be deleted:

  • `components/Container.tsx`
  • `components/EditScreenInfo.tsx` (contains typo "Openssd up the code")
  • `components/ScreenContent.tsx`
  • `cesconfig.jsonc` (unknown artifact, not used by any tooling)

βœ… Tasks to complete

  • Fix `tailwind.config.js` β€” spread `appColors` into `theme.extend.colors`:
    ```js
    const appColors = require('./theme/colors.json');
    module.exports = {
    theme: {
    extend: {
    colors: {
    ...appColors,
    'signin-orange': '#ff9a76',
    // ...rest of existing overrides
    }
    }
    }
    }
    ```
  • Add `./hooks/**/*.{js,ts,tsx}` to `content` paths in `tailwind.config.js` (currently excluded)
  • Update `app.json` β€” change `"name": "my-expo-app"` and `"slug"` to the real app name (`TrustUp` / `trustup`)
  • Delete `components/Container.tsx`, `components/EditScreenInfo.tsx`, `components/ScreenContent.tsx`
  • Delete `cesconfig.jsonc` from root
  • Verify all screens render correct colors after the fix (spot check `InvestScreen`, `PayScreen`, `SignIn`)

πŸ“š Documentation/context for AI

https://github.com/TrustUp-app/TrustUp-Frontend/tree/main/docs

Files to modify:

  • `tailwind.config.js`
  • `app.json`
  • `theme/colors.json` (reference β€” do not modify, just spread it)

Files to delete:

  • `components/Container.tsx`
  • `components/EditScreenInfo.tsx`
  • `components/ScreenContent.tsx`
  • `cesconfig.jsonc`

πŸ—’οΈ Additional notes

  • This is a one-line fix with massive visual impact β€” every screen's color scheme depends on it
  • After the fix, run `npx expo start` and verify that backgrounds, text colors, badges, and borders render correctly on both iOS and Android
  • Do not modify `colors.json` values β€” only wire it into the Tailwind config

Metadata

Metadata

Assignees

No one assigned

    Labels

    Stellar WaveIssues in the Stellar wave program

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions