Dialog - design tokens (#1938)

* Dialog - design tokens

* Fix

* Fix

* Fix

Author: M-i-k-e-l

demo/src/screens/componentScreens/DialogScreen.js

@@ -111,9 +111,11 @@ export default class DialogScreen extends Component {
   getWarning = () => {
     const {showHeader, scroll, panDirection} = this.state;
     if (!showHeader && scroll !== this.SCROLL_TYPE.NONE) {
-      return <Text color={Colors.red30}>It is recommended to have pannable header with scrollable content</Text>;
+      return (
+        <Text color={Colors.$textDangerLight}>It is recommended to have pannable header with scrollable content</Text>
+      );
     } else if (showHeader && panDirection !== PanningProvider.Directions.DOWN) {
-      return <Text color={Colors.red30}>It is recommended to have pannable header with direction=down</Text>;
+      return <Text color={Colors.$textDangerLight}>It is recommended to have pannable header with direction=down</Text>;
     }
   };
 
@@ -130,7 +132,7 @@ Scroll: ${scroll}`;
     return (
       <View>
         <View margin-20>
-          <Text>{title}</Text>
+          <Text $textDefault>{title}</Text>
         </View>
         <View height={2} bg-grey70/>
       </View>
@@ -151,7 +153,7 @@ Scroll: ${scroll}`;
 
   renderVerticalItem = ({item: color}) => {
     return (
-      <Text text50 margin-20 color={color.value}>
+      <Text $textDefault text50 margin-20 color={color.value}>
         {color.label}
       </Text>
     );
@@ -212,8 +214,8 @@ Scroll: ${scroll}`;
     const data = (
       <View spread flex={scroll !== this.SCROLL_TYPE.NONE}>
         <View marginT-20 marginH-20>
-          {!showHeader && <Text text50>{this.title}</Text>}
-          <Text marginT-20={!showHeader}>{this.getMessage()}</Text>
+          {!showHeader && <Text $textDefault text50>{this.title}</Text>}
+          <Text $textDefault marginT-20={!showHeader}>{this.getMessage()}</Text>
           {this.getWarning()}
         </View>
         {content}
@@ -260,12 +262,12 @@ Scroll: ${scroll}`;
     return (
       <ScrollView>
         <View flex padding-12>
-          <Text text30 grey10 marginB-20>
+          <Text $textDefault text30 marginB-20>
             Dialog
           </Text>
 
           <RadioGroup marginT-20 initialValue={panDirection} onValueChange={this.setPanDirection}>
-            <Text>Panning Direction:</Text>
+            <Text $textDefault>Panning Direction:</Text>
             <View row marginV-10>
               <RadioButton value={null} label={'None'}/>
               <RadioButton value={PanningProvider.Directions.UP} label={'Up'} marginL-10/>
@@ -276,7 +278,7 @@ Scroll: ${scroll}`;
           </RadioGroup>
 
           <RadioGroup marginT-20 initialValue={position} onValueChange={this.setPosition}>
-            <Text>Position:</Text>
+            <Text $textDefault>Position:</Text>
             <View row marginV-10>
               <RadioButton value={'top'} label={'Top'}/>
               <RadioButton value={null} label={'Center'} marginL-10/>
@@ -285,7 +287,7 @@ Scroll: ${scroll}`;
           </RadioGroup>
 
           <RadioGroup marginT-20 initialValue={scroll} onValueChange={this.setScroll}>
-            <Text>Scroll:</Text>
+            <Text $textDefault>Scroll:</Text>
             <View row marginV-10>
               <RadioButton value={this.SCROLL_TYPE.NONE} label={'None'}/>
               <RadioButton value={this.SCROLL_TYPE.VERTICAL} label={'Vertical'} marginL-10/>
@@ -294,17 +296,17 @@ Scroll: ${scroll}`;
           </RadioGroup>
 
           <View row marginT-20 centerV>
-            <Text>Toggle pannable header:</Text>
+            <Text $textDefault>Toggle pannable header:</Text>
             <Switch value={showHeader} onValueChange={this.toggleShowHeader} marginL-10/>
           </View>
 
           <View row marginT-20 centerV>
-            <Text>Add some style:</Text>
+            <Text $textDefault>Add some style:</Text>
             <Switch value={isRounded} onValueChange={this.toggleIsRounded} marginL-10/>
           </View>
 
           <View row marginT-20 centerV>
-            <Text>Ignore Background Press:</Text>
+            <Text $textDefault>Ignore Background Press:</Text>
             <Switch value={ignoreBackgroundPress} onValueChange={this.toggleIgnoreBackgroundPress} marginL-10/>
           </View>
 
@@ -319,10 +321,10 @@ Scroll: ${scroll}`;
 
 const styles = StyleSheet.create({
   dialog: {
-    backgroundColor: Colors.white
+    backgroundColor: Colors.$backgroundDefault
   },
   roundedDialog: {
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.$backgroundDefault,
     marginBottom: Constants.isIphoneX ? 0 : 20,
     borderRadius: 12
   },

demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx

@@ -64,9 +64,9 @@ export default class IncubatorDialogScreen extends Component {
     const {visible} = this.state;
 
     return (
-      <View bg-grey80 flex padding-20>
+      <View bg-$backgroundNeutralLight flex padding-20>
         <Card height={100} center padding-20>
-          <Text text50>IncubatorDialogScreen</Text>
+          <Text $textDefault text50>IncubatorDialogScreen</Text>
         </Card>
         <View flex center>
           <Button marginV-s5 label="Open Dialog" onPress={this.openDialog}/>

src/components/dialog/index.tsx

@@ -91,7 +91,7 @@ interface DialogState {
   fadeOut?: boolean;
 }
 
-const DEFAULT_OVERLAY_BACKGROUND_COLOR = Colors.rgba(Colors.grey10, 0.6);
+const DEFAULT_OVERLAY_BACKGROUND_COLOR = Colors.rgba(Colors.grey20, 0.65);
 
 /**
  * @description: Dialog component for displaying custom content inside a popup dialog

src/incubator/Dialog/DialogHeader.tsx

@@ -53,7 +53,7 @@ const styles = StyleSheet.create({
     height: Spacings.s1,
     marginTop: Spacings.s2,
     marginBottom: Spacings.s2,
-    backgroundColor: Colors.grey60,
+    backgroundColor: Colors.$outlineNeutral,
     borderRadius: BorderRadiuses.br10
   }
 });

src/incubator/Dialog/HeaderContent.tsx

@@ -12,12 +12,12 @@ const HeaderContent = (props: Pick<DialogHeaderProps, 'text'>) => {
     return (
       <View marginH-s5 marginV-s1>
         {!isEmpty(title) && (
-          <Text {...titleProps} marginB-s3 style={titleStyle}>
+          <Text $textDefault {...titleProps} marginB-s3 style={titleStyle}>
             {title}
           </Text>
         )}
         {!isEmpty(subtitle) && (
-          <Text {...subtitleProps} marginB-s3 style={subtitleStyle}>
+          <Text $textDefault {...subtitleProps} marginB-s3 style={subtitleStyle}>
             {subtitle}
           </Text>
         )}

src/incubator/Dialog/helpers/useFadeView.tsx

@@ -7,7 +7,7 @@ import {ModalProps} from '../../../components/modal';
 import {TransitionViewAnimationType} from '../../TransitionView';
 import {ImperativeDialogProps} from '../types';
 
-const DEFAULT_OVERLAY_BACKGROUND_COLORS = Colors.rgba(Colors.black, 0.2);
+const DEFAULT_OVERLAY_BACKGROUND_COLORS = Colors.rgba(Colors.grey20, 0.65);
 
 export type AnimationType = TransitionViewAnimationType;
 

src/incubator/Dialog/index.tsx

@@ -45,7 +45,7 @@ export default asBaseComponent<DialogProps>(Dialog);
 const styles = StyleSheet.create({
   defaultDialogStyle: {
     marginBottom: Spacings.s5,
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.$backgroundDefault,
     maxHeight: Constants.screenHeight * 0.6,
     width: 250,
     borderRadius: BorderRadiuses.br20,