fix: try to follow specs more

web-ridge · Aug 1, 2023 · a26f89f · a26f89f
1 parent 2f1a9b9
commit a26f89f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 21 deletions.
diff --git a/src/TabsHeader.tsx b/src/TabsHeader.tsx
@@ -29,18 +29,19 @@ export default function TabsHeader({
   const { colors, dark: isDarkTheme, mode: themeMode, isV3 } = theme;
   const {
     backgroundColor: customBackground,
-    elevation = 4,
+    elevation: _elevation,
     ...restStyle
   }: ViewStyle = StyleSheet.flatten(style) || {};
 
+  let elevation = theme.isV3 ? _elevation : _elevation || 4;
   let isDark: boolean;
 
   const backgroundColorV2 =
     isDarkTheme && themeMode === 'adaptive'
-      ? overlay(elevation, colors.surface)
+      ? overlay(elevation || 0, colors.surface)
       : colors.primary;
 
-  const backgroundColorV3 = theme.colors.background;
+  const backgroundColorV3 = theme.colors.surface;
   const backgroundColor = customBackground
     ? customBackground
     : isV3
@@ -57,8 +58,17 @@ export default function TabsHeader({
         : // @ts-ignore
           !color(backgroundColor).isLight();
   }
-  const textColor = isDark ? '#fff' : '#000';
-  const activeColor = hasPrimaryBackground ? textColor : theme.colors.primary;
+
+  const textColorV2 = isDark ? '#fff' : '#000';
+  const activeColorV2 = hasPrimaryBackground ? textColor : theme.colors.primary;
+
+  // Color (active)	On surface	md.sys.color.on-surface
+  // Color (inactive)	On surface variant	md.sys.color.on-surface-variant
+  const textColorV3 = colors.onSurfaceVariant;
+  const activeColorV3 = colors.onSurface;
+
+  const textColor = isV3 ? textColorV3 : textColorV2;
+  const activeColor = isV3 ? activeColorV3 : activeColorV2;
 
   const innerScrollSize = React.useRef<number | null>(null);
   const scrollX = React.useRef<number>(0);
@@ -148,9 +158,11 @@ export default function TabsHeader({
     updateScroll();
   }, [updateScroll]);
 
+  const SurfaceComponent = theme.isV3 ? View : Surface;
+
   return (
     <View style={styles.relative}>
-      <Surface
+      <SurfaceComponent
         style={[
           { backgroundColor, elevation },
           restStyle,
@@ -205,23 +217,25 @@ export default function TabsHeader({
             style={[
               styles.indicator,
               {
-                backgroundColor: activeColor,
+                backgroundColor: theme.colors.primary,
               },
               indicatorStyle as any,
             ]}
           />
         </ScrollView>
-        <Animated.View
-          style={[
-            styles.removeTopShadow,
-            {
-              height: elevation,
-              backgroundColor,
-              top: -elevation,
-            },
-          ]}
-        />
-      </Surface>
+        {elevation && (
+          <Animated.View
+            style={[
+              styles.removeTopShadow,
+              {
+                height: elevation,
+                backgroundColor,
+                top: -elevation,
+              },
+            ]}
+          />
+        )}
+      </SurfaceComponent>
     </View>
   );
 }

diff --git a/src/TabsHeaderItem.tsx b/src/TabsHeaderItem.tsx
@@ -47,13 +47,14 @@ export default function TabsHeaderItem({
   showTextLabel?: boolean;
   mode: Mode;
 }) {
+  const baseColor = theme.colors.primary;
   const rippleColor = React.useMemo(
     () =>
-      Color(activeColor as any)
+      Color(baseColor as any)
         .alpha(0.32)
         .rgb()
         .string(),
-    [activeColor]
+    [baseColor]
   );
 
   const { color, opacity } = useAnimatedText({
@@ -88,6 +89,7 @@ export default function TabsHeaderItem({
           styles.touchableRipple,
           iconPosition === 'top' && styles.touchableRippleTop,
           tab.props.disabled && styles.touchableRippleDisabled,
+          { borderRadius: theme.roundness },
         ]}
         rippleColor={rippleColor}
         // @ts-ignore
@@ -148,7 +150,7 @@ export default function TabsHeaderItem({
               style={[
                 styles.text,
                 iconPosition === 'top' && styles.textTop,
-                { ...theme.fonts.bodyMedium, color, opacity },
+                { ...theme.fonts.titleSmall, color, opacity },
               ]}
             >
               {uppercase && !theme.isV3
@@ -174,6 +176,7 @@ const styles = StyleSheet.create({
     height: 48,
     justifyContent: 'center',
     alignItems: 'center',
+    overflow: 'hidden',
   },
   touchableRippleTop: {
     height: 72,