Dividers - turn to getters. TextFiledScreen - fix titles color (#2814)

* Dividers - turn to getters. TextFiledScreen - fix titles color

* remove default text color

Author: Inbal-Tish

demo/src/screens/componentScreens/TextFieldScreen.tsx

@@ -56,13 +56,13 @@ export default class TextFieldScreen extends Component {
       <ScrollView keyboardShouldPersistTaps="always">
         <View flex padding-page>
           <Text h1>TextField</Text>
-          <Text h3 blue50 marginV-s4>
+          <Text h3 marginV-s4>
             Default
           </Text>
           {/* @ts-expect-error */}
           <TextField ref={this.input} label="Name" placeholder="Enter full name"/>
 
-          <Text h3 blue50 marginV-s4>
+          <Text h3 marginV-s4>
             Static vs Floating Placeholder
           </Text>
           <View row bottom>
@@ -84,7 +84,7 @@ export default class TextFieldScreen extends Component {
               fieldStyle={styles.withUnderline}
             />
           </View>
-          <Text h3 blue50 marginV-s4>
+          <Text h3 marginV-s4>
             Accessories
           </Text>
 
@@ -128,7 +128,7 @@ export default class TextFieldScreen extends Component {
           />
 
           <View row marginV-s4 spread>
-            <Text h3 blue50>
+            <Text h3>
               Validation
             </Text>
 
@@ -185,7 +185,7 @@ export default class TextFieldScreen extends Component {
           </View>
 
           <View row centerV spread>
-            <Text h3 blue50 marginV-s4>
+            <Text h3 marginV-s4>
               Colors By State
             </Text>
             <View row>
@@ -222,7 +222,7 @@ export default class TextFieldScreen extends Component {
           />
 
           <View row spread centerV>
-            <Text h3 blue50 marginV-s4>
+            <Text h3 marginV-s4>
               Custom Field Style
             </Text>
             <Button
@@ -243,7 +243,7 @@ export default class TextFieldScreen extends Component {
             readonly={isReadonly}
           />
 
-          <Text h3 blue50 marginV-s4>
+          <Text h3 marginV-s4>
             Char Counter
           </Text>
 
@@ -261,7 +261,7 @@ export default class TextFieldScreen extends Component {
             maxLength={20}
             fieldStyle={styles.withFrame}
           />
-          <Text h3 blue50 marginV-s4>
+          <Text h3 marginV-s4>
             Hint
           </Text>
           <TextField
@@ -270,7 +270,7 @@ export default class TextFieldScreen extends Component {
             hint="1-6 chars including numeric chars"
             fieldStyle={styles.withUnderline}
           />
-          <Text h3 blue50 marginV-s4>
+          <Text h3 marginV-s4>
             Formatter
           </Text>
           <TextField
@@ -290,7 +290,7 @@ export default class TextFieldScreen extends Component {
             fieldStyle={styles.withUnderline}
           />
 
-          <Text h3 blue50 marginV-s4>
+          <Text h3 marginV-s4>
             Custom Alignments
           </Text>
 

src/style/dividers.ts

@@ -1,13 +1,17 @@
 import Colors from './colors';
 
 const Dividers = {
-  d10: {
-    borderBottomWidth: 1,
-    borderColor: Colors.$outlineDefault
+  get d10() {
+    return {
+      borderBottomWidth: 1,
+      borderColor: Colors.$outlineDefault
+    };
   },
-  d20: {
-    borderBottomWidth: 8,
-    borderColor: Colors.$outlineDefault
+  get d20() {
+    return {
+      borderBottomWidth: 8,
+      borderColor: Colors.$outlineDefault
+    };
   }
 };