Fixes of dark-theme and values in docs (#6058)

### Add offset 'margins' so withDecay example would look cleaner Before: https://github.com/software-mansion/react-native-reanimated/assets/59940332/752191ee-8202-42f0-be3e-1255533417ba After: https://github.com/software-mansion/react-native-reanimated/assets/59940332/e91d5701-efeb-4255-a350-c516381b27b9 ### Add dark theme to __Section List__ and __Bottom Sheet__ Before: <img width="400" alt="image" src="https://github.com/software-mansion/react-native-reanimated/assets/59940332/87f1f66a-9528-47ee-a4ed-923a134987c4"> <img width="400" alt="image" src="https://github.com/software-mansion/react-native-reanimated/assets/59940332/d966e918-0bd3-482e-9c3c-6eed1d1829d2"> After: <img width="400" alt="image" src="https://github.com/software-mansion/react-native-reanimated/assets/59940332/57ba60b7-adff-4850-95a1-d7c55506966e"> <img width="400" alt="image" src="https://github.com/software-mansion/react-native-reanimated/assets/59940332/e0c9250c-7ba0-48d1-898c-13c8bf68d6cd"> ### Fix `--swm-dropdown-versions-item` color on light-theme Before: <img width="234" alt="image" src="https://github.com/software-mansion/react-native-reanimated/assets/59940332/bf3e6fce-a90f-4137-b903-12385604fe33"> After: <img width="234" alt="image" src="https://github.com/software-mansion/react-native-reanimated/assets/59940332/4772fc04-3692-4918-a916-6430bc613c83"> ### Remove different background on Examples' sidebar Before: <img width="352" alt="image" src="https://github.com/software-mansion/react-native-reanimated/assets/59940332/4170fa9c-227f-4058-9fda-d9efe49434aa"> After: <img width="352" alt="image" src="https://github.com/software-mansion/react-native-reanimated/assets/59940332/c5fe4ae0-4479-459b-ab41-28135599fd6a">
software-mansion · Jun 11, 2024 · 57b8693 · 57b8693
1 parent 9d6b45f
commit 57b8693
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 21 deletions.
diff --git a/packages/docs-reanimated/src/css/colors.css b/packages/docs-reanimated/src/css/colors.css
@@ -258,7 +258,7 @@
 
   /* Versions dropdown */
   --swm-dropdown-versions-background: var(--swm-off-white);
-  --swm-dropdown-versions-item: var(--swm-off-white);
+  --swm-dropdown-versions-item: var(--swm-navy-light-100);
   --swm-dropdown-versions-item-border: var(--swm-purple-light-40);
   --swm-dropdown-versions-item-background: var(--swm-purple-light-20);
 

diff --git a/packages/docs-reanimated/src/css/overrides.css b/packages/docs-reanimated/src/css/overrides.css
@@ -110,7 +110,23 @@ table thead tr {
   font-size: var(--swm-h1-font-size);
 }
 
-/* TODO: Remove after @swmansion-t-rex-ui 0.0.10 patch */
+/* TODO: Remove after @swmansion-t-rex-ui 0.0.11 patch */
 button[class*='DocSearch-Button'] {
   margin: 0 !important;
 }
+
+/* versions dropdown on landing */
+
+[class*='plugin-pages'] [class*='dropdown--right'] > a:first-child {
+  color: var(--swm-off-white) !important;
+}
+
+[class*='plugin-pages'] [class*='dropdown__menu'] a:hover {
+  color: var(--swm-dropdown-versions-item-hover) !important;
+}
+
+/* examples sidebar */
+
+[class*='plugin-blog'] [class*='sidebar'] {
+  background-color: transparent;
+}
diff --git a/packages/docs-reanimated/src/examples/DecayBasic.tsx b/packages/docs-reanimated/src/examples/DecayBasic.tsx
@@ -12,6 +12,7 @@ import {
 } from 'react-native-gesture-handler';
 
 const SIZE = 120;
+const BOUNDARY_OFFSET = 50;
 
 export default function App() {
   const offset = useSharedValue<number>(0);
@@ -31,7 +32,10 @@ export default function App() {
       offset.value = withDecay({
         velocity: event.velocityX,
         rubberBandEffect: true,
-        clamp: [-(width.value / 2) + SIZE / 2, width.value / 2 - SIZE / 2],
+        clamp: [
+          -(width.value / 2) + SIZE / 2 + BOUNDARY_OFFSET,
+          width.value / 2 - SIZE / 2 - BOUNDARY_OFFSET,
+        ],
       });
       // highlight-end
     });

diff --git a/packages/docs-reanimated/static/examples/BottomSheet.js b/packages/docs-reanimated/static/examples/BottomSheet.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useColorScheme } from '@mui/material';
 import {
   Pressable,
   SafeAreaView,
@@ -16,6 +17,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 function BottomSheet({ isOpen, toggleSheet, duration = 500, children }) {
+  const { colorScheme } = useColorScheme();
   const height = useSharedValue(0);
   const progress = useDerivedValue(() =>
     withTiming(isOpen.value ? 0 : 1, { duration })
@@ -25,6 +27,10 @@ function BottomSheet({ isOpen, toggleSheet, duration = 500, children }) {
     transform: [{ translateY: progress.value * 2 * height.value }],
   }));
 
+  const backgroundColorSheetStyle = {
+    backgroundColor: colorScheme === 'light' ? '#f8f9ff' : '#272B3C',
+  };
+
   const backdropStyle = useAnimatedStyle(() => ({
     opacity: 1 - progress.value,
     zIndex: isOpen.value
@@ -41,7 +47,7 @@ function BottomSheet({ isOpen, toggleSheet, duration = 500, children }) {
         onLayout={(e) => {
           height.value = e.nativeEvent.layout.height;
         }}
-        style={[sheetStyles.sheet, sheetStyle]}>
+        style={[sheetStyles.sheet, sheetStyle, backgroundColorSheetStyle]}>
         {children}
       </Animated.View>
     </>
@@ -50,7 +56,6 @@ function BottomSheet({ isOpen, toggleSheet, duration = 500, children }) {
 
 const sheetStyles = StyleSheet.create({
   sheet: {
-    backgroundColor: '#f8f9ff',
     padding: 16,
     paddingRight: '2rem',
     paddingLeft: '2rem',
@@ -71,12 +76,18 @@ const sheetStyles = StyleSheet.create({
 });
 
 export default function App() {
+  const { colorScheme } = useColorScheme();
   const isOpen = useSharedValue(false);
 
   const toggleSheet = () => {
     isOpen.value = !isOpen.value;
   };
 
+  const contentStyle = {
+    color: colorScheme === 'light' ? '#001a72' : '#f8f9ff',
+    textDecorationColor: colorScheme === 'light' ? '#001a72' : '#f8f9ff',
+  };
+
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.safeArea}>
@@ -87,14 +98,16 @@ export default function App() {
         <View style={styles.flex} />
       </View>
       <BottomSheet isOpen={isOpen} toggleSheet={toggleSheet}>
-        <Text style={styles.bottomSheetContent}>
+        <Animated.Text style={contentStyle}>
           Discover the indispensable convenience of a bottom sheet in mobile
           app. Seamlessly integrated, it provides quick access to supplementary
           features and refined details.
-        </Text>
+        </Animated.Text>
         <View style={styles.buttonContainer}>
-          <Pressable style={styles.bottomSheetButton}>
-            <Text style={styles.bottomSheetButtonText}>Read more</Text>
+          <Pressable style={[styles.bottomSheetButton]}>
+            <Text style={[styles.bottomSheetButtonText, contentStyle]}>
+              Read more
+            </Text>
           </Pressable>
         </View>
       </BottomSheet>
@@ -136,15 +149,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: '#001a72',
     paddingBottom: 2,
   },
   bottomSheetButtonText: {
     fontWeight: 600,
-    color: '#001a72',
-  },
-  bottomSheetContent: {
-    color: '#001a72',
+    textDecorationLine: 'underline',
   },
 });
diff --git a/packages/docs-reanimated/static/examples/SectionList.js b/packages/docs-reanimated/static/examples/SectionList.js
@@ -1,5 +1,6 @@
 import { FlashList } from '@shopify/flash-list';
 import React, { useRef, useState } from 'react';
+import { useColorScheme } from '@mui/material';
 import { Pressable, StyleSheet, Text, View, SafeAreaView } from 'react-native';
 import Animated, {
   useAnimatedStyle,
@@ -105,16 +106,27 @@ const TableOfContentsElement = ({
   visibleIndex,
   sectionCardsRef,
 }) => {
+  const { colorScheme } = useColorScheme();
   const style = useSelectedStyle(visibleIndex, index);
 
+  const tableOfContentsElementTextStyle = {
+    color: colorScheme === 'light' ? '#001a72' : '#f8f9ff',
+    borderBottomColor: colorScheme === 'light' ? '#001a72' : '#f8f9ff',
+  };
+
   return (
     <Pressable
       onPress={() => {
         sectionCardsRef.current?.scrollToIndex({ index, animated: true });
         visibleIndex.value = index;
       }}
-      style={sectionListStyles.tableOfContentsElement}>
-      <Animated.Text style={[style, sectionListStyles.tableOfContentsElement]}>
+      style={[sectionListStyles.tableOfContentsElement]}>
+      <Animated.Text
+        style={[
+          style,
+          sectionListStyles.tableOfContentsElement,
+          tableOfContentsElementTextStyle,
+        ]}>
         {item}
       </Animated.Text>
     </Pressable>
@@ -184,9 +196,7 @@ const sectionListStyles = StyleSheet.create({
   },
   tableOfContentsElement: {
     padding: 4,
-    color: '#001a72',
     marginHorizontal: 4,
-    borderBottomColor: '#001a72',
     margin: 8,
     overflow: 'hidden',
   },
@@ -201,6 +211,7 @@ const SectionCards = ({
   sectionCardsRef,
   tableOfContentsRef,
 }) => {
+  const { colorScheme } = useColorScheme();
   const heights = sections.map((_) => SECTION_HEIGHT);
 
   const getOffsetStarts = () =>
@@ -226,10 +237,16 @@ const SectionCards = ({
     }
   };
 
+  const sectionNameStyle = useAnimatedStyle(() => ({
+    color: colorScheme === 'light' ? '#001a72' : '#f8f9ff',
+  }));
+
   const renderItem = ({ item }) => {
     return (
       <View>
-        <Text style={sectionCardStyles.header}> {item.name}</Text>
+        <Animated.Text style={[sectionCardStyles.header, sectionNameStyle]}>
+          {item.name}
+        </Animated.Text>
         <SectionCardsElement>
           <Text style={sectionCardStyles.content}>{item.content}</Text>
         </SectionCardsElement>
@@ -287,7 +304,6 @@ const sectionCardStyles = StyleSheet.create({
     borderRadius: 24,
   },
   header: {
-    color: '#001a72',
     textAlign: 'center',
     fontSize: 24,
     fontWeight: 'bold',