Layouts - to design tokens (#1949)

* Carousel - to design tokens

* GridListItem - to design tokens

* SkeletonView - to design tokens

Author: Inbal-Tish

demo/src/screens/componentScreens/CarouselScreen.tsx

@@ -87,7 +87,7 @@ class CarouselScreen extends Component<Props, State> {
 
     return (
       <ScrollView showsVerticalScrollIndicator={false}>
-        <Text h1 margin-20>
+        <Text h1 margin-20 $textDefault>
           Carousel
         </Text>
 
@@ -115,7 +115,6 @@ class CarouselScreen extends Component<Props, State> {
           containerStyle={{height: 160}}
           pageControlPosition={Carousel.pageControlPositions.UNDER}
           pageControlProps={{onPagePress: this.onPagePress, limitShownPages}}
-          // showCounter
           allowAccessibleLayout
         >
           {_.map([...Array(numberOfPagesShown)], (item, index) => (
@@ -143,6 +142,7 @@ class CarouselScreen extends Component<Props, State> {
               containerStyle: styles.loopCarousel
             }}
             pageControlPosition={Carousel.pageControlPositions.OVER}
+            showCounter
           >
             {IMAGES.map((image, i) => {
               return (

src/components/carousel/index.tsx

@@ -409,7 +409,13 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     const {pageControlPosition, pageControlProps = {}} = this.props;
 
     if (pageControlPosition) {
-      const {size = 6, spacing = 8, color = Colors.grey20, inactiveColor = Colors.grey60, ...others} = pageControlProps;
+      const {
+        size = 6,
+        spacing = 8,
+        color = Colors.$backgroundNeutralHeavy,
+        inactiveColor = Colors.$backgroundNeutralMedium,
+        ...others
+      } = pageControlProps;
       const pagesCount = presenter.getChildrenLength(this.props);
       const containerStyle =
         pageControlPosition === PageControlPosition.UNDER

src/components/gridListItem/index.tsx

@@ -1,11 +1,11 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleProp, StyleSheet, ViewStyle} from 'react-native';
-import _ from 'lodash';
 import * as Modifiers from '../../commons/modifiers';
 import {Colors, Spacings, Typography} from 'style';
 import View, {ViewProps} from '../view';
-import Text from '../text';
 import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
+import Text from '../text';
 import Image, {ImageProps} from '../image';
 
 export interface GridListItemProps {
@@ -165,17 +165,17 @@ class GridListItem extends Component<GridListItemProps> {
       children,
       title,
       titleTypography,
-      titleColor,
+      titleColor = Colors.$textDefault,
       titleLines,
       overlayText,
       overlayTextContainerStyle,
       subtitle,
       subtitleTypography,
-      subtitleColor,
+      subtitleColor = Colors.$textDefault,
       subtitleLines,
       description,
       descriptionTypography,
-      descriptionColor,
+      descriptionColor = Colors.$textDefault,
       descriptionLines,
       onPress,
       renderOverlay
@@ -255,8 +255,7 @@ const styles = StyleSheet.create({
   },
   description: {
     textAlign: 'center',
-    ...Typography.subtext,
-    color: Colors.grey30
+    ...Typography.subtext
   },
   contentAlignedToStart: {
     textAlign: 'left'

src/components/skeletonView/index.tsx

@@ -243,7 +243,7 @@ class SkeletonView extends Component<InternalSkeletonViewProps, SkeletonState> {
     }
 
     return {
-      shimmerColors: colors || [Colors.grey70, Colors.grey60, Colors.grey70],
+      shimmerColors: colors || [Colors.$backgroundNeutral, Colors.$backgroundNeutralMedium, Colors.$backgroundNeutral],
       isReversed: Constants.isRTL,
       style: [{borderRadius}, style],
       width: size || width,