chore: Add custom primary color in tailwind.theme.js

Aetherspace · Apr 8, 2024 · 6771030 · 6771030
1 parent d70f1f6
commit 6771030
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 25 deletions.
diff --git a/apps/expo/app/ExpoRootLayout.tsx b/apps/expo/app/ExpoRootLayout.tsx
@@ -1,12 +1,19 @@
 import { Stack } from 'expo-router'
 import UniversalAppProviders from '@app/core/screens/UniversalAppProviders'
 import UniversalRootLayout from '@app/core/screens/UniversalRootLayout'
+import { NativeWindStyleSheet } from 'nativewind'
 
 // -i- Expo Router's layout setup is much simpler than Next.js's layout setup
 // -i- Since Expo doesn't require a custom document setup or server component root layout
 // -i- Use this file to apply your Expo specific layout setup:
 // -i- like rendering our Universal Layout and App Providers
 
+/* --- Settings -------------------------------------------------------------------------------- */
+
+NativeWindStyleSheet.setOutput({
+  default: 'native',
+})
+
 /* --- <ExpoRootLayout> ------------------------------------------------------------------------ */
 
 export default function ExpoRootLayout() {

diff --git a/apps/expo/tailwind.config.js b/apps/expo/tailwind.config.js
@@ -3,12 +3,12 @@ const { universalTheme } = require('@app/core/tailwind.theme')
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './app/**/*.{js,jsx,ts,tsx}',
-    '../../features/**/*.{js,jsx,ts,tsx}',
-    '../../packages/**/*.{js,jsx,ts,tsx}',
+    '../../apps/**/*.tsx',
+    '../../features/**/*.tsx',
+    '../../packages/**/*.tsx',
   ],
   plugins: [],
   theme: {
-    //...universalTheme,
+    ...universalTheme,
   },
 }
diff --git a/apps/next/tailwind.config.js b/apps/next/tailwind.config.js
@@ -3,9 +3,9 @@ const { universalTheme } = require('@app/core/tailwind.theme')
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './app/**/*.{js,jsx,ts,tsx}',
-    '../../features/**/*.{js,jsx,ts,tsx}',
-    '../../packages/**/*.{js,jsx,ts,tsx}',
+    '../../apps/**/*.tsx',
+    '../../features/**/*.tsx',
+    '../../packages/**/*.tsx',
   ],
   plugins: [require('nativewind/tailwind/css')],
   important: 'html',

diff --git a/features/app-core/components/styled.tsx b/features/app-core/components/styled.tsx
@@ -1,6 +1,6 @@
 import { styled } from 'nativewind'
 import { Text as RNText, View as RNView } from 'react-native'
-import { Link as UniversalLink } from './Link'
+import { Link as UniversalLink } from '../navigation/Link'
 
 /* --- Primitives ------------------------------------------------------------------------------ */
 
@@ -9,9 +9,9 @@ export const Text = styled(RNText, '')
 
 /* --- Typography ------------------------------------------------------------------------------ */
 
-export const H1 = styled(RNText, 'font-bold text-2xl')
-export const H2 = styled(RNText, 'font-bold text-xl')
-export const H3 = styled(RNText, 'font-bold text-lg')
+export const H1 = styled(RNText, 'font-bold text-2xl text-primary-500')
+export const H2 = styled(RNText, 'font-bold text-xl text-primary-500')
+export const H3 = styled(RNText, 'font-bold text-lg text-primary-500')
 
 export const P = styled(RNText, 'text-base')
 

diff --git a/features/app-core/tailwind.config.js b/features/app-core/tailwind.config.js
@@ -3,7 +3,9 @@ const { universalTheme } = require('./tailwind.theme')
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './**/*.{js,jsx,ts,tsx}',
+    '../../apps/**/*.tsx',
+    '../../features/**/*.tsx',
+    '../../packages/**/*.tsx',
   ],
   plugins: [],
   theme: {

diff --git a/features/app-core/tailwind.theme.js b/features/app-core/tailwind.theme.js
@@ -1,21 +1,13 @@
+const colors = require('tailwindcss/colors')
+
 /** @type {import('tailwindcss').Config['theme']} */
 const universalTheme = {
     // -i- Extend default tailwind theme here
     // -i- Reference this theme in the tailwind.config.js files in apps/expo, apps/next, features/app-core and other package or feature folders
     extend: {
-        // colors: {
-        //     primary: {
-        //         100: '#FFA8E2',
-        //         200: '#FF8CD4',
-        //         300: '#FF70C6',
-        //         400: '#FF54B8',
-        //         500: '#FF38AA',
-        //         600: '#FF1C9C',
-        //         700: '#FF0090',
-        //         800: '#E60082',
-        //         900: '#CC0074',
-        //     },
-        // }
+        colors: {
+            primary: colors.green,
+        },
     }
 }