Hint and Toast - design tokens (#1940)

Author: M-i-k-e-l

demo/src/screens/componentScreens/HintsScreen.tsx

@@ -45,7 +45,7 @@ export default class HintsScreen extends Component<HintScreenProps> {
 
   renderCustomContent() {
     return (
-      <Text text70 white>
+      <Text text70 $textDefaultLight>
         Click
         <Text onPress={() => Alert.alert('custom content :)')} text70BO red40>
           {' here '}
@@ -71,17 +71,17 @@ export default class HintsScreen extends Component<HintScreenProps> {
         <Incubator.ExpandableOverlay
           useDialog
           expandableContent={this.renderScreenOptions()}
-          dialogProps={{bottom: true}}
+          dialogProps={{bottom: true, useSafeArea: true}}
         >
-          <Button round iconSource={Assets.icons.demo.settings} white/>
+          <Button round iconSource={Assets.icons.demo.settings} $backgroundDefault/>
         </Incubator.ExpandableOverlay>
       </View>
     );
   }
 
   renderScreenOptions() {
     return (
-      <View bg-white br20 padding-20 collapsable={false}>
+      <View bg-$backgroundDefault br20 padding-20 collapsable={false}>
         <Text h2 marginB-s4>
           Hint Options
         </Text>
@@ -141,14 +141,14 @@ export default class HintsScreen extends Component<HintScreenProps> {
           flex
           padding-20
           paddingT-100
-          bg-grey80
+          bg-$backgroundNeutralLight
           style={{zIndex: 10}}
           key={useTargetFrame ? 'withTargetFrame' : 'withElement'}
         >
           {/* <Button bg-purple30 label="Background" style={{position: 'absolute', right: 50, bottom: 100}}/> */}
           <Hint
             visible={showHint}
-            // color={Colors.orange30}
+            // color={Colors.$backgroundMajorHeavy}
             message={message}
             // message={
             //   <Text>
@@ -170,15 +170,15 @@ export default class HintsScreen extends Component<HintScreenProps> {
             // borderRadius={BorderRadiuses.br40}
             // edgeMargins={30}
             onBackgroundPress={useBackdrop && !useTargetFrame ? this.toggleHint : undefined}
-            backdropColor={Colors.rgba(Colors.grey10, 0.3)}
+            backdropColor={Colors.rgba(Colors.$backgroundInverted, 0.3)}
             customContent={
               showCustomContent
                 ? this.renderCustomContent()
                 : showReactionStrip
                   ? this.renderReactionStrip()
                   : undefined
             }
-            color={!showCustomContent && showReactionStrip ? Colors.white : undefined}
+            color={!showCustomContent && showReactionStrip ? Colors.$backgroundDefault : undefined}
             removePaddings={!showCustomContent && showReactionStrip}
             enableShadow={enableShadow}
             testID={'Hint'}

demo/src/screens/incubatorScreens/IncubatorToastScreen.tsx

@@ -32,17 +32,17 @@ export default class ToastsScreen extends Component {
 
   toggleVisibility = () => {
     // Im using this for storing toast visible since setState is async and takes time to response
-    this.showToast = !this.showToast; 
+    this.showToast = !this.showToast;
     this.setState({
       visible: this.showToast
     });
   };
 
   renderCustomContent = () => {
     return (
-      <View flex padding-10 bg-white>
-        <Text text60>This is a custom content</Text>
-        <Text>
+      <View bg-$backgroundNeutralLight flex padding-10>
+        <Text $textDefault text60>This is a custom content</Text>
+        <Text $textDefault>
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry
           standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
           make a type specimen book.
@@ -54,13 +54,17 @@ export default class ToastsScreen extends Component {
   renderAboveToast = () => {
     return (
       <View flex bottom right paddingB-50 paddingR-20 pointerEvents={'box-none'}>
-        <Button iconSource={Assets.icons.demo.dashboard} color={Colors.white} style={{height: 50, width: 50}}/>
+        <Button
+          iconSource={Assets.icons.demo.dashboard}
+          color={Colors.$backgroundDefault}
+          style={{height: 50, width: 50}}
+        />
       </View>
     );
   };
 
   renderBelowToast = () => {
-    return <Text>Attachment below toast</Text>;
+    return <Text $textDefault>Attachment below toast</Text>;
   };
 
   renderAttachment = () => {
@@ -103,10 +107,10 @@ export default class ToastsScreen extends Component {
         swipeable={isSwipeable}
         onDismiss={this.toggleVisibility}
         autoDismiss={3500}
-        // backgroundColor={Colors.green70}
+        // backgroundColor={Colors.$backgroundSuccess}
         // icon={Assets.icons.demo.add}
-        // iconColor={Colors.green20}
-        // style={{borderWidth: 1, borderColor: Colors.grey30}}
+        // iconColor={Colors.$backgroundSuccessHeavy}
+        // style={{borderWidth: 1, borderColor: Colors.$outlineNeutralMedium}}
         // messageStyle={Typography.text80BO}
       >
         {isCustomContent ? this.renderCustomContent() : undefined}
@@ -131,11 +135,11 @@ export default class ToastsScreen extends Component {
   render() {
     return (
       <View flex padding-page>
-        <Text h1 marginB-s4>
+        <Text $textDefault h1 marginB-s4>
           Toast
         </Text>
 
-        <View flex style={styles.scrollViewContainer}>
+        <View flex>
           <ScrollView contentContainerStyle={styles.scrollView}>
             {renderMultipleSegmentOptions.call(this, 'Toast Position', 'toastPosition', [
               {label: 'Bottom', value: 'bottom'},
@@ -153,7 +157,7 @@ export default class ToastsScreen extends Component {
               {None: '', Label: 'label', Icon: 'icon'},
               {isRow: true})}
 
-            <Text h3 marginV-s2>
+            <Text $textDefault h3 marginV-s2>
               Presets
             </Text>
 
@@ -177,14 +181,5 @@ export default class ToastsScreen extends Component {
 const styles = StyleSheet.create({
   scrollView: {
     paddingBottom: 80
-  },
-  color: {
-    width: 30,
-    height: 30,
-    borderRadius: 15
-  },
-  selected: {
-    borderWidth: 2,
-    borderColor: Colors.grey10
   }
 });

src/components/hint/index.tsx

@@ -26,7 +26,7 @@ import TouchableOpacity from '../touchableOpacity';
 const sideTip = require('./assets/hintTipSide.png');
 const middleTip = require('./assets/hintTipMiddle.png');
 
-const DEFAULT_COLOR = Colors.primary;
+const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
 const DEFAULT_HINT_OFFSET = Spacings.s4;
 const DEFAULT_EDGE_MARGINS = Spacings.s5;
 
@@ -647,12 +647,12 @@ const styles = StyleSheet.create({
   },
   hintMessage: {
     ...Typography.text70,
-    color: Colors.white,
+    color: Colors.$textDefaultLight,
     flexShrink: 1
   },
   icon: {
     marginRight: Spacings.s4,
-    tintColor: Colors.white
+    tintColor: Colors.$backgroundDefault
   }
 });