diff --git a/packages/main/__karma_snapshots__/AnalyticalCard.md b/packages/main/__karma_snapshots__/AnalyticalCard.md
index 98218fa7e58..d4716f9b2e4 100644
--- a/packages/main/__karma_snapshots__/AnalyticalCard.md
+++ b/packages/main/__karma_snapshots__/AnalyticalCard.md
@@ -44,7 +44,7 @@
                           </Label>
                           <div>
                             <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                              <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                              <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                                 Target
                               </span>
                             </Text>
@@ -58,7 +58,7 @@
                           </Label>
                           <div>
                             <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                              <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                              <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                                 Deviation
                               </span>
                             </Text>
@@ -75,7 +75,7 @@
             </WithStyles(AnalyticalCardHeader)>
             <div style={{...}}>
               <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                   I&#39;m a content!
                 </span>
               </Text>
diff --git a/packages/main/__karma_snapshots__/MessageBox.md b/packages/main/__karma_snapshots__/MessageBox.md
index bcaa7ebea67..93e854ba87d 100644
--- a/packages/main/__karma_snapshots__/MessageBox.md
+++ b/packages/main/__karma_snapshots__/MessageBox.md
@@ -24,7 +24,7 @@
               </header>
               <section className="MessageBox-content---">
                 <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                  <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                     Confirm - OK
                   </span>
                 </Text>
@@ -78,7 +78,7 @@
               </header>
               <section className="MessageBox-content---">
                 <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                  <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                     Confirm - Cancel
                   </span>
                 </Text>
@@ -132,7 +132,7 @@
               </header>
               <section className="MessageBox-content---">
                 <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                  <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                     Success
                   </span>
                 </Text>
@@ -179,7 +179,7 @@
               </header>
               <section className="MessageBox-content---">
                 <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                  <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                     Warning
                   </span>
                 </Text>
@@ -226,7 +226,7 @@
               </header>
               <section className="MessageBox-content---">
                 <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                  <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                     Error
                   </span>
                 </Text>
@@ -273,7 +273,7 @@
               </header>
               <section className="MessageBox-content---">
                 <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                  <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                     Information
                   </span>
                 </Text>
@@ -320,7 +320,7 @@
               </header>
               <section className="MessageBox-content---">
                 <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                  <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                     Custom
                   </span>
                 </Text>
@@ -374,7 +374,7 @@
               </header>
               <section className="MessageBox-content---">
                 <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                  <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                     Custom Success
                   </span>
                 </Text>
@@ -435,7 +435,7 @@
               </header>
               <section className="MessageBox-content---">
                 <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                  <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                     No Title
                   </span>
                 </Text>
diff --git a/packages/main/__karma_snapshots__/ObjectPage.md b/packages/main/__karma_snapshots__/ObjectPage.md
index b73bd60a2d9..6bb870130b4 100644
--- a/packages/main/__karma_snapshots__/ObjectPage.md
+++ b/packages/main/__karma_snapshots__/ObjectPage.md
@@ -37,17 +37,17 @@
                         </ui5-link>
                       </Link>
                       <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                        <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                           Address 1
                         </span>
                       </Text>
                       <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                        <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                           Address 2
                         </span>
                       </Text>
                       <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                        <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                           Address 3
                         </span>
                       </Text>
@@ -367,17 +367,17 @@
                         </ui5-link>
                       </Link>
                       <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                        <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                           Address 1
                         </span>
                       </Text>
                       <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                        <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                           Address 2
                         </span>
                       </Text>
                       <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                        <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                           Address 3
                         </span>
                       </Text>
@@ -531,17 +531,17 @@
                         </ui5-link>
                       </Link>
                       <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                        <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                           Address 1
                         </span>
                       </Text>
                       <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                        <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                           Address 2
                         </span>
                       </Text>
                       <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                        <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
                           Address 3
                         </span>
                       </Text>
diff --git a/packages/main/__karma_snapshots__/Text.md b/packages/main/__karma_snapshots__/Text.md
index 7a734357a6f..cf089099f7f 100644
--- a/packages/main/__karma_snapshots__/Text.md
+++ b/packages/main/__karma_snapshots__/Text.md
@@ -7,7 +7,7 @@
   <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Text renderWhitespace={false} wrapping={true} width={{...}}>
-        <span style={{...}} className="Text---text---" title={[undefined]} slot={[undefined]}>
+        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
           FioriText
         </span>
       </Text>
@@ -23,7 +23,7 @@
   <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Text wrapping={false} renderWhitespace={false} width={{...}}>
-        <span style={{...}} className="Text---text--- Text---noWrap---" title={[undefined]} slot={[undefined]}>
+        <span style={{...}} className="Text--text--- Text--noWrap---" title={[undefined]} slot={[undefined]}>
           Lorem Ipsum dolor sit amed
         </span>
       </Text>
@@ -39,7 +39,7 @@
   <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Text renderWhitespace={true} wrapping={true} width={{...}}>
-        <span style={{...}} className="Text---text--- Text---renderWhitespace---" title={[undefined]} slot={[undefined]}>
+        <span style={{...}} className="Text--text--- Text--renderWhitespace---" title={[undefined]} slot={[undefined]}>
           Lorem Ipsum dolor sit amed
         </span>
       </Text>