docs(button): update for filled/tonal modes and outlined tokens

Update the Button doc data sources to match the v6 API: rename the
contained/contained-tonal color + screenshot entries to filled/tonal, set the
outlined label to onSurfaceVariant, and switch mode="contained" to
mode="filled" in the react-navigation and ripple-effect guides. The Button.mdx
page is generated from these sources plus the component JSDoc.

Author: azizbecha

docs/docs/guides/09-react-navigation.md

@@ -87,7 +87,7 @@ function HomeScreen({ navigation }) {
     <View style={style.container}>
       <Text>Home Screen</Text>
       <Button
-        mode="contained"
+        mode="filled"
         onPress={() => navigation.navigate('Details')}
         label="Go to details"
       />

docs/docs/guides/11-ripple-effect.md

@@ -18,7 +18,7 @@ The `rippleColor` prop is available for every pressable component which allows y
 <Button
   rippleColor="#FF000020"
   icon="camera"
-  mode="contained"
+  mode="filled"
   onPress={() => console.log('Pressed')}
   label="Press me"
 />

docs/src/data/screenshots.js

@@ -22,11 +22,11 @@ const screenshots = {
   BottomNavigation: 'screenshots/bottom-navigation.gif',
   'BottomNavigation.Bar': 'screenshots/bottom-navigation-tabs.jpg',
   Button: {
-    text: 'screenshots/button-1.png',
-    outlined: 'screenshots/button-2.png',
-    contained: 'screenshots/button-3.png',
+    filled: 'screenshots/button-3.png',
+    tonal: 'screenshots/button-5.png',
     elevated: 'screenshots/button-4.png',
-    'contained-tonal': 'screenshots/button-5.png',
+    outlined: 'screenshots/button-2.png',
+    text: 'screenshots/button-1.png',
   },
   Card: {
     elevated: 'screenshots/card-1.png',

docs/src/data/themeColors.js

@@ -47,36 +47,36 @@ const themeColors = {
   },
   Button: {
     active: {
-      elevated: {
-        backgroundColor: 'theme.colors.elevation.level1',
-        textColor: 'theme.colors.primary',
-      },
-      contained: {
+      filled: {
         backgroundColor: 'theme.colors.primary',
         textColor: 'theme.colors.onPrimary',
       },
-      'contained-tonal': {
+      tonal: {
         backgroundColor: 'theme.colors.secondaryContainer',
         textColor: 'theme.colors.onSecondaryContainer',
       },
-      outlined: {
+      elevated: {
+        backgroundColor: 'theme.colors.elevation.level1',
         textColor: 'theme.colors.primary',
+      },
+      outlined: {
+        textColor: 'theme.colors.onSurfaceVariant',
         borderColor: 'theme.colors.outline',
       },
       text: {
         textColor: 'theme.colors.primary',
       },
     },
     disabled: {
-      elevated: {
+      filled: {
         backgroundColor: 'theme.colors.surfaceDisabled',
         textColor: 'theme.colors.onSurfaceDisabled',
       },
-      contained: {
+      tonal: {
         backgroundColor: 'theme.colors.surfaceDisabled',
         textColor: 'theme.colors.onSurfaceDisabled',
       },
-      'contained-tonal': {
+      elevated: {
         backgroundColor: 'theme.colors.surfaceDisabled',
         textColor: 'theme.colors.onSurfaceDisabled',
       },

docs/src/utils/__tests__/themeColors.test.tsx

@@ -2,36 +2,36 @@ import { getMaxNestedLevel, getUniqueNestedKeys } from '../themeColors';
 
 const Button = {
   active: {
-    elevated: {
-      backgroundColor: 'theme.colors.elevation.level1',
-      color: 'theme.colors.primary',
-    },
-    contained: {
+    filled: {
       backgroundColor: 'theme.colors.primary',
       color: 'theme.colors.onPrimary',
     },
-    'contained-tonal': {
+    tonal: {
       backgroundColor: 'theme.colors.secondaryContainer',
       color: 'theme.colors.onSecondaryContainer',
     },
-    outlined: {
+    elevated: {
+      backgroundColor: 'theme.colors.elevation.level1',
       color: 'theme.colors.primary',
+    },
+    outlined: {
+      color: 'theme.colors.onSurfaceVariant',
       borderColor: 'theme.colors.outline',
     },
     text: {
       color: 'theme.colors.primary',
     },
   },
   disabled: {
-    elevated: {
+    filled: {
       backgroundColor: 'theme.colors.surfaceDisabled',
       color: 'theme.colors.onSurfaceDisabled',
     },
-    contained: {
+    tonal: {
       backgroundColor: 'theme.colors.surfaceDisabled',
       color: 'theme.colors.onSurfaceDisabled',
     },
-    'contained-tonal': {
+    elevated: {
       backgroundColor: 'theme.colors.surfaceDisabled',
       color: 'theme.colors.onSurfaceDisabled',
     },