Prepping code for ability to theme in react native

apps/mobile-app/src/app/App.tsx

@@ -3,7 +3,7 @@ import { useRef } from 'react';
 import { UiHeader } from '@pokemon-pet-shop/features';
 import { UiModal } from '@pokemon-pet-shop/ui';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { SafeAreaView, StyleSheet, ScrollView, StatusBar } from 'react-native';
+import { SafeAreaView, ScrollView, StatusBar } from 'react-native';
 
 import 'react-native-svg';
 import Homepage from '../homepage/homepage';
@@ -30,18 +30,12 @@ export const App = () => {
             scrollViewRef.current = ref;
           }}
           contentInsetAdjustmentBehavior="automatic"
-          style={styles.scrollView}
         >
           <Homepage />
         </ScrollView>
       </SafeAreaView>
     </QueryClientProvider>
   );
 };
-const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: '#ffffff',
-  },
-});
 
 export default App;

apps/web-app/src/main.tsx

@@ -2,7 +2,7 @@ import * as ReactDOM from 'react-dom/client';
 
 import { UiApp } from './providers/app';
 
-import './styles/reset.css';
+import '@pokemon-pet-shop/ui/styles';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(<UiApp />);

libs/features/src/lib/cart/cart.modal/cart.modal.content.scroll.native.tsx

@@ -1,11 +1,14 @@
 import { PropsWithChildren, ReactElement, useRef } from 'react';
 
+import { useRenderStyles } from '@pokemon-pet-shop/hooks';
 import { ScrollView } from 'react-native';
 
 import { styles } from './cart.modal.module';
 
 const CartModalScroll = ({ children }: PropsWithChildren): ReactElement => {
   const scrollViewRef = useRef<null | ScrollView>(null);
+  // const { newStyles } = useRenderStyles(styles);
+
   return (
     <ScrollView
       ref={(ref) => {

libs/features/src/lib/cart/cart.modal/cart.modal.view.tsx

@@ -19,6 +19,7 @@ import useCartModalLogic from './use.cart.modal.logic';
 const CartModal = (): ReactElement => {
   const { data, onHandleRemoveFromCart, onHandleAddToCart, onHandleRemoveCartItem } =
     useCartModalLogic();
+  // const { newStyles } = useRenderStyles(styles);
 
   return (
     <UiElementLayout className={styles.modal}>

libs/hooks/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/use.render.styles';

libs/hooks/src/lib/use.render.styles.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+
+import { useThemeStore } from '@pokemon-pet-shop/store';
+import { DetectEnum } from '@pokemon-pet-shop/typing';
+import { detectUtil } from '@pokemon-pet-shop/utils';
+
+export const useRenderStyles = (styles: any): any => {
+  const theme = useThemeStore();
+  const newStyles = useMemo(() => {
+    if (detectUtil() === DetectEnum.IS_WEB) {
+      return styles;
+    }
+
+    return styles(theme);
+  }, [styles, theme]);
+
+  return { newStyles };
+};

libs/typing/src/lib-base/enum/detect.enum.ts

@@ -0,0 +1,4 @@
+export enum DetectEnum {
+  IS_WEB = 'isWeb',
+  IS_NATIVE = 'isNative',
+}

libs/typing/src/lib-base/enum/index.ts

@@ -1 +1,2 @@
 export * from './alignment.enum';
+export * from './detect.enum';

libs/ui/src/index.ts

@@ -1,6 +1,3 @@
-/* Styles */
-// export * from './lib-base/styles';
-
 /* Providers */
 // export * from './lib/providers';
 

libs/ui/src/lib-base/styles/css/global.css

@@ -0,0 +1,109 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html,
+body {
+  text-size-adjust: none;
+  text-size-adjust: none;
+  text-size-adjust: none;
+  margin: 0;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block-end: 0;
+  margin-block-start: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+  margin: 0;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentcolor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}
+
+:root,
+html[data-theme='light'] {
+  --background-color: #fff;
+  --text-color: #121416d8;
+  --link-color: #543fd7;
+}
+
+html[data-theme='dark'] {
+  --background-color: #212a2e;
+  --text-color: #f7f8f8;
+  --link-color: #828fff;
+}

apps/web-app/src/styles/reset.css → libs/ui/src/lib-base/styles/css/reset.css

@@ -8,8 +8,8 @@
 /* Prevent font size inflation */
 html,
 body {
-  -moz-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+  text-size-adjust: none;
   text-size-adjust: none;
   margin: 0;
 }
@@ -66,7 +66,7 @@ h6 {
 /* A elements that don't have a class get default styles */
 a:not([class]) {
   text-decoration-skip-ink: auto;
-  color: currentColor;
+  color: currentcolor;
 }
 
 /* Make images easier to work with */

libs/ui/src/lib-base/styles/ts/theming.mobile.ts

@@ -0,0 +1,7 @@
+export const lightTheme = {
+  grey600: '#707274',
+};
+
+export const darkTheme = {
+  grey600: '#434343',
+};

libs/ui/src/lib-base/ui/tag/tag.item/tag.item.module.native.ts

@@ -1,7 +1,11 @@
 import { StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
-  card: {
+  tag: {
     borderRadius: 100,
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 15,
+    paddingRight: 15,
   },
 });

libs/ui/src/lib-base/ui/tag/tag.item/tag.item.view.tsx

@@ -1,11 +1,11 @@
-import { memo, PropsWithChildren, ReactElement } from 'react';
+import { memo, type PropsWithChildren, type ReactElement } from 'react';
 
 import { classNamesUtil } from '@pokemon-pet-shop/utils';
 
 import { UiTypography, TypographyTypeEnum } from '../../typography';
 
 import { TagItemColorEnum } from './tag.item.enum';
-import { TagProps } from './tag.item.interface';
+import type { TagProps } from './tag.item.interface';
 import { styles } from './tag.item.module';
 
 const Tag = ({

libs/ui/src/lib-base/ui/tag/tag.wrapper/tag.wrapper.module.native.ts

@@ -1,7 +1,18 @@
 import { StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
-  card: {
-    borderRadius: 100,
+  tagWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 15,
+  },
+  leftAlign: {
+    justifyContent: 'flex-start',
+  },
+  centerAlign: {
+    justifyContent: 'center',
+  },
+  rightAlign: {
+    justifyContent: 'flex-end',
   },
 });

libs/ui/src/lib-base/ui/tag/tag.wrapper/tag.wrapper.view.tsx

@@ -1,11 +1,11 @@
-import { memo, PropsWithChildren, ReactElement } from 'react';
+import { memo, type PropsWithChildren, type ReactElement } from 'react';
 
 import { classNamesUtil } from '@pokemon-pet-shop/utils';
 
 import { UiElementLayout } from '../../element.layout';
 
 import { TagWrapperAlignEnum } from './tag.wrapper.enum';
-import { TagProps } from './tag.wrapper.interface';
+import type { TagProps } from './tag.wrapper.interface';
 import { styles } from './tag.wrapper.module';
 
 const Tag = ({

libs/utils/src/index.ts

@@ -11,3 +11,4 @@ export * from './lib-base/utils/trim-content.util';
 export * from './lib-base/utils/date-format.util';
 export * from './lib-base/utils/noop.util';
 export * from './lib-base/utils/pricing.util';
+export * from './lib-base/utils/detect.util';

libs/utils/src/lib-base/utils/detect.util.native.ts

@@ -0,0 +1,3 @@
+export const detectUtil = () => {
+  return 'isNative';
+};

libs/utils/src/lib-base/utils/detect.util.ts

@@ -0,0 +1,3 @@
+export const detectUtil = () => {
+  return 'isWeb';
+};

tsconfig.base.json

@@ -25,6 +25,7 @@
       "@pokemon-pet-shop/typing/web": ["libs/typing/src/index_web.ts"],
       "@pokemon-pet-shop/ui": ["libs/ui/src/index.ts"],
       "@pokemon-pet-shop/ui/native": ["libs/ui/src/index_native.ts"],
+      "@pokemon-pet-shop/ui/styles": ["libs/ui/src/lib-base/styles/css/global.css"],
       "@pokemon-pet-shop/utils": ["libs/utils/src/index.ts"]
     }
   },