How to use the @kiwicom/orbit-design-tokens.defaultTokens.fontSizeTextSmall function in @kiwicom/orbit-design-tokens

)}
    
  
);

const styles = StyleSheet.create({
  container: {
    web: {
      flexDirection: 'row',
      alignItems: 'center',
      marginTop: parseInt(defaultTokens.spaceXXSmall, 10),
      height: 14,
    },
  },
  text: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    lineHeight: 17,
    padding: 5,
    web: {
      lineHeight: 14,
      padding: 0,
      color: defaultTokens.paletteInkLight,
    },
  },
});

export default createFragmentContainer(TripCities, {
  data: graphql`
    fragment TripCities_data on Sector {
      arrival {
        ...LocationName_data
      }

export const textColor = {
  attention: defaultTokens.colorTextAttention,
  critical: defaultTokens.colorTextCritical,
  info: defaultTokens.colorTextInfo,
  primary: defaultTokens.colorTextPrimary,
  secondary: defaultTokens.colorTextSecondary,
  success: defaultTokens.colorTextSuccess,
  warning: defaultTokens.colorTextWarning,
  white: defaultTokens.colorTextWhite,
};

export const fontSize = {
  large: parseFloat(defaultTokens.fontSizeTextLarge),
  normal: parseFloat(defaultTokens.fontSizeTextNormal),
  small: parseFloat(defaultTokens.fontSizeTextSmall),
};

export const fontWeight = {
  normal: defaultTokens.fontWeightNormal,
  bold: defaultTokens.fontWeightBold,
};

export const align = {
  center: 'center',
  justify: 'justify',
  left: 'left',
  right: 'right',
};

color={defaultTokens.paletteInkNormal}
          name="chevron-down"
        />
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
  text: {
    color: defaultTokens.paletteInkNormal,
    fontSize: parseInt(defaultTokens.fontSizeTextSmall, 10),
    marginHorizontal: 6,
  },
});

headerLeftContainer: {
    flexDirection: 'column',
    paddingStart: 16,
    android: {
      paddingStart: 40,
    },
    alignItems: Platform.OS === 'web' ? 'center' : 'stretch',
    flex: 1,
  },
  city: {
    marginEnd: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  badgeText: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    color: defaultTokens.colorTextPrimary,
  },
  badge: {
    backgroundColor: defaultTokens.paletteCloudNormal,
    alignSelf: 'center',
  },
  date: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingBottom: 8,
  },
  gradientOverlap: {
    position: 'absolute',
    top: 0,
    end: 0,
    height: headerHeight - 1,

paddingStart: 16,
  },
  departureCity: {
    fontWeight: 'bold',
    marginEnd: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  arrivalCity: {
    fontWeight: 'bold',
    marginStart: 5,
    fontSize: parseFloat(defaultTokens.fontSizeTextLarge),
    color: defaultTokens.colorTextAttention,
  },
  badgeText: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    color: defaultTokens.colorTextPrimary,
  },
  badge: {
    backgroundColor: defaultTokens.paletteCloudNormal,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
});

return (
      
    );
  }

  return null;
};

const styles = StyleSheet.create({
  text: {
    fontSize: parseInt(defaultTokens.fontSizeTextSmall, 10),
    color: defaultTokens.colorTextSecondary,
    marginTop: parseInt(defaultTokens.spaceSmall, 10),
    marginBottom: parseInt(defaultTokens.spaceMedium, 10),
    marginStart: 48,
  },
});

export default createFragmentContainer(SectorStopoverDuration, {
  data: graphql`
    fragment SectorStopoverDuration_data on Sector {
      stopoverDuration
      departure {
        stop {
          city {
            name
          }

container: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: parseInt(defaultTokens.spaceMedium, 10),
    paddingStart: 0,
  },
  dottedLine: {
    borderStyle: 'dotted',
    borderColor: designTokens.borderColorInkLight,
    borderBottomWidth: 1,
    width: parseInt(defaultTokens.widthIconLarge, 10),
    marginEnd: 30,
  },
  stopoverText: {
    color: designTokens.borderColorInkNormal,
    fontSize: parseInt(defaultTokens.fontSizeTextSmall, 10),
  },
});

},
  priceDurationContainerWeb: {
    paddingTop: parseInt(defaultTokens.paddingTag, 10),
    flex: 1,
    flexDirection: 'row',
  },
  durationLabel: {
    fontWeight: 'normal',
    fontSize: parseInt(defaultTokens.fontSizeTextSmall, 10),
  },
  marginStartLabel: {
    marginStart: parseInt(defaultTokens.spaceXSmall, 10),
  },
  label: {
    fontWeight: designTokens.fontWeightMedium,
    fontSize: parseInt(defaultTokens.fontSizeTextSmall, 10),
  },
  labelActive: {
    color: defaultTokens.paletteProductNormal,
  },
  iconContainer: {
    paddingEnd: parseInt(defaultTokens.spaceSmall, 10),
  },
});

flex: 1,
    height: designTokens.heightCalendarItem,
    alignItems: 'center',
    justifyContent: 'center',
    padding: designTokens.paddingCalendarItem / 2,
  },
  dayTouchableContainer: {
    web: {
      height: designTokens.heightCalendarItem,
    },
  },
  day: {
    fontSize: designTokens.fontSizeCalendarItem,
  },
  price: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    color: defaultTokens.colorTextSecondary,
  },
  selectedDatesContainer: {
    backgroundColor: defaultTokens.backgroundButtonInfo,
  },
  startOfSelectedDatesContainer: {
    borderTopStartRadius: parseFloat(defaultTokens.borderRadiusNormal),
    borderBottomStartRadius: parseFloat(defaultTokens.borderRadiusNormal),
  },
  endOfSelectedDatesContainer: {
    borderTopEndRadius: parseFloat(defaultTokens.borderRadiusNormal),
    borderBottomEndRadius: parseFloat(defaultTokens.borderRadiusNormal),
  },
  selectedDatesText: {
    color: defaultTokens.colorTextButtonPrimary,
  },

containerActiveMobile: {
    backgroundColor: defaultTokens.paletteWhite,
    borderStartWidth: 4,
    borderStartColor: defaultTokens.paletteProductNormal,
  },
  containerHovered: {
    color: defaultTokens.paletteProductNormal,
  },
  priceDurationContainerWeb: {
    paddingTop: parseInt(defaultTokens.paddingTag, 10),
    flex: 1,
    flexDirection: 'row',
  },
  durationLabel: {
    fontWeight: 'normal',
    fontSize: parseInt(defaultTokens.fontSizeTextSmall, 10),
  },
  marginStartLabel: {
    marginStart: parseInt(defaultTokens.spaceXSmall, 10),
  },
  label: {
    fontWeight: designTokens.fontWeightMedium,
    fontSize: parseInt(defaultTokens.fontSizeTextSmall, 10),
  },
  labelActive: {
    color: defaultTokens.paletteProductNormal,
  },
  iconContainer: {
    paddingEnd: parseInt(defaultTokens.spaceSmall, 10),
  },
});