finish initial refactor, cleanup styleguide

Simek · Simek · commit c86ed5f1de12 · 2025-12-27T18:12:24.000+01:00
diff --git a/common/styleguide.tsx b/common/styleguide.tsx
@@ -25,49 +25,7 @@ export function useLayout() {
   };
 }
 
-export const colors = {
-  primary: '#61DAFB',
-  primaryLight: '#c1f4ff',
-  primaryDark: '#39BEE2',
-  primaryHover: '#61dafb16',
-  sky: '#C6EEFB',
-  powder: '#EEFAFE',
-  pewter: '#BEC8CB',
-  gray1: '#f9f9f9',
-  gray2: '#ececec',
-  gray3: '#CFCFD5',
-  gray4: '#828898',
-  gray5: '#505461',
-  gray6: '#24262e',
-  gray7: '#21232A',
-  black: '#242424',
-  white: '#ffffff',
-  secondary: '#afb1af',
-  warning: '#FBE679',
-  warningLight: '#FEF7D6',
-  warningDark: '#995e00',
-  error: '#ff5555',
-  success: '#4caf50',
-};
-
-export const darkColors = {
-  black: '#000',
-  background: '#19191f',
-  subHeader: '#14141a',
-  border: '#2a2e36',
-  veryDark: '#111114',
-  dark: '#14141a',
-  darkBright: '#1c1c21',
-  powder: '#262a36',
-  pewter: '#767C8E',
-  secondary: '#a2a7ab',
-  warningLight: '#2f2704',
-  warning: '#9a810c',
-  primaryDark: '#2e9ab8',
-};
-
 const baseTextStyles = {
-  color: colors.black,
   marginVertical: 0,
   fontWeight: '400' as const,
   fontFamily: 'inherit',
diff --git a/components/Library/DirectoryScore.tsx b/components/Library/DirectoryScore.tsx
@@ -1,7 +1,6 @@
-import { View } from 'react-native';
+import { type ColorValue, View } from 'react-native';
 import { Svg, Path, Circle } from 'react-native-svg';
 
-import { colors } from '~/common/styleguide';
 import { type LibraryType } from '~/types';
 import { MAX_SCORE } from '~/util/scoring';
 import tw from '~/util/tailwind';
@@ -18,7 +17,9 @@ export function DirectoryScore({ score, matchingScoreModifiers, sizeMultiplier =
   const chunk = (MAX_SCORE - 5) / 5;
 
   function getFill(chunkNumber = 1) {
-    return score >= chunk * chunkNumber ? colors.primaryDark : 'currentColor';
+    return score >= chunk * chunkNumber
+      ? (tw`text-primary-dark`.color as ColorValue)
+      : 'currentColor';
   }
 
   const scoreSymbol = (
@@ -30,7 +31,7 @@ export function DirectoryScore({ score, matchingScoreModifiers, sizeMultiplier =
       aria-label={`Score: ${score} out of 100`}>
       <Path
         d="M16.3789 5.76173C15.121 5.48057 14.2348 5.38423 13.3789 5.29298C12.8203 4.43746 12.0547 3.58199 11.4922 2.92966C12.5273 1.88672 14.8061 0.125596 15.9998 0.932227C17.1682 1.72171 16.7109 4.50782 16.3789 5.76173Z"
-        fill={score > 0 ? colors.primaryDark : 'currentColor'}
+        fill={score > 0 ? (tw`text-primary-dark`.color as ColorValue) : 'currentColor'}
       />
       <Path
         d="M17.0621 12.5824C16.6766 11.3525 16.3169 10.5368 15.968 9.74996C16.4296 8.83845 16.7877 7.74766 17.0713 6.93436C18.4921 7.30936 21.1567 8.40227 21.055 9.83938C20.9555 11.2459 18.314 12.243 17.0621 12.5824Z"
@@ -52,7 +53,12 @@ export function DirectoryScore({ score, matchingScoreModifiers, sizeMultiplier =
         d="M10.1285 2.94207C9.25607 3.89083 8.7295 4.61021 8.22255 5.30577C7.20235 5.36177 6.07868 5.59709 5.23249 5.75806C4.84686 4.34012 4.46106 1.48608 5.75649 0.8556C7.02437 0.238523 9.2086 2.02757 10.1285 2.94207Z"
         fill={getFill(5)}
       />
-      <Circle cx="10.8074" cy="9.75731" r="1.98916" fill={colors.primaryDark} />
+      <Circle
+        cx="10.8074"
+        cy="9.75731"
+        r="1.98916"
+        fill={tw`text-primary-dark`.color as ColorValue}
+      />
     </Svg>
   );
 
diff --git a/components/Library/Thumbnail.tsx b/components/Library/Thumbnail.tsx
@@ -1,8 +1,7 @@
 import * as HoverCard from '@radix-ui/react-hover-card';
 import { memo, useState } from 'react';
-import { ActivityIndicator, useWindowDimensions, View } from 'react-native';
+import { ActivityIndicator, type ColorValue, useWindowDimensions, View } from 'react-native';
 
-import { colors } from '~/common/styleguide';
 import tw from '~/util/tailwind';
 
 import { Thumbnail as ThumbnailIcon } from '../Icons';
@@ -32,7 +31,7 @@ function Thumbnail({ url }: Props) {
           style={tw`mr-2.5 my-1 p-1.5 pb-0 min-h-7.5 box-border overflow-hidden text-center rounded border border-palette-gray2 dark:border-default`}>
           {showPreview && !isLoaded ? (
             <div style={tw`w-3.5 mx-px -mt-0.5`}>
-              <ActivityIndicator size="small" color={colors.primaryDark} />
+              <ActivityIndicator size="small" color={tw`text-primary-dark`.color as ColorValue} />
             </div>
           ) : (
             <ThumbnailIcon
diff --git a/components/Search.tsx b/components/Search.tsx
@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { TextInput, View } from 'react-native';
+import { type ColorValue, TextInput, View } from 'react-native';
 import { useDebouncedCallback } from 'use-debounce';
 
-import { colors, P, useLayout, Label } from '~/common/styleguide';
+import { P, useLayout, Label } from '~/common/styleguide';
 import { type Query } from '~/types';
 import isAppleDevice from '~/util/isAppleDevice';
 import tw from '~/util/tailwind';
@@ -102,7 +102,7 @@ export default function Search({ query, total }: Props) {
               placeholder="Search libraries..."
               style={tw`flex flex-1 h-12.5 p-4 pl-11 font-sans text-xl text-white rounded-md -outline-offset-2 border-2 border-palette-gray5 dark:border-default`}
               defaultValue={search}
-              placeholderTextColor={colors.gray4}
+              placeholderTextColor={tw`text-palette-gray4`.color as ColorValue}
             />
             {!isSmallScreen && (
               <View style={tw`absolute right-4 pointer-events-none flex-row gap-1 items-center`}>
diff --git a/context/CustomAppearanceProvider.tsx b/context/CustomAppearanceProvider.tsx
@@ -1,6 +1,5 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { type PropsWithChildren, useEffect, useState } from 'react';
-import { View } from 'react-native';
 
 import tw, { useDeviceContext, useAppColorScheme } from '~/util/tailwind';
 
@@ -16,7 +15,6 @@ const defaultState = { isDark: false };
 export default function CustomAppearanceProvider({ children }: PropsWithChildren) {
   const [colorScheme, , setColorScheme] = useAppColorScheme(tw);
   const [isDark, setIsDark] = useState(colorScheme === 'dark');
-  const [isLoaded, setLoaded] = useState(false);
 
   function toggleTheme(isDark: boolean) {
     const el = document.documentElement;
@@ -42,29 +40,24 @@ export default function CustomAppearanceProvider({ children }: PropsWithChildren
         const { isDark } = await rehydrateAppearanceState();
         toggleTheme(isDark);
       } catch {}
-      setLoaded(true);
     }
 
     void rehydrateAsync();
   }, []);
 
-  if (!isLoaded) {
-    return <View />;
-  } else {
-    return (
-      <CustomAppearanceContext.Provider
-        key={tw.memoBuster}
-        value={{
-          isDark,
-          setIsDark: isDark => {
-            toggleTheme(isDark);
-            void cacheAppearanceState({ isDark });
-          },
-        }}>
-        {children}
-      </CustomAppearanceContext.Provider>
-    );
-  }
+  return (
+    <CustomAppearanceContext.Provider
+      key={tw.memoBuster}
+      value={{
+        isDark,
+        setIsDark: isDark => {
+          toggleTheme(isDark);
+          void cacheAppearanceState({ isDark });
+        },
+      }}>
+      {children}
+    </CustomAppearanceContext.Provider>
+  );
 }
 
 async function cacheAppearanceState(appearance: Omit<CustomAppearanceContextType, 'setIsDark'>) {
diff --git a/scenes/PackageScoreScene.tsx b/scenes/PackageScoreScene.tsx
@@ -1,21 +1,19 @@
-import { useContext, useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { useMemo } from 'react';
+import { View } from 'react-native';
 
-import { A, Caption, colors, darkColors, H6, useLayout } from '~/common/styleguide';
+import { A, Caption, H6, useLayout } from '~/common/styleguide';
 import ContentContainer from '~/components/ContentContainer';
 import { DirectoryScore } from '~/components/Library/DirectoryScore';
 import DetailsNavigation from '~/components/Package/DetailsNavigation';
 import NotFound from '~/components/Package/NotFound';
 import PackageHeader from '~/components/Package/PackageHeader';
 import PageMeta from '~/components/PageMeta';
 import { ScoringCriterion } from '~/components/Score/ScoringCriterion';
-import CustomAppearanceContext from '~/context/CustomAppearanceContext';
 import { type PackageScorePageProps } from '~/types/pages';
 import { SCORING_CRITERIONS } from '~/util/scoring';
 import tw from '~/util/tailwind';
 
 export default function PackageScoreScene({ apiData, packageName }: PackageScorePageProps) {
-  const { isDark } = useContext(CustomAppearanceContext);
   const { isSmallScreen } = useLayout();
 
   const library = useMemo(
@@ -27,14 +25,6 @@ export default function PackageScoreScene({ apiData, packageName }: PackageScore
     return <NotFound />;
   }
 
-  const scoreBoxBorderColor = isDark ? darkColors.border : colors.gray3;
-  const headerColorStyle = {
-    color: isDark ? darkColors.secondary : colors.gray5,
-  };
-  const secondaryColorStyle = {
-    color: isDark ? colors.gray4 : colors.gray5,
-  };
-
   return (
     <>
       <PageMeta
@@ -48,45 +38,36 @@ export default function PackageScoreScene({ apiData, packageName }: PackageScore
           <PackageHeader library={library} />
           <View
             style={[
-              styles.scoreBox,
-              isSmallScreen && styles.scoreBoxSmall,
-              {
-                borderColor: scoreBoxBorderColor,
-                backgroundColor: isDark ? colors.gray7 : colors.gray1,
-              },
+              tw`items-center flex-row gap-1 mt-2 mb-3 py-4 px-7 border rounded-xl border-palette-gray3 bg-palette-gray1 dark:bg-palette-gray7 dark:border-default`,
+              isSmallScreen && tw`flex-col px-5`,
             ]}>
             <View style={tw`items-center`}>
-              <H6 style={styles.sectionHeader}>Directory score</H6>
+              <H6 style={tw`mb-3`}>Directory score</H6>
               <DirectoryScore score={library.score} sizeMultiplier={2} />
-              <span
-                style={{
-                  ...styles.scoreIndicator,
-                  color: isDark ? darkColors.primaryDark : colors.primaryDark,
-                }}>
+              <span style={tw`flex text-[24px] font-semibold items-center mt-1 text-primary-dark`}>
                 {library.score}/100
               </span>
             </View>
             <View
               style={[
-                styles.separator,
-                isSmallScreen && styles.separatorSmall,
-                { backgroundColor: scoreBoxBorderColor },
+                tw`w-[0.5px] min-h-[112px] mx-7 bg-palette-gray3 dark:bg-dark-brighter`,
+                isSmallScreen && tw`w-full min-h-[0.5px] mx-0 my-3`,
               ]}
             />
             <View style={tw`flex flex-shrink gap-2`}>
-              <Caption style={[tw`font-light`, secondaryColorStyle]}>
+              <Caption style={tw`font-light text-palette-gray5 dark:text-palette-gray4`}>
                 The Directory Score is the combination of multiple factors that relate to the
                 quality of a library. A library can earn value by exhibiting &quot;good behavior
                 criteria&quot; and can lose value by exhibiting &quot;bad behavior criteria&quot;.
               </Caption>
-              <Caption style={[tw`font-light`, secondaryColorStyle]}>
+              <Caption style={tw`font-light text-palette-gray5 dark:text-palette-gray4`}>
                 Scores are subjective and are based on data that's readily available on GitHub and
                 npm. They are not a perfect scores and may not reflect quality for your specific
                 needs. <A href="/scoring">Read more</A>.
               </Caption>
             </View>
           </View>
-          <H6 style={headerColorStyle}>Matching criteria</H6>
+          <H6 style={tw`text-palette-gray5 dark:text-secondary`}>Matching criteria</H6>
           <View>
             {SCORING_CRITERIONS.filter(({ name }) =>
               library.matchingScoreModifiers.includes(name)
@@ -96,7 +77,7 @@ export default function PackageScoreScene({ apiData, packageName }: PackageScore
               </ScoringCriterion>
             ))}
           </View>
-          <H6 style={headerColorStyle}>Not matched criteria</H6>
+          <H6 style={tw`text-palette-gray5 dark:text-secondary`}>Not matched criteria</H6>
           <View>
             {SCORING_CRITERIONS.filter(
               ({ name }) => !library.matchingScoreModifiers.includes(name)
@@ -105,7 +86,8 @@ export default function PackageScoreScene({ apiData, packageName }: PackageScore
                 headline={name}
                 score={value}
                 key={`unmatch-${name}`}
-                style={styles.unmatchedCriterion}>
+                // TODO: add PR with RN filters
+                style={tw`opacity-60 border-2 border-dashed grayscale`}>
                 {description}
               </ScoringCriterion>
             ))}
@@ -115,50 +97,3 @@ export default function PackageScoreScene({ apiData, packageName }: PackageScore
     </>
   );
 }
-
-const styles = StyleSheet.create({
-  scoreBox: {
-    display: 'flex',
-    alignItems: 'center',
-    flexDirection: 'row',
-    gap: 4,
-    marginTop: 8,
-    marginBottom: 12,
-    paddingVertical: 16,
-    paddingHorizontal: 28,
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderRadius: 12,
-  },
-  scoreBoxSmall: {
-    flexDirection: 'column',
-    paddingHorizontal: 20,
-  },
-  sectionHeader: {
-    marginBottom: 12,
-  },
-  scoreIndicator: {
-    display: 'flex',
-    fontSize: 24,
-    fontWeight: 600,
-    alignItems: 'center',
-    marginTop: 4,
-  },
-  separator: {
-    width: 0.5,
-    minHeight: 112,
-    marginHorizontal: 28,
-  },
-  separatorSmall: {
-    width: '100%',
-    minHeight: 0.5,
-    marginHorizontal: 0,
-    marginVertical: 12,
-  },
-  unmatchedCriterion: {
-    filter: 'grayscale(1)',
-    opacity: 0.6,
-    borderStyle: 'dashed',
-    borderWidth: 2,
-  },
-});
